I want some of my Leaflet markers visible in more than one layer on my Openstreetmap map.
By example: London is harbor and is also a capital city.
So I want to see the London marker when I select only the layer 'harbors' or the layer 'capital cities'.
But the normal behaviour of Leaflet markers and layers seems to be that London only shows up when both layers 'harbors' and 'capital cities' are selected.
How to achieve to show up the London marker if just one of the two layers is selected?
Code:
var harbor = L.layerGroup().addTo(map);
var capital = L.layerGroup().addTo(map);
var marker1 = L.marker([51.5, 0]);
marker1.addTo(harbor);
marker1.addTo(capital);
var overlays = { "Capital": capital, "Harbor": harbor};
L.control.layers(null, overlays).addTo(map);
The link #Tordanik gave, was helpfull.
Adding this code does the job:
map.on("overlayremove", function(o) {
if (map.hasLayer(capital)) {
map.removeLayer(capital);
map.addLayer(capital);
}
if (map.hasLayer(harbor)) {
map.removeLayer(harbor);
map.addLayer(harbor);
}
});
Steps taken after an ovelayremove-click:
Test each layers if it is active
Remove this layer
Place this layer with his markers back
Result: all the markers in this layer are visible again.
Related
L.control.layers takes up to three parameters - baselayers, overlays and options. I'd like to be able to sort the overlays as they appear in the layer control but am not sure how to do that.
I used https://leafletjs.com/examples/layers-control/example.html as my starting point. So that example has this line:
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
I replaced that with this:
var options = {
autoZIndex: false,
sortLayers: true,
sortFunction: function(layerA, layerB, nameA, nameB) {
return -('' + nameA).localeCompare(nameB);
}
};
var layerControl = L.control.layers(baseLayers, overlays, options).addTo(map);
Problem is that that sorts both the overlays and the layers. I'd like to just sort the overlays.
Any ideas?
My JS fiddle:
https://jsfiddle.net/7e84rh06/1/
I've placed my markers and drawn the polylines between them and it's working great.
I've also given the user the ability to remove a marker using the following function
function hide(marker) {
map.closePopup();
map.removeLayer(marker);
}
Now, when a marker is removed I'd also like to remove the polyline. I've been doing a lot of searching but haven't come across my specific issue: I'm using pixel coordinates and need to remove the polyline between two markers.
markers
var marker1 = L.marker(map.unproject([8706, 7789], map.getMaxZoom()));
var marker2 = L.marker(map.unproject([8302, 5273], map.getMaxZoom()));
var marker3 = L.marker(map.unproject([9303, 7251], map.getMaxZoom()));
polylines
polyline = L.polyline([
map.unproject([8706, 7789], map.getMaxZoom()),
map.unproject([8302, 5273], map.getMaxZoom()),
map.unproject([9303, 7251], map.getMaxZoom())
]);
So when a user removes marker1, the polyline disappears between marker1 and marker2, but remains between marker2 and marker3, and so on down the line...
How is this accomplished?
You can add the polylines to the markers. And if the marker is removed you can read out the lines and remove them too.
marker1 = L.marker([51.498912, -0.122223],{connectedLines: []}).addTo(mymap);
marker2 = L.marker([51.496988, -0.056305],{connectedLines: []}).addTo(mymap);
poly1 = L.polyline([marker1.getLatLng(),marker2.getLatLng()]).addTo(mymap);
marker1.options.connectedLines.push(poly1);
marker2.options.connectedLines.push(poly1);
function removeMarkerLine(e){
var marker = this;
if(marker.options && marker.options.connectedLines){
var lines = marker.options.connectedLines;
lines.forEach(function(line){
mymap.removeLayer(line);
});
}
mymap.removeLayer(marker);
};
https://jsfiddle.net/falkedesign/3aukgm7t/
Simplest way, keep track of which polylines belongs to which two markers, and if one is removed you also remove that one.
Can be easily accomplished using layer groups.
I am exporting Google Directions routes as KML and displaying them on a Mapbox map by reading them with Omnivore and adding them to the map,
The Google KML stores each route as two Places (the start and end points) and one LineString (the route). In Mapbox I would like to show only the routes, that is to filter out the markers somehow. I'm displaying markers out of my own database and the Google markers clutter it up.
Here is my code. I change the styling of the LineStrings just to show that I can, but do not know what magic call(s) to make to not display the Points.
Thanks.
runLayer = omnivore.kml('data/xxxx.kml')
.on('ready', function() {
var llBnds = runLayer.getBounds();
map.fitBounds(llBnds);
this.eachLayer(function (layer) {
if (layer.feature.geometry.type == 'LineString') {
layer.setStyle({
color: '#4E3508',
weight: 4
});
}
if (layer.feature.geometry.type == 'Point') {
//
// Do something useful here to not display these items!!
//
}
});
})
.addTo(map);
Welcome to SO!
Many possible solutions:
Most straight forward from the code you provided, just use the removeLayer method on your runLayer Layer Group when you get a 'Point' feature.
Cleaner solution would be to filter out those features before they are even converted into Leaflet layers, through a custom GeoJSON Layer Group passed as 3rd argument of omnivore.kml, with a specified filter option:
var customLayer = L.geoJSON(null, {
filter: function(geoJsonFeature) {
// my custom filter function: do not display Point type features.
return geoJsonFeature.geometry.type !== 'Point';
}
}).addTo(map);
var runLayer = omnivore.kml('data/xxxx.kml', null, customLayer);
You can also use the style and/or onEachFeature options on customLayer to directly apply your desired style on your LineString.
I've created a map in leaflet.js with multiple layers but can't work out how to toggle one layer to initially appear on the map.
Here is the link
I'm sure it's fairly straightforward but just can't figure it out.
After declaring your layers you need to add one to the map, just like you did with your tilelayer. See the code below. That should work. The layercontrol will work out that the layer is visible/added to the map and check it in the list.
var map = L.map('map').setView([52.814172, -2.079479], 9);
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg', {
maxZoom: 18,
attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
}).addTo(map);
// Left out layer-declarations, they are HUGE
anti_soc.addTo(map); // here it is
var overlayMaps = {
"Anti-social behaviour" :anti_soc,
"Criminal damage and arson": crim_dam,
"Burglary": burg,
"Violence and sexual offences": viol,
"Other theft": other_theft,
"Vehicle crime": veh_crime,
"Shoplifting": shoplift,
"Public order": pub_ord,
"Robbery": robb,
"Bicycle theft": bikes,
"Drugs": drugs,
"Theft from the person": theft_person,
"Other crime": other_crime,
"Possession of weapons": weap
};
L.control.layers(null, overlayMaps).addTo(map);
I have two geoJson layers being loaded - both layers are the same data for testing purposes, but being drawn from two different json files. When I turn the layers on and off in the layer controller, the draw order of the layers change.
Any ideas why this is happening?
I have put my code into a JSFiddle: http://jsfiddle.net/lprashad/ph5y9/10/ and the JS is below:
//styling for watersheds_copy
var Orange = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
var Water_Orange = L.geoJson(watersheds_copy, {
style: Orange
});
Water_Orange.addData(watersheds_copy);
//these are blue
var Water_blue = L.geoJson(watersheds, {});
Water_blue.addData(watersheds);
//This sets the inital order - last in layer list being on top. Except minimal - tile layer is always on bottom
var map = L.map('map', {
center: [41.609, -74.028],
zoom: 8,
layers: [minimal, Water_Orange, Water_blue]
});
var baseLayers = {
"Minimal": minimal,
"Night View": midnight
};
//This controls the order in the layer switcher. This does not change draw order
var overlays = {
"Water_Orange": Water_Orange,
"Water_blue": Water_blue
};
L.control.layers(baseLayers, overlays).addTo(map);
LP
While searching I happened upon this site that shows some of the Leaflet code:
http://ruby-doc.org/gems/docs/l/leaflet-js-0.7.0.3/lib/leaflet/src/control/Control_Layers_js.html
In it I found this condition for the application of autoZIndex:
if (this.options.autoZIndex && layer.setZIndex) {
this._lastZIndex++;
layer.setZIndex(this._lastZIndex);
}
TileLayer is the only layer type that has a setZIndex function, so apparently autoZIndex only works there.
I'm not sure which annoys me more. This incredible limitation or the fact that Leafet documentation doesn't point it out.
At least on 0.7.2, I had to use bringToFront in the callback of map.on('overlayadd'). autoZIndex: false did not work in my case neither. A comment on this issue may explain the reason.
It's not specific to L.GeoJson layers. As far as I can tell, it's true of all Leaflet layers with layer control. The last layer turned on is simply on top. I don't think this is a bug either. It's predictable behavior which I use and depend on when I'm designing maps with layer control...