onEachFeature not working in leaflet - javascript

I am making a map in which I am showing details of the feature on click event. The event is working fine. I am also highlighting the feature on another click event. For this I am adding an extra layer of the feature that has been clicked on the map and I am providing a button to deselect that feature so that the extra layer is removed from the map.
The problem here is that when I click on the deselect button the property of the first click event is lost i.e. onEachFeature function does not called.
I don't have idea why is this happening?

Related

Javascript EventListener trigger click event if clicked on area where no other event is triggered?

Suppose I have a webpage with some areas which are triggering events on mouse ckick like opening subpages while click into the menu area or opening images/galeries while clicking into the content area etc.
But there are some areas within the page where no other event are triggered - and I want to create an EventListener that triggers only if clicked into an area where no other event is triggered, in this case to close an overlay sidebar div.
Is this even possible?
Yes, this is possible. What I understand from your question is you would like to add eventlistener to an area where there is no eventlistener exist. Simple select the area using ID or tag elements and add eventlistener click to it and add your desired operation inside the function. If you don't get my point feel free to share your code link. We will guide you further. Thank you.

Click event on Google Maps API Autocomplete's pac-container divs

I am trying to stop propagation of the click event into Google Maps API Autocomplete's dynamically created pac-container divs with no luck. A similar question has already been asked but the answer doesn't work well for me.
google places api autocomplete - adding click event
The solution from that question says that the click event is cancelled by Autocomplete, and to use the mousedown event instead. That technically worked for me but required me to change the event of document from click to mousedown which is a sacrifice I don't want to make.
I've looked into google maps api events and Autocomplete only emits the 'place_changed' event so no help there. My code to stop propagation on the pac-container divs below.
var pacContainers = document.getElementsByClassName("pac-container");
angular.forEach(pacContainers, function(value, key) {
// the click event is cancelled by the Autocomplete instance
angular.element(value).on('click', function($event) {
$event.stopPropagation();
});
});
Since you're using Angular, you can create a directive named pacContainer, and run the code inside your forEach for the element either in the link or controller, and it will bind the click event handler with stopPropagation on any pac-container element as it's created.
A similar problem has been solved before without using intervals or timeouts, and instead using ng-focus to signify the element is ready.
See https://github.com/driftyco/ionic/issues/1798#issuecomment-95943955
The pac-container will be ready by the time it receives focus, and that's when you know you can attach the click handler.

Google Maps (JavaScript API) and Tablet Touch Events

I use the following code (I quote parts of it) to post markers on a google map by right click to a point.
google.maps.event.addListener(map, 'rightclick', function(event) {
// code for open bubble for new marker
});
I need to open the bubble, also when someone do a long press tap on his tablet. Basically I need to make the application usable also for tablet/mobile users.
I read about jQuery plugins that handle touch events, but I don't know how to use them. I need a simple solution based on the code above (to run the "//code" which open the bubble.
Well, you can use the tabHold function on jQuery, with the click event in Google Maps JS API v2.
The taphold function in jQuery, can get the tab and hold action on tablet. But it does not return a lat lng to us.
For lat lng, we can grab it from the Google Maps Onclick function.
So we can combine the two like the following:
1. let tabhold set a flag, to indicate that this click function is from tabhold
2. on the onclick function, check if this current click event is from tabhold, if so, perform the action.
I have a quick demo on jsfiddle, I just copied and pasted some code so it looks kind of ugly. But hopefully it helps.

Is it possible to capture events of internally created bing maps entities?

I am using the Bing Maps AJAX Control 7.0
I would like to add a custom event handler to the pushpins that are part of a driving route.
I know how to add custom events to map entities I have created myself and have a reference to. But the entities that make up a driving route are created internally and automatically added to the map. Is there a way I can attach and event handler either before or after they are added to the map?
Specifically I would like to add a custom onmouseover event to the waypoint pushpins that are on the driving route so that a custom icon is displayed when hovered over. I have read a suggestion to add a css class with pseudo :hover selector to the pushpins through the typeName property in the PushpinOptions but this does not work. The AJAX control itself uses the javascript event to change the icon image on mouse over, so setting the background css property on :hover never works, it gets covered up by the default hover icon.
I need to add a custom onmouseover event to the driving waypoint pushpins so that I can display a custom icon and disable the default behaviour. How do I do this? Thanks.
The only solution I can think of is to examine the HTML output of the drive route pushpins and hack their event bubbling. I examined the HTML of the drive route pushpins, and with V7 ajax api their id all seem to start with the prefix DDWaypointPushpin. So the hacky solution will be to find these pushpins in the DOM and override the default event handlers on them somehow. For example, if you wanted to prevent the default behavior of the mouseover event on the pushpins, you can match the id string using jquery and bind to the mouseover event, and prevent it from bubbling up.
$("div[id*='DDWaypointPushpin']").bind('mouseover', function (e) {
//$(this) will match your pushpin div, do whatever you want with it
// Stop the event from bubbling up, so the default MS mouseover behavior is prevented
e.stopPropagation();
});
If you want to display a custom icon, in your mouseover handler look for the <img> element under $(this), and change its src attribute to whatever you like.
I have discovered that there is an undocumented property of the PushpinOptions object - hoverIcon
I added some code to the directionsUpdated event of the DirectionsManager object that iterated through the entities on the map. I looked at the Waypoint entities and saw they have both _icon and _hoverIcon internal properties. As there is an icon property in the PushpinOptions I checked to see if a hoverIcon property could be used as well, and it can!
As far as I know the hoverIcon property is not documented. But this is a much easier way and probably the proper way to add a custom hover image to a pushpin.
It would help if this was reported to Micorsoft so they can update their documentation. I have never reported a documentation error to Microsoft before so if you know the best way to do this please let me know.

Is there a way to simulate an event in google maps?

I have added a click listener to all my Markers in google maps. I have added all these Markers to a MarkerCluster. I have added a click listener to this MarkerCluster. When I click on a Cluster, by default it zooms in to that area. Instead of that behavior, how do I simulate that I clicked on all the Markers inside the Cluster at the same time?
How do I simulate a click event without it happening?
If I understand correctly, you can use
trigger(instance:Object, eventName:string, var_args:*) in the google.maps.event namespace to tigger events.
see the reference: https://developers.google.com/maps/documentation/javascript/reference#event
If you want to trigger a set of overlays at the same time, just write a loop(well, not at the same time, strictly speaking).

Categories