What events can be used in Here Maps JS? - here-api

I look for documentation for here maps js, which is poor, but I can't find any pieces of information which events can be used for which "object".
I faced two problems when I want to add an events listeners on DomIcon and others on cluster provider (H.clustering.Provider).
There are events which I used (element can be H.map.DomIcon or H.clustering.Provider):
element.addEventListener('pointermove', this.invokeEvent); <-- working for cluster Provider
element.addEventListener('pointerdown', this.invokeEvent);
element.addEventListener('mousedown', this.invokeEvent);
element.addEventListener('touchstart', this.invokeEvent);
element.addEventListener('mouseup', this.invokeEvent);
element.addEventListener('touchend', this.invokeEvent);
element.addEventListener('pointerup', this.invokeEvent);
element.addEventListener('mouseenter', this.invokeEvent);
element.addEventListener('touchenter', this.invokeEvent);
element.addEventListener('pointerenter', this.invokeEvent);
element.addEventListener('mouseleave', this.invokeEvent);
element.addEventListener('touchleave', this.invokeEvent);
element.addEventListener('pointerleave', this.invokeEvent);
element.addEventListener('pointercancel', this.invokeEvent);
element.addEventListener('touchcancel', this.invokeEvent);
element.addEventListener('mouseover', this.invokeEvent); <-- working for dom icon
element.addEventListener('mouseout', this.invokeEvent); <-- working for dom icon
element.addEventListener('tap', this.invokeEvent); <-- working for dom icon and cluster provider
I don't know where to look for docs or probably I'm doing something wrong? The most important for me is to find event which listen to mouseover and mouseout for H.clustering.Provider

Read please documentation for map object events :
MapEvents enables the events functionality on the map and on map
objects. The class makes it possible to listen to events on map
objects such as markers, polylines, polygons, circles and on the map
object itself. Events are triggered by user interaction, for example
clicking or tapping on the map. Please check the Events Summary
section for the list of events fired by this class and by the map
objects.
The events what you looking for are pointerenter and pointerleave
Example:
// prerequisites: mapInstance and marker is initialized
mapInstance.addObject(marker);
var mapevts = new H.mapevents.MapEvents(mapInstance);
// add listener to map
mapInstance.addEventListener('pointermove', function(e) {...});
// add listener to the marker
marker.addEventListener('pointerenter', function(e) {...});
marker.addEventListener('pointerleave', function(e) {...});
Please add listener to Marker, DomMarker and etc., don't to Icon or DomIcon. Sometimes is useful to add map objects to some H.map.Goup and after that add listener only for this Group once then it should work for all map objects in this group.
You are right it is possible to add the same events listeners also to objects that based on H.map.provider e.g. cluster Provider, but it seems this possibility was not documented yet.

Related

Prevent listener from being added if it already exists

I want to prevent my GMaps object from adding unneeded listeners.
var map = new google.maps.Map(mapWrapperElem, mapOptions);
map.addListener("click",function(event){
// Do stuff
});
How do I prevent map from adding a "click" listener if there's already a "click" listener on it?
This cannot be achieved. There is not way to detect if there is an event listener added or not.
There is a rather complex method of doing it:
See: https://stackoverflow.com/a/47414605/7138697

How to access page fragment custom properties programmatically?

How do I access page fragment's custom properties within an event handler of one of its widget? For example, I'm trying to access them in an OnLoad event of the page fragment itself like this:
function SumBoxOnDataLoad (widget) {
widget.descendants.TextBox.value = Currencies [widget.properties.currency]+widget.properties.value;
}
...and widget.properties is undefined. According to the API, even if I use widget.root, which points to the same page fragment, there's nothing there resembling properties to work with.
It depends on what you are trying to do. Basically, there are two major use cases:
Workaround lack of global bindable variables in App Maker. Page Fragment itself (not an instance of Page Fragment on particular page) has its own properties, that can be used globally across the app. This hack/feature is used in Starter App template to track menu state on app level.
...
var x = app.pageFragments.MyPageFragment.properties.MyCustomProperty;
...
Use properties of particular Page Fragment instance:
// access from current page:
var x = app.currentPage.descendants.MyPageFragmentInstance.properties.MyCustomProperty;
// ...or
var x = app.pages.MyPage.descendants.MyPageFragmentInstance.properties.MyCustomProperty;
// access in page fragment instance's event (onAttach for example)
var x = widget.parent.properties.MyCustomProperty;
// access in page fragment instance descendant's event
var x = widget.root.parent.properties.MyCustomProperty;
Further reading:
Page Fragment Custom Properties

