[GIS] Can’t load geoJSON files in Leaflet layer control

geojsonjavascriptleaflet

First of all, I have to sorry about my English. May not be perfect. I have a problem with show my geojson files into layer control. I read every topic about that on this side, i have tried on a milion ways to show them and nothing works. Can anybody tell me where I did wrong?`

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>

    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
    <script src="data/zabudowaJSON.geojson"type="text/javascript"></script>
    <script src="data/drogiJSON.geojson"type="text/javascript"></script>

    <script type="text/javascript">

        var map = L.map('map');

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        map.attributionControl.addAttribution("Dane: OpenStreetMap");

        map.setView([53.082222,18.2184333],10);

        L.control.scale().addTo(map);


function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.zabudowaJSON + ", " + feature.properties.drogiJSON);
    }

    $.getJSON("data/zabudowaJSON.geoJSON", function (zabudowaJSON) { 
        L.geoJson(zabudowaJSON, {
        onEachFeature: onEachFeature,
        pointToLayer: function (feature, latlng) {
            switch (feature.properties.Remember) {

            }
        }
        }).addTo(map);
    })
function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.zabudowaJSON + ", " + feature.properties.drogiJSON);
    }

    $.getJSON("data/drogiJSON.geoJSON", function (drogiJSON) { // pull data from external file
        L.geoJson(drogiJSON, {
        onEachFeature: onEachFeature,
        pointToLayer: function (feature, latlng) {
            switch (feature.properties.Remember) {


            }
        }
        }).addTo(map);
        })

        var osm = L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            , {attribution: attribution}
    );

        var zabudowaJSON_l = L.geoJson(zabudowaJSON.geojson).addTo(map);
        var drogiJSON_1 = L.geoJson(drogiJSON.geojson).addTo(map);

        var baseLayers = {
            "OpenStreetMap": osm};

        var overlays = {
            "zabudowa": zabudowaJSON_l,
                "drogi": drogiJSON_1};

    L.control.layers(baseLayers, overlays).addTo(map);

    </script>

</body>

`

Best Answer

That worked for me:

  1. open geoJSON in a text-editor and put following code in front of geoJSON code: 

    var zabudowaJSON_l =

Don't ask me why that works, it worked for me. Here is an example 

var zabudowaJSON_l = {
  "type": "FeatureCollection",
   "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
 { "type": "Feature", "properties": {    .... }

  1. Change code (load without .gejson):

     var zabudowaJSON_l = L.geoJson(zabudowaJSON).addTo(map);
Related Question