We Keep Coding

React: Adding click listener to Neovis.js

I am using this React Neovis component to connect to Neo4j, to create a graph which works. However I need to add a click listener to each element on the graph so that I can show 2nd level information related to a particular node (or an item) in the graph. Is there a way to add a Click event/listener to NeoVis in Javascript?
For the code, please use the example in this documentation.

react-leaflet: Using a Component as a popup on a GeoJSON feature

My current use case is that I want to load in GeoJSON data, and render the points as markers on the map. This works fine.
My next step is to add a feature which displays a popup when the marker is clicked; this popup will include buttons which the user can press to call functions, which are passed to the component by the parent component. As such, the popup needs to be interactive.
Sadly, the only means of attaching a popup to a GeoJSON marker is to use the onEachFeature function, and binding the rendered HTML of the popup, like so:
const popupNode = <MapPopup marker={marker} closePopup={closePopup} />;
const popupText = ReactDOMServer.renderToString(popupNode);
marker.bindPopup(popupText);
Using renderToString means that the rendered popup is not interactive, and thus buttons and onClick listeners cannot be used and functions cannot be called.
The only other means I can think of is to render the popup completely independently of the map; intercept the popup event, get the associated marker, and render a component at the appropriate screen position, realigning it as the user drags the map around. This would be reinventing the wheel by completely abandoning Leaflet's existing popup code, and as such would be a massive pain.
However, I see no other means to bind a popup. Other solutions use the <Popup> component, but this requires using the <FeatureGroup> component which would mean abandoning the <GeoJSON> component.

I eventually ended up abandoning the GeoJSON component and using the Popup component.

How to Access Map Object in Angular Template

I have a custom class in Angular4 to manage a map (angular component as well). My class has a template inside which i have ngui-map element (imported from the library below). I have been able to bind to events triggered by this element (such as map move, map click etc.).
The questions is: is it possible to access this map object from my typescript code? I need to access the map's properties inside some button click, but I just cant figure out how.
The only solution I have been able to come up with is to hook up event handler for the map move and keep storing the current map location (which are sent as event args) inside some helper variables and then use those variables, but surely there is another better way?
I am new to angular so sorry if this question is a bit basic or doesnt make any sense. I ve tried googling but I cant seem to word the query correctly to get relevant results.
ngui-map
https://github.com/ng2-ui/map

If you have a component that implements this map, you can use a template variable to call the methods of the component in the template.
For example:
<map-component #map></map-component>
<button type="button" class="btn btn-default" (click)="onClick(map.getCoordinates())></button>
This is assuming your MapComponent has public methods that allow you to get the information you need.

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.

Google Maps JS API 3 - Editable Forms in Custom Overlay

I am using Google Maps API to provide a form in a custom Map Overlay, similar to a native InfoWindow. I used an example by google to create a custom overlay, using their OverlayView Prototype.
Eventually this overlay doesn't have the same behaviour InfoWindow has regarding editing. Interacting with the window results in interaction with the map. One can neither select text in the window nor edit an input-field. Events are delegated to the map.
I already tried to play around with z-index, which won't work.
In their example you can't select text either - therefore you might have a look at their source.

It actually is a question of event propagation. Google provides another less obvious example which solves the problem:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js
---> UPDATE 01/2015
Ian added another example that blocks propagation of all map events in comments.