click event listener on styled map icons and labels

Is it possible to add a listener for the click event on the icons and/or labels that appear for styled maps? I have a form that allows entry of Points of Interest. Since the poi styling shows icons and/or labels for many potential candidates, and clicking on one opens an infowindow with address info, etc, I would like to capture this address info to the fields on my form if the user clicks on one.
There is no API-based access to the POI's .
But there is a possible workaround.
When you click on a POI an InfoWindow opens. It's possible to modify the InfoWindow-prototype to be able to access the content of the InfoWindow without having a reference to the InfoWindow-instance.
//store the original setContent-function
var fx = google.maps.InfoWindow.prototype.setContent;
//override the built-in setContent-method
google.maps.InfoWindow.prototype.setContent = function (content) {
//when argument is a node
if (content.querySelector) {
//search for the address
var addr = content.querySelector('.gm-basicinfo .gm-addr');
if (addr) {
alert(addr.textContent);
//leave the function here
//when you don't want the InfoWindow to appear
}
}
//run the original setContent-method
fx.apply(this, arguments);
};
Demo: http://jsfiddle.net/doktormolle/Vkf43/
Note: The selectors for the infowindow are not documented, they may change in the future
I realize this is an old Q, but this was recently fixed in Maps API. You can now listen for click events on map icons.
Starting with version 3.26 you should listen to the "click" event on the Map object. If the user clicks on a POI, a IconMouseEvent is raised. This class extends the Regular MouseEvent and contains a property called placeId. So you can check if the event object has defined placeId. The placeId field contains of course a Place Id, that you can use with Places API to get more info on the icon that was clicked. Calling stop() on the event itself will prevent Maps API from showing the default info window.
I prepared a small demo which demonstrates how to capture the click event and display your own info window.
http://jsbin.com/parapex/edit?html,output

Sencha Touch 2.3 mapListeners example

Sencha Touch 2.3.0 introduced with native google maps events listeners via mapListeners option. I need some example of attaching click event to the marker (via this particular option, I know how to do it via google maps api).
Thank you.
IMHO, you cannot attach event listener to the marker via mapListeners.
Line 287 of the touch-2.3.0/src/Map.js is:
handle = event.addListener(map, eventType, Ext.bind(callbackFn, callbackFn));
Where:
event is gm.event (google.maps.event), line 263;
map is this.getMap() (the map object itself), line 258;
eventType is one of the keys of mapListeners object, line 267;
callbackFn is your callback, line 278
Thus, mapListeners are limited to the listeners of the map:
bounds_changed
center_changed
click (fired when the user clicks on the map, but not when they click on a marker or infowindow)
dblclick
drag
dragend
dragstart
heading_changed
idle
maptypeid_changed
mousemove
mouseout
mouseover
projection_changed
resize
rightclick
tilesloaded
tilt_changed
zoom_changed

MarkerClustererPlus: Event when marker is shown / hidden in cluster?

When using MarkerClustererPlus - I would like to hang some code on an event that is triggered when a marker that is in a cluster is shown / hidden by the markerClusterer.
MC+ Doco doesn't seem to indicate such an event.
Looking at the MC+ code it appears that the clusterer uses marker.setMap() and markers don't have a "map_changed" event.
I could add code to the clusterer to trigger an event whenever a marker.setMap is invoked but I'd rather not alter code that works so well - don't want to create a configuration management problem whenever markerClustererPlus is updated.
Any suggestions?
Shortly after posting the question, I discovered that I could hang an event on marker, 'map_changed'.
google.maps.event.addListener(myMarker, 'map_changed',
function() { do stuff });
I think this is an MVC state change event rather than an explicit marker event (i.e. it isn't defined as a marker event in the documentation).
(see Google event doco here) and Google marker event doco here
The only remaining question is - it would be nice to verify that this is an MVC state change event rather than an undocumented / unsupported marker event that could break or disappear - How can I do that?

Resources