The baselayers-control in leaflet is not activated, when a map is shown more than one time.
I wrote a test-program to show the problem:
<head>
<script>
'use strict';
var BING_KEY = "AplTrT4uzwlmfcERFFQu_NqDycERC_Er0qGYzZhIqrDfq-naYCsUr1kbbKRUqhq1";
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
function show_karte(div_id, mittelpunkt, zoom){
var bingLayer = L.tileLayer.bing({bingMapsKey: BING_KEY, maxZoom: 20, imagerySet: 'Aerial', attribution: '© 2019 Microsoft Corporation, Earthstar Geographics SIO'});
var bingLabelLayer = L.tileLayer.bing({bingMapsKey: BING_KEY, maxZoom: 20, imagerySet: 'AerialWithLabels', attribution: '© 2019 Microsoft Corporation, Earthstar Geographics SIO'});
var osmLayer = L.tileLayer(osmUrl, {maxZoom: 20, attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA'});
var mittelpunkt = [mittelpunkt[1], mittelpunkt[0]]
var map = L.map(div_id,{layers: [bingLabelLayer]}).setView(mittelpunkt, zoom);
var baseLayers = {"Straßenkarte": osmLayer, "Luftbild mit Straßennamen": bingLabelLayer,"Luftbild": bingLayer};
var control = L.control.layers(baseLayers).addTo(map);
};
</script>
</head>
<body>
<div id="map" style="width:450px; height: 450px;">
<script type="text/javascript"> show_karte("map",[6.026173,50.816022],13); </script>
</div>
<div id="map1" style="width:550px; height: 450px;">
<script type="text/javascript"> show_karte("map1",[6.10428,50.76079],11); </script>
</div>
<div id="map2" style="width:650px; height:450px">
<script type="text/javascript">show_karte("map2",[6.10428,50.76079],12); </script>
</div>
</body>
You can see the program here:
https://aachen-hat-energie.de/test_ww/test_zukunft.htm
The control is only activated on the third map. Where is the error?
Related
In https://leafletjs.com/examples/layers-control/example.html there are two layers - Grayscale and Streets. It defaults to Grayscale but how would one change the default to Streets instead?
In that example there's this:
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [grayscale, cities]
});
I tried swapping the order of the variables in layers but that didn't do anything.
There's also this:
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};
I tried reversing that, as well, without success.
I even tried renaming the names of the layers, thinking that it might be done alphabetically, but no such luck.
Any ideas?
It has to do with which layer has been added to the map. So remove the array layers from the map instance and add streets layer to the map. That will define the preselected layer.
<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var mbAttr = 'Map data © OpenStreetMap contributors, ' +
'Imagery © Mapbox',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
});
var grayscale = L.tileLayer(mbUrl, {
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
});
var streets = L.tileLayer(mbUrl, {
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
}).addTo(map)
var baseLayers = {
"Streets": streets,
"Grayscale": grayscale
};
var overlays = {
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
I used leaftlet to include map in my website, but i am seeing big infinite circles on the screen over map.
CDN used.
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
JavaScript Code.
<!-- map working javascript -->
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=XgEM27Xb3yStMrCCnrfb' , { attribution: '© MapTiler © OpenStreetMap contributors' }, { noWrap: true }).addTo(map);
var marker = L.marker([0,0]).addTo(map);
// var layer = new L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
// noWrap: true
// });
</script>
I am quiet new to Web Services and I am facing a problem.
I have a Map linked with a WMS.
I added a basemap and my WMS Date as a tileLayer and the show up correctly on my map.
Now I want the nearest Feature to PopUp when I click anywhere on the map.
I already searched the Web but could not find a solution I understood. (https://gist.github.com/rclark/6908938)
Can anyone help me with this?
This is my code so far:
<!DOCTYPE html>
<html>
<head>
<title>XXX</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style type="text/css">
#nrwMap { height: 800px; width: 1300px;}
</style>
</head>
<body>
<div id="Map"></div>
<script type="text/javascript">
var mymap = L.map('Map').setView([51.28, 7.33], 8);
var url = 'http://www.xxx.xxx.com/wms/';
var basemap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox/streets-v11'
})
basemap.addTo(mymap);
var featureLayer = L.tileLayer.wms(url, {
layers: 'layerName',
format: 'image/png',
transparent: true
});
featureLayer.addTo(mymap);
</script>
</body>
</html>
Leaflet.GeometryUtil has a function/feature called closestLayer. It might help.
mymap.on('click', onMapClick);
function onMapClick(e) {
nearestLayer = L.GeometryUtil.closestLayer(mymap, layersToSearch, e.latlng)
// It will return the layer, latlng of point on layer nearest to the 'click' and distance from the 'click' }
when you mouse over a cluster, Leaflet.markercluster should show the bounds of its markers. this is the (simplified) code I am using:
map = new L.Map('map');
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 13,
attribution: 'Map data © OpenStreetMap contributors'
}
).addTo(map);
map.setView([51.505, -0.09], 11);
let deflate_features = L.deflate({
minSize: 40,
markerCluster: true
});
deflate_features.addTo(map);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]);
deflate_features.addLayer(polygon);
var polyline = L.polyline([
[51.52, -0.05],
[51.53, -0.10],
], {
color: 'red'
});
deflate_features.addLayer(polyline);
#map {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
<html>
<head>
<link href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.Default.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster#1.3.0/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/Leaflet.Deflate#1.0.0-alpha.2/dist/L.Deflate.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
why does the cluster coverage on hover not show?
coverage is not shown if there are only 2 objects... :|
adding a third object, e.g.:
var polyline2 = L.polyline([
[51.535, -0.1],
[51.525, -0.05],
], {
color: 'green'
});
deflate_features.addLayer(polyline2);
enables cluster coverage:
I am following leaftlet js getting started tutorial. But I am unable to load the map. Here is the code I have
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
</head>
<style>
#mapid { height: 180px; }
</style>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'I have put public access token'
}).addTo(mymap);
</script>
<body>
<div style="margin-top:100px;margin-left:100px;height: 200px;width:200px" id="mapid"></div>
<div style="height:200px;width:200px;background: red">
</div>
</body>
</html>
In the above code, id: 'your.mapbox.project.id' I am unable to find this. I found only public access token, is this the reason map is not getting loaded .. any help is appreciated
To learn leaflet, you can just use the options of the example (check the source)
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
</script>
Later on, when you are more familiar with leaflet, you can open a mapbox account and learn about what they are adding.
The reason why mapbox is mentioned in the home page of leaflet is because the creator of leaflet is now working for mapbox.