I am using Leaflet.js to create a map. The data displayed on the map depends on user selection so I instantiate two empty feature groups on map load, one for the values, and one for a color marker behind the value ( color depends on the value ).
if( dHMT.dataColorLayer===undefined ){
dHMT.dataColorLayer = new L.featureGroup({}).addTo(dHMT.map);
}
if( dHMT.dataValueLayer===undefined ){
dHMT.dataValueLayer = new L.featureGroup({}).addTo(dHMT.map);
}
I then add the empty layers to the layer switcher.
dHMT.overlayMapsLS = {
"Bassins ": dHMT.bassinLayer,
"Couleurs ": dHMT.dataColorLayer,
"Données ": dHMT.dataValueLayer
};
Once the user selects data, the featureGroups are filled with the relevant values/markers.
var iconColor = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;border-radius: 50%;height:40px;width:40px;padding-top:9px;background:"+dHMT.siteinfo[x].color+"'></div>"});
var iconColorDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconColor})
.bindPopup(
'Nom : '+dHMT.siteinfo[x].name+'<br>'+
'Numéro : '+dHMT.siteinfo[x].stnm+'<br>'+
'Stid : '+dHMT.siteinfo[x].stid+'<br>'+
'LatLon : '+dHMT.siteinfo[x].lat+','+dHMT.ecartArray[x].lon+'<br>'+
'Valeur : '+dHMT.ecartArray[x].ecart+'<br>'
).on('mouseover', function (e) {
this.openPopup();
}).on('mouseout', function (e) {
this.closePopup();
});
var iconValue = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;height:40px;width:40px;padding-top:9px;'>"+value+"</div>"});
var iconValueDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconValue});
dataColorFeatures.push(iconColorDiv);
dataValueFeatures.push(iconValueDiv);
L.featureGroup(dataColorFeatures).addTo(dHMT.dataColorLayer);
L.featureGroup(dataValueFeatures).addTo(dHMT.dataValueLayer);
Both layers are fine, I have a nice map with a marker layer with colored circles with another layer displaying values over the marker. The goal being to deactivate the colors or the values using the layer switcher.
The problem is that if, for example, I toggle the color layer off, and turn it on again, the colored circles reappear over the values. The desired behavior would be to have them reappear in the original order, behind the values.
You can listen to the overlayadd event on your L.Map instance:
Fired when an overlay is selected through the layer control.
http://leafletjs.com/reference.html#map-overlayadd
When fired you can use the bringToFront method of L.FeatureLayer:
Brings the layer group to the top of all other layers.
http://leafletjs.com/reference.html#featuregroup-bringtofront
map.on('overlayadd', function () {
dHMT.dataValueLayer.bringToFront();
});
Related
I have pieced together the following code using examples on Mapbox... https://codepen.io/charlie-enright/pen/ZExKOGB?editors=0010
What I want to do now is add another raster layer but have its visibility controlled by one of the existing buttons (the "geophys")button rather than to have to add an extra button.
Is it possible to have two separate raster layers controlled by the same toggle button with the script I have used? If so how will I go about doing this?
The code for the additional raster layer I want to add to be controlled by the geophys button is:
map.addSource('rudbaxton', {
'type': 'raster',
'url': 'mapbox://charlie-enright.chlrzasw'
});
map.addLayer({
'id': 'geophys1',
'source': 'rudbaxton',
'type': 'raster'
});
On top of this I would like the opacity control to adjust the opacity for the two raster layers controlled by the "geophys" button. is this possible to do as well?
Thanks,
The way the example you used is set up, the text in the button must exactly match the name of the layer you want to toggle.
This line gets the text from the button that was clicked:
const clickedLayer = this.textContent;
This line gets the current visibility of the layer with the same name const visibility = map.getLayoutProperty(clickedLayer, "visibility");`
To control two layers with one button click, you just need to add some logic to check for which button was clicked, and respond accordingly:
link.onclick = function (e) {
const clickedButtonText = this.textContent;
e.preventDefault();
e.stopPropagation();
if (clickedButtonText === "geophys") {
// assuming your two layers should always be on or off together, only check the current visibility of one of them
const visibility = map.getLayoutProperty("some-first-layer", "visibility");
// Toggle layer visibility by changing the layout object's visibility property.
if (visibility === "visible") {
map.setLayoutProperty("some-first-layer", "visibility", "none");
map.setLayoutProperty("some-second-layer", "visibility", "none");
this.className = "";
} else {
this.className = "active";
map.setLayoutProperty("some-first-layer", "visibility", "visible");
map.setLayoutProperty("some-second-layer", "visibility", "visible");
}
}
// repeat the above if statement for the other button(s)
};
As a bonus, this means you can use any text you want in the buttons, which might be a little more human-friendly than using the layer names!
I am trying to change the fill color of the State in the usa map when the marker on that state is clicked. I have been able to get the state color to change when clicking on the state but cannot get the color to change when clicking on the marker.
The map is here: https://www.thekeithcorp.com/map-properties/
I am trying to use a click event listener, the flyto is working as its supposed to but not the color change.
This is my code:
shelter1.addEventListener("click", function (e){
map.flyTo([35.7,-79.0], 7);
restyleLayer(name, layer);
});
function getColor(name) {
color: 'red'
}
function restyleLayer(name, layer) {
layer.feature.properties.name = 'North Carolina';
var myFillColor = getColor(name);
layer.setStyle(myFillColor);
}
Any help would be appreciated!!
I am trying to draw the path of a flight using leafletjs and geojson. I'll be getting the geometry from a stream.
this is what I have done so far:
let index = 0;
let geoJsonLayer;
let intervalFn = setInterval(function () {
let point = trackData.features[index++];
if(point) {
let coords = point.geometry.coordinates;
coords.pop();
coords.reverse();
geoFeature.geometry.coordinates.push(coords);
if(map.hasLayer(geoJsonLayer)) map.removeLayer(geoJsonLayer);
geoJsonLayer = L.geoJson(geoFeature, {
onEachFeature: (feature, layer) => {
const content = feature.properties.title;
layer.bindPopup(content);
}
});
geoJsonLayer.addTo(map);
// console.log(coords);
} else {
clearInterval(intervalFn);
}
}, 100);
setInterval is to simulate the part whereby I get the geometry from a stream.
now when a user clicks on the path I need to show some properties of the path, and I am trying to use the onEachFeature for that, but its not working correctly.
I suspect its because I am removing the layers (I did this to improve the performance)
Is there any other better ways to do what I am trying to achieve ?
You should probably try addLatLng()
Adds a given point to the polyline.
Your geoFeature sounds to be a single Feature, so your geoJsonLayer will contain a single layer (polyline):
let myPolyline;
geoJsonLayer.eachLayer(function (layer) {
myPolyline = layer; // Will be done only once actually.
});
// When you receive a new point…
myPolyline.addLatLng([lat, lng]);
With this you should not have to remove your layers every time.
The popup should therefore stay open, if it is shown.
Demo: https://jsfiddle.net/3v7hd2vx/265/ (click on the button to add new points)
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
I am aware of bringToFront(), but it does not meet my requirements. I would like to set the zIndex dynamically based on properties.
Leaflet has the method setZIndex(), but this apparently does not work for geoJson layers:
https://jsfiddle.net/jw2srhwn/
Any ideas?
Cannot be done for vector geometries.
zIndex is a property of HTMLElements, and vector geometries (lines and polygons) are rendered as SVG elements, or programatically as <canvas> draw calls. Those two methods have no concept of zIndex, so the only thing that works is pushing elements to the top (or bottom) of the SVG group or <canvas> draw sequence.
Also, remind that L.GeoJSON is just a specific type of L.LayerGroup, in your case containing instances of L.Polygon. Furthermore, if you read Leaflet's documentation about the setZIndex() method on L.LayerGroup:
Calls setZIndex on every layer contained in this group, passing the z-index.
So, do L.Polygons have a setZIndex() method? No. So calling that in their containing group does nothing. It will have an effect on any L.GridLayers contained in that group, though.
Coming back to your problem:
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
Looks like the thing you're looking for is map panes. Do read the map panes tutorial.
This is one of the reason for the implementation of user defined "panes" in Leaflet 1.0 (compared to versions 0.x).
Create panes: var myPane = map.createPane("myPaneName")
If necessary, set the class / z-index of the pane element: myPane.style.zIndex = 450 (refer to z-index values of built-in panes)
When creating your layers, specify their target pane option: L.rectangle(corners, { pane: "myPaneName" })
When building through the L.geoJSON factory, you can loop through your features with the onEachFeature option to clone your layers with specified target pane.
Demo: https://jsfiddle.net/3v7hd2vx/90/
For peoples who are searching about Z-Index
All path layers (so all except for markers) have no z-index because svg layers have a fix order. The first element is painted first. So the last element is painted on top.
#IvanSanchez described good why zIndex not working.
You can control the order with layer.bringToBack() or layer.bringToFront().
With that code you have more options to control the order of the layers.
L.Path.include({
getZIndex: function() {
var node = this._path;
var index = 0;
while ( (node = node.previousElementSibling) ) {
index++;
}
return index;
},
setZIndex: function(idx) {
var obj1 = this._path;
var parent = obj1.parentNode;
if(parent.childNodes.length < idx){
idx = parent.childNodes.length-1;
}
var obj2 = parent.childNodes[idx];
if(obj2 === undefined || obj2 === null){
return;
}
var next2 = obj2.nextSibling;
if (next2 === obj1) {
parent.insertBefore(obj1, obj2);
} else {
parent.insertBefore(obj2, obj1);
if (next2) {
parent.insertBefore(obj1, next2);
} else {
parent.appendChild(obj1);
}
}
},
oneUp: function(){
this.setZIndex(this.getZIndex()+1)
},
oneDown: function(){
this.setZIndex(this.getZIndex()-1)
}
});
Then you can call
polygon.oneUp()
polygon.oneDown()
polygon.setZIndex(2)
polygon.getZIndex()
And now layergroup.setZIndex(2) are working
I load some lat / lon info, then use it to build a polyline.
I then want to add a marker at each of the polyline vertices that will show when the polyline is clicked.
The vertices should disappear if a different (or the same) polyline is clicked.
The code below creates the polyline and the vertex markers.
But the vertex markers do not ever disappear.
I've tried to do this several ways with the same result. I've tried storing the vertex markers in an array and adding them directly to the map, then map.removeLayer'ing them. That doesn't work either. Nor does it work if I use an L.featureGroup instead of a layerGroup.
Clearly I've missed the point somewhere as to how markers can be removed. Could someone point me at the error in my methodology?
// trackMarkersVisible is a global L.layerGroup
// success is a callback from an ajax that fetches trackData, an array f lat/lon pairs
success: function (trackData) {
// build an array of latLng's
points = buildTrackPointSet(trackData, marker.deviceID);
var newTrack = L.polyline(
points, {
color: colors[colorIndex],
weight: 6,
clickable: true
}
);
$(newTrack).on("click", function () {
trackMarkersVisible.clearLayers();
$.each(points, function(idx, val) {
var tm = new L.Marker(val);
trackMarkersVisible.addLayer(tm);
});
map.addLayer(trackMarkersVisible);
});
}
Without a JSFiddle or Plunker it's hard to say because i'm not sure what behaviour your getting but using the clearLayers() method of L.LayerGroup should remove all layers from that group. I would check in the onclick handler if the group already has layers: group.getLayers().length === 0 If the group is empty, add the markers, if the group has layers use clearLayers. Example in code:
polyline.on('click', function (e) {
if (group.getLayers().length === 0) {
e.target._latlngs.forEach(function (latlng) {
group.addLayer(L.marker(latlng));
});
} else {
group.clearLayers();
}
});
This works for me, see the example on Plunker: http://plnkr.co/edit/7IPHrO?p=preview
FYI: an instance of L.Polyline is always clickable by default so you can leave out the clickable: true