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>