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