Source: components/userComponents/maps/MapOfMonitoredAreasConfiguration.js

import React from "react";
import {SimpleHereMap} from './SimpleHereMap';
import MonitoredAreaMarkerPopUp from "./MonitoredAreaMarkerPopUp";
import ReactDOMServer from "react-dom/server";

/**
 * Map of Monitored Areas overview.
 * @extends Component
 * @hideconstructor
 */
export class MapOfMonitoredAreasConfiguration extends React.Component {

    /**
   * @constructs
   * @param props
   */
    constructor(props) {
        super(props);
        /* Initialize React ref to map */
        this.hereMap = React.createRef();
    }

    /**
     *
     */
    transformData(monitoredAreas) {
        return monitoredAreas && monitoredAreas.length > 0 ? monitoredAreas.map(monitoredArea => {
            let marker = new window.H.map.Marker({
                lat: monitoredArea.deviceLatitude,
                lng: monitoredArea.deviceLongitude
            });
            // add custom data to the marker
            marker.setData(monitoredArea);
            return marker;
        }) : [];
    }

    /**
     *
     */
    componentDidMount() {
        //this.hereMap.current.addEventListenerToMap('pointerdown', this.onMapClick);
        //this.hereMap.current.addObjectsToMap(this.transformData([]));
        this.setUpBubblesForMarkers(this.hereMap.current, this.transformData(this.props.data));
    }

    /**
     *
     */
    componentDidUpdate() {
        this.setUpBubblesForMarkers(this.hereMap.current, this.transformData(this.props.data));
    }

    /**
     *
     */
    setUpBubblesForMarkers = (map, markers) => {
        var group = new window.H.map.Group();

        map.addObjectToMap(group);
        // add 'tap' event listener, that opens info bubble, to the group
        group.addEventListener('tap', this.handleEvent);
        group.addObjects(markers);
    };

    /**
     * Handle Click on MA marker event
     */
    handleEvent = (evt) => {
        // event target is the marker itself, group is a parent event target
        // for all objects that it contains
        var bubble = new window.H.ui.InfoBubble(evt.target.getPosition(), {
            // read custom data
            content: ReactDOMServer.renderToStaticMarkup(<MonitoredAreaMarkerPopUp
                name={evt.target.getData().name}
                id={evt.target.getData().id}
            />)
        });
        // show info bubble
        this.hereMap.current.addBubbleToUi(bubble);
    };

    /**
     *
     */
    render() {
        return (
            <div className="box-body">
                {/*SimpleHereMap must have ref attribute!*/}
                <SimpleHereMap width="100%" height="500px" ref={this.hereMap}/>
            </div>
        )
    }
}