From 2b21dd98f10282f703bc165e773f82b004d06a67 Mon Sep 17 00:00:00 2001 From: Jelle Date: Thu, 16 May 2019 12:45:17 +0200 Subject: [PATCH 1/2] Marker labels Added support for non persistent objects and marker labels. This allows markers on the map to be easily identified if the map is displayed next to a ListView for example. --- package-lock.json | 14 ++----- src/GoogleMaps.xml | 18 ++++++++- src/GoogleMapsContext.xml | 8 ++++ src/components/GoogleMapContainer.ts | 11 +++++- src/components/Map.ts | 5 ++- src/components/Marker.ts | 4 ++ src/ui/GoogleMaps.css | 56 ++++++++++++++++++---------- src/utils/ContainerUtils.ts | 1 + 8 files changed, 81 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0fe4439..c1e2c6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -510,7 +510,6 @@ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, - "optional": true, "requires": { "delegates": "^1.0.0", "readable-stream": "^2.0.6" @@ -1887,8 +1886,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "constants-browserify": { "version": "1.0.0", @@ -2424,8 +2422,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "dev": true, - "optional": true + "dev": true }, "depd": { "version": "1.1.2", @@ -4280,7 +4277,6 @@ "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, - "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -4310,7 +4306,6 @@ "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, - "optional": true, "requires": { "aproba": "^1.0.3", "console-control-strings": "^1.0.0", @@ -4957,8 +4952,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", - "dev": true, - "optional": true + "dev": true }, "has-value": { "version": "1.0.0", @@ -7377,7 +7371,6 @@ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, - "optional": true, "requires": { "are-we-there-yet": "~1.1.2", "console-control-strings": "~1.1.0", @@ -11170,7 +11163,6 @@ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, - "optional": true, "requires": { "string-width": "^1.0.2 || 2" } diff --git a/src/GoogleMaps.xml b/src/GoogleMaps.xml index c619af4..c3cd835 100644 --- a/src/GoogleMaps.xml +++ b/src/GoogleMaps.xml @@ -62,7 +62,7 @@ WARNING: Address lookups are Google APIs calls which are limited in the free tri - + Locations entity Database / Microflow @@ -234,6 +234,22 @@ WARNING: Address lookups are Google APIs calls which are limited in the free tri + + Marker label (Context) + Markers + For 'Datasource' 'Context'; Add a single character label inside the default marker to identify markers. + + + + + + Marker label (Database / Microflow) + Markers + For 'Datasource' 'Database' or 'Microflow'; Add a single character label inside the default marker to identify markers. + + + + Map styles diff --git a/src/GoogleMapsContext.xml b/src/GoogleMapsContext.xml index b80fdaf..70f23f1 100644 --- a/src/GoogleMapsContext.xml +++ b/src/GoogleMapsContext.xml @@ -173,6 +173,14 @@ + + Marker label + Markers + When using default markers, Google allows you to add a label to each marker. This can be used e.g. to number markers and make them easily recognizable. + + + + Styles diff --git a/src/components/GoogleMapContainer.ts b/src/components/GoogleMapContainer.ts index ffdfebe..967090f 100644 --- a/src/components/GoogleMapContainer.ts +++ b/src/components/GoogleMapContainer.ts @@ -34,10 +34,12 @@ interface GoogleMapContainerProps extends WrapperProps { latitudeAttribute: string; longitudeAttribute: string; markerImageAttribute: string; + markerLabelAttribute: string; addressAttributeContext: string; latitudeAttributeContext: string; longitudeAttributeContext: string; markerImageAttributeContext: string; + markerLabelAttributeContext: string; staticLocations: StaticLocation[]; markerImages: Array<{ enumKey: string, enumImage: string}>; width: number; @@ -124,10 +126,12 @@ class GoogleMapContainer extends Component this.subscriptionHandles.push(window.mx.data.subscribe({ attr, callback: () => this.fetchData(contextObject), guid: contextObject.getGuid() @@ -198,17 +202,20 @@ class GoogleMapContainer extends Component { if (this.state.isLoaded && this.state.locations && this.state.locations.length) { this.state.locations.map((locationObject, index) => { - const { latitude, longitude, url } = locationObject; + const { latitude, longitude, url, label } = locationObject; if (this.validLocation(locationObject)) { markerElements.push(createElement(Marker, { key: index, lat: latitude as number, lng: longitude as number, - url + url, + label })); } }); diff --git a/src/components/Marker.ts b/src/components/Marker.ts index 787a8fe..8a7fde4 100644 --- a/src/components/Marker.ts +++ b/src/components/Marker.ts @@ -4,6 +4,7 @@ export interface MarkerProps { lat: number; lng: number; url?: string; + label?: string; } export const Marker: StatelessComponent = (props) => { @@ -14,6 +15,9 @@ export const Marker: StatelessComponent = (props) => { className: "widget-google-maps-marker-url", style }); + } else if (props.label) { + return createElement("div", { className: "widget-google-maps-marker" }, + createElement("div", {className: "widget-google-maps-marker-label"}, props.label.substring(0,1))); } return createElement("div", { className: "widget-google-maps-marker" }); diff --git a/src/ui/GoogleMaps.css b/src/ui/GoogleMaps.css index 934f3f4..9fa9f05 100644 --- a/src/ui/GoogleMaps.css +++ b/src/ui/GoogleMaps.css @@ -1,30 +1,46 @@ .widget-google-maps-wrapper { - position: relative; + position: relative; } .widget-google-maps-wrapper > div { - position: absolute; - top: 0; bottom: 0; left: 0; right: 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } -.widget-google-maps-marker{ - background-image: url(data:image/png;base64,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); - cursor: pointer; - width: 50px; - height: 50px; - padding: 0; - left: -25px; - top: -50px; - position: absolute; +.widget-google-maps-marker { + background-image: url(data:image/png;base64,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); + cursor: pointer; + width: 50px; + height: 50px; + padding: 0; + left: -25px; + top: -50px; + position: absolute; } .widget-google-maps-marker-url { - background-repeat: no-repeat; - cursor: pointer; - width: 50px; - height: 50px; - padding: 0; - left: -25px; - top: -50px; - position: absolute; + background-repeat: no-repeat; + cursor: pointer; + width: 50px; + height: 50px; + padding: 0; + left: -25px; + top: -50px; + position: absolute; } + +.widget-google-maps-marker-label { + background: #c0392b; + border-radius: 10px; + width: 18px; + text-align: center; + font-size: 16px; + left: 16px; + top: 7px; + position: absolute; + font-weight: bold; + color: #fff; +} \ No newline at end of file diff --git a/src/utils/ContainerUtils.ts b/src/utils/ContainerUtils.ts index 1fc1c16..5d6b644 100644 --- a/src/utils/ContainerUtils.ts +++ b/src/utils/ContainerUtils.ts @@ -6,6 +6,7 @@ export interface Location { latitude?: number; longitude?: number; url?: string; + label?: string; } export interface StaticLocation { From 6d76cc82933347135b8fb8d2b52209d9ee6ec48e Mon Sep 17 00:00:00 2001 From: Jelle Date: Thu, 16 May 2019 12:53:12 +0200 Subject: [PATCH 2/2] TSLint fix Fixed errors comming from ts-lint test --- src/components/GoogleMapContainer.ts | 2 +- src/components/Marker.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/GoogleMapContainer.ts b/src/components/GoogleMapContainer.ts index 967090f..dc3c621 100644 --- a/src/components/GoogleMapContainer.ts +++ b/src/components/GoogleMapContainer.ts @@ -215,7 +215,7 @@ class GoogleMapContainer extends Component = (props) => { }); } else if (props.label) { return createElement("div", { className: "widget-google-maps-marker" }, - createElement("div", {className: "widget-google-maps-marker-label"}, props.label.substring(0,1))); + createElement("div", { className: "widget-google-maps-marker-label" }, props.label.substring(0, 1))); } return createElement("div", { className: "widget-google-maps-marker" });