I want to highlight L.divIcon svg markers on mouseover and/or from an "outside action" like pressing a button.
here is a simplified testcase https://jsfiddle.net/sxvLykkt/5/
Markers are generated dynamically (geoJson originally) and added to a L.FeatureGroup().
On mouseover I set a bigger version of the icon (divIconActive) on a temporary layer, that I remove on mouseout. Unfortunately this doesn't work as indented (it's flickering on mouseover, the event is firing mouseover and mouseout I believe). How can I solve this.
And how can I access the markers when clicking one of the buttons? Somehow over their index I believe?! I can't wrap my head around.
Here is a portion of the code how the markers are created:
// init map and tileLayer -> jsfiddle
var coords = [[53, 13],[49, 10],[46, 12],[51, 16]];
$.each(coords, function(i,e){
// create the button
$('#controls').append('<button>'+i+'</button>')
var marker = L.marker(e, {
icon: divIcon,
id: i
});
locationLayer.addLayer(marker);
marker.on('mouseover', function(e){
markerTemp = L.marker(e.latlng, {
icon: divIconActive
}).addTo(map);
});
marker.on('mouseout', function(e){
markerTemp.remove();
});
});
locationLayer.addTo(map);
$('button').on('click', function(e){
alert('Highlight the right marker!')
});
First, to fix out marker problem, replace this code
marker.on('mouseover', function(e){
markerTemp = L.marker(e.latlng, {
icon: divIconActive
}).addTo(map);
});
marker.on('mouseout', function(e){
markerTemp.remove();
});
for this other
marker.on('mouseover', function(e){
// place the hover State on a temp Layer
markerTemp = L.marker(e.latlng, {
icon: divIconActive
}).addTo(map);
markerTemp.on('mouseout', function(e){
markerTemp.remove();
});
});
Thus, the marker will be deleted when the mouse out the Big marker.
Then, one way to personalize the buttons click is:
Add one ID to the buttons when you create them:
$('#controls').append('<button id="button'+i+'">'+i+'</button>');
And later, after creating marker add the code for its button:
var marker = L.marker(e, {
icon: divIcon,
id: i
});
locationLayer.addLayer(marker);
//the button for this marker
$('#button'+i).on('click', function(e){
alert(i);
//Here you enter what you want to do
});
Related
Once i load the Bing map with multiple pushpin with infobox. I have added click Here anchor tag on HTML with specific pushpin index to display infobox on javascript click event. Somehow it's not working for me.
I do see Invoke event is being supported in v8
Here is the fiddle https://jsfiddle.net/pakpatel/9dc4oxfk/2/
var map, infobox;
map = new Microsoft.Maps.Map('#myMap', {
credentials: ''
});
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Create random locations in the map bounds.
var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());
for (var i = 0; i < randomLocations.length; i++) {
var pin = new Microsoft.Maps.Pushpin(randomLocations[i]);
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin ' + i,
description: 'Discription for pin' + i
};
//Add a click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
//Add pushpin to the map.
map.entities.push(pin);
}
function pushpinClicked(e) {
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
function showInfoboxByKey(Key) {
//Look up the pushpin by gridKey.
var selectedPin = map.entities.get(gridKey);
//Show an infobox for the cluster or pushpin.
Microsoft.Maps.Events.invoke(selectedPin, "click");
}
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
<a href='javascript:void(0);' onclick='showInfoboxByKey(3);'> Click Here </a>
The issue is you haven't passed in any event arguments when you invoked the event. As such the event handler doesn't get past your if statement and thus doesn't do anything. See the documentation here and you will notice that you need to provide the event arguments: https://msdn.microsoft.com/en-us/library/mt750279.aspx
That said, I'm not a fan of the approach being taken in your app here. If you simply want to get this working quick an easy, replace your invoke line of code with this:
pushpinClicked({e:{target: selectedPin }});
I highly recommend adding your pushpins to a layer and adding your click event to the layer. This greatly reduces the complexity of the event system and has a small performance boast.
I have a single marker with popup and an "onclick" function that changes the color.
Is it possible to change the color when I close the popup/click for the second time on the marker and return to the initial color of the marker?
Is there a clickoff function?
var testmarker = L.marker([53.9, 14.24], {
icon: L.mapbox.marker.icon({
'marker-color': '#9c89cc'
})
})
.bindPopup(test1)
.addTo(map);
testmarker.on('click', function() {
this.setIcon(
L.mapbox.marker.icon({
'marker-color': '#FF99FF'
})
);
});
You can add an event listener to the marker:
google.maps.event.addListener(marker,'click',function() {
// do stuff
});
and check whether the infowindow is open or not. If it is not open, you open it and change the colour of the marker and if it is open, you close it and change the colour of the marker to the initial colour.
I want to add a bootstrap tooltip to google map marker.
I cannot add HTML 5 atributes to it. So i tried to find the ID or class of the marker and adding the tooltip via javascript.
But, when I try to inspect the marker element using chrome tools the right click does not work inside the map canvas.
How should I go forward with it? Can I assign a custom ID to my google map marker.?? Or any other possible way?
My Code:
google.maps.event.addListener(map, 'click', function (event) {
if (POIMarker) {
POIMarker.setMap(null);
}
POIMarker = new google.maps.Marker({
position: event.latLng,
title: 'Double-Click me to feed information about this place',
icon: 'Images/POIMarker.png'
});
POIMarker.setMap(map);
google.maps.event.clearListeners(POIMarker, 'dblclick');
google.maps.event.addListener(POIMarker, 'dblclick', function (event) {
$('#POIModal').modal('show');
});
});
Here's a really hacked way of doing it, which tracks the mouse position and then positions a Bootstrap tooltip where the mouse is when the google map event is triggered. You could modify it to show the modal instead of a tooltip or use the click event instead of mouseover/out, as needed.
See http://jsfiddle.net/6o33fx6L/
var mouse = {
x: 0,
y: 0
};
document.addEventListener('mousemove', function (e) {
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY
}, false);
google.maps.event.addListener(marker, 'mouseover', function (event) {
$("#tt").css("left", mouse.x + "px").css("top", (mouse.y - 20) + "px").tooltip('show');
});
google.maps.event.addListener(marker, 'mouseout', function (event) {
$("#tt").tooltip('hide');
});
This version swaps in the marker's title for the tooltip:
http://jsfiddle.net/6o33fx6L/1/
You can asign more fields to the marker with this little snippet
marker.set("id", YOURVALUE);
I'd place this code in your function where you create your markers, because it will be called most likely within a for loop. So maybe you could just do something like
for(i = 0; i < markers.length; ++i)
{
// create marker
marker.set("id", i);
//set marker to map
}
Access is easy, just do
marker.get('id');
This should do what you need do clearly identify certain markers
I want to know how I can position the infobox for the Google markers, not over the pin but something similar to this website. Here, when you hover over group of markers the infobox is shown at the same point thus the mouseout event is not triggered because the mouse is still over the group of markers.
I want to know how I can achieve something similar with the post I did yesterday. So to wrap up the post, is there any styling code which I can apply so I can show the infobox right over the marker?
It is set at 140px in right by default, so set the values for x and y respectively and the box will appear there everytime.
offset values you can arrange yourself.
try this code..
var infowindows = []; //make it global
var popup = new InfoBox({
// size: new google.maps.Size(420,130),
content:content_info
,pixelOffset: new google.maps.Size(10, -100) //these are the offset values to be adjusted accordingly..
,disableAutoPan: false
,closeBoxMargin: "5px 5px 2px 2px"
,boxStyle: {opacity: 0.95
}
});
infowindows.push(popup);
google.maps.event.addListener(marker, 'mouseover', function() {
close_popups();
map.panTo(mycenter1);
popup.open(map, marker);
// currentPopup = null;
});
function close_popups(){
for(var i = 0; i<infowindows.length; i++){
infowindows[i].close();
}
}
You can use the alignBottom and pixelOffset properties of InfoBox to achieve what you want. I created a fiddle which admittedly looks terrible, but I think it can get you on the right track in terms of the implementation. You can polish it to your liking after you get it working :) FIDDLE
Basically, you specify the options like:
var ibOptions = {
content: 'your content',
pixelOffset: new google.maps.Size(-5, -15),
alignBottom: true
};
You can adjust the pixelOffset to your liking, so the content shows over the marker and the mouseout is not triggered.
Then you do this to bind to the mouseover event (which you probably already know):
google.maps.event.addListener(marker, "mouseover", function (e) {
ib.open(map, this);
});
for a small project I am working on, I need to be able to place a marker on a leaflet.js powered image-map and update the position of this marker, if it gets dragged. I use the following code to try this, but it fails.
I get the error 'marker not defined'. I don't know why it's not working - maybe you guys could help me out? ;)
function onMapClick(e) {
gib_uni();
marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'};
map.addLayer(marker);
};
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
alert(position);
marker.setLatLng([position],{id:uni,draggable:'true'}).bindPopup(position).update();
});
In the code snippet above, marker is not defined at the time the event handler is added. Try the following where the dragend listener is added immediately following the creation of the Marker:
function onMapClick(e) {
gib_uni();
marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'});
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
console.log(position);
marker.setLatLng(position,{id:uni,draggable:'true'}).bindPopup(position).update();
});
map.addLayer(marker);
};
You were also missing a bracket at the end of your new L.Marker() line.
You also put position into an array in the call to setLatLng but it is already a LatLng object.