import { HTMLWidget } from "@hpcc-js/common" ; import { Deck , mapboxgl } from "@hpcc-js/deck-shim" ; import { hashSum } from "@hpcc-js/util" ; import "d3-transition" ; declare const window ; export interface ViewState { width ? : number ; height ? : number ; latitude ? : number ; longitude ? : number ; zoom ? : number ; bearing ? : number ; pitch ? : number ; } export class Common extends HTMLWidget { protected _mapgl : mapboxgl . Map ; protected _deckgl : Deck ; protected _div : any ; protected _divMapbox : any ; protected _canvasDeck : any ; protected _layers : any [ ] = [ ] ; private _prevShowBuildings : boolean ; constructor ( ) { super ( ) ; } viewState ( ) ; viewState ( _ ) ; viewState ( _ ? ) { if ( _ === void 0 ) return { latitude : this . latitude ( ) , longitude : this . longitude ( ) , zoom : this . zoom ( ) , bearing : this . bearing ( ) , pitch : this . pitch ( ) } ; this . latitude ( _ . latitude ) ; this . longitude ( _ . longitude ) ; this . zoom ( _ . zoom ) ; this . bearing ( _ . bearing ) ; this . pitch ( _ . pitch ) ; return this ; } getBounds ( ) { return this . _mapgl . getBounds ( ) ; } syncMapbox ( viewState ) { this . _mapgl . jumpTo ( { center : [ viewState . longitude , viewState . latitude ] , zoom : viewState . zoom , bearing : viewState . bearing , pitch : viewState . pitch } ) ; } layers ( ) { return [ ] ; } enter ( domNode , element ) { super . enter ( domNode , element ) ; const context = this ; this . _div = element . append ( "div" ) . style ( "width" , this . width ( ) + "px" ) . style ( "height" , this . height ( ) + "px" ) . style ( "opacity" , 0 ) ; this . _divMapbox = this . _div . append ( "div" ) . style ( "position" , "absolute" ) . style ( "top" , 0 ) . style ( "left" , 0 ) . style ( "width" , "100%" ) . style ( "height" , "100%" ) ; this . _canvasDeck = this . _div . append ( "canvas" ) . attr ( "id" , "deck-canvas" ) . style ( "position" , "absolute" ) . style ( "top" , 0 ) . style ( "left" , 0 ) . style ( "width" , "100%" ) . style ( "height" , "100%" ) ; if ( ! window . __hpcc_mapbox_apikey ) { console . warn ( "__hpcc_mapbox_apikey does not contain a valid API key, reverting to developers key (expect limited performance)" ) ; } mapboxgl . accessToken = mapboxgl . accessToken || window . __hpcc_mapbox_apikey || "pk.eyJ1IjoibGVzY2htb28iLCJhIjoiY2psY2FqY3l3MDhqNDN3cDl1MzFmZnkwcCJ9.HRoFwmz1j80gyz18ruggqw" ; this . _mapgl = new mapboxgl . Map ( { container : this . _divMapbox . node ( ) , interactive : false , antialias : true , center : [ this . longitude ( ) , this . latitude ( ) ] , zoom : this . zoom ( ) , bearing : this . bearing ( ) , pitch : this . pitch ( ) } ) ; this . _mapgl . on ( "load" , ( ) => { this . _div . transition ( ) . style ( "opacity" , 1 ) ; } ) ; this . _deckgl = new Deck ( { canvas : "deck-canvas" , width : "100%" , height : "100%" , initialViewState : { ... this . viewState ( ) } , controller : true , onLoad : ( ) => { } , onViewStateChange : ( { viewState } ) => { this . _prevViewStateHash = hashSum ( viewState ) ; this . viewState ( viewState ) ; this . syncMapbox ( viewState ) ; } } ) ; this . _prevShowBuildings = this . showBuildings ( ) ; this . _mapgl . on ( "load" , function ( ) { if ( context . showBuildings ( ) ) { context . add3dBuildingLayer ( ) ; } } ) ; } add3dBuildingLayer ( ) { const layers = this . _mapgl . getStyle ( ) . layers ; let labelLayerId ; for ( let i = 0 ; i < layers . length ; i ++ ) { if ( layers [ i ] . type === "symbol" && layers [ i ] . layout [ "text-field" ] ) { labelLayerId = layers [ i ] . id ; break ; } } this . _mapgl . addLayer ( { "id" : "3d-buildings" , "source" : "composite" , "source-layer" : "building" , "filter" : [ "==" , "extrude" , "true" ] , "type" : "fill-extrusion" , "minzoom" : 15 , "paint" : { "fill-extrusion-color" : "#aaa" , "fill-extrusion-height" : [ "interpolate" , [ "linear" ] , [ "zoom" ] , 15 , 0 , 15.05 , [ "get" , "height" ] ] , "fill-extrusion-base" : [ "interpolate" , [ "linear" ] , [ "zoom" ] , 15 , 0 , 15.05 , [ "get" , "min_height" ] ] , "fill-extrusion-opacity" : .6 } } , labelLayerId ) ; } private _prevStyle ; private _prevViewStateHash ; update ( domNode , element ) { super . update ( domNode , element ) ; this . _div . style ( "width" , this . width ( ) + "px" ) . style ( "height" , this . height ( ) + "px" ) ; this . _mapgl . resize ( ) ; if ( this . _prevStyle !== this . style ( ) ) { this . _prevStyle = this . style ( ) ; this . _mapgl . setStyle ( `mapbox://styles/mapbox/${ this . _prevStyle }?optimize=true` ) ; } if ( this . _prevShowBuildings !== this . showBuildings ( ) ) { if ( this . showBuildings ( ) ) { this . add3dBuildingLayer ( ) ; } else { this . _mapgl . removeLayer ( "3d-buildings" ) ; } this . _prevShowBuildings = this . showBuildings ( ) ; } const viewState = this . viewState ( ) ; const viewStateHash = hashSum ( viewState ) ; if ( this . _prevViewStateHash !== viewStateHash ) { this . _prevViewStateHash = viewStateHash ; this . syncMapbox ( viewState ) ; } this . _deckgl . setProps ( { layers : this . layers ( ) } ) ; } exit ( domNode , element ) { super . exit ( domNode , element ) ; if ( this . _deckgl ) { this . _deckgl . finalize ( ) ; } } } Common . prototype . _class += " map-deck_Common" ; export interface Common { style ( ) : string ; style ( _ ) : this ; latitude ( ) : number ; latitude ( _ ) : this ; longitude ( ) : number ; longitude ( _ ) : this ; zoom ( ) : number ; zoom ( _ ) : this ; bearing ( ) : number ; bearing ( _ ) : this ; pitch ( ) : number ; pitch ( _ ) : this ; showBuildings ( ) : boolean ; showBuildings ( _ ) : this ; } Common . prototype . publish ( "style" , "light-v9" , "set" , "Map Style" , [ "streets-v10" , "outdoors-v10" , "light-v9" , "dark-v9" , "satellite-v9" , "satellite-streets-v10" , "navigation-preview-day-v2" , "navigation-preview-night-v2" , "navigation-guidance-day-v2" , "navigation-guidance-night-v2" ] ) ; Common . prototype . publish ( "latitude" , 37.1 , "number" , "Latitude" ) ; Common . prototype . publish ( "longitude" , - 95.7 , "number" , "Latitude" ) ; Common . prototype . publish ( "zoom" , 2 , "number" , "Latitude" ) ; Common . prototype . publish ( "bearing" , 0 , "number" , "Latitude" ) ; Common . prototype . publish ( "pitch" , 30 , "number" , "Latitude" ) ; Common . prototype . publish ( "showBuildings" , true , "boolean" , "If true, 3d buildings will display when zoomed in" ) ;