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.
Related
I am making a chrome extension to edit properties of images that are clicked on. I am using a package called element picker to select the images (this is triggered through an html button in a popup). The code works and I can change the properties of the image. However the package does not stop whatever action is linked to the image, which can often lead to the user being taken to a new page. How can I stop any of the actions of the users click between the time they press the button in the popup and they have selected an image?
Thank you in advance.
var elementPicker = require('element-picker')
function onClick(elt) {
[.....]
}
elementPicker.init({ onClick })
I don't usually recommend using this but CSS pointer-events can solve this problem. The idea is that any element with pointer-events:none will ignore any interactions. This works to block default HTML interactions like <a> or <button> as well as any javascript actions attached to the element.
This is the technique frequently used with a modal window to prevent clicks from going "through" the area around a modal. It should also work for what you described.
You could either set that style on the image element or on All Elements by using the * {styles...} selector. If you go the "all" route, you'll need to explicitly re-enable pointer-events on any elements in your extension interface that you still need actionable by using the 'auto' property.
Remember to reset pointer events when your extension is finished * {pointer-events: initial;} or you'll leave the page completely in-actionable.
If there is an Event object being passes through to the function then you could use the Event.preventDefault() function.
This function stops any default behavior and allows you to handle the event in your own manner.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
I'm creating a mapbox plugin that should update when a layer is added or removed. There are events for style and source adding, but none for layer.
My current solution is to programatically fire custom events after adding or removing layers that are listened inside the plugin, but this of course happens outside the scope of the plugin and it's not an appropriate solution.
What would be the best approach to handle this?
Listen to the styledata events. It gets called any time a layer is added or removed. You might have to keep track of which layers were present beforehand to know if that change specifically has occurred.
I have a project using the Google Maps JS API and I'm loading data onto it using the loadGeoJSON method. I also add a click listener to the map's data object.
In that click listener handler, I extract the mouseEvent which tells me the x,y that the user clicked as well as if they were holding down shift/alt/ctrl. Something changed recently though because I can't detect shift/alt/ctrl any more. They are always false.
Any help would be greatly appreciated. This fiddle should show more clearly what I'm talking about, just click on one of the 'google' letters.
fiddle
I've been reading about custom events and looked at some examples. Perhaps I am misunderstanding what custom events are and how they are triggered and would appreciate some help.
Example Problem
To trigger an event when the background colour of a div changes from one colour to another.
Situation A) The colour changes as result of user activity detectable from within the script, eg by onclick, onmouseover, onkeypress then I would set up a listener for these events and respond accordingly. This I understand how to do.
Situation B) The colour changes as the result of user activity not detectable from within the script, eg a new theme applied to the page, then am I correct in thinking the following are necessary?
I would need to create a custom event for colour change.
Add a listener for the event to the appropriate DIV
The listener would need to poll the DIV at intervals to check for colour changes
Really its step 3 I am not clear about. If you are not polling the DIV how does the event colour change trigger an event? In other words how does the script know that a colour change has taken place?
Custom events are not like DOM events, they don't fire because some interaction happened in the browser. They happen when the person who writes the code decides for them to happen. You have to explicitly trigger custom event when you need one.
For example, you might have function like
function updateBackground (element, color) {
elmenet.css('background-color', color);
// element has to be an object that has `trigger` function on its prototype
// like jQuery wrapped element, for example
element.trigger('updated-background', color);
}
Then every time this code is executed you'll have 'updated-background' fired in context of this element.
UPD.
Using browser options a user can change font size, background colours
etc, ie apply a new theme. As far as I know there are no native events
within javascript to deal with these so I would need to create a
custom event within my script. What I am trying to ask is how to you
find out when a custom event takes place?
You find out because you create them. You are correct (to my knowledge) that there are no DOM events fired when user changes font-size / default body background etc. You could poll for body and fire custom event when you detect a change, as you said.
In JavaScript, a custom event is simply a message, broadcast to all event listeners, that says, "Attention everyone: event X just happened!" Any listener that cares about that event can then run some function.
However, your custom event still needs to be fired somehow. Custom events aren't fired unless, somewhere in your code, you call .dispatchEvent (or .trigger, in jQuery). Your program must decide when it is time to fire the event. If the browser doesn't natively fire an event that you can use as a cue for your own custom event, then often polling is the only way to know when to fire the event.
The bottom line here is events are just messages. It's up to you and the code you write to decide when to fire them.
I have an image map that uses a third party script(mapper.netzgesta.de) to highlight the different areas of the image map. Basically the script adds onmouseover events to the areas via javascript. How can i have the areas already on when the page is loaded as opposed to any user based event?
I already have onload events and cant interfere with those. All the other events depend on user interaction. The cms i am using currently doesnt work with jquery.
any suggestions?
You can try to simulate the mouse over events.
Simulate Mouse Over in Vimperator plugin
You can also append to onload so you don't lose your current event handlers.
window.attachEvent("onload", function(){alert('Welcome')});
After further study and a great amount of help from the developer I was given an answer. The product i was using (mapper.js) does not support this. The reply was use another product of his called mapzoom.js. The preselection will allow the specified areas to stay on when loaded and not be dependent on an user interaction like onmouseover.