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/leaflet@1.3.4/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/leaflet@1.3.4/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>
  • 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. – Stefan Nov 13 at 8:04

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)

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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