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..dc3c621 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..4606b83 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 {