@mixd-id/web-scaffold 0.1.2301231366 → 0.1.2301231368

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231366",
+  "version": "0.1.2301231368",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^7.3.0",
+    "@googlemaps/js-api-loader": "^1.15.1",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",

package/src/components/Gmaps.vue

@@ -0,0 +1,227 @@
+<template>
+	<div :class="$style.comp">
+		<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>
+
+<script>
+
+import { Loader } from '@googlemaps/js-api-loader';
+
+export default{
+
+	props: {
+		data: Array,
+		config: Object,
+		apiKey: String
+	},
+
+	data(){
+		return {
+			map: null
+		}
+	},
+
+	mounted() {
+		this.load()
+	},
+
+	methods: {
+
+		load(){
+			if(!this.apiKey) return
+
+			if(!Array.isArray(this.data) || this.data.length < 1)
+				return
+
+			const loader = new Loader({
+				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(
+						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: this.config.zoom ?? 7,
+						mapTypeId: 'roadmap',
+						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 = [
+						/*{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
+						new google.maps.LatLng(37.782, -122.445),
+						{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
+						{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
+						{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
+						new google.maps.LatLng(37.782, -122.437),
+						{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
+
+						{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
+						{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
+						new google.maps.LatLng(37.785, -122.443),
+						{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
+						new google.maps.LatLng(37.785, -122.439),
+						{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
+						{location: new google.maps.LatLng(37.785, -122.435), weight: 3}*/
+					];
+
+					this.data.forEach((item) => {
+						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', parseInt(this.config.mapRadius ?? 12))
+					heatmap.setMap(this.map);
+
+					const gradient = [
+						"rgba(0, 255, 255, 0)",
+						"rgba(0, 255, 255, 1)",
+						"rgba(0, 191, 255, 1)",
+						"rgba(0, 127, 255, 1)",
+						"rgba(0, 63, 255, 1)",
+						"rgba(0, 0, 255, 1)",
+						"rgba(0, 0, 223, 1)",
+						"rgba(0, 0, 191, 1)",
+						"rgba(0, 0, 159, 1)",
+						"rgba(0, 0, 127, 1)",
+						"rgba(63, 0, 91, 1)",
+						"rgba(127, 0, 63, 1)",
+						"rgba(191, 0, 31, 1)",
+						"rgba(255, 0, 0, 1)",
+					];
+					heatmap.set("gradient", gradient);
+
+					//console.log('Gmap, data count:', this.data.length)
+				});
+		}
+
+	},
+
+	watch: {
+
+		data(){
+			this.load()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1 flex flex-col;
+}
+
+</style>