import * as React from "react" ; import * as ReactDOMServer from "react-dom/server" ; import getDomMarkerIcon from "./utils/get-dom-marker-icon" ; import getMarkerIcon from "./utils/get-marker-icon" ; export interface MarkerProps extends H . map . Marker . Options , H . geo . IPoint { bitmap ? : string ; } export interface MarkerContext { map : H . Map ; } export class Marker extends React . Component < MarkerProps , object > { public static contextTypes = { map : React . PropTypes . object , } ; public context : MarkerContext ; private marker : H . map . DomMarker | H . map . Marker ; public componentWillReceiveProps ( nextProps ) { if ( nextProps . lat !== this . props . lat || nextProps . lng !== this . props . lng ) { this . setPosition ( { lat : nextProps . lat , lng : nextProps . lng , } ) ; } } public componentWillUnmount ( ) { const { map } = this . context ; if ( this . marker ) { map . removeObject ( this . marker ) ; } } public render ( ) { const { map } = this . context ; if ( map && ! this . marker ) { this . addMarkerToMap ( ) ; } return null ; } private addMarkerToMap ( ) { const { map , } = this . context ; const { children , bitmap , lat , lng , } = this . props ; let marker ; if ( React . Children . count ( children ) > 0 ) { const html = ReactDOMServer . renderToStaticMarkup ( ( < div className = "dom-marker" > { children } < /div>)); const icon = getDomMarkerIcon ( html ) ; marker = new H . map . DomMarker ( { lat , lng } , { icon } ) ; map . addObject ( marker ) ; } else if ( bitmap ) { const icon = getMarkerIcon ( bitmap ) ; marker = new H . map . Marker ( { lat , lng } , { icon } ) ; map . addObject ( marker ) ; } else { marker = new H . map . Marker ( { lat , lng } ) ; map . addObject ( marker ) ; } this . marker = marker ; } private setPosition ( point ) { this . marker . setPosition ( point ) ; } } export default Marker ;