import { debounce , uniqueId } from "lodash" ; import * as React from "react" ; import * as ReactDOM from "react-dom" ; import HMapMethods from "./mixins/h-map-methods" ; import cache , { onAllLoad } from "./utils/cache" ; import getLink from "./utils/get-link" ; import getPlatform from "./utils/get-platform" ; import getScriptMap from "./utils/get-script-map" ; export interface HEREMapProps extends H . Map . Options { appId : string ; appCode : string ; animateCenter ? : boolean ; animateZoom ? : boolean ; hidpi ? : boolean ; interactive ? : boolean ; secure ? : boolean ; } export interface HEREMapState { map ? : H . Map ; behavior ? : H . mapevents . Behavior ; ui ? : H . ui . UI ; } export interface HEREMapChildContext { map : H . Map ; } @ HMapMethods export class HEREMap extends React . Component < HEREMapProps , HEREMapState > implements React . ChildContextProvider < HEREMapChildContext > { public static childContextTypes = { map : React . PropTypes . object , } ; public getElement : ( ) => Element ; public getMap : ( ) => H . Map ; public setCenter : ( point : H . geo . IPoint ) => void ; public setZoom : ( zoom : number ) => void ; public state : HEREMapState = { } ; private debouncedResizeMap : any ; constructor ( props , context ) { super ( props , context ) ; this . resizeMap = this . resizeMap . bind ( this ) ; this . debouncedResizeMap = debounce ( this . resizeMap , 200 ) ; } public getChildContext ( ) { const { map } = this . state ; return { map } ; } public componentDidMount ( ) { onAllLoad ( ( ) => { const { appId , appCode , center , hidpi , interactive , secure , zoom , } = this . props ; const platform = getPlatform ( { app_code : appCode , app_id : appId , useHTTPS : secure === true , } ) ; const defaultLayers = platform . createDefaultLayers ( { ppi : hidpi ? 320 : 72 , } ) ; const hereMapEl = ReactDOM . findDOMNode ( this ) ; const map = new H . Map ( hereMapEl . querySelector ( ".map-container" ) , defaultLayers . normal . map , { center , pixelRatio : hidpi ? 2 : 1 , zoom , } ) ; if ( interactive !== false ) { const behavior = new H . mapevents . Behavior ( new H . mapevents . MapEvents ( map ) ) ; const ui = H . ui . UI . createDefault ( map , defaultLayers ) ; this . setState ( { behavior , ui , } ) ; } window . addEventListener ( "resize" , this . debouncedResizeMap ) ; this . setState ( { map } ) ; } ) ; } public componentWillMount ( ) { const { secure , } = this . props ; cache ( getScriptMap ( secure === true ) ) ; const stylesheetUrl = `${ secure === true ? "https:" : "" }//js.api.here.com/v3/3.0/mapsjs-ui.css` ; getLink ( stylesheetUrl , "HERE Maps UI" ) ; } public componentWillUnmount ( ) { window . removeEventListener ( "resize" , this . debouncedResizeMap ) ; } public render ( ) { const { children } = this . props ; return ( < div > < div className = "map-container" id = { `map-container-${ uniqueId ( ) }` } style = { { height : "100%" } } > { children } < /div> < /div>); } private resizeMap ( ) { const { map , } = this . state ; if ( map ) { map . getViewPort ( ) . resize ( ) ; } } } export default HEREMap ;