Leaflet – How to Add MultiPolygon GeoJSON File to Map Layer

geojsonlayersleafletmapbox

I have tried various solutions from other helpful answers on here but nothing seems to work. Trying to add a local GeoJSON file with multiple polygons to a map via leaflet with zero success so far.

I am new to Leaflet.

This is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>    
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="/js/leaflet-ajax-gh-pages/dist/leaflet.ajax.min.js"></script>
    <style>
        body { margin:0; padding:0; }
        #mapid { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='mapid'></div>

<script>
var mapboxAccessToken = 'my_access_token';
var map = L.map('mapid').setView([20.0, 0.0], 3);

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);

var geojsonLayer = new L.GeoJSON.AJAX("areas.geojson");       
geojsonLayer.addTo(map);

</script>

</body>
</html>

This is a sample from the GeoJson file, which I have created by merging multiple layers in QGIS. I wondered if the 'path' field might be causing issues so I've also tried using a single polygon file with only one of the original layers and no 'path' field but still no joy:

{
  type: "FeatureCollection",
  name: "areas",
  crs: { type: "name", properties: { name: "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  features: [
    {
      type: "Feature",
      properties: {
        iso_a3: "BHR",
        iso_ter1: "BHR",
        name: "Bahrain",
        descriptio: null,
        timestamp: null,
        begin: null,
        end: null,
        altitudeMo: null,
        tessellate: null,
        extrude: null,
        visibility: null,
        drawOrder: null,
        icon: null,
        grouping: null,
        MRGID: null,
        GeoName: null,
        MRGID_Ter1: null,
        Pol_type: null,
        MRGID_Sov1: null,
        Territory1: null,
        Sovereign1: null,
        MRGID_Ter2: null,
        MRGID_Sov2: null,
        Territory2: null,
        ISO_Ter2: null,
        Sovereign2: null,
        MRGID_Ter3: null,
        MRGID_Sov3: null,
        Territory3: null,
        ISO_Ter3: null,
        Sovereign3: null,
        x_1: null,
        y_1: null,
        MRGID_EEZ: null,
        Area_km2: null,
        layer: "BAHRAIN",
        path: "C:/Users/My Name/My Company/R & D - Documents (1)/Areas/My Client/BAHRAIN/BAHRAIN.geojson"
      },
      geometry: {
        type: "MultiPolygon",
        coordinates: [[[[50.373287690475138, 26.418289404549846, 0.0]]]]
      }
    }
  ]
}

Made some modifications to the html file but getting the following error:

TypeError: this.callInitHooks is not a function. (In
'this.callInitHooks()', 'this.callInitHooks' is undefined)

This is my new code:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js'></script>
    <style>
        body { margin:0; padding:0; }
        #mapid { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='mapid'></div>

<script>
var mapboxAccessToken = 'myKey';
var map = L.map('mapid').setView([20.0, 0.0], 3);

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);


var areas = L.GeoJSON('areas.geojson'); 
areas.addTo(map);

</script>

</body>
</html>

Best Answer

First of all your GeoJSON geometry has a Z dimension that a suppose leaflet can't handle:

enter image description here

You must remove the 0.0 value at the end of the array

Second, you must change the GeoJSON instantiation, the L.GeoJSON is the class definition and in order to use that way you must call with new L.GeoJSON. In Leaflet documentation they describe the function to instantiate a GeoJSON with the lowercase G, with that in mind the usage L.GeoJSON(args) became this L.geoJSON(args)

Third, your map view is set too far away from the described geometry, in the example bellow I have set the view to the geometry coordinates:

https://jsfiddle.net/guihig/2ks1ohwc/5/

Also most of the browsers can't find the path to local files, the files must be served by a http server.

Related Question