I use leaflet.draw plugin to add some shapes to map, but i need to change the information (static text) of the tooltip when the user move the cursor (mousemove) on edit mode or on adding some vertex.
How can i intercept this event, something like
map.on('draw:cursor-move', function (e, latlng, options) {
....
})
Also, I tried to extend the update text function and update position, but i need also the mousemove event, action or shape type and the latlng position.
Related
Is it possible to click on labels in Mapbox and highlight the city like on Google maps?
Example Screenshot
All visible map elements, including labels, in a mapbox-gl map can be clicked.
see https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/
In that example, instead of catching the mousemove event, catch the click event like this:
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point);
document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
});
It is easy enough to get the lat lng of a map click using something like:
map.on('click', function (e) {
coords= e.latlng.lat + ", " + e.latlng.lng;
});
But if there are shapes on the map the function doesn't get called if you click a place covered by a shape.
Ultimately I want to produce a popup window triggered when a shape is clicked and populated with information based on lat/long.
Welcome to SO!
You could bind your event listener on your shapes as well (possibly through an L.FeatureGroup to avoid having to bind to each individual shape), and you can even use that event listener to fire the "click" event on the map as well.
var shapes = L.featureGroup().addTo(map);
shapes.addLayer(/* some vector shape */); // As many times as individual shapes
shapes.on("click", function (event) {
shapecoords.innerHTML = event.latlng.toString();
map.fire("click", event); // Trigger a map click as well.
});
Demo: http://jsfiddle.net/ve2huzxw/40/
How can I add a mouse over pop up on leaflet.js marker . the pop up data will be dynamic.
I have a service which returns a lat & lon positions which will mark on a map.
I would require a popup on mouse over a marker . the event should send the lat and long position for ex to : http://api.openweathermap.org/data/2.5/weather?lat=40&lon=-100
the data from service should be in popup content.
I have tried but cant build the pop up content dynamically each marker
Please do the needful.
below is the code i have used for markers statesdata is array which stores the lat and longitude values
for ( var i=0; i < totalLength1; i++ ) {
var LamMarker = new L.marker([statesData1[i].KK, statesData1[i].LL]).on('contextmenu',function(e) {
onClick(this, i);
}).on('click',function(e) {
onClick1(this, i)
});
marker_a1.push(LamMarker);
map.addLayer(marker_a1[i]);
on click we call click1 function on context of marker we call click function
How can i add a pop on mouse over passing lat and long from the above code?
Attaching a popup to a marker is fairly easy. It is done by calling the bindPopup method of your L.Marker instance. Per default a popup opens on the click event of the L.Marker instance and closes on the click event of your L.Map instance. Now if you want to do something when a popup opens you can listen to the popupopen event of your L.Map instance.
When you want fetch external data in the background on the popupopen event that is usually done via XHR/AJAX. You can write your own logic or use something like jQuery's XHR/AJAX methods like $.getJSON. Once you receive response data you can then update your popup's content.
In code with comments to explain further:
// A new marker
var marker = new L.Marker([40.7127, -74.0059]).addTo(map);
// Bind popup with content
marker.bindPopup('No data yet, please wait...');
// Listen for the popupopen event on the map
map.on('popupopen', function(event){
// Grab the latitude and longitude from the popup
var ll = event.popup.getLatLng();
// Create url to use for getting the data
var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+ll.lat+'&lon='+ll.lng;
// Fetch the data with the created url
$.getJSON(url, function(response){
// Use response data to update the popup's content
event.popup.setContent('Temperature: ' + response.main.temp);
});
});
// Listen for the popupclose event on the map
map.on('popupclose', function(event){
// Restore previous content
event.popup.setContent('No data yet, please wait...');
});
Here's a working example on Plunker: http://plnkr.co/edit/oq7RO5?p=preview
After comments:
If you want to open the popup on hover instead of click you can add this:
marker.on('mouseover', function(event){
marker.openPopup();
});
If you want to close the popup when you stop hovering instead of map click add this:
marker.on('mouseout', function(event){
marker.closePopup();
});
Here's an updated example: http://plnkr.co/edit/wlPV4F?p=preview
I got fed up with fighting with leaflet's built in functionality. The first thing I did was use the alt option to assign a key to the marker:
var myLocation = myMap.addLayer(L.marker(lat,lng],{icon: icon,alt: myKey}))
The next thing was assign an id using this alt and a title via jQuery (why you can't do that by default irritates me):
$('img[alt='+myKey+']').attr('id','marker_'+myKey).attr('title',sRolloverContent)
Then, I used jQuery tooltip (html will only render this way):
$('#marker_'+myKey).tooltip({
content: sRolloverContent
})
Also, by using the jQuery tooltip instead of the click-only bindPopup, I am able to fire the tooltip from my list, where the row has a matching key id:
$('.search-result-list').live('mouseover',function(){
$('#marker_'+$(this).attr('id')).tooltip('open')
})
$('.search-result-list').live('mouseout',function(){
$('#marker_'+$(this).attr('id')).tooltip('close')
})
By adding the id, I can easily use jQuery to do whatever I want, like highlight a list of locations when the marker is hovered:
$('#marker_'+iFireRescue_id).on('mouseover',function(){
('tr#'+getIndex($(this).attr('id'))).removeClass('alt').removeClass('alt-not').addClass('highlight')
})
$('#marker_'+myKey).on('mouseout',function(){
$('tr#'+getIndex($(this).attr('id'))).removeClass('highlight')
$('#search-results-table tbody tr:odd').addClass('alt')
$('#search-results-table tbody tr:even').addClass('alt-not')
})
Is there any way to determine whether an event was triggered programmatically or by a user?
We want to reload marker listings when the map moves or zooms, but we are initially setting the bounds of the map with setBounds() (http://leafletjs.com/reference.html#rectangle-setbounds) which is also triggering the moveend (http://leafletjs.com/reference.html#map-moveend) and zoomend (http://leafletjs.com/reference.html#map-zoomend) events which is causing the markers to reload twice.
There seems to be a (undocumented) property on the event object called hard that gets set when the map is moved by setBounds and doesn't get set when the user drags the map or uses the cursors:
map.on('moveend', function (e) {
if (e.hard) {
// moved by bounds
} else {
// moved by drag/keyboard
}
});
Testcase here on Plunker: http://plnkr.co/edit/SloKuB?p=preview
As another option you could bind to event after you've set the bounds so it won't fire when you set the bounds and when you do want to set the bounds afterwards you could first unbind using .off and rebind again after setting with .on. Something like (untested/hacky):
function moveEndHandler () {
....
}
map.on('moveend', moveEndHandler);
function mySetBounds (bounds) {
map.off('moveEnd', moveEndHandler);
map.setBounds(bounds);
map.on('moveend', moveEndHandler);
}
i'm developing a web application with bing map. I used this method to change the waypoint pushpin icon:
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('itineraryDiv'),
waypointPushpinOptions: {
icon: "/images/citta-nascosta/blue-pushpin.png",
height:29,
width:25,
draggable:false,
textOffset:new Microsoft.Maps.Point(-1,3)
}
});
Then i render the map with:
directionsManager.calculateDirections();
In the site i see the pushpin with my custom icons, but i also want to change the icon in hover (actually i see the hover standard icon, the blue flag).
Someone know how to set a custom hover waypoint pushpin icon? Or prevent the mousehover event?
Try using hoverIcon inside waypointPushPinOptions like so:
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('itineraryDiv'),
waypointPushpinOptions: {
icon: "/images/citta-nascosta/blue-pushpin.png",
hoverIcon: "/images/citta-nascosta/blue-pushpin-hover.png",
height:29,
width:25,
draggable:false,
textOffset:new Microsoft.Maps.Point(-1,3)
}
});
This property is undocumented. If Microsoft wants to get their map API adopted more, they should really get their act together instead of paying companies to use it. Very sloppy!
You can set the typeName property on the options object when creating the pushpin. This gets set as a the class name of the containing the pushpin.
Example - if you set typeName to 'waypoint', then in your css you could have:
div.waypoint {
/* normal settings */
}
div.waypoint:hover {
/* hover settings */
}
Alternatively you could subscribe to the mouse events on the pushpin and in response change the typeName property on the pushpin and have different css rules apply (if the :hover pseudo class doesn't work)
Hope that helps.