dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add google maps support

Browse Source
This commit is contained in:
Artem Halushko 2020-02-28 14:33:24 +02:00
parent b5c6b97395
commit 257fb94bc0
6 changed files with 54 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui-ngx/package-lock.json generated
View File

@ -8263,6 +8263,11 @@
"resolved": "https://registry.npmjs.org/leaflet-providers/-/leaflet-providers-1.9.1.tgz",
"integrity": "sha512-YpJB9y4/nT5NGicU9vuqlttJaCer6paD3J3b8Wrw+IIQvK9dtcdzE9CsTkDg7Dg9FeGp5NEr3hu17xcHbYI/2w=="
},
"leaflet.gridlayer.googlemutant": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.8.0.tgz",
"integrity": "sha512-Ain+jgDKRhlM6qNDDj2QFJa9vXUqV096N0PmpHO3DoNLS4I7EynTQCJXN+9qY4C51ZpV4Q4CI+apNv5XiP5aUA=="
},
"leaflet.markercluster": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",

1
ui-ngx/package.json
View File

@ -58,6 +58,7 @@
"jstree-bootstrap-theme": "^1.0.1",
"leaflet": "^1.6.0",
"leaflet-providers": "^1.9.1",
"leaflet.gridlayer.googlemutant": "^0.8.0",
"leaflet.markercluster": "^1.4.1",
"material-design-icons": "^3.0.1",
"messageformat": "^2.3.0",

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
View File

@ -5,7 +5,7 @@ export interface MapOptions {
disableScrollZooming?: boolean,
minZoomLevel?: number,
mapProvider: MapProviders,
credentials?: string,
credentials?: any, // declare credentials format
defaultCenterPosition?: L.LatLngExpression,
markerClusteringSetting?
}

8
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View File

@ -4,6 +4,7 @@ import { deepClone } from '@core/utils';
import { openstreetMapSettingsSchema, googleMapSettingsSchema, imageMapSettingsSchema, tencentMapSettingsSchema, hereMapSettingsSchema, commonMapSettingsSchema, routeMapSettingsSchema, markerClusteringSettingsSchema, markerClusteringSettingsSchemaGoogle, markerClusteringSettingsSchemaLeaflet } from './schemes';
import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
import { OpenStreetMap, TencentMap } from './providers';
import { GoogleMap } from './providers/google-map';
const providerSets = {
'openstreet-map': {
@ -13,6 +14,10 @@ const providerSets = {
'tencent-map': {
MapClass: TencentMap,
schema: tencentMapSettingsSchema
},
'google-map': {
MapClass: GoogleMap,
schema: googleMapSettingsSchema
}
}
@ -39,13 +44,12 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
defaultCenterPosition: [0, 0],
markerClusteringSetting: null
}
console.log("TCL: TbMapWidgetV2 -> constructor -> providerSets[mapProvider]", providerSets[mapProvider], mapProvider)
console.log("TCL: TbMapWidgetV2 -> constructor -> providerSets[mapProvider]",mapProvider)
let MapClass = providerSets[mapProvider]?.MapClass;
if(!MapClass){
//delete this;
return;
}
console.log("TCL: TbMapWidgetV2 -> constructor -> MapClass", MapClass)
this.map = new MapClass($element, options)
this.schema = providerSets[mapProvider]?.schema;

41
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts Normal file
View File

@ -0,0 +1,41 @@
import L from 'leaflet';
import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models';
import 'leaflet.gridlayer.googlemutant';
var googleLoaded = false;
export class GoogleMap extends LeafletMap {
constructor($container, options: MapOptions) {
super($container, options);
this.loadGoogle(() => {
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
var roads = (L.gridLayer as any).googleMutant({
type: 'roadmap' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
}).addTo(map);
super.setMap(map);
}, options.credentials.apiKey);
super.initSettings(options);
}
private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
if (googleLoaded) {
callback()
}
else {
googleLoaded = true;
let script = document.createElement('script');
script.onload = () => {
callback();
}
script.onerror = () => {
googleLoaded = false;
}
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
document.getElementsByTagName('head')[0].appendChild(script);
}
}
}

1
ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
View File

@ -1,4 +1,3 @@
import L from 'leaflet';
import LeafletMap from '../leaflet-map';
import { MapOptions } from '../map-models';