Source: components/userComponents/maps/SimpleHereMap.js

import React from 'react';
import PropTypes from 'prop-types';
import { handleErrors } from '../../restmodules/RestModuleAPI';
import i18n from '../../../i18n';

/**
 * Simple here map API
 * @extends Component
 * @hideconstructor
 */
export class SimpleHereMap extends React.Component {
  /**
   *
   * @type {{lat: number, lng: number, zoom: number, width: string, height: string}}
   */
  static defaultProps = {
    lat: 48.15927,
    lng: 17.13605,
    zoom: 13,
    width: "100%",
    height: "400px"
  };

  /**
   *
   * @type {{lat: shim, lng: shim, zoom: shim, width: shim, height: shim}}
   */
  static propTypes = {
    lat: PropTypes.number,
    lng: PropTypes.number,
    zoom: PropTypes.number,
    width: PropTypes.string,
    height: PropTypes.string
  };

  /**
   * @constructs
   * @param props
   */
  constructor(props) {
    super(props);

    this.platform = null;
    this.map = null;
    this.ui = null;

    this.state = {
      app_id: "oe8n7sngNv5nof91Wfmd",
      app_code: "GfQjHITSHIn7XIUK5xuzsw",
      center: {
        lat: props.lat,
        lng: props.lng,
      },
      zoom: props.zoom,
      useHTTPS: true
    }
  }

  /**
   *
   */
  componentDidMount() {
    this.platform = new window.H.service.Platform(this.state);

    let layer = this.platform.createDefaultLayers();
    let container = document.getElementById('here-map');

    this.map = new window.H.Map(container, layer.normal.map, {
      center: this.state.center,
      zoom: this.state.zoom,
    });

    let events = new window.H.mapevents.MapEvents(this.map);
    let behavior = new window.H.mapevents.Behavior(events);
    this.map.behavior = behavior;
    this.ui = new window.H.ui.UI.createDefault(this.map, layer)

    window.addEventListener('resize', this.resizeViewPort);
  }

  /**
   *
   * @param prevProps
   * @param prevState
   * @param snapshot
   */
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.zoom !== this.props.zoom) {
      this.setState({
        center: {
          lat: this.props.lat,
          lng: this.props.lng,
        },
        zoom: this.props.zoom
      }, this.setZoomAndCenter
      );
    }
  }

  /**
   *
   */
  setZoomAndCenter(){
    this.map.setCenter(this.state.center);
    this.map.setZoom(this.state.zoom);
  }

  /**
   *
   * @param lat
   * @param lng
   */
  setCenter(lat, lng){
    let center = { lat: lat,
                    lng: lng};
    this.map.setCenter(center);
  }

  /**
   *
   * @param zoom
   */
  setZoom(zoom) {
    this.map.setZoom(zoom);
  }

  /**
   *
   * @param object
   */
  addObjectToMap = (object) => this.map.addObject(object);
  /**
   *
   * @param objects
   * @returns {*}
   */
  addObjectsToMap = (objects) => this.map.addObjects(objects);
  /**
   *
   * @param bubble
   * @returns {*}
   */
  addBubbleToUi = (bubble) => this.ui.addBubble(bubble);

  /**
   *
   * @param object
   * @returns {*}
   */
  removeObjectFromMap = (object) => this.map.removeObject(object);
  /**
   *
   * @param objects
   * @returns {*}
   */
  removeObjectsFromMap = (objects) => this.map.removeObjects(objects);

  /**
   *
   * @param eventType
   * @param func
   * @returns {*}
   */
  addEventListenerToMap = (eventType ,func) => this.map.addEventListener(eventType, func);
  /**
   *
   * @param eventType
   * @param func
   * @returns {*}
   */
  removeEventListenerFromMap = (eventType ,func) => this.map.removeEventListener(eventType, func);

  /**
   *
   * @returns {*}
   */
  enableBehaviour = () => this.map.behavior.enable();
  /**
   *
   * @returns {*}
   */
  disableBehaviour = () => this.map.behavior.disable();

  /**
   *
   * @param x
   * @param y
   * @returns {*}
   */
  screenToGeo = (x, y) => this.map.screenToGeo(x,y);
  /**
   *
   */
  resizeViewPort = () => {
    this.map.getViewPort().resize();
  }

  /**
   *
   * @param address
   */
  geocode = (address) => {
    let geocoder = this.platform.getGeocodingService(),
      geocodingParameters = {
        searchText: address,
        jsonattributes : 1,
        language: i18n.language
      };

    geocoder.geocode(
      geocodingParameters,
      this.onSuccess,
      this.onError
    );
  };

  /**
   *
   * @param result
   */
  onSuccess = (result) => {
      //console.log(JSON.stringify(result));
    if (result === undefined) return;
    try {
      this.props.onGeocodeSuccess(result.response.view[0].result);
    } catch (e) {
      this.props.onGeocodeSuccess(null);
    }
  }

  /**
   *
   * @param error
   */
  onError= (error) => {
    console.log("HERE maps geolocation unavaible.")
  }

  /**
   *
   * @returns {*}
   */
  render() {
    return (
        <div id="here-map"
             style={{ width: this.props.width, height: this.props.height, background: 'grey' }}/>
    );
  }
}