1

Using Leaflet with GeoJSON, I would like to create a map with geometries, and with alphanumerical data associated to each item of the geometry. A map very similar to the easy sample at http://leafletjs.com/examples/geojson.html, with the names/values of each one the points/lines/polygons.

However, I found that, in every example I've seen, the alphanumerical data ('properties') and the geometrical data ('geometry') are within the same GeoJSON file. I mean, for each one of the items ('Features'), there are 'properties' and 'geometry' associated with the same 'id'.

I wondered if there was any possibility to separate 'properties' and 'geometry' in two different files, joining the features through their ID.

  • 1
    so you will not be using geojson, you will need to setup a custom way to consume data instead of simple geojson, which require some JS code to join spatial and attribute data through filling properties during page loading – geogeek Oct 8 '15 at 14:45
2

Thomas B and geogeek have the right idea. Here is a fiddle that takes the Leaflet sample data (which I split up into separate objects for geometry and properties), re-joins them, and displays them on a map:

http://jsfiddle.net/nathansnider/6askexjq/

The two important functions are this one (grabbed from this stackoverflow answer), to extract objects based on a key name and value:

function getObjects(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(getObjects(obj[i], key, val));
        } else if (i == key && obj[key] == val) {
            objects.push(obj);
        }
    }
    return objects;
}

and this one, to join the separate objects into a functioning GeoJSON Feature Collection:

function mergeProperties(geom, props, id) {
    //create empty feature collection for merged features
    var newgeom = {
        type: "FeatureCollection",
        features: []
    };
    //if original geometry is a feature collection, loop through all features
    if (geom.type == "FeatureCollection") {
        for (var i in geom.features) {
            var key = geom.features[i][id];
            var g = geom.features[i].geometry;
            if (key === undefined) continue;
            var p = getObjects(props, id, key);
            newgeom.features.push({
                "id": key,
                    "type": "Feature",
                    "geometry": g,
                    "properties": p[0].properties
            });
        }
    //if it's a single feature, just get the single object
    } else if (geom.type == "Feature") {
        var key = geom[id];
        var g = geom.geometry;
        if (key !== undefined) {
            var p = getObjects(props, id, key);
            newgeom.features.push({
                "id": key,
                    "type": "Feature",
                    "geometry": g,
                    "properties": p[0].properties
            });
        }
    //if it's a geometry collection (with ids within each geometry), 
    //loop through the geometries and add them as features
    } else if (geom.type == "GeometryCollection") {
        for (var i in geom.geometries) {
            var key = geom.geometries[i][id];
            var g = geom.geometries[i];
            if (key === undefined) continue;
            var p = getObjects(props, id, key);
            newgeom.features.push({
                "id": key,
                    "type": "Feature",
                    "geometry": g,
                    "properties": p[0].properties
            });
        }
    }
    return newgeom;
}

For the input geometry, it works with GeoJSON Features, Feature Collections and Geometry Collections, but adapting it for objects in other formats would not be too difficult.

0

You could load two JSON-files and loop through them to build a featurecollection "manually"...either with php / python on your server or with JavaScript on the client side. If you don't need to use a geojson layer you could also just build your features manually and add them to a layergroup.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.