I am using leaflet to show my markers into google map. everything works fine. My markers are being loaded by an api call in every 10 secs. if i click on any markers a popup window is open. But it disappeared as soon as the api is called again. I have tried so far as follows:
var infoWindow_content = "<h3>Hello world</h3>";
var theMarker = L.marker([devices[x].lat, devices[x].lng], {
icon: customicon,
rotationAngle: devices[x].angle
}).on('click', markerOnClick).addTo(map).bindPopup(infoWindow_content, {
autoPan: true,
autoClose:false,
closeOnClick:false,
});
is there anyway to keep the popup window open even the marker gets reloaded? In that case is the popup window follow marker movement? thanks in advance
Related
Not too long ago, people had a really hard time getting all popups to close on map click in mapbox (How to close all popups programmatically in mapbox gl?).
They've since changed this to the default behavior, which is nice, but does not suit my current project.
How does one NOT have all popups close on click out?
And once that is disabled:
How does one programmatically close selected popups on click out?
Like this:
const popup = new mapboxgl.Popup({ closeOnClick: false });
map.on('click', () => popup.remove());
I am drawing a map with routes (LineString) on them and I am handling
mouse hover (through setFeatureState) to make them look thicker
mouse click - to select a route and show some information outside of the map
In a case where two routes are detected under a click (e.features.length > 1) I want to show a new Popup({ closeButton: true }), with disambiguation info/links so that user can precisely select the route they want.
Unfortunately, tracking the mouse movement causes the popup to disappear when user tries to enter the popup area to click the links within.
So what I am doing is, I am unbinding the mouse move listeners before showing the popup, and re-binding on close
showPopup(mapbox){
this.removeListeners(mapbox);
const popup = new mapboxgl.Popup({
closeButton: true,
closeOnClick: true,
});
popup.once('close', () => {
this.addListeners(mapbox);
});
}
Is there any better API way to solve that?
I am trying to allow a mapbox marker to be clicked on and when clicked it automatically takes you to a new link.
Is this possible?
I currently have a map of 10 locations and when loaded the zoom level shows all. When you click on a location, it zooms you into that location.
I now want it to take you through to a url on the click rather than zoom in, however I cant seem to find any documentation on how to do it.
I am aware that it can be done using a popup box which contains a url in it, but is there a way to remove the extra step.
Thank you
You can use click event on your layer to get the feature clicked and use a property of your feature to build your link :
map.on('click', 'layername', function(e) {
// Here you can access e.features[0] which is the feature cliked
// With that you can do whatever you want with your feature
});
Sébastien Bousquet's answer work when using a Symbol, but if using a Marker, you'll need to add your your own click eventlistener like https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event.
marker.getElement().addEventListener('click', event => {
window.location.href = 'https://www.mapbox.com/';
});
I am starting with leaflet and leaflet.draw and I am having troubles at the moment I trie to change marker´s icon.
In this particular case I am trying to update all marker´s icon when I press cancel edition button. I can change the icons but all the markers still selected
Here is a fiddle example
Steps to reproduce
Press edit button
Press cancel edit
You will see all the markers has changed their icons but at the same time all the markers still selected
Here is the code that I have to simulate undo icon change :
drawControl._toolbars.edit.disable = function () {
if (!this.enabled()) {
/* If you need to do something right as the
edit tool is enabled, do it here right
before the return */
return;
}
geojsonLayer.eachLayer(function(layer) {
layer.setIcon(new L.Icon.Default({}));
});
geojsonLayer2.eachLayer(function(layer) {
layer.setIcon(new L.Icon.Default({}));
});
this._activeMode.handler.revertLayers();
L.Toolbar.prototype.disable.call(this);
};
Versions:
leaflet 1.3.4
leaflet.draw 1.0.3
What am I doing wrong ?
I took a quick look at your code and I am not sure what causes this issue. However, I dived a bit into the editable marker code & style from the console and realized that once you hit the edit button the .leaflet-edit-marker-selected class is applied to each one of the drawn or rendered markers derived from leaflet.draw.css line 9.
So a possible workaround will be to remove .leaflet-edit-marker-selected class once 'draw:editstop' event is called:
map.on('draw:editstop',function(e) {
$(".leaflet-pane img").removeClass("leaflet-edit-marker-selected");
editing=false;
map.closePopup();
});
Updated Demo
I currently have a marker on the map using google map. I want to keep the infoWindow visible until the user tap elsewhere. The issue is that it work as it should when the user is coords do not change but whenever the user drive and coord change the info window disappear immediately. I would like to keep the info window there even if the marker move away from. Thank you in advance for the help
first make info window object
var infowindow = new google.maps.InfoWindow({
content: "Hello World"
});
then make latlng object containing latlng and setposition of infowindow
infowindow.setPosition(new google.maps.LatLng(19.243750,73.149095))
then open on map
infowindow.open(map)