vue-geojson-view-ts 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "files": [
     "dist",
@@ -58,14 +58,16 @@
     "@types/crypto-js": "^4.1.1",
     "@types/leaflet": "^1.9.3",
     "@types/leaflet-draw": "^1.0.6",
+    "@types/leaflet.heat": "^0.2.2",
     "@vue-leaflet/vue-leaflet": "^0.9.0",
     "axios": "^1.4.0",
     "copy-webpack-plugin": "^11.0.0",
     "crypto-js": "^4.1.1",
-    "leaflet": "1.9.3",
+    "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
     "leaflet-draw-locales": "^1.2.2",
     "leaflet.fullscreen": "^2.4.0",
+    "leaflet.heat": "^0.2.0",
     "screenfull": "^6.0.2",
     "typewriter-effect": "^2.19.0"
   }

package/src/components/MapHeatComponent.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="map-container" :style="`height:${configurationMap?.height}`">
+    <div :id="idMap" style="height: 100%"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { onMounted, ref } from "vue";
+import { markerDefault } from "../helpers/imgBase64";
+import "leaflet.fullscreen/Control.FullScreen.css";
+import "leaflet.fullscreen";
+import "leaflet.heat";
+
+export type TIconMaker = {
+  iconUrl: string;
+  iconSize: [number, number];
+  iconAnchor: [number, number];
+  class?: string;
+  type: "image" | "svg";
+};
+
+export interface IConfigurationMap {
+  height: string;
+  maxZoom: number;
+  iconMarker: TIconMaker;
+  dragMarker: boolean;
+}
+
+export interface ICoords {
+  lat: number;
+  lng: number;
+  zoom: number;
+}
+
+export interface IHeat {
+  lat: number;
+  lng: number;
+  intensidad: number;
+}
+
+export interface IMapSearchAddressProps {
+  configurationMap?: IConfigurationMap;
+  coordinatesMap?: ICoords;
+  coordinatesMapHeat?: IHeat[];
+}
+
+const props = withDefaults(defineProps<IMapSearchAddressProps>(), {
+  configurationMap: () => {
+    return {
+      height: "250px",
+      maxZoom: 20,
+      iconMarker: {
+        iconUrl: markerDefault,
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        class: "",
+        type: "image",
+      },
+      dragMarker: true,
+    };
+  },
+  coordinatesMap: () => {
+    return {
+      lat: -19.0429,
+      lng: -65.2554,
+      zoom: 12,
+    };
+  },
+  coordinatesMapHeat: () => {
+    return [];
+  },
+});
+
+const emit = defineEmits(["updated:coordsMarker"]);
+
+const idMap = ref();
+const coords = ref(props.coordinatesMap);
+const mapRender = ref();
+const markerRender = ref();
+
+onMounted(async () => {
+  await makeid(10);
+  await renderMap();
+});
+
+const makeid = async (length: number) => {
+  let result = "";
+  const characters = "abcdefghijklmnopqrstuvwxyz";
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  idMap.value = result;
+};
+
+const renderMap = async () => {
+  await createMap();
+};
+
+const createMap = async () => {
+  const iconMarker = props.configurationMap?.iconMarker;
+  const map = L.map(idMap.value, { fullscreenControl: true } as any).setView(
+    [coords.value.lat, coords.value.lng],
+    coords.value.zoom
+  );
+  map.invalidateSize();
+  mapRender.value = map;
+  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: props.configurationMap?.maxZoom,
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(map);
+
+  const heatMap: any[] = props.coordinatesMapHeat.map((item: any) => [
+    item.lat,
+    item.lng,
+    item.intensidad,
+  ]);
+  L.heatLayer(heatMap, { radius: 25 }).addTo(map);
+
+  if (iconMarker.type === "image") {
+    const marker = L.marker([coords.value.lat, coords.value.lng], {
+      icon: L.icon({
+        iconUrl: iconMarker.iconUrl,
+        iconAnchor: iconMarker.iconAnchor,
+        iconSize: iconMarker.iconSize,
+        className: iconMarker.class,
+      }),
+      draggable: props.configurationMap.dragMarker,
+    }).addTo(map);
+    markerRender.value = marker;
+    marker.on("dragend", (event) => {
+      const updatedCoordinates = event.target.getLatLng();
+      const lat = updatedCoordinates.lat;
+      const lng = updatedCoordinates.lng;
+      setCoordinates({
+        lat,
+        lng,
+      });
+    });
+  } else if (iconMarker.type === "svg") {
+    const marker = L.marker([coords.value.lat, coords.value.lng], {
+      icon: L.divIcon({
+        html: iconMarker.iconUrl,
+        iconAnchor: iconMarker.iconAnchor,
+        iconSize: iconMarker.iconSize,
+        className: iconMarker.class,
+      }),
+      draggable: props.configurationMap.dragMarker,
+    }).addTo(map);
+    markerRender.value = marker;
+    marker.on("dragend", (event) => {
+      const updatedCoordinates = event.target.getLatLng();
+      const lat = updatedCoordinates.lat;
+      const lng = updatedCoordinates.lng;
+      setCoordinates({
+        lat,
+        lng,
+      });
+    });
+  }
+};
+
+const searchAddress = async (query: string) => {
+  // const address = await axios.get(
+  //   location.protocol + "//nominatim.openstreetmap.org/search?",
+  //   {
+  //     params: {
+  //       //query
+  //       q: query,
+  //       limit: 1,
+  //       format: "json",
+  //     },
+  //   }
+  // );
+  // if (address.data.length === 1) {
+  //   const lat = parseFloat(address.data[0].lat);
+  //   const lng = parseFloat(address.data[0].lon);
+  //   const coord = { lng, lat };
+  //   setCoordinates({ ...coord, moveMarker: true });
+  //   return address.data[0];
+  // }
+  // return address.data;
+};
+
+const setCoordinates = ({
+  lat,
+  lng,
+  moveMarker = false,
+}: {
+  lat: number;
+  lng: number;
+  moveMarker?: boolean;
+}) => {
+  emit("updated:coordsMarker", {
+    lat,
+    lng,
+  });
+  if (moveMarker) markerRender.value?.setLatLng({ lat, lng });
+  moveCenterTo({ lat, lng });
+};
+
+const moveCenterTo = ({ lat, lng }: { lat: number; lng: number }) => {
+  const newCenter = L.latLng(lat, lng);
+  mapRender.value.panTo(newCenter, { animate: true, duration: 0.5 });
+};
+
+defineExpose({
+  searchAddress,
+});
+</script>
+
+<style lang="scss"></style>