Unable to merge geojson and json data in Leaflet map display

Question

Unable to merge geojson and json data in Leaflet map display

To send information to the map, utilize this code:

function join(){            
    $.when(
        $.getJSON('bairro.json'),
        $.getJSON('convertJson.php')
    ).done(function(responseGeojson, responseData) {
        var data = responseData[0]
        var geojson = responseGeojson[0]

        // Create a hash table for easy reference
        var dataHash = {}
        console.log('==data==');
        console.log(data);
        data.forEach(function(item) {
            if(item.cod) 
            dataHash[item.cod] = item.cod;
            if(item.nome) 
            dataHash[item.nome] = item.nome;
            if(item.local) 
            dataHash[item.local] = item.local;

        })
        // Assign values from hash table to geojson properties
        geojson.features.forEach(function(item) {
            console.log('-->' + dataHash[item.properties.nome]);
            item.properties.Codigo = +dataHash[item.properties.cod]   || null
            item.properties.Nome   = +dataHash[item.properties.nome]  || null
            item.properties.Local  = +dataHash[item.properties.local] || null

        })

    })
}

However, there are issues with undefined values and no image displaying on the map.

Here is an example of how Geojson looks:

{"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NOME": "local1", "REGIAO_ADM": "value1", "CODBAIRRO": "13"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 694555.509827277157456, 7483079.800010865554214 ], [ 694554.849827276892029, 7483077.34010686352849 ], [ 694551.869923274731264, 7483076.470026861876249 ],...}
{ "type": "Feature", "properties": { "NOME": "local2", "REGIAO_ADM": "value2", "CODBAIRRO": "13"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 694555.509827277157456, 7483079.800010865554214 ], [ 694554.849827276892029, 7483077.34010686352849 ], [ 694551.869923274731264, 7483076.470026861876249 ],...}
{ "type": "Feature", "properties": { "NOME": "local3", "REGIAO_ADM": "value3", "CODBAIRRO": "13"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 694555.509827277157456, 7483079.800010865554214 ], [ 694554.849827276892029, 7483077.34010686352849 ], [ 694551.869923274731264, 7483076.470026861876249 ],...}

This illustrates how the JSON file is structured:

[{ "cod": "13", "local": "local1", "nome": "value1" }, { "cod": "98", "local": "local2", "nome": "value2" }, { "cod": "97", "local": "local3", "nome": "value3" }]

If you have any insight into what might be going wrong or can provide assistance, please let me know!

javascript json dictionary join leaflet

Answer 1

Answer №1

To expand your array functionality, consider transforming it into a map for easy value lookup based on an identifier (the key). The desired data structure would be:

Original Array:

[{id:"A",property:"value1"},{id:"B",property:"value2"}, .... ]

Transformed Map:

{A:{id:"A",property:"value1"},B:{id:"B",property:"value2"}, .... }

This way, accessing the properties of object A becomes a straightforward task.

Currently, your code lacks the association between keys and values. It assigns property values to create an array with properties having a value equal to the property name:

dataHash[item.cod] = item.cod;

For instance, if item.cod is "foo," then dataHash.foo equals "foo." However, dataHash[item.cod] does not nest properties:

var data = [{cod:1,nome:2,local:3},{cod:4,nome:5,local:6}]
        
var dataHash = {};
data.forEach(function(item) {
    if(item.cod) 
    dataHash[item.cod] = item.cod;
    if(item.nome) 
    dataHash[item.nome] = item.nome;
    if(item.local) 
    dataHash[item.local] = item.local;
})
        
console.log(dataHash);

There are various approaches to achieving your goal. When creating your dictionary for the data, you could use code similar to the following (assuming property names do not start with a number):

var lookup = {};
data.forEach(function(item) {
    if(item.id) {
      lookup[item.id] = {
        id: item.id,
        property1: item.property1,
        property2: item.property2,
        property3: item.property3
      }   
    }
  })

Alternatively, if you want all properties included in the dictionary:

var lookup = {};
data.forEach(function(item) {
    if(item.id) {
      lookup[item.id] = item
    }
  })

This assumes no duplicate entries exist in your data.

var data = [
 {id:"id1",property1:"text1",property2:"text2",property3:"text3"}, 
 {id:"id2",property1:"textA",property2:"textB",property3:"textC"}];
       
var lookup = {};
data.forEach(function(item) {
    if(item.id) {
      lookup[item.id] = {
        id: item.id,
        property1: item.property1,
        property2: item.property2,
        property3: item.property3
      }            
    }
})

console.log(lookup)

You can now easily look up the values to join each element in the geojson:

geojson.features.forEach(function(item) {
    if(lookup([item.properties.id])) {
        item.properties.joined = lookup[item.properties.id]
    }
})

Since the geojson may have properties with the same name as the incoming data, we group all joined properties under a subproperty named joined.

For your specific data, the entire operation might look like this:

var geojson = {"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NOME": "local1", "REGIAO_ADM": "value1", "CODBAIRRO": "13"}},
{ "type": "Feature", "properties": { "NOME": "local2", "REGIAO_ADM": "value2", "CODBAIRRO": "13"}},
{ "type": "Feature", "properties": { "NOME": "local3", "REGIAO_ADM": "value3", "CODBAIRRO": "13"}}
  ]}
  
