@mixd-id/web-scaffold 0.1.2301231367 → 0.1.2301231369

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231367",
+  "version": "0.1.2301231369",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Gmaps.vue

@@ -1,6 +1,7 @@
 <template>
 	<div :class="$style.comp">
-		<div ref="map" class="flex-1"></div>
+		<div v-if="apiKey" ref="map" class="flex-1"></div>
+		<div v-else class="flex-1 flex items-center justify-center text-text-400">{{ $t('Google maps api required') }}</div>
 	</div>
 </template>
 
@@ -12,7 +13,8 @@ export default{
 
 	props: {
 		data: Array,
-		radius: Number
+		config: Object,
+		apiKey: String
 	},
 
 	data(){
@@ -28,26 +30,122 @@ export default{
 	methods: {
 
 		load(){
+			if(!this.apiKey) return
 
 			if(!Array.isArray(this.data) || this.data.length < 1)
 				return
 
 			const loader = new Loader({
-				apiKey: "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
+				apiKey: this.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
 			})
 
 			loader.load()
 				.then(async () => {
+
 					const { Map } = await google.maps.importLibrary([ "maps" ]);
 					await google.maps.importLibrary("visualization", ["HeatmapLayer"]);
 
-					var center = new google.maps.LatLng(-6.2088, 106.8456);
+					var center = new google.maps.LatLng(
+						this.config.center ? this.config.center[0] : -6.2088,
+						this.config.center ? this.config.center[1] : 106.8456);
 
 					this.map = new Map(this.$refs.map, {
 						center: center,
-						zoom: 7,
+						zoom: this.config.zoom ?? 7,
 						mapTypeId: 'roadmap',
-						streetViewControl: false
+						streetViewControl: false,
+						keyboardShortcuts: false,
+						styles: [
+							{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+							{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+							{
+								featureType: "administrative.locality",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "geometry",
+								stylers: [{ color: "#263c3f" }],
+							},
+							{
+								featureType: "poi.park",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#6b9a76" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry",
+								stylers: [{ color: "#38414e" }],
+							},
+							{
+								featureType: "road",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#212a37" }],
+							},
+							{
+								featureType: "road",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#9ca5b3" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry",
+								stylers: [{ color: "#746855" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "geometry.stroke",
+								stylers: [{ color: "#1f2835" }],
+							},
+							{
+								featureType: "road.highway",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#f3d19c" }],
+							},
+							{
+								featureType: "transit",
+								elementType: "geometry",
+								stylers: [{ color: "#2f3948" }],
+							},
+							{
+								featureType: "transit.station",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#d59563" }],
+							},
+							{
+								featureType: "water",
+								elementType: "geometry",
+								stylers: [{ color: "#17263c" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.fill",
+								stylers: [{ color: "#515c6d" }],
+							},
+							{
+								featureType: "water",
+								elementType: "labels.text.stroke",
+								stylers: [{ color: "#17263c" }],
+							},
+						]
+					});
+
+					google.maps.event.addListener(this.map, 'zoom_changed', () => {
+						this.config.zoom = this.map.getZoom();
+					});
+
+					google.maps.event.addListener(this.map, 'center_changed', () => {
+						this.config.center = [
+							this.map.getCenter().lat(),
+							this.map.getCenter().lng()
+						]
 					});
 
 					var heatMapData = [
@@ -69,17 +167,19 @@ export default{
 					];
 
 					this.data.forEach((item) => {
-						heatMapData.push({
-							location: new google.maps.LatLng(item[0], item[1]),
-							weight: item[2]
-						})
+						if(item[0] && item[1] && item[2]){
+							heatMapData.push({
+								location: new google.maps.LatLng(item[0], item[1]),
+								weight: item[2]
+							})
+						}
 					})
 
 					var heatmap = new google.maps.visualization.HeatmapLayer({
 						data: heatMapData,
 						dissipating: true
 					});
-					heatmap.set('radius', this.radius ?? 12)
+					heatmap.set('radius', parseInt(this.config.mapRadius ?? 12))
 					heatmap.setMap(this.map);
 
 					const gradient = [
@@ -100,10 +200,18 @@ export default{
 					];
 					heatmap.set("gradient", gradient);
 
-					console.log('Gmap, data count:', this.data.length)
+					//console.log('Gmap, data count:', this.data.length)
 				});
 		}
 
+	},
+
+	watch: {
+
+		data(){
+			this.load()
+		}
+
 	}
 
 }