Search code examples
reactjshere-api

Dom Marker of Here Maps does not display the content which rendered by react

This code works fine:

const div = document.createElement('div');
div.innerHTML = 'abc';
this.marker = new H.map.DomMarker(PositionToLatLng(position), {
  icon: new H.map.DomIcon(div),
});

While this code displays nothing:

const div = document.createElement('div');
ReactDOM.render('abc', div);
this.marker = new H.map.DomMarker(PositionToLatLng(position), {
  icon: new H.map.DomIcon(div),
});

DomMarker(DomIcon) should display any HTMLElement no matter it is created by DOM api or rendered by react.

Solution

  • I've been using renderToStaticMarkup and nesting the child component within. 

    import { renderToStaticMarkup } from 'react-dom/server';

// lifecycle method
const html = renderToStaticMarkup(children);
const icon = new window.H.map.DomIcon(html);
this.marker = new window.H.map.DomMarker({ lat, lng }, { icon });

    Note: This is Server-side rendered.

    https://reactjs.org/docs/react-dom-server.html#rendertostring

    If you're curious about DomIcon, in particular, their docs had a pretty good code sample:

    https://developer.here.com/documentation/maps/topics_api/h-map-domicon.html