We Keep Coding

Mouse over Popup on multiple markers leaflet.js?

so I have a leaflet map with lot of markers placed on it. I want to have a popup with like the status of asset etc on 'hover' over the marker. I see some examples on google and try to implement but none of them is firing any events. here is my code with my attempt. how can i achieve this feature? do i have to use somekind of tooltip instead of popup?
buildMarkerLayer = (rawAssetsObjects) => {
let markersGroup = null;
var self = this;
markersGroup = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
spiderfyDistanceMultiplier: 2
});
self.$localForage.getItem('showAllAreas').then((_showAll) => {
if(_showAll){
this.loadAllAreas();
}else{
this.hideAllAreas();
}
});
angular.forEach(rawAssetsObjects, function(_asset) {
if(_asset.latitude && _asset.longitude){
markersGroup.addLayer(L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset)
})
}).on('click', function(e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly selected asset to query
self.$rootScope.$broadcast('ActiveAssetChange');
self.dgModal.display();
}).bindPopup('work').on('mouseover',function(ev) {
markersGroup.openPopup();
}));
};
});
return markersGroup
}
so I added the mouseover function and is responding on the console with error, so at least i know the listening part is working

I was close to the answer, while following many examples on google they made L.Marker into a variable like var marker = L.marker. Then call marker.openPopup(). My case, as you can see, I straight called L.marker. Problem was calling L.marker.openPopup() or L.marker(openPopup()) throws error saying openPopup is undefined. so the solution was pretty straight forward and make L.marker into a variable. like below. I also added small popup formatting like where pop-up should display using popAnchor and HTML formatting, for future flowers
angular.forEach(rawAssetsObjects, function (_asset) {
let marker = L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset),
popupAnchor: [0,-80]
})
});
if (_asset.latitude && _asset.longitude) {
let content = "<b>"+_asset.name+"</b>"+"<br>"+"<b>"+'Status: '+"</b>"+_asset.status
markersGroup.addLayer( marker.bindPopup(content)
.on('mouseover', function (e) {
self.siMapRam.setActive(_asset);
self.$rootScope.$broadcast('ActiveAssetChange');
marker.openPopup()
})
.on('click', function (e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly selected asset to query
self.$rootScope.$broadcast('ActiveAssetChange');
self.dgModal.display();
}));
};
});
return markersGroup
}

Highcharts: Drag Point Over Another Point Invokes Click Event

I have two series of points on a Highcharts scatter plot. One of the series is draggable. The other has a click event:
events: {
click: function(e) {
if (e.point.v != 0) {
if (e.point.options.p != 0) {
location.href = 'newPage.php?pID=' + e.point.options.p;
}
}
}
},
When I drag a point from the first series and leave it (mouse-up) over a point from the second series, the click event fires and the page is redirected.
I don't want that click event to occur when dragging a point over it.

You can try using the custom events plugin for this, so that for the second series the event is 'mousedown' and not click. That should solve the problem.
plotOptions: {
series: {
point: {
events: {
mousedown: function () {
alert(this.y);
}
}
}
}
}
A working example.
NOTE: You need to be running the latest version of Highcharts for this to work, which 3.0.7

Event handling for PanZoom.js not firing

Using PanZoom JS, I am trying to handle a simple click event for any SVG that was clicked. According to docs, it should be as simple as this:
$panzoom.on('panzoomend', function(e, panzoom, matrix, changed) {
if (changed) {
// deal with drags or touch moves
} else {
// deal with clicks or taps
}
});
This never fires and it never hits the if test.

First you have to create the $panzoom variable and call the panzoom.
You can enter something like this
var $panzoom = $('.panzoom').panzoom({
contain: 'invert',
minScale: 0.5,
increment: 0.5,
});
after you can enter your code
$panzoom.on('panzoomend', function(e, panzoom, matrix, changed) {
if (changed) {
// deal with drags or touch moves
alert("changed");
} else {
// deal with clicks or taps
alert("not changed");
}
});

How to add only one marker in leaflet map

I am adding marker on map on user click.
Problem is that I want only one marker but now whenever I click on map new marker is added.
I am trying to remove it but nothing happens:
var marker;
map.on('click', function (e) {
map.removeLayer(marker)
marker = new L.Marker(e.latlng, { draggable: true });
marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);
marker.on('dragend', markerDrag);
});

Instead of using .on to capture and handle the event, you could use .once. That way the event will be only captured once and the handler will unbind itself after that.
map.on('click', function () {
console.log('I fire every click');
});
map.once('click', function () {
console.log('I fire only once');
});
If you're ever need to unbind a handler yourself you can use .off. Check the reference for event methods: http://leafletjs.com/reference.html#events
As to why your code above isn't working, on first click you're trying remove the marker: map.removeLayer(marker), but the variable marker doesn't contain a L.Marker instance so the map is unable to remove it. You should check if it's defined first and only then remove it:
var marker;
map.on('click', function (e) {
if (marker) { // check
map.removeLayer(marker); // remove
}
marker = new L.Marker(e.latlng); // set
});
Here's a working example on Plunker: http://plnkr.co/edit/iEcivecU7HGajQqDWzVH?p=preview

Use .off() to unbind the on click event.
It should be something like:
var marker;
map.on('click', mapClicked);
function mapClicked(e) {
map.off('click', mapClicked);
map.removeLayer(marker)
marker = new L.Marker(e.latlng, { draggable: true });
marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);
marker.on('dragend', markerDrag);
}
I didn't test it but it should at least put you in the right direction.

Map click blocks document click

$(document).on('click', '.entity', function (e) {
...
})
I'm using the above to handle clicking of any "entity" anywhere on my site. It works great everywhere except on maps. I'm creating custom overlays that are each an element with the entity class. This is confirmed in the DOM. All CSS I apply works, however the click event does not seem to propagate up to the document level. I put the alert in for testing, and it does fire. With the click function blank, nothing happens. How can I keep it from blocking?
mymap.gmap3({
map:{
options:{
...
}
},
overlay:{
values: [
...
],
events:{
click: function () {
alert('clicked map entity');
},
...

Checked the following plugin:
/*!
* GMAP3 Plugin for JQuery
* Version : 5.1.1
* Date : 2013-05-25
Line 343: there is function OverlayView(map, opts, latLng, $div) with the following code:
...
this.onAdd = function() {
var panes = this.getPanes();
if (opts.pane in panes) {
$(panes[opts.pane]).append($div);
}
$.each("dblclick click mouseover mousemove mouseout mouseup mousedown".split(" "), function(i, name){
listeners.push(
google.maps.event.addDomListener($div[0], name, function(e) {
$.Event(e).stopPropagation();
google.maps.event.trigger(that, name, [e]);
that.draw();
})
);
});
listeners.push(
google.maps.event.addDomListener($div[0], "contextmenu", function(e) {
$.Event(e).stopPropagation();
google.maps.event.trigger(that, "rightclick", [e]);
that.draw();
})
);
}; ...
which calls $.Event(e).stopPropagation(); for click and some other events. That obviously stops propagation of events.
Commenting those two lines could resolve this specific issue. But, question is what are the possible consequences.