I am trying to get a webmap working with leaflet.js. I found the beautiful addon of a MiniMap.
But I do not get how it works. It works, if I only have one baselayer; MiniMaps shows up correctly. If I do add some other baselayers the app does not show me any map at all. So I have to comment out that minimap part.
Do you know what's wrong with that map? Would it be possible that it switches the minimap-background map when switching baselayer of the bigger map?
Here's my code. Any help is welcome. Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>
Leaflet OSM
</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='http://ift.tt/1tdT5S2'>
</script>
<link href='http://ift.tt/1tAtWhb' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- Load Esri Leaflet from CDN -->
<script src="http://ift.tt/1prjbCL">
</script>
<script src='http://ift.tt/1I8cfAH'>
</script>
<link href='http://ift.tt/1I8cfAJ' rel='stylesheet' />
<!-- jQuery is required for this example. -->
<script src='http://ift.tt/1jUg4QF'>
</script>
<script src='http://ift.tt/1ylXp1w'>
</script>
<script src='http://ift.tt/1ylXodO'>
</script>
<link href='http://ift.tt/1I8cdss' rel='stylesheet' />
<style>
.leaflet-control-locate {
border: 1px solid rgba(0, 0, 0, 0.4);
}
;
.leaflet-control-locate a {
background-color: #fff;
background-position: -3px, -2px;
}
;
.leaflet-control-locate.active a {
background-position: -33px -2px;
}
;
</style>
<!-- Include Leaflet.markercluster via rawgit.com, do not use in production -->
<link rel="stylesheet" type="text/css" href="http://ift.tt/1ylXphK">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1ylXodS">
<script src="http://ift.tt/1I8cdsy">
</script>
<!-- Load Clustered Feature Layer from CDN -->
<script src="http://ift.tt/1ylXodU">
</script>
<div id='map'>
</div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiU2FXX0xJMCJ9.WfLHHkqFGqlFgiOkmxgRDA';
var map = L.mapbox.map('map')
var geocoder = L.mapbox.geocoderControl('mapbox.places-v1', {
autocomplete: true
})
;
var iplocate = L.control.locate();
var baseLayers = {
Streets: L.mapbox.tileLayer('examples.map-i87786ca'),
Outdoors: L.mapbox.tileLayer('examples.ik7djhcc'),
Satellite: L.mapbox.tileLayer('examples.map-igb471ik'),
DarkMap: L.tileLayer('http://ift.tt/13b226J'),
Terrain: L.tileLayer('http://ift.tt/1z9TU0T')
};
var overLayer = {
Kita: L.esri.clusteredFeatureLayer('http://ift.tt/1xW2dOu', {
useCors: false
})
};
overLayer.Kita.bindPopup(function(feature) {
return L.Util.template('<p>{ADRESSE}<br>{STADTTEIL}<br>{TRAEGER_TYP}</p>', feature.properties);
});
// L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i86nkdio')).addTo(map);
//map.setView(new L.LatLng(59.9244, 10.7582),10); // add correct lat/lng
//var miniMap = L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i87786ca'));
geocoder.addTo(map);
iplocate.addTo(map);
baseLayers.Streets.addTo(map);
overLayer.Kita.addTo(map);
// miniMap.addTo(map);
L.control.layers(baseLayers, overLayer).addTo(map);
$.ajax({
url: "http://ift.tt/1ylXouc",
dataType: "xml",
success: function(xml) {
var layer = new L.OSM.DataLayer(xml).addTo(map);
map.fitBounds(layer.getBounds());
}
});
var miniMap = new L.Control.MiniMap(L.tileLayer('http://ift.tt/13b226J'), {
toggleDisplay: true,
position: 'bottomright'
}).addTo(map);
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire