Leaflet offline map without map tiles

Question

We developed a web page where we are showing health facility locations of a country on a map. We used Leaflet for the map display. We actually do not need to display the online map tiles in the background. If we can only show a vector country map that would also be OK. I came to know that tiles can be downloaded and saved offline in Leaflet etc, but not interested in that direction.

What I want is available in this page

Where Leaflet is used but the world map online tiles are not displayed. But the code is quite complex to understand. Is there any easy example or guidance to do what I need?

iH8 iH8 · Accepted Answer · 2014-12-14T19:34:09

This is actually quite easy when using a L.GeoJSON layer. First off you would need to find the correct GeoJSON for the region you want to display. For instance, here are some for the US: http://eric.clst.org/Stuff/USGeoJSON. Next create a map like you would normally do:

var map = new L.Map('map', {
    'center': [0, 0],
    'zoom': 0
});

Then you would need to fetch/load your GeoJSON data into your script using ajax via jQuery or something else and use that to initialize a GeoJSON layer and add that to your map:

// jQuery ajax request
$.ajax({
    // url with your geojson data file
    'url': 'my.geo.json',
    // return json object, not as string
    'dataType': 'json',
    // on success handle result
    'success': function (result) {
        // Initialize GeoJSON layer and add to map
        var layer = new L.GeoJSON(result).addTo(map);
        // Fit map to bounds of your GeoJSON
        map.fitBounds(layer.getBounds());
     }
});

That's it. You can find lots of GeoJSON datasets online and if you want to know more about the L.GeoJSON i would recommend reading the reference i linked earlier and this tutorial: http://leafletjs.com/examples/geojson.html

Leaflet offline map without map tiles

1 Answers