cannot bind onClick to Marker or his childrens

[ghost]

Is it possible to bind a onClick event to Marker element or to one of his children's? <Marker {...coords} onClick={()=>console.log('test')}><div className='marker-child' onClick={()=>console.log('test')}></div></Marker>

[JuanAtienza]

I have the same issue

[JuanAtienza]

I got it this way:

I set to Marker latitude, longitude and a new parameter "handleClick" what is a function that will retrieve the click event:

handleClick() {
		this.setState({isShowingModal: true})	
	}	
...
render(){		
		return(									
			<Marker lat={this.props.markerCenter.lat} lng ={this.props.markerCenter.lng} handleClick={this.handleClick}  >
			 <div class='circle-marker' />			   
		   </Marker>

After, in the path "yourProject/node_modules/react-here-maps/dist/Marker.js" you have to modify the method "Marker.prototype.addMarkerToMap" adding these lines:

const e = 'tap';
marker.addEventListener(e,this.props.handleClick);
```

'tap' event is like 'onClick' but in HereMaps. I associate this event to the handleClick method that I sent before.
 

This is the full method:

```
Marker.prototype.addMarkerToMap = function () {
        var map = this.context.map;
        var _a = this.props, children = _a.children, bitmap = _a.bitmap, lat = _a.lat, lng = _a.lng;
        var marker;
		
        if (React.Children.count(children) > 0) {
            // if children are provided, we render the provided react
            // code to an html string
			
            var html = ReactDOMServer.renderToStaticMarkup(React.createElement("div", {className: "dom-marker"}, children));
            // we then get a dom icon object from the wrapper method
            var icon = get_dom_marker_icon_1["default"](html);
            // then create a dom marker instance and attach it to the map,
            // provided via context
            marker = new H.map.DomMarker({ lat: lat, lng: lng }, { icon: icon });
			const e = 'tap';
			marker.addEventListener(e,this.props.handleClick);
            map.addObject(marker);
        }
        else if (bitmap) {
            // if we have an image url and no react children, create a
            // regular icon instance
            var icon = get_marker_icon_1["default"](bitmap);
            // then create a normal marker instance and attach it to the map
            marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
            map.addObject(marker);
        }
        else {
            // create a default marker at the provided location
            marker = new H.map.Marker({ lat: lat, lng: lng });
            map.addObject(marker);
        }
		
		
		
        this.marker = marker;
    };

```

The big problem of this is that if you make a build of your npm project the original code will overwrite this solution. 
The source code should be modified to accept a parameter like this.

[ghost]

Hi, thanks for the advice. i forked, modified and published this repo: https://www.npmjs.com/package/cwt-map

i've added 2 props to Marker element: onTap (receive function) and styleClass (receive string of classes that added to 'dom-marker' element, i'm using it to edit the marker z-index).

for example: <Marker lat={ obj.latitude } lng={ obj.longitude } onTap={ () => { do something... } } styleClass={ "class1 class2" }></Marker>

[JuanAtienza]

Hi again

if you are interested I have tried to retrieve a 'mapviewchange' event from a map.

First, I sent to HEREMap.js (yourProject/node_modules/react-here-maps/dist) a function called 'userMove':

userMove(evt){
		if(evt.type==="mapviewchange" && evt.newValue && evt.newValue.position){
			const lat = evt.newValue.position.lat;
			const lng = evt.newValue.position.lng;
			this.props.modifyCenter(lat,lng);
		}
}
...
render() {

		const center = {  lat:this.props.lat,lng:this.props.lng, };
		if(this.props.lat !== 0 && this.props.lng!==0){
				return (
				<HEREMap
					appId={APP_ID}
					appCode={APP_CODE}
					center = {center}
					zoom={ZOOM_MAP}
					hidpi={true}
					userMove={this.userMove}
				>

In the HEREMap.prototype.componentDidMount function I added these lines:

const e = 'mapviewchange';
map.addEventListener(e,_this.props.userMove);

This is the full method code:

HEREMap.prototype.componentDidMount = function () {
        var _this = this;
        cache_1.onAllLoad(function () {
            var _a = _this.props, appId = _a.appId, appCode = _a.appCode, center = _a.center, hidpi = _a.hidpi, interactive = _a.interactive, secure = _a.secure, zoom = _a.zoom;
            // get the platform to base the maps on
            var platform = get_platform_1["default"]({
                app_code: appCode,
                app_id: appId,
                useHTTPS: secure === true
            });
            var defaultLayers = platform.createDefaultLayers({
                ppi: hidpi ? 320 : 72
            });
            var hereMapEl = ReactDOM.findDOMNode(_this);
            var map = new H.Map(hereMapEl.querySelector(".map-container"), defaultLayers.normal.map, {
                center: center,
                pixelRatio: hidpi ? 2 : 1,
                zoom: zoom
            });            
            const e = 'mapviewchange';
            map.addEventListener(e,_this.props.userMove);
            if (interactive !== false) {
                // make the map interactive
                // MapEvents enables the event system
                // Behavior implements default interactions for pan/zoom
                var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
                // create the default UI for the map
                var ui = H.ui.UI.createDefault(map, defaultLayers);
                _this.setState({
                    behavior: behavior,
                    ui: ui
                });
            }
            // make the map resize when the window gets resized
            window.addEventListener("resize", _this.debouncedResizeMap);
            // attach the map object to the component"s state
            _this.setState({ map: map });
        });
    };

I used this for call to back to retrieve data using map position