var data = [{ "cod": "13", "local": "local1", "nome": "value1" }, { "cod": "98", "local": "local2", "nome": "value2" }, { "cod": "97", "local": "local3", "nome": "value3" }]


var lookup = {};
data.forEach(function(item) {
if(item.local) {
    lookup[item.local] = item;            
}
})

geojson.features.forEach(function(d) {
if (lookup[d.properties.NOME]) {
    d.properties.joined = lookup[d.properties.NOME];
}
})

console.log(geojson);

The code snippet assumes that local (in the json) and NOME in the geojson are unique values used for the join process.

Answer 2

To expand your array functionality, consider transforming it into a map for easy value lookup based on an identifier (the key). The desired data structure would be:

Original Array:

[{id:"A",property:"value1"},{id:"B",property:"value2"}, .... ]

Transformed Map:

{A:{id:"A",property:"value1"},B:{id:"B",property:"value2"}, .... }

This way, accessing the properties of object A becomes a straightforward task.

Currently, your code lacks the association between keys and values. It assigns property values to create an array with properties having a value equal to the property name:

dataHash[item.cod] = item.cod;

For instance, if item.cod is "foo," then dataHash.foo equals "foo." However, dataHash[item.cod] does not nest properties:

var data = [{cod:1,nome:2,local:3},{cod:4,nome:5,local:6}]
        
var dataHash = {};
data.forEach(function(item) {
    if(item.cod) 
    dataHash[item.cod] = item.cod;
    if(item.nome) 
    dataHash[item.nome] = item.nome;
    if(item.local) 
    dataHash[item.local] = item.local;
})
        
console.log(dataHash);

There are various approaches to achieving your goal. When creating your dictionary for the data, you could use code similar to the following (assuming property names do not start with a number):

var lookup = {};
data.forEach(function(item) {
    if(item.id) {
      lookup[item.id] = {
        id: item.id,
        property1: item.property1,
        property2: item.property2,
        property3: item.property3
      }   
    }
  })

Alternatively, if you want all properties included in the dictionary:

var lookup = {};
data.forEach(function(item) {
    if(item.id) {
      lookup[item.id] = item
    }
  })

This assumes no duplicate entries exist in your data.

var data = [
 {id:"id1",property1:"text1",property2:"text2",property3:"text3"}, 
 {id:"id2",property1:"textA",property2:"textB",property3:"textC"}];
       
var lookup = {};
data.forEach(function(item) {
    if(item.id) {
      lookup[item.id] = {
        id: item.id,
        property1: item.property1,
        property2: item.property2,
        property3: item.property3
      }            
    }
})

console.log(lookup)

You can now easily look up the values to join each element in the geojson:

geojson.features.forEach(function(item) {
    if(lookup([item.properties.id])) {
        item.properties.joined = lookup[item.properties.id]
    }
})

Since the geojson may have properties with the same name as the incoming data, we group all joined properties under a subproperty named joined.

For your specific data, the entire operation might look like this:

var geojson = {"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NOME": "local1", "REGIAO_ADM": "value1", "CODBAIRRO": "13"}},
{ "type": "Feature", "properties": { "NOME": "local2", "REGIAO_ADM": "value2", "CODBAIRRO": "13"}},
{ "type": "Feature", "properties": { "NOME": "local3", "REGIAO_ADM": "value3", "CODBAIRRO": "13"}}
  ]}
  
var data = [{ "cod": "13", "local": "local1", "nome": "value1" }, { "cod": "98", "local": "local2", "nome": "value2" }, { "cod": "97", "local": "local3", "nome": "value3" }]


var lookup = {};
data.forEach(function(item) {
if(item.local) {
    lookup[item.local] = item;            
}
})

geojson.features.forEach(function(d) {
if (lookup[d.properties.NOME]) {
    d.properties.joined = lookup[d.properties.NOME];
}
})

console.log(geojson);

The code snippet assumes that local (in the json) and NOME in the geojson are unique values used for the join process.

Unable to merge geojson and json data in Leaflet map display

Answer №1

Similar questions

jQuery - final slide not triggering interval, causing animation malfunction

Transferring data between Django and JavaScript: dealing with DateTime information

Is it necessary to generate a file for each API in Next.js?

Create an animated A-frame box that moves randomly within a designated space

Exploring the depths of nested objects within HTML for Angular programming

The element type provided is not valid: it is expected to be a string (for built-in components) or a class/function (for composite components) but instead it is undefined. This error

Filling an HTML modal with either keys or values from a JSON array

Error in JSON Deserialization

The error message "TypeError: scanner.js is undefined and property 'scan' cannot be read" is occurring

Tips for accessing the JSON file containing Spark driver metrics:

Can the swap operation be carried out using web3.js and a forked HardHat implementation?

Integrating Livefyre npm with Meteor

Creating a custom JavaScript library using an existing npm module (codius)

Pass the output of canvas.toDataURL function in JavaScript to the $mail->addAttachment method in PHP

Find the most affordable rate in the JSON data without knowledge of the parent label

Using function arguments as private variables in JavaScript allows for better encapsulation

Display pop-up notification box in Yii2 when receiving an AJAX request

Interacting with JSON API data in real-time using AJAX and the power of JQuery

strange python dictionary update operation

Vue: Issue with v-for rendering images as strings