How to add a GeoJSON layer in GraphHopper?

Question

I have a GeoJSON file containing POIs that I'd like to be able to display within a separate GraphHopper layer. After several tries and search over internet, I just can't manage to get a way to do it.

This is a sample of the GeoJSON file (I checked the whole file with JSON validator and it was OK).

{"type": "Feature", "properties": { "fee": "no", "bicycle_parking": "anchors", "ref": "PVNAN23", "address": "Rue Gabriel Goudy 44200 Nantes", "name": "Pirmil P+R", "capacity": "24", "park_ride": "yes", "amenity": "bicycle_parking", "covered": "yes" }, "geometry": {"type": "Point", "coordinates": [-1.5406709, 47.1960031]}}, {"type": "Feature", "properties": { "bicycle_parking": "stands", "addr:postcode": "44000", "addr:country": "FR", "name": "Madeleine", "capacity": "6", "amenity": "bicycle_parking", "addr:street": "chaussée de la Madeleine", "note": "vérifié", "addr:city": "Nantes", "covered": "no", "addr:housenumber": "35" }, "geometry": {"type": "Point", "coordinates": [-1.55076671448, 47.21000114109]}}

]}

I tried what is explained in How to load external geojson file into leaflet map but I cannot get it working.

iH8 iH8 · Accepted Answer · 2015-01-19T01:06:51

If your JSON is valid that doesn't mean you're working with a valid GeoJSON object. For instance: {"foo": "bar"} is perfectly valid JSON but in no way a valid GeoJSON object. L.GeoJSON, leaflet's GeoJSON layer expects a FeatureCollection or an array containing Features.

A valid FeatureCollection:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "id": 1
        },
        "geometry": {
            "type": "Point",
            "coordinates": [0,0]
        }
    },{
        "type": "Feature",
        "properties": {
            "id": 2
        },
        "geometry": {
            "type": "Point",
            "coordinates": [1,1]
        }
    }]
}

Or just the array with features:

[{
    "type": "Feature",
    "properties": {
        "id": 1
    },
    "geometry": {
        "type": "Point",
        "coordinates": [0,0]
    }
},{
    "type": "Feature",
    "properties": {
        "id": 2
    },
    "geometry": {
        "type": "Point",
        "coordinates": [1,1]
    }
}]

(Note that just an array of features isn't a valid GeoJSON object but Leaflet will handle it without problems)

To load these into a L.GeoJson layer you'll need to make them available in your script. You could simple declare the object before you create the layer. For example:

// Declare GeoJSON object
var geojson = {
    type: "FeatureCollection",
    features: [
        // Features here
    ]
}

// Create a new GeoJSON layer with geojson object
// And add to map (assuming your map instance is assigned to "map")
var layer = new L.GeoJSON(geojson).addTo(map);

But that will become quite a mess when you've got lots of features and it's always better to keep your logic and data separated so you should put your data object in a separate file. So let's say you've got the object stored in a file called "geo.json", then you can load the file with XHR/AJAX solution of your choice. I'm using jQuery in the following example:

// Fetch geo.json file and assign the data to geojson variable
$.getJSON('geo.json', function (geojson) {
    // Create a new GeoJSON layer with GeoJSON object
    // And add to map (assuming your map instance is assigned to "map")
    var layer = new L.GeoJSON(geojson).addTo(map);
});

Here a working example on Plunker: http://plnkr.co/edit/Mh8p4F?p=preview

How to add a GeoJSON layer in GraphHopper?

1 Answers