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')
}
;
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);
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());
}
}
);
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire