From 99bf6d122c16e55de0f86c62fa01c124c16c52b5 Mon Sep 17 00:00:00 2001 From: deecay Date: Tue, 18 Jun 2019 15:50:09 +0900 Subject: [PATCH] Custom Map Markers (#3840) --- client/app/components/color-box.less | 11 +++ client/app/visualizations/map/index.js | 54 ++++++++++- client/app/visualizations/map/map-editor.html | 97 ++++++++++++++++++- package.json | 1 + 4 files changed, 159 insertions(+), 4 deletions(-) diff --git a/client/app/components/color-box.less b/client/app/components/color-box.less index e1027258..7a23fd13 100644 --- a/client/app/components/color-box.less +++ b/client/app/components/color-box.less @@ -1,8 +1,19 @@ +@import '../assets/less/inc/variables'; + color-box { + vertical-align: text-bottom; + display: inline; + span { width: 12px !important; height: 12px !important; display: inline-block !important; margin-right: 5px; + vertical-align: middle; + border: 1px solid rgba(0,0,0,0.1); } + & ~ span { + vertical-align: bottom; + color: @input-color; + } } diff --git a/client/app/visualizations/map/index.js b/client/app/visualizations/map/index.js index 96268107..aa0ab468 100644 --- a/client/app/visualizations/map/index.js +++ b/client/app/visualizations/map/index.js @@ -5,6 +5,8 @@ import 'leaflet.markercluster'; import 'leaflet/dist/leaflet.css'; import 'leaflet.markercluster/dist/MarkerCluster.css'; import 'leaflet.markercluster/dist/MarkerCluster.Default.css'; +import 'beautifymarker'; +import 'beautifymarker/leaflet-beautify-marker-icon.css'; import markerIcon from 'leaflet/dist/images/marker-icon.png'; import markerIconRetina from 'leaflet/dist/images/marker-icon-2x.png'; import markerShadow from 'leaflet/dist/images/marker-shadow.png'; @@ -12,6 +14,7 @@ import 'leaflet-fullscreen'; import 'leaflet-fullscreen/dist/leaflet.fullscreen.css'; import { angular2react } from 'angular2react'; import { registerVisualization } from '@/visualizations'; +import ColorPalette from '@/visualizations/ColorPalette'; import template from './map.html'; import editorTemplate from './map-editor.html'; @@ -76,9 +79,28 @@ const MAP_TILES = [ }, ]; +const iconAnchors = { + marker: [14, 32], + circle: [10, 10], + rectangle: [11, 11], + 'circle-dot': [1, 2], + 'rectangle-dot': [1, 2], + doughnut: [8, 8], +}; + +const popupAnchors = { + rectangle: [0, -3], + circle: [1, -3], +}; + const DEFAULT_OPTIONS = { classify: 'none', clusterMarkers: true, + iconShape: 'marker', + iconFont: 'circle', + foregroundColor: '#ffffff', + backgroundColor: '#356AFF', + borderColor: '#356AFF', }; function heatpoint(lat, lon, color) { @@ -92,6 +114,7 @@ function heatpoint(lat, lon, color) { } const createMarker = (lat, lon) => L.marker([lat, lon]); +const createIconMarker = (lat, lon, icn) => L.marker([lat, lon], { icon: icn }); function createDescription(latCol, lonCol, row) { const lat = row[latCol]; @@ -229,7 +252,22 @@ const MapRenderer = { const groupColor = this.options.groups[name].color; marker = heatpoint(lat, lon, groupColor); } else { - marker = createMarker(lat, lon); + if (this.options.customizeMarkers) { + const icon = L.BeautifyIcon.icon({ + iconShape: this.options.iconShape, + icon: this.options.iconFont, + iconSize: this.options.iconShape === 'rectangle' ? [22, 22] : false, + iconAnchor: iconAnchors[this.options.iconShape], + popupAnchor: popupAnchors[this.options.iconShape], + prefix: 'fa', + textColor: this.options.foregroundColor, + backgroundColor: this.options.backgroundColor, + borderColor: this.options.borderColor, + }); + marker = createIconMarker(lat, lon, icon); + } else { + marker = createMarker(lat, lon); + } } marker.bindPopup(createDescription(latCol, lonCol, row)); @@ -308,6 +346,20 @@ const MapEditor = { this.mapTiles = MAP_TILES; + this.iconShapes = { + marker: 'Marker + Icon', + doughnut: 'Circle', + 'circle-dot': 'Circle Dot', + circle: 'Circle + Icon', + 'rectangle-dot': 'Square Dot', + rectangle: 'Square + Icon', + }; + + this.colors = { + White: '#ffffff', + ...ColorPalette, + }; + $scope.$watch('$ctrl.data.columns', () => { this.columns = this.data.columns; this.columnNames = _.map(this.columns, c => c.name); diff --git a/client/app/visualizations/map/map-editor.html b/client/app/visualizations/map/map-editor.html index 99d5e0e7..b7b04b64 100644 --- a/client/app/visualizations/map/map-editor.html +++ b/client/app/visualizations/map/map-editor.html @@ -2,7 +2,7 @@
@@ -57,7 +57,9 @@
-
+
+

Tile

+
-
+

Marker

+ +
+ +
+ +
+
+
+ + + {{$select.selected.value}} + + {{shapes.value}} + + +
+
+
+
+ + +
+
+
+ +
+
+
+ + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + +
+
+
+ +
+
+
+ + + + + + + + + + + +
+
+
+
diff --git a/package.json b/package.json index 9d3d2ced..5796fbb1 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "angular-vs-repeat": "^1.1.7", "angular2react": "^3.0.2", "antd": "^3.12.3", + "beautifymarker": "^1.0.7", "bootstrap": "^3.3.7", "brace": "^0.11.0", "chroma-js": "^1.3.6",