Artem Halushko
7 years ago
12 changed files with 4398 additions and 2939 deletions
File diff suppressed because it is too large
@ -0,0 +1,117 @@ |
|||||
|
import * as L from 'leaflet'; |
||||
|
|
||||
|
import 'leaflet-providers'; |
||||
|
import 'leaflet/dist/leaflet.css'; |
||||
|
import 'leaflet.markercluster/dist/MarkerCluster.css' |
||||
|
import 'leaflet.markercluster/dist/MarkerCluster.Default.css' |
||||
|
import 'leaflet.markercluster/dist/leaflet.markercluster' |
||||
|
|
||||
|
import { MapOptions } from './map-models'; |
||||
|
|
||||
|
export default class LeafletMap { |
||||
|
|
||||
|
markers = []; |
||||
|
tooltips = []; |
||||
|
map: L.Map; |
||||
|
isMarketCluster; |
||||
|
|
||||
|
|
||||
|
constructor($container, options: MapOptions) { |
||||
|
this.isMarketCluster = options.markerClusteringSetting?.isMarketCluster; |
||||
|
// defaultCenterPosition = options.defaultCenterPosition || [0, 0];
|
||||
|
this.map = L.map($container).setView(options.defaultCenterPosition, options.defaultZoomLevel || 8); |
||||
|
|
||||
|
if (options.disableScrollZooming) { |
||||
|
this.map.scrollWheelZoom.disable(); |
||||
|
} |
||||
|
let credetials = { |
||||
|
app_id: "AhM6TzD9ThyK78CT3ptx", |
||||
|
app_code: "p6NPiITB3Vv0GMUFnkLOOg" |
||||
|
} |
||||
|
var tileLayer = (L.tileLayer as any).provider("OpenStreetMap.Mapnik", credetials); |
||||
|
tileLayer.addTo(this.map); |
||||
|
|
||||
|
/* if (this.isMarketCluster) { |
||||
|
this.markersCluster = L.markerClusterGroup(options.markerClusteringSetting); |
||||
|
this.map.addLayer(this.markersCluster); |
||||
|
}*/ |
||||
|
|
||||
|
if (options.initCallback) { |
||||
|
setTimeout(options.initCallback, 0); //eslint-disable-line
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
inited() { |
||||
|
return !!this.map; |
||||
|
} |
||||
|
|
||||
|
getContainer() { |
||||
|
return /* this.isMarketCluster ? this.markersCluster :*/ this.map; |
||||
|
} |
||||
|
/* |
||||
|
fitBounds(bounds, useDefaultZoom) { |
||||
|
if (bounds.isValid()) { |
||||
|
if ((this.dontFitMapBounds || useDefaultZoom) && this.defaultZoomLevel) { |
||||
|
this.map.setZoom(this.defaultZoomLevel, { animate: false }); |
||||
|
this.map.panTo(bounds.getCenter(), { animate: false }); |
||||
|
} else { |
||||
|
this.map.once('zoomend', () => { |
||||
|
if (!this.defaultZoomLevel && this.map.getZoom() > this.minZoomLevel) { |
||||
|
this.map.setZoom(this.minZoomLevel, { animate: false }); |
||||
|
} |
||||
|
}); |
||||
|
this.map.fitBounds(bounds, { padding: [50, 50], animate: false }); |
||||
|
} |
||||
|
} |
||||
|
}*/ |
||||
|
|
||||
|
createLatLng(lat, lng) { |
||||
|
return L.latLng(lat, lng); |
||||
|
} |
||||
|
|
||||
|
createBounds() { |
||||
|
return this.map.getBounds(); |
||||
|
} |
||||
|
|
||||
|
extendBounds(bounds, polyline) { |
||||
|
if (polyline && polyline.getLatLngs() && polyline.getBounds()) { |
||||
|
bounds.extend(polyline.getBounds()); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
invalidateSize() { |
||||
|
this.map.invalidateSize(true); |
||||
|
} |
||||
|
|
||||
|
createTooltip(marker, dsIndex, settings, markerArgs) { |
||||
|
var popup = L.popup(); |
||||
|
popup.setContent(''); |
||||
|
marker.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); |
||||
|
if (settings.displayTooltipAction == 'hover') { |
||||
|
marker.off('click'); |
||||
|
marker.on('mouseover', function () { |
||||
|
this.openPopup(); |
||||
|
}); |
||||
|
marker.on('mouseout', function () { |
||||
|
this.closePopup(); |
||||
|
}); |
||||
|
} |
||||
|
return { |
||||
|
markerArgs: markerArgs, |
||||
|
popup: popup, |
||||
|
locationSettings: settings, |
||||
|
dsIndex: dsIndex |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
getTooltips() { |
||||
|
return this.tooltips;//rewrite
|
||||
|
} |
||||
|
|
||||
|
getCenter() { |
||||
|
return this.map.getCenter(); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
@ -0,0 +1,19 @@ |
|||||
|
export interface MapOptions { |
||||
|
initCallback?: Function, |
||||
|
defaultZoomLevel?: number, |
||||
|
dontFitMapBounds?: boolean, |
||||
|
disableScrollZooming?: boolean, |
||||
|
minZoomLevel?: number, |
||||
|
mapProvider: MapProviders, |
||||
|
credentials?: string, |
||||
|
defaultCenterPosition?: L.LatLngExpression, |
||||
|
markerClusteringSetting? |
||||
|
} |
||||
|
|
||||
|
export enum MapProviders { |
||||
|
google = 'google-map', |
||||
|
openstreet = 'openstreet-map', |
||||
|
here = 'here', |
||||
|
image = 'image-map', |
||||
|
tencent = 'tencent-map' |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
export interface MapWidgetInterface { |
||||
|
resize(), |
||||
|
onInit(), |
||||
|
onDataUpdated(); |
||||
|
onResize(); |
||||
|
getSettingsSchema(): Object; |
||||
|
onDestroy(); |
||||
|
} |
||||
|
|
||||
|
export interface MapWidgetStaticInterface { |
||||
|
settingsSchema(mapProvider, drawRoutes): Object; |
||||
|
dataKeySettingsSchema(): Object; |
||||
|
actionSources(): Object; |
||||
|
} |
||||
@ -0,0 +1,245 @@ |
|||||
|
import { MapProviders, MapOptions } from "./map-models"; |
||||
|
import LeafletMap from './leaflet-map'; |
||||
|
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'; |
||||
|
|
||||
|
const providerSets = { |
||||
|
openstreet: { |
||||
|
constructor: LeafletMap, |
||||
|
schema: openstreetMapSettingsSchema |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export let TbMapWidgetV2: MapWidgetStaticInterface; |
||||
|
TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { |
||||
|
|
||||
|
|
||||
|
map: LeafletMap; |
||||
|
provider: MapProviders; |
||||
|
schema; |
||||
|
|
||||
|
constructor(mapProvider: MapProviders, drawRoutes, ctx, useDynamicLocations, $element, isEdit) { |
||||
|
// if(!$element) return
|
||||
|
if (!$element) { |
||||
|
$element = ctx.$container[0]; |
||||
|
} |
||||
|
this.provider = mapProvider; |
||||
|
const options: MapOptions = { |
||||
|
initCallback: () => { }, |
||||
|
defaultZoomLevel: 8, |
||||
|
dontFitMapBounds: false, |
||||
|
disableScrollZooming: false, |
||||
|
minZoomLevel: drawRoutes ? 18 : 15, |
||||
|
mapProvider: mapProvider, |
||||
|
credentials: '', |
||||
|
defaultCenterPosition: [0, 0], |
||||
|
markerClusteringSetting: null |
||||
|
} |
||||
|
this.map = new LeafletMap($element, options) |
||||
|
|
||||
|
this.schema = providerSets[mapProvider]?.schema; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
onInit() { |
||||
|
} |
||||
|
|
||||
|
onDataUpdated() { |
||||
|
} |
||||
|
|
||||
|
onResize() { |
||||
|
} |
||||
|
|
||||
|
getSettingsSchema(): Object { |
||||
|
return this.schema; |
||||
|
} |
||||
|
|
||||
|
resize() { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
public static dataKeySettingsSchema(): Object { |
||||
|
return {}; |
||||
|
} |
||||
|
|
||||
|
public static settingsSchema(mapProvider, drawRoutes): Object { |
||||
|
var schema; |
||||
|
if (mapProvider === 'google-map') { |
||||
|
schema = googleMapSettingsSchema; |
||||
|
schema.groupInfoes = [{ |
||||
|
"formIndex": 0, |
||||
|
"GroupTitle": "Google Map Settings" |
||||
|
}]; |
||||
|
} else if (mapProvider === 'openstreet-map') { |
||||
|
schema = deepClone(openstreetMapSettingsSchema); |
||||
|
schema.groupInfoes = [{ |
||||
|
"formIndex": 0, |
||||
|
"GroupTitle": "Openstreet Map Settings" |
||||
|
}]; |
||||
|
} else if (mapProvider === 'image-map') { |
||||
|
return imageMapSettingsSchema; |
||||
|
} else if (mapProvider === 'tencent-map') { |
||||
|
schema = deepClone(tencentMapSettingsSchema); |
||||
|
schema.groupInfoes = [{ |
||||
|
"formIndex": 0, |
||||
|
"GroupTitle": "Tencent Map Settings" |
||||
|
}]; |
||||
|
} else if (mapProvider === 'here') { |
||||
|
schema = deepClone(hereMapSettingsSchema); |
||||
|
schema.groupInfoes = [{ |
||||
|
"formIndex": 0, |
||||
|
"GroupTitle": "Here Map Settings" |
||||
|
}]; |
||||
|
} |
||||
|
if (!schema.groupInfoes) schema.groupInfoes = []; |
||||
|
schema.form = [schema.form]; |
||||
|
|
||||
|
Object.assign(schema.schema.properties, commonMapSettingsSchema.schema.properties); |
||||
|
schema.schema.required = schema.schema.required.concat(commonMapSettingsSchema.schema.required); |
||||
|
schema.form.push(commonMapSettingsSchema.form);//schema.form.concat(commonMapSettingsSchema.form);
|
||||
|
schema.groupInfoes.push({ |
||||
|
"formIndex": schema.groupInfoes.length, |
||||
|
"GroupTitle": "Common Map Settings" |
||||
|
}); |
||||
|
if (drawRoutes) { |
||||
|
Object.assign(schema.schema.properties, routeMapSettingsSchema.schema.properties); |
||||
|
schema.schema.required = schema.schema.required.concat(routeMapSettingsSchema.schema.required); |
||||
|
schema.form.push(routeMapSettingsSchema.form);//schema.form = schema.form.concat(routeMapSettingsSchema.form);
|
||||
|
schema.groupInfoes.push({ |
||||
|
"formIndex": schema.groupInfoes.length, |
||||
|
"GroupTitle": "Route Map Settings" |
||||
|
}); |
||||
|
} else if (mapProvider !== 'image-map') { |
||||
|
Object.assign(schema.schema.properties, markerClusteringSettingsSchema.schema.properties); |
||||
|
schema.schema.required = schema.schema.required.concat(markerClusteringSettingsSchema.schema.required); |
||||
|
schema.form.push(markerClusteringSettingsSchema.form); |
||||
|
if (mapProvider === 'google-map' || mapProvider === 'tencent-map') { |
||||
|
Object.assign(schema.schema.properties, markerClusteringSettingsSchemaGoogle.schema.properties); |
||||
|
schema.schema.required = schema.schema.required.concat(markerClusteringSettingsSchemaGoogle.schema.required); |
||||
|
schema.form[schema.form.length - 1] = schema.form[schema.form.length - 1].concat(markerClusteringSettingsSchemaGoogle.form); |
||||
|
} |
||||
|
if (mapProvider === 'openstreet-map' || mapProvider === 'here') { |
||||
|
Object.assign(schema.schema.properties, markerClusteringSettingsSchemaLeaflet.schema.properties); |
||||
|
schema.schema.required = schema.schema.required.concat(markerClusteringSettingsSchemaLeaflet.schema.required); |
||||
|
schema.form[schema.form.length - 1] = schema.form[schema.form.length - 1].concat(markerClusteringSettingsSchemaLeaflet.form); |
||||
|
} |
||||
|
schema.groupInfoes.push({ |
||||
|
"formIndex": schema.groupInfoes.length, |
||||
|
"GroupTitle": "Markers Clustering Settings" |
||||
|
}); |
||||
|
} |
||||
|
return schema; |
||||
|
|
||||
|
} |
||||
|
public static actionSources(): Object { |
||||
|
return { |
||||
|
'markerClick': { |
||||
|
name: 'widget-action.marker-click', |
||||
|
multiple: false |
||||
|
}, |
||||
|
'polygonClick': { |
||||
|
name: 'widget-action.polygon-click', |
||||
|
multiple: false |
||||
|
}, |
||||
|
'tooltipAction': { |
||||
|
name: 'widget-action.tooltip-tag-action', |
||||
|
multiple: true |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
onDestroy() { |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
let defaultSettings = { |
||||
|
xPosKeyName: 'xPos', |
||||
|
yPosKeyName: 'yPos', |
||||
|
markerOffsetX: 0.5, |
||||
|
markerOffsetY: 1, |
||||
|
latKeyName: 'latitude', |
||||
|
lngKeyName: 'longitude', |
||||
|
polygonKeyName: 'coordinates', |
||||
|
|
||||
|
|
||||
|
//this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + this.locationSettings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + this.locationSettings.lngKeyName + ":7}",
|
||||
|
showLabel: false, |
||||
|
showTooltip: false, |
||||
|
useDefaultCenterPosition: true, |
||||
|
showTooltipAction: "click", |
||||
|
autocloseTooltip: false, |
||||
|
showPolygon: true, |
||||
|
labelColor: '#000000', |
||||
|
/* this.locationSettings.label = this.ctx.settings.label || "${entityName}", |
||||
|
this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569", |
||||
|
this.locationSettings.polygonColor = this.ctx.settings.polygonColor ? tinycolor(this.ctx.settings.polygonColor).toHexString() : "#0000ff", |
||||
|
this.locationSettings.polygonStrokeColor = this.ctx.settings.polygonStrokeColor ? tinycolor(this.ctx.settings.polygonStrokeColor).toHexString() : "#fe0001", |
||||
|
this.locationSettings.polygonOpacity = angular.isDefined(this.ctx.settings.polygonOpacity) ? this.ctx.settings.polygonOpacity : 0.5, |
||||
|
this.locationSettings.polygonStrokeOpacity = angular.isDefined(this.ctx.settings.polygonStrokeOpacity) ? this.ctx.settings.polygonStrokeOpacity : 1, |
||||
|
this.locationSettings.polygonStrokeWeight = angular.isDefined(this.ctx.settings.polygonStrokeWeight) ? this.ctx.settings.polygonStrokeWeight : 1, |
||||
|
|
||||
|
this.locationSettings.useLabelFunction = this.ctx.settings.useLabelFunction === true, |
||||
|
if(angular.isDefined(this.ctx.settings.labelFunction) && this.ctx.settings.labelFunction.length > 0) { |
||||
|
try { |
||||
|
this.locationSettings.labelFunction = new Function('data, dsData, dsIndex', this.ctx.settings.labelFunction), |
||||
|
} catch (e) { |
||||
|
this.locationSettings.labelFunction = null, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.locationSettings.useTooltipFunction = this.ctx.settings.useTooltipFunction === true, |
||||
|
if (angular.isDefined(this.ctx.settings.tooltipFunction) && this.ctx.settings.tooltipFunction.length > 0) { |
||||
|
try { |
||||
|
this.locationSettings.tooltipFunction = new Function('data, dsData, dsIndex', this.ctx.settings.tooltipFunction), |
||||
|
} catch (e) { |
||||
|
this.locationSettings.tooltipFunction = null, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.locationSettings.useColorFunction = this.ctx.settings.useColorFunction === true, |
||||
|
if (angular.isDefined(this.ctx.settings.colorFunction) && this.ctx.settings.colorFunction.length > 0) { |
||||
|
try { |
||||
|
this.locationSettings.colorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.colorFunction), |
||||
|
} catch (e) { |
||||
|
this.locationSettings.colorFunction = null, |
||||
|
} |
||||
|
} |
||||
|
this.locationSettings.usePolygonColorFunction = this.ctx.settings.usePolygonColorFunction === true, |
||||
|
if (angular.isDefined(this.ctx.settings.polygonColorFunction) && this.ctx.settings.polygonColorFunction.length > 0) { |
||||
|
try { |
||||
|
this.locationSettings.polygonColorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.polygonColorFunction), |
||||
|
} catch (e) { |
||||
|
this.locationSettings.polygonColorFunction = null, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true, |
||||
|
if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) { |
||||
|
try { |
||||
|
this.locationSettings.markerImageFunction = new Function('data, images, dsData, dsIndex', this.ctx.settings.markerImageFunction), |
||||
|
} catch (e) { |
||||
|
this.locationSettings.markerImageFunction = null, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.locationSettings.markerImages = this.ctx.settings.markerImages || [], |
||||
|
|
||||
|
if (!this.locationSettings.useMarkerImageFunction && |
||||
|
angular.isDefined(this.ctx.settings.markerImage) && |
||||
|
this.ctx.settings.markerImage.length > 0) { |
||||
|
this.locationSettings.useMarkerImage = true, |
||||
|
var url = this.ctx.settings.markerImage, |
||||
|
var size = this.ctx.settings.markerImageSize || 34, |
||||
|
this.locationSettings.currentImage = { |
||||
|
url: url, |
||||
|
size: size |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
if (this.drawRoutes) { |
||||
|
this.locationSettings.strokeWeight = this.ctx.settings.strokeWeight || 2, |
||||
|
this.locationSettings.strokeOpacity = this.ctx.settings.strokeOpacity || 1.0,*/ |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
import L from 'leaflet'; |
||||
|
|
||||
|
export function createTooltip(target, dsIndex, settings, targetArgs?) { |
||||
|
var popup = L.popup(); |
||||
|
popup.setContent(''); |
||||
|
target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); |
||||
|
if (settings.displayTooltipAction == 'hover') { |
||||
|
target.off('click'); |
||||
|
target.on('mouseover', function () { |
||||
|
this.openPopup(); |
||||
|
}); |
||||
|
target.on('mouseout', function () { |
||||
|
this.closePopup(); |
||||
|
}); |
||||
|
} |
||||
|
return { |
||||
|
markerArgs: targetArgs, |
||||
|
popup: popup, |
||||
|
locationSettings: settings, |
||||
|
dsIndex: dsIndex |
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,137 @@ |
|||||
|
import L from 'leaflet'; |
||||
|
import { createTooltip } from './maps-utils'; |
||||
|
|
||||
|
export class Marker { |
||||
|
|
||||
|
leafletMarker: L.Marker; |
||||
|
map: L.Map; |
||||
|
|
||||
|
tooltipOffset; |
||||
|
tooltip; |
||||
|
|
||||
|
constructor(map: L.Map, location, dsIndex, settings, onClickListener, markerArgs, onDragendListener) { |
||||
|
this.map = map; |
||||
|
this.leafletMarker = L.marker(location, { |
||||
|
draggable: settings.drraggable |
||||
|
}); |
||||
|
this.createMarkerIcon(this.leafletMarker, settings, (iconInfo) => { |
||||
|
this.leafletMarker.setIcon(iconInfo.icon); |
||||
|
if (settings.showLabel) { |
||||
|
this.tooltipOffset = [0, -iconInfo.size[1] + 10]; |
||||
|
this.updateMarkerLabel(settings) |
||||
|
} |
||||
|
this.leafletMarker.addTo(this.map); |
||||
|
}); |
||||
|
|
||||
|
if (settings.displayTooltip) { |
||||
|
this.tooltip = createTooltip(this.leafletMarker, dsIndex, settings, markerArgs); |
||||
|
} |
||||
|
|
||||
|
if (onClickListener) { |
||||
|
this.leafletMarker.on('click', onClickListener); |
||||
|
} |
||||
|
|
||||
|
if (onDragendListener) { |
||||
|
this.leafletMarker.on('dragend', onDragendListener); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
updateMarkerLabel(settings) { |
||||
|
this.leafletMarker.unbindTooltip(); |
||||
|
if (settings.showLabel) |
||||
|
this.leafletMarker.bindTooltip(`<div style="color: ${settings.labelColor};"><b>${settings.labelText}</b></div>`, |
||||
|
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset }); |
||||
|
} |
||||
|
|
||||
|
updateMarkerColor(marker, color) { |
||||
|
this.createDefaultMarkerIcon(color, (iconInfo) => { |
||||
|
this.leafletMarker.setIcon(iconInfo.icon); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
updateMarkerIcon(marker, settings) { |
||||
|
this.createMarkerIcon(marker, settings, (iconInfo) => { |
||||
|
this.leafletMarker.setIcon(iconInfo.icon); |
||||
|
if (settings.showLabel) { |
||||
|
this.tooltipOffset = [0, -iconInfo.size[1] + 10]; |
||||
|
this.updateMarkerLabel(settings) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
createMarkerIcon(marker, settings, onMarkerIconReady) { |
||||
|
var currentImage = settings.currentImage; |
||||
|
// var opMap = this;
|
||||
|
/* if (currentImage && currentImage.url) { |
||||
|
this.utils.loadImageAspect(currentImage.url).then( |
||||
|
(aspect) => { |
||||
|
if (aspect) { |
||||
|
var width; |
||||
|
var height; |
||||
|
if (aspect > 1) { |
||||
|
width = currentImage.size; |
||||
|
height = currentImage.size / aspect; |
||||
|
} else { |
||||
|
width = currentImage.size * aspect; |
||||
|
height = currentImage.size; |
||||
|
} |
||||
|
var icon = L.icon({ |
||||
|
iconUrl: currentImage.url, |
||||
|
iconSize: [width, height], |
||||
|
iconAnchor: [width / 2, height], |
||||
|
popupAnchor: [0, -height] |
||||
|
}); |
||||
|
var iconInfo = { |
||||
|
size: [width, height], |
||||
|
icon: icon |
||||
|
}; |
||||
|
onMarkerIconReady(iconInfo); |
||||
|
} else { |
||||
|
opMap.createDefaultMarkerIcon(settings.color, onMarkerIconReady); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} else { |
||||
|
this.createDefaultMarkerIcon(settings.color, onMarkerIconReady); |
||||
|
}*/ |
||||
|
} |
||||
|
|
||||
|
createDefaultMarkerIcon(color, onMarkerIconReady) { |
||||
|
var pinColor = color.substr(1); |
||||
|
var icon = L.icon({ |
||||
|
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor, |
||||
|
iconSize: [21, 34], |
||||
|
iconAnchor: [10, 34], |
||||
|
popupAnchor: [0, -34], |
||||
|
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', |
||||
|
shadowSize: [40, 37], |
||||
|
shadowAnchor: [12, 35] |
||||
|
}); |
||||
|
var iconInfo = { |
||||
|
size: [21, 34], |
||||
|
icon: icon |
||||
|
}; |
||||
|
onMarkerIconReady(iconInfo); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
removeMarker() { |
||||
|
this.map.removeLayer(this.leafletMarker); |
||||
|
} |
||||
|
|
||||
|
extendBoundsWithMarker(bounds) { |
||||
|
bounds.extend(this.leafletMarker.getLatLng()); |
||||
|
} |
||||
|
|
||||
|
getMarkerPosition() { |
||||
|
return this.leafletMarker.getLatLng(); |
||||
|
} |
||||
|
|
||||
|
setMarkerPosition(latLng) { |
||||
|
this.leafletMarker.setLatLng(latLng); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
import L from 'leaflet'; |
||||
|
import { createTooltip } from './maps-utils'; |
||||
|
|
||||
|
export class Polygon { |
||||
|
|
||||
|
map: L.Map; |
||||
|
leafletPoly: L.Polygon; |
||||
|
|
||||
|
tooltip; |
||||
|
|
||||
|
constructor(latLangs, settings, location, onClickListener) { |
||||
|
this.leafletPoly = L.polygon(latLangs, { |
||||
|
fill: true, |
||||
|
fillColor: settings.polygonColor, |
||||
|
color: settings.polygonStrokeColor, |
||||
|
weight: settings.polygonStrokeWeight, |
||||
|
fillOpacity: settings.polygonOpacity, |
||||
|
opacity: settings.polygonStrokeOpacity |
||||
|
}).addTo(this.map); |
||||
|
|
||||
|
if (settings.displayTooltip) { |
||||
|
this.tooltip = createTooltip(this.leafletPoly, location.dsIndex, settings); |
||||
|
} |
||||
|
if (onClickListener) { |
||||
|
this.leafletPoly.on('click', onClickListener); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
removePolygon() { |
||||
|
this.map.removeLayer(this.leafletPoly); |
||||
|
} |
||||
|
|
||||
|
updatePolygonColor(settings, color) { |
||||
|
let style = { |
||||
|
fill: true, |
||||
|
fillColor: color, |
||||
|
color: color, |
||||
|
weight: settings.polygonStrokeWeight, |
||||
|
fillOpacity: settings.polygonOpacity, |
||||
|
opacity: settings.polygonStrokeOpacity |
||||
|
}; |
||||
|
this.leafletPoly.setStyle(style); |
||||
|
} |
||||
|
|
||||
|
getPolygonLatLngs() { |
||||
|
return this.leafletPoly.getLatLngs(); |
||||
|
} |
||||
|
|
||||
|
setPolygonLatLngs(latLngs) { |
||||
|
this.leafletPoly.setLatLngs(latLngs); |
||||
|
this.leafletPoly.redraw(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
import L from 'leaflet'; |
||||
|
|
||||
|
export class Polyline { |
||||
|
|
||||
|
map: L.Map; |
||||
|
leafletPoly: L.Polyline; |
||||
|
|
||||
|
constructor(locations, settings) { |
||||
|
this.leafletPoly = L.polyline(locations, |
||||
|
{ |
||||
|
color: settings.color, |
||||
|
opacity: settings.strokeOpacity, |
||||
|
weight: settings.strokeWeight |
||||
|
} |
||||
|
).addTo(this.map); |
||||
|
} |
||||
|
|
||||
|
updatePolylineColor(settings, color) { |
||||
|
var style = { |
||||
|
color: color, |
||||
|
opacity: settings.strokeOpacity, |
||||
|
weight: settings.strokeWeight |
||||
|
}; |
||||
|
this.leafletPoly.setStyle(style); |
||||
|
} |
||||
|
|
||||
|
removePolyline() { |
||||
|
this.map.removeLayer(this.leafletPoly); |
||||
|
} |
||||
|
|
||||
|
getPolylineLatLngs() { |
||||
|
return this.leafletPoly.getLatLngs(); |
||||
|
} |
||||
|
|
||||
|
setPolylineLatLngs(latLngs) { |
||||
|
this.leafletPoly.setLatLngs(latLngs); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,813 @@ |
|||||
|
export const googleMapSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Google Map Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"gmApiKey": { |
||||
|
"title": "Google Maps API Key", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"gmDefaultMapType": { |
||||
|
"title": "Default map type", |
||||
|
"type": "string", |
||||
|
"default": "roadmap" |
||||
|
} |
||||
|
}, |
||||
|
"required": [ |
||||
|
"gmApiKey" |
||||
|
] |
||||
|
}, |
||||
|
"form": [ |
||||
|
"gmApiKey", |
||||
|
{ |
||||
|
"key": "gmDefaultMapType", |
||||
|
"type": "rc-select", |
||||
|
"multiple": false, |
||||
|
"items": [ |
||||
|
{ |
||||
|
"value": "roadmap", |
||||
|
"label": "Roadmap" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "satellite", |
||||
|
"label": "Satellite" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "hybrid", |
||||
|
"label": "Hybrid" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "terrain", |
||||
|
"label": "Terrain" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const tencentMapSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Tencent Map Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"tmApiKey": { |
||||
|
"title": "Tencent Maps API Key", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"tmDefaultMapType": { |
||||
|
"title": "Default map type", |
||||
|
"type": "string", |
||||
|
"default": "roadmap" |
||||
|
} |
||||
|
}, |
||||
|
"required": [ |
||||
|
"tmApiKey" |
||||
|
] |
||||
|
}, |
||||
|
"form": [ |
||||
|
"tmApiKey", |
||||
|
{ |
||||
|
"key": "tmDefaultMapType", |
||||
|
"type": "rc-select", |
||||
|
"multiple": false, |
||||
|
"items": [ |
||||
|
{ |
||||
|
"value": "roadmap", |
||||
|
"label": "Roadmap" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "satellite", |
||||
|
"label": "Satellite" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "hybrid", |
||||
|
"label": "Hybrid" |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const hereMapSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "HERE Map Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"mapProvider": { |
||||
|
"title": "Map layer", |
||||
|
"type": "string", |
||||
|
"default": "HERE.normalDay" |
||||
|
}, |
||||
|
"credentials": { |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"app_id": { |
||||
|
"title": "HERE app id", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"app_code": { |
||||
|
"title": "HERE app code", |
||||
|
"type": "string" |
||||
|
} |
||||
|
}, |
||||
|
"required": ["app_id", "app_code"] |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
{ |
||||
|
"key": "mapProvider", |
||||
|
"type": "rc-select", |
||||
|
"multiple": false, |
||||
|
"items": [ |
||||
|
{ |
||||
|
"value": "HERE.normalDay", |
||||
|
"label": "HERE.normalDay (Default)" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "HERE.normalNight", |
||||
|
"label": "HERE.normalNight" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "HERE.hybridDay", |
||||
|
"label": "HERE.hybridDay" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "HERE.terrainDay", |
||||
|
"label": "HERE.terrainDay" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
"credentials" |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const openstreetMapSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Openstreet Map Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"mapProvider": { |
||||
|
"title": "Map provider", |
||||
|
"type": "string", |
||||
|
"default": "OpenStreetMap.Mapnik" |
||||
|
}, |
||||
|
"useCustomProvider": { |
||||
|
"title": "Use custom provider", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"customProviderTileUrl": { |
||||
|
"title": "Custom provider tile URL", |
||||
|
"type": "string", |
||||
|
"default": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
{ |
||||
|
"key": "mapProvider", |
||||
|
"type": "rc-select", |
||||
|
"multiple": false, |
||||
|
"items": [ |
||||
|
{ |
||||
|
"value": "OpenStreetMap.Mapnik", |
||||
|
"label": "OpenStreetMap.Mapnik (Default)" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "OpenStreetMap.BlackAndWhite", |
||||
|
"label": "OpenStreetMap.BlackAndWhite" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "OpenStreetMap.HOT", |
||||
|
"label": "OpenStreetMap.HOT" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "Esri.WorldStreetMap", |
||||
|
"label": "Esri.WorldStreetMap" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "Esri.WorldTopoMap", |
||||
|
"label": "Esri.WorldTopoMap" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "CartoDB.Positron", |
||||
|
"label": "CartoDB.Positron" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "CartoDB.DarkMatter", |
||||
|
"label": "CartoDB.DarkMatter" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
"useCustomProvider", |
||||
|
"customProviderTileUrl" |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const commonMapSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Map Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"defaultZoomLevel": { |
||||
|
"title": "Default map zoom level (0 - 20)", |
||||
|
"type": "number" |
||||
|
}, |
||||
|
"useDefaultCenterPosition": { |
||||
|
"title": "Use default map center position", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"defaultCenterPosition": { |
||||
|
"title": "Default map center position (0,0)", |
||||
|
"type": "string", |
||||
|
"default": "0,0" |
||||
|
}, |
||||
|
"fitMapBounds": { |
||||
|
"title": "Fit map bounds to cover all markers", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"disableScrollZooming": { |
||||
|
"title": "Disable scroll zooming", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"latKeyName": { |
||||
|
"title": "Latitude key name", |
||||
|
"type": "string", |
||||
|
"default": "latitude" |
||||
|
}, |
||||
|
"lngKeyName": { |
||||
|
"title": "Longitude key name", |
||||
|
"type": "string", |
||||
|
"default": "longitude" |
||||
|
}, |
||||
|
"showLabel": { |
||||
|
"title": "Show label", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"label": { |
||||
|
"title": "Label (pattern examples: '${entityName}', '${entityName}: (Text ${keyName} units.)' )", |
||||
|
"type": "string", |
||||
|
"default": "${entityName}" |
||||
|
}, |
||||
|
"useLabelFunction": { |
||||
|
"title": "Use label function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"labelFunction": { |
||||
|
"title": "Label function: f(data, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"showTooltip": { |
||||
|
"title": "Show tooltip", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"showTooltipAction": { |
||||
|
"title": "Action for displaying the tooltip", |
||||
|
"type": "string", |
||||
|
"default": "click" |
||||
|
}, |
||||
|
"autocloseTooltip": { |
||||
|
"title": "Auto-close tooltips", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"tooltipPattern": { |
||||
|
"title": "Tooltip (for ex. 'Text ${keyName} units.' or <link-act name='my-action'>Link text</link-act>')", |
||||
|
"type": "string", |
||||
|
"default": "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${latitude:7}<br/><b>Longitude:</b> ${longitude:7}" |
||||
|
}, |
||||
|
"useTooltipFunction": { |
||||
|
"title": "Use tooltip function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"tooltipFunction": { |
||||
|
"title": "Tooltip function: f(data, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"color": { |
||||
|
"title": "Color", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"useColorFunction": { |
||||
|
"title": "Use color function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"colorFunction": { |
||||
|
"title": "Color function: f(data, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"showPolygon": { |
||||
|
"title": "Show polygon", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"polygonKeyName": { |
||||
|
"title": "Polygon key name", |
||||
|
"type": "string", |
||||
|
"default": "coordinates" |
||||
|
}, |
||||
|
"polygonColor": { |
||||
|
"title": "Polygon color", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"polygonOpacity": { |
||||
|
"title": "Polygon opacity", |
||||
|
"type": "number", |
||||
|
"default": 0.5 |
||||
|
}, |
||||
|
"polygonStrokeColor": { |
||||
|
"title": "Stroke color", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"polygonStrokeOpacity": { |
||||
|
"title": "Stroke opacity", |
||||
|
"type": "number", |
||||
|
"default": 1 |
||||
|
}, |
||||
|
"polygonStrokeWeight": { |
||||
|
"title": "Stroke weight", |
||||
|
"type": "number", |
||||
|
"default": 1 |
||||
|
}, |
||||
|
"usePolygonColorFunction": { |
||||
|
"title": "Use polygon color function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"polygonColorFunction": { |
||||
|
"title": "Polygon Color function: f(data, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"markerImage": { |
||||
|
"title": "Custom marker image", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"markerImageSize": { |
||||
|
"title": "Custom marker image size (px)", |
||||
|
"type": "number", |
||||
|
"default": 34 |
||||
|
}, |
||||
|
"useMarkerImageFunction": { |
||||
|
"title": "Use marker image function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"markerImageFunction": { |
||||
|
"title": "Marker image function: f(data, images, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"markerImages": { |
||||
|
"title": "Marker images", |
||||
|
"type": "array", |
||||
|
"items": { |
||||
|
"title": "Marker image", |
||||
|
"type": "string" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
"defaultZoomLevel", |
||||
|
"useDefaultCenterPosition", |
||||
|
"defaultCenterPosition", |
||||
|
"fitMapBounds", |
||||
|
"disableScrollZooming", |
||||
|
"latKeyName", |
||||
|
"lngKeyName", |
||||
|
"showLabel", |
||||
|
"label", |
||||
|
"useLabelFunction", |
||||
|
{ |
||||
|
"key": "labelFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
"showTooltip", |
||||
|
{ |
||||
|
"key": "showTooltipAction", |
||||
|
"type": "rc-select", |
||||
|
"multiple": false, |
||||
|
"items": [ |
||||
|
{ |
||||
|
"value": "click", |
||||
|
"label": "Show tooltip on click (Default)" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "hover", |
||||
|
"label": "Show tooltip on hover" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
"autocloseTooltip", |
||||
|
{ |
||||
|
"key": "tooltipPattern", |
||||
|
"type": "textarea" |
||||
|
}, |
||||
|
"useTooltipFunction", |
||||
|
{ |
||||
|
"key": "tooltipFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "color", |
||||
|
"type": "color" |
||||
|
}, |
||||
|
"useColorFunction", |
||||
|
{ |
||||
|
"key": "colorFunction", |
||||
|
"type": "javascript" |
||||
|
}, "showPolygon", "polygonKeyName", |
||||
|
{ |
||||
|
"key": "polygonColor", |
||||
|
"type": "color" |
||||
|
}, |
||||
|
"polygonOpacity", |
||||
|
{ |
||||
|
"key": "polygonStrokeColor", |
||||
|
"type": "color" |
||||
|
}, |
||||
|
"polygonStrokeOpacity", "polygonStrokeWeight", "usePolygonColorFunction", |
||||
|
{ |
||||
|
"key": "polygonColorFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "markerImage", |
||||
|
"type": "image" |
||||
|
}, |
||||
|
"markerImageSize", |
||||
|
"useMarkerImageFunction", |
||||
|
{ |
||||
|
"key": "markerImageFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "markerImages", |
||||
|
"items": [ |
||||
|
{ |
||||
|
"key": "markerImages[]", |
||||
|
"type": "image" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const routeMapSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Route Map Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"strokeWeight": { |
||||
|
"title": "Stroke weight", |
||||
|
"type": "number", |
||||
|
"default": 2 |
||||
|
}, |
||||
|
"strokeOpacity": { |
||||
|
"title": "Stroke opacity", |
||||
|
"type": "number", |
||||
|
"default": 1.0 |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
"strokeWeight", |
||||
|
"strokeOpacity" |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const markerClusteringSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Markers Clustering Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"useClusterMarkers": { |
||||
|
"title": "Use map markers clustering", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"zoomOnClick": { |
||||
|
"title": "Zoom when clicking on a cluster", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"maxZoom": { |
||||
|
"title": "The maximum zoom level when a marker can be part of a cluster (0 - 18)", |
||||
|
"type": "number" |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
"useClusterMarkers", |
||||
|
"zoomOnClick", |
||||
|
"maxZoom" |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const markerClusteringSettingsSchemaGoogle = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Marker Clustering Configuration Google", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"gridSize": { |
||||
|
"title": "Maximum radius that a cluster will cover in pixels", |
||||
|
"type": "number", |
||||
|
"default": 60 |
||||
|
}, |
||||
|
"minimumClusterSize": { |
||||
|
"title": "The minimum number of markers in a cluster", |
||||
|
"type": "number" |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
"gridSize", |
||||
|
"minimumClusterSize" |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const markerClusteringSettingsSchemaLeaflet = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Markers Clustering Configuration Leaflet", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"showCoverageOnHover": { |
||||
|
"title": "Show the bounds of markers when mouse over a cluster", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"animate": { |
||||
|
"title": "Show animation on markers when zooming", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"maxClusterRadius": { |
||||
|
"title": "Maximum radius that a cluster will cover in pixels", |
||||
|
"type": "number", |
||||
|
"default": 80 |
||||
|
}, |
||||
|
"chunkedLoading": { |
||||
|
"title": "Use chunks for adding markers so that the page does not freeze", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"removeOutsideVisibleBounds": { |
||||
|
"title": "Use lazy load for adding markers", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
"showCoverageOnHover", |
||||
|
"animate", |
||||
|
"maxClusterRadius", |
||||
|
"chunkedLoading", |
||||
|
"removeOutsideVisibleBounds" |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
export const imageMapSettingsSchema = |
||||
|
{ |
||||
|
"schema": { |
||||
|
"title": "Image Map Configuration", |
||||
|
"type": "object", |
||||
|
"properties": { |
||||
|
"mapImageUrl": { |
||||
|
"title": "Image map background", |
||||
|
"type": "string", |
||||
|
"default": "data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==" |
||||
|
}, |
||||
|
"imageEntityAlias": { |
||||
|
"title": "Image URL source entity alias", |
||||
|
"type": "string", |
||||
|
"default": "" |
||||
|
}, |
||||
|
"imageUrlAttribute": { |
||||
|
"title": "Image URL source entity attribute", |
||||
|
"type": "string", |
||||
|
"default": "" |
||||
|
}, |
||||
|
"disableScrollZooming": { |
||||
|
"title": "Disable scroll zooming", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"xPosKeyName": { |
||||
|
"title": "X position key name", |
||||
|
"type": "string", |
||||
|
"default": "xPos" |
||||
|
}, |
||||
|
"yPosKeyName": { |
||||
|
"title": "Y position key name", |
||||
|
"type": "string", |
||||
|
"default": "yPos" |
||||
|
}, |
||||
|
"showLabel": { |
||||
|
"title": "Show label", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"label": { |
||||
|
"title": "Label (pattern examples: '${entityName}', '${entityName}: (Text ${keyName} units.)' )", |
||||
|
"type": "string", |
||||
|
"default": "${entityName}" |
||||
|
}, |
||||
|
"useLabelFunction": { |
||||
|
"title": "Use label function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"labelFunction": { |
||||
|
"title": "Label function: f(data, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"showTooltip": { |
||||
|
"title": "Show tooltip", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"showTooltipAction": { |
||||
|
"title": "Action for displaying the tooltip", |
||||
|
"type": "string", |
||||
|
"default": "click" |
||||
|
}, |
||||
|
"autocloseTooltip": { |
||||
|
"title": "Auto-close tooltips", |
||||
|
"type": "boolean", |
||||
|
"default": true |
||||
|
}, |
||||
|
"tooltipPattern": { |
||||
|
"title": "Tooltip (for ex. 'Text ${keyName} units.' or <link-act name='my-action'>Link text</link-act>')", |
||||
|
"type": "string", |
||||
|
"default": "<b>${entityName}</b><br/><br/><b>X Pos:</b> ${xPos:2}<br/><b>Y Pos:</b> ${yPos:2}" |
||||
|
}, |
||||
|
"useTooltipFunction": { |
||||
|
"title": "Use tooltip function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"tooltipFunction": { |
||||
|
"title": "Tooltip function: f(data, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"color": { |
||||
|
"title": "Color", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"posFunction": { |
||||
|
"title": "Position conversion function: f(origXPos, origYPos), should return x,y coordinates as double from 0 to 1 each", |
||||
|
"type": "string", |
||||
|
"default": "return {x: origXPos, y: origYPos};" |
||||
|
}, |
||||
|
"markerOffsetX": { |
||||
|
"title": "Marker X offset relative to position", |
||||
|
"type": "number", |
||||
|
"default": 0.5 |
||||
|
}, |
||||
|
"markerOffsetY": { |
||||
|
"title": "Marker Y offset relative to position", |
||||
|
"type": "number", |
||||
|
"default": 1 |
||||
|
}, |
||||
|
"useColorFunction": { |
||||
|
"title": "Use color function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"colorFunction": { |
||||
|
"title": "Color function: f(data, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"markerImage": { |
||||
|
"title": "Custom marker image", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"markerImageSize": { |
||||
|
"title": "Custom marker image size (px)", |
||||
|
"type": "number", |
||||
|
"default": 34 |
||||
|
}, |
||||
|
"useMarkerImageFunction": { |
||||
|
"title": "Use marker image function", |
||||
|
"type": "boolean", |
||||
|
"default": false |
||||
|
}, |
||||
|
"markerImageFunction": { |
||||
|
"title": "Marker image function: f(data, images, dsData, dsIndex)", |
||||
|
"type": "string" |
||||
|
}, |
||||
|
"markerImages": { |
||||
|
"title": "Marker images", |
||||
|
"type": "array", |
||||
|
"items": { |
||||
|
"title": "Marker image", |
||||
|
"type": "string" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
"required": [] |
||||
|
}, |
||||
|
"form": [ |
||||
|
{ |
||||
|
"key": "mapImageUrl", |
||||
|
"type": "image" |
||||
|
}, |
||||
|
"imageEntityAlias", |
||||
|
"imageUrlAttribute", |
||||
|
"disableScrollZooming", |
||||
|
"xPosKeyName", |
||||
|
"yPosKeyName", |
||||
|
"showLabel", |
||||
|
"label", |
||||
|
"useLabelFunction", |
||||
|
{ |
||||
|
"key": "labelFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
"showTooltip", |
||||
|
{ |
||||
|
"key": "showTooltipAction", |
||||
|
"type": "rc-select", |
||||
|
"multiple": false, |
||||
|
"items": [ |
||||
|
{ |
||||
|
"value": "click", |
||||
|
"label": "Show tooltip on click (Default)" |
||||
|
}, |
||||
|
{ |
||||
|
"value": "hover", |
||||
|
"label": "Show tooltip on hover" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
"autocloseTooltip", |
||||
|
{ |
||||
|
"key": "tooltipPattern", |
||||
|
"type": "textarea" |
||||
|
}, |
||||
|
"useTooltipFunction", |
||||
|
{ |
||||
|
"key": "tooltipFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "color", |
||||
|
"type": "color" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "posFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
"markerOffsetX", |
||||
|
"markerOffsetY", |
||||
|
"useColorFunction", |
||||
|
{ |
||||
|
"key": "colorFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "markerImage", |
||||
|
"type": "image" |
||||
|
}, |
||||
|
"markerImageSize", |
||||
|
"useMarkerImageFunction", |
||||
|
{ |
||||
|
"key": "markerImageFunction", |
||||
|
"type": "javascript" |
||||
|
}, |
||||
|
{ |
||||
|
"key": "markerImages", |
||||
|
"items": [ |
||||
|
{ |
||||
|
"key": "markerImages[]", |
||||
|
"type": "image" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
Loading…
Reference in new issue