I have a problem with a function allowing to change the position of a marker on my leaflet map.
I update the coordinates of my map with a zoom to 17.
However when I call my recupObjectByLatLong function by passing mapRef.current.getBounds (), the map has not yet updated the bounds in relation to the zoom of the new coordinates.
To prevent the problem today, I put a setTimeout, however I don't think this is the cleanest solution ...
function changePositionMarker(e) {
const latitude = e.latlng.lat;
const longitude = e.latlng.lng;
mapRef.current.setView(L.latLng(latitude, longitude), 17);
markerRef.current.setLatLng([latitude, longitude]);
markerRef.current.bindPopup('test').openPopup();
setTimeout(() => {
recupObjectByLatLong(mapRef.current.getBounds().getNorthEast().lat, mapRef.current.getBounds().getNorthEast().lng, mapRef.current.getBounds().getSouthWest().lat, mapRef.current.getBounds().getSouthWest().lng);
}, 1000);
}
I have a layer with two polylines and polylineDecorators. I would like to highlight both polylines and polylineDecorators when I hover on any of these. Right now I'm able to highlight only one at the time when hovering on it.
Here is my code:
var layer_migration = L.layerGroup({
layerName: 'layer_migration',
pane: 'linesPane',
});
function onEachFeature_migration (feature, layer) {
var polyline = L.polyline(layer.getLatLngs(),{
color: "#8B0000",weight: 5,opacity: 0.4,dashArray: '8,8',
dashOffset: 0
}).addTo(layer_migration);
var PLdecorator1 = L.polylineDecorator(polyline, {
patterns: [{
offset: '104%',
repeat: 100,
symbol: L.Symbol.arrowHead({pixelSize: 16,
pathOptions: {color: "#8B0000",fillOpacity: 0.6,weight: 0
}
})
}]
}).addTo(layer_migration)
var myfeatures = L.featureGroup([polyline,PLdecorator1]).addTo(layer_migration);
myfeatures.on('mouseover', function(e) {
var layer = e.target;
layer.setStyle({color: '#8B0000',opacity: 1,fillOpacity:1
});
});
}
Any help super appreciated.
Thanks,
P
In your mouseover callback, I think that e.target will just refer to the individual layer (polyline or decorator) that triggered the event, not the collection of layers that make up the feature group. I've not tested it, but according to the docs, you ought to be able to get the effect you want by calling .setLayer() on the feature group itself:
myfeatures.on('mouseover', function(e) {
myfeatures.setStyle({color: '#8B0000',opacity: 1,fillOpacity:1});
});
Also, if the two polylines are created by two separate calls to onEachFeature_migration(), then they will end up as two separate feature groups. To get around this, you might need to assign an empty featureGroup to myfeatures outside the function, then add the new polylines to it inside the function using myfeatures.addLayer().
I have a question about why a way that I'm trying to add polylines as a layer isn't working. To be clear, I'm not trying to assert that it should be working, just that I'm curious why it works in one case but not in another. Consider the following code:
var oMbTiles = new L.tileLayer('/mbtiles/mbtiles.php?&z={z}&x={x}&y={y}', {
tms: true,
opacity: 0.7
}),
oUpIcon = new L.Icon({
iconUrl: '/custom/css/themes/app/markers/up.png',
iconSize: [24, 26]
}),
oMapTypes = {
'Yakabox': oMbTiles
},
aFirstMarkers = [],
aFirstLines = [],
aFirstLatLng,
oFirstLine,
oFirstGroup,
oLayersControl,
oOverlayMaps,
oMap,
i;
aFirstLatLng = [
[18.319026, -66.420557],
[18.180555, -66.749961],
[18.361945, -67.175597],
[18.455183, -67.119887],
[18.158345, -66.932911],
[18.295366, -67.125135],
[18.402253, -66.711397],
[18.420412, -66.671979],
[18.445147, -66.559696],
[17.991245, -67.153993],
[18.083361, -67.153897],
[18.064919, -66.716683],
[18.412600, -66.863926],
[18.190607, -66.832041],
[18.076713, -66.947389],
[18.295913, -66.515588],
[18.263085, -66.712985],
[18.433150, -66.285875],
[17.963613, -66.947127],
[18.349416, -66.578079],
[18.448452, -66.594127],
[17.985033, -66.886536],
[18.053539, -66.792931],
[18.407226, -66.808999],
[18.134695, -67.116199],
[18.468320, -67.015781],
[18.210330, -66.591616],
[18.003422, -67.035810],
[18.277102, -66.869645],
[18.240187, -66.988776],
[18.422908, -66.489337],
[18.377637, -67.079574],
[18.332568, -67.227022],
[18.434099, -66.927384],
[18.182055, -67.132502],
[18.221464, -67.156039],
[18.107800, -67.037263],
[18.332929, -66.959689]
];
for (i = 0; i < aFirstLatLng.length; i++) {
aFirstMarkers.push(L.marker(aFirstLatLng[i]).setIcon(oUpIcon).bindPopup('lat/lng : ' + aFirstLatLng[i].join(', ')))
if (i === (aFirstLatLng.length - 1)) {
aFirstLines.push(L.polyline([aFirstLatLng[i], aFirstLatLng[0]], {color: 'red', weight: 3, opacity: 0}));
} else {
aFirstLines.push(L.polyline([aFirstLatLng[i], aFirstLatLng[i + 1]], {color: 'red', weight: 3, opacity: 0}));
}
}
oFirstLine = L.polyline(aFirstLatLng, {
weight: 5,
color: 'red'
});
oFirstLine.on('click', function () {
console.log('Clicked First line', arguments);
});
oFirstGroup = L.layerGroup(aFirstMarkers, {});
// This works
oFirstGroup.addLayer(oFirstLine);
// These next two lines do not work
// Here I'm trying to just add an array of polyline objects as a layer
//oFirstGroup.addLayer(aFirstLines);
// Here I'm trying to add the array of polyline objects as a layer group
//oFirstGroup.addLayer(L.layerGroup(aFirstLines));
oOverlayMaps = {
'First Group': oFirstGroup,
};
oMap = new L.map('map', {
minZoom: 4,
maxZoom: 10,
zoom: 9,
center: aFirstLatLng[7],
layers: [oMbTiles, oFirstGroup]
});
oLayersControl = new L.Control.Layers(oMapTypes, oOverlayMaps, {
collapsed: false
}).addTo(oMap);
So here, I'm just trying to iterate through some zip codes, create markers for each location, and connect the markers using polylines. If I instantiate the polyline object using only the array of lat/lng, that works when I add that polyline to the markers layer group (oFirstGroup). But if I pass in an array of polyline objects (which were passed in the start/end lat/lng coordinates), that doesn't work. The lines do not show up on the map. This is because I get an error saying "The provided object is not a layer". Ok, so I try to explicitly create a layer group using that array of polyline objects and while the error goes away, the lines are still not added to the map.
So I'm curious, should that be working? Or is it the case that the only way to properly create a polyline connecting markers is by passing the lat/lng coordinates as an array when instantiating a single polyline object for adding to the layer? Why is it that I can pass in an array of marker objects (when instantiating oFirstGroup) and add that layer to the map but I can't do the same thing when passing in an array of polyline objects?
thnx,
Christoph
Ok, I'm not ashamed to admit it -- I'm a moron. The problem was opacity: 0. I copied the code from elsewhere (to try to understand what was going on) and I didn't remove that. As soon as I did, voila!
I iz be dumm.
thnx,
Christoph
I'm new to Leaflet and having fun with it so far. I have an interactive map with 170 or so markers around the world. Each marker has a title in the popup. I'd also like to add a "zoom to" link inside of the popup. When the user clicks zoom to, I would like the map to center on the marker and zoom in to a certain zoom level (see image)
The markers are being generated in PHP as a marker array with the title, and lat/longs, and injected into a javascript var called "items."
for (var i = 0; i < items.length; i++) {
marker = new L.marker([items[i][1],items[i][2]])
.bindPopup(items[i][0])
.addTo(map);
}
Keep your markers in an associative array (index must be unique).
Put put a link in your popup text to call a function passing this index as argument.
In your javascript function use panTo or flyTo
Here is some pseudo code:
var markersById = {};
for (var i = 0; i < items.length; i++) {
marker = new L.marker([items[i][1],items[i][2]])
.bindPopup('Center on map')
.addTo(map);
markersById[i] = marker;
}
function centerMapOnPost(markerId) {
map.panTo(markersById[markerId].getLatLng());
}
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