0

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>
  • 1
    What do you mean by 'local'? Are you running page locally from file system or from server? Any errors in the debugger console? – TomazicM Apr 8 at 10:17
  • 2
    Is the gemetry an edited fake geometry or a real one? It is totally invalid geometry: { type: "MultiPolygon", coordinates: [[[[50.373287690475138, 26.418289404549846, 0.0]]]] – user30184 Apr 8 at 11:01
  • Not seeing any errors in the debug and it's accessed from my file system. I have wondered about the structure of the geoJSON. While I know how to use QGIS and create layers etc. I'll be the first to admit that I'm no expert in what a geojson file should look like. Will be sure to do some further research in this area. – Owen Apr 8 at 11:59
  • If GeoJSON file is on your file system, it cannot be accessed through AJAX call due to browser security restrictions. – TomazicM Apr 8 at 12:45
  • Thank you TomazicM. I've made some modifications below. – Owen Apr 9 at 13:38
0

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.

| improve this answer | |
  • Thank you. I've fixed the geoJSON and am using an XAMPP server. Everything is working fine now. – Owen Apr 17 at 9:19

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.