3

I am trying to add my geojson urls which I loaded from my gist as L.LayerGroup for L.control.layers but I have encountered error "Uncaught TypeError: Cannot read property 'minZoom' of undefined" on L.control.layers line. Then I try to use aeds to add into L.LayerGroup, it stated it as not a layer.

<!DOCTYPE html>
<html>
<head>

    <title></title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>

    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

    <script type="text/javascript" src="js/leaflet-ajax.js"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>


</head>
<body>

<div id="map"></div>

<script>

    var onemapAttr = '<img src="https://docs.onemap.sg/maps/images/oneMap64-01.png" style="height:20px;width:20px;"/> New OneMap | Map data © contributors, <a href="http://SLA.gov.sg">Singapore Land Authority</a>';
    var onemapGreyUrl = 'https://maps-{s}.onemap.sg/v3/Grey/{z}/{x}/{y}.png';

    var onemapGrey = L.tileLayer(onemapGreyUrl, {
        detectRetina: true,
        maxZoom: 18,
        minZoom: 11,
        //Do not remove this attribution
        attribution: onemapAttr
    });

    var aeds = L.layerGroup();  

    var aeds24hrs = $.ajax({
        dataType: "json",
        url: "https://gist.githubusercontent.com/kyroskoh/e9a7065beaf4f5744e91af07bb669416/raw/92491712d9ce792fa89318b47a6253b79aa47da5/AEDpoints_24.json",
        success: function(data) {
                L.geoJson(data, {
                    maxZoom: 18,
                    minZoom: 11,                    
                    onEachFeature: onEachFeature
                }).addTo(aeds);
        }
     }).error(function() {});

    var aedsAll = $.ajax({
        dataType: "json",
        url: "https://gist.githubusercontent.com/kyroskoh/e7c618fc687b060dae81c3a0f2f508cb/raw/799839d8b1e5ed00c561243dac0118119f267345/AEDpoints_All.json",
        success: function(data) {
                L.geoJson(data, {
                    maxZoom: 18,
                    minZoom: 11,
                    onEachFeature: onEachFeature
                }).addTo(aeds);
        }
     }).error(function() {});

        function onEachFeature(feature, layer) {
            layer.bindPopup("Building Name: " + feature.properties.BUILDING_N + "<br>" + "Location: " + feature.properties.AED_LOCATI + "<br>" + "Operating: " + feature.properties.OPERATING_);
        }

    var map = L.map('map', {
        center: [1.32, 103.8],
        zoom: 12,
        detectRetina: true,
        layers: [onemapGrey, aeds]
    });

    map.setMaxBounds([[1.56073, 104.1147], [1.16, 103.502]]);

    var baseMaps = {
        "OneMap Grey": onemapGrey
    };    

    var overlayMaps = {
        "aeds24hrs": aeds24hrs,
        "aedsAll": aedsAll//,
        //"AEDS": aeds
    };

    L.control.layers(baseMaps, overlayMaps, {position: 'topleft', collapsed: false}).addTo(map);

</script>

</body>
</html>
Improve this question
1
  • Could you post a reproducible jsFiddle or Codepen? I don't get an error when I copy-paste your code into an empty jsfiddle.net and run the code.
    – StefanBrand_EOX
    Commented Nov 13, 2018 at 8:04

1 Answer 1

Reset to default
1

I believe the response from your ajax call is not a valid input for L.geoJSON().

After some tinkering I got this to work.

function onEachFeature(feature, layer) {
            layer.bindPopup("Building Name: " + feature.properties.BUILDING_N + "<br>" + "Location: " + feature.properties.AED_LOCATI + "<br>" + "Operating: " + feature.properties.OPERATING_);
}

var aeds24hrs = L.geoJSON.ajax("https://gist.githubusercontent.com/kyroskoh/e9a7065beaf4f5744e91af07bb669416/raw/92491712d9ce792fa89318b47a6253b79aa47da5/AEDpoints_24.json",{onEachFeature: onEachFeature});

aeds24hrs.addTo(map);

var baseMaps = {
    "OneMap Grey": onemapGrey
};    

var overlayMaps = {
    "aeds24hrs": aeds24hrs
};


L.control.layers(baseMaps, overlayMaps).addTo(map)
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.