Blank Brick Dataset Schema

ArborRose

I created a blank brick to track office locations in the path of hurricane Beryl. My ETL produces a dataset with latitude and longitude in decimal. Now my blank brick is showing these values as integers. They are not integer. How do I force the blank brick to re-evaluate the schema. I tried reloading and reassigning.

I also tried the toolkit under admin. It shows the schema with decimal values.

What made the brick start treating them as integer?

MattTheGuru

@ArborRose I found your issue. On your javascript line 24 (and on line 42 of your example data) you are "Check[ing] if latitude and longitude are valid".

However, because the longitude always happens to be a negative number (a falsey boolean) in your dataset your function is bypassing the if statement and not adding the data to your mapping.

*This is a wonderful quirk of javascript that does not exist in Python/Ruby/PHP/C/C++/Java

EricVanDerEems

So if you view the data in the dataset its all decimals but when you get to the brick it shows as all integers?

ArborRose

https://community-forums.domo.com/main/discussion/comment/97062#Comment_97062

Yes, correct. My dataset has the values as decimal. And the schema confirms it.

In my code, I created "data2" as a set of values typed in rather than the dataset. Those values plot just fine. You can see one on Dallas and another on Houston.

But the dataset values are not plotting on my map because the dataset is somehow not allowing them to stay in decimal format.

This is scary because I am currently working on an accounts receivable brick that has a lot of columns. I cringe at the thought that Domo might suddenly warp my dataset on the way in.

ArborRose

For Eric or anyone who wants my code, I include it below. In fact, I should include @eddiesmall, as this is method people may want to incorporate into infographics. For my purpose, I am tracking hurricane Beryl so we can keep an eye on our medical offices along its path. You can join your Domo address information with a city location database containing longitude and latitude data.

html:

<div id="map" style="height: 800px; width: 100%;"></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

function initMap() {
    // Create a map centered on Texas
    var map = L.map('map').setView([31.9686, -99.9018], 6);

    // Add OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Define a smaller dot style
    var dotStyle = {
        radius: 5,        // Size of the dot
        fillColor: '#ff7800', // Dot color
        color: '#000',    // Dot border color
        weight: 1,        // Border thickness
        opacity: 1,      // Border opacity
        fillOpacity: 0.8  // Dot fill opacity
    };

    // Fetch data from `dataset0`
    domo.get('/data/dataset0').then(function(response) {
        response.forEach(function(record) {
            // Check if latitude and longitude are valid
            if (record.latitude && record.longitude) {
                L.circleMarker([record.latitude, record.longitude], dotStyle)
                    .addTo(map)
                    .bindPopup(record.name + '<br>' + record.address_line1 + '<br>' + record.city + ', ' + record.state + ' ' + record.zipcode);
            }
        });
    }).catch(function(error) {
        console.error('Error fetching data from dataset0:', error);
    });

    // Example data
    var data2 = [
        {latitude: 32.78, longitude: -96.80, name: 'Dallas, TX', address_line1: '123 Main St', city: 'Dallas', state: 'TX', zipcode: '75201'},
        {latitude: 29.76, longitude: -95.37, name: 'Houston, TX', address_line1: '456 Elm St', city: 'Houston', state: 'TX', zipcode: '77002'}
    ];

    // Add dots for each location
    data2.forEach(function(record) {
        if (record.latitude && record.longitude) {
            L.circleMarker([record.latitude, record.longitude], dotStyle)
                .addTo(map)
                .bindPopup(record.name + '<br>' + record.address_line1 + '<br>');
        }
    });
}

// Initialize the map
initMap();

css:

/* Style for the map container */
#map {
    height: 100%;
    width: 100%;
}

MattTheGuru

@ArborRose I found your issue. On your javascript line 24 (and on line 42 of your example data) you are "Check[ing] if latitude and longitude are valid".

However, because the longitude always happens to be a negative number (a falsey boolean) in your dataset your function is bypassing the if statement and not adding the data to your mapping.

*This is a wonderful quirk of javascript that does not exist in Python/Ruby/PHP/C/C++/Java

ArborRose

@MattTheGuru - Interesting catch. Thanks. But it won't fix anything if the dataset is defining those values as integers. {Look at the screenshots of the dataset table.}

ArborRose

It appears my issue was in the fetching of the dataset. Here's code that works. Thank you Matt.

function initMap() {
    // Create a map centered on Texas
    var map = L.map('map').setView([31.9686, -99.9018], 6);

    // Add OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Define a smaller dot style
    var dotStyle = {
        radius: 5,        // Size of the dot
        fillColor: '#ff7800', // Dot color
        color: '#000',    // Dot border color
        weight: 1,        // Border thickness
        opacity: 1,      // Border opacity
        fillOpacity: 0.8  // Dot fill opacity
    };

    // Function to check if a value is a valid number
    function isValidNumber(value) {
        return typeof value === 'number' && !isNaN(value);
    }

    // Fetch data from `dataset0`
    domo.get('/data/v1/dataset0').then(function(response) {
        // Log fetched data to a div
        const logDiv = document.createElement('div');
        logDiv.innerHTML = '<strong>Fetched data from dataset0:</strong><br>' + JSON.stringify(response, null, 2);
        document.body.appendChild(logDiv);

        response.forEach(function(record) {
            // Log each record to a div
            const recordDiv = document.createElement('div');
            recordDiv.innerHTML = '<strong>Record:</strong><br>' + JSON.stringify(record, null, 2);
            document.body.appendChild(recordDiv);

            // Check if latitude and longitude are valid numbers
            if (isValidNumber(record.latitude) && isValidNumber(record.longitude)) {
                const validCoordDiv = document.createElement('div');
                validCoordDiv.innerHTML = '<strong>Valid coordinates:</strong><br> Latitude: ' + record.latitude + ', Longitude: ' + record.longitude;
                document.body.appendChild(validCoordDiv);

                L.circleMarker([record.latitude, record.longitude], dotStyle)
                    .addTo(map)
                    .bindPopup(record.name + '<br>' + record.address_line1 + '<br>' + record.city + ', ' + record.state + ' ' + record.zipcode);
            } else {
                const invalidCoordDiv = document.createElement('div');
                invalidCoordDiv.innerHTML = '<strong>Invalid coordinates:</strong><br> Latitude: ' + record.latitude + ', Longitude: ' + record.longitude;
                document.body.appendChild(invalidCoordDiv);
            }
        });
    }).catch(function(error) {
        const errorDiv = document.createElement('div');
        errorDiv.innerHTML = '<strong>Error fetching data from dataset0:</strong><br>' + error;
        document.body.appendChild(errorDiv);
        console.error('Error fetching data from dataset0:', error);
    });
}

// Initialize the map
initMap();