vue-geojson-view-ts 1.3.19 → 1.3.21

package/src/components/MapSearchAddress.vue

@@ -1,309 +1,309 @@
-<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 axios from "axios";
-import gpsIcon from "../assets/gps.svg";
-import sateliteIcon from "../assets/satelite.svg";
-
-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 IMapSearchAddressProps {
-  configurationMap?: IConfigurationMap;
-  coordinatesMap?: ICoords;
-  isSatelite?: boolean;
-}
-
-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,
-    };
-  },
-});
-
-const emit = defineEmits(["updated:coordsMarker"]);
-
-const idMap = ref();
-const coords = ref(props.coordinatesMap);
-const mapRender = ref();
-const markerRender = ref();
-const currentTileLayer = ref<L.TileLayer | null>(null);
-const isSatelliteView = ref(false);
-
-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;
-
-  // Inicializar con la vista correcta según el prop
-  isSatelliteView.value = props.isSatelite || false;
-  if (isSatelliteView.value) {
-    currentTileLayer.value = L.tileLayer(
-      "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
-      {
-        attribution:
-          '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-      }
-    );
-  } else {
-    currentTileLayer.value = 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>',
-      }
-    );
-  }
-  currentTileLayer.value.addTo(map);
-
-  // Agregar el control satelital si está habilitado
-  if (props.isSatelite !== undefined) {
-    const satelliteControl = createSatelliteControl();
-    map.addControl(satelliteControl);
-  }
-
-  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 createSatelliteControl = (): L.Control => {
-  const SatelliteControl = L.Control.extend({
-    onAdd: (map: L.Map) => {
-      const container = L.DomUtil.create(
-        "div",
-        "leaflet-control-draw leaflet-bar leaflet-control"
-      );
-
-      const satelliteButton = L.DomUtil.create(
-        "a",
-        "leaflet-draw-draw-satellite",
-        container
-      );
-
-      satelliteButton.href = "#";
-      satelliteButton.title = isSatelliteView.value
-        ? "Vista Normal"
-        : "Vista Satélite";
-
-      // Usar el mismo estilo que los otros botones de draw
-      satelliteButton.style.backgroundImage = isSatelliteView.value
-        ? `url(${gpsIcon})`
-        : `url(${sateliteIcon})`;
-      satelliteButton.style.backgroundPosition = "center";
-      satelliteButton.style.backgroundRepeat = "no-repeat";
-      satelliteButton.style.backgroundSize = "20px 20px";
-
-      L.DomEvent.disableClickPropagation(satelliteButton);
-      L.DomEvent.on(satelliteButton, "click", toggleSatelliteView);
-
-      return container;
-    },
-  });
-
-  return new SatelliteControl({ position: "topleft" });
-};
-
-const toggleSatelliteView = (): void => {
-  if (!mapRender.value || !currentTileLayer.value) return;
-
-  isSatelliteView.value = !isSatelliteView.value;
-
-  // Remover la capa actual
-  mapRender.value.removeLayer(currentTileLayer.value as unknown as L.Layer);
-
-  // Agregar la nueva capa
-  if (isSatelliteView.value) {
-    currentTileLayer.value = L.tileLayer(
-      "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
-      {
-        attribution:
-          '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-      }
-    );
-  } else {
-    currentTileLayer.value = L.tileLayer(
-      "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-      {
-        attribution:
-          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-      }
-    );
-  }
-
-  currentTileLayer.value.addTo(mapRender.value as L.Map);
-
-  // Actualizar el ícono del control satelital
-  const satelliteButtons = document.querySelectorAll(
-    ".leaflet-draw-draw-satellite"
-  );
-  satelliteButtons.forEach((button) => {
-    const htmlButton = button as HTMLElement;
-    htmlButton.style.backgroundImage = isSatelliteView.value
-      ? `url(${gpsIcon})`
-      : `url(${sateliteIcon})`;
-    htmlButton.title = isSatelliteView.value
-      ? "Vista Normal"
-      : "Vista Satélite";
-  });
-};
-
-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>
+<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 axios from "axios";
+import gpsIcon from "../assets/gps.svg";
+import sateliteIcon from "../assets/satelite.svg";
+
+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 IMapSearchAddressProps {
+  configurationMap?: IConfigurationMap;
+  coordinatesMap?: ICoords;
+  isSatelite?: boolean;
+}
+
+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,
+    };
+  },
+});
+
+const emit = defineEmits(["updated:coordsMarker"]);
+
+const idMap = ref();
+const coords = ref(props.coordinatesMap);
+const mapRender = ref();
+const markerRender = ref();
+const currentTileLayer = ref<L.TileLayer | null>(null);
+const isSatelliteView = ref(false);
+
+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;
+
+  // Inicializar con la vista correcta según el prop
+  isSatelliteView.value = props.isSatelite || false;
+  if (isSatelliteView.value) {
+    currentTileLayer.value = L.tileLayer(
+      "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
+      {
+        attribution:
+          '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }
+    );
+  } else {
+    currentTileLayer.value = 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>',
+      }
+    );
+  }
+  currentTileLayer.value.addTo(map);
+
+  // Agregar el control satelital si está habilitado
+  if (props.isSatelite !== undefined) {
+    const satelliteControl = createSatelliteControl();
+    map.addControl(satelliteControl);
+  }
+
+  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 createSatelliteControl = (): L.Control => {
+  const SatelliteControl = L.Control.extend({
+    onAdd: (map: L.Map) => {
+      const container = L.DomUtil.create(
+        "div",
+        "leaflet-control-draw leaflet-bar leaflet-control"
+      );
+
+      const satelliteButton = L.DomUtil.create(
+        "a",
+        "leaflet-draw-draw-satellite",
+        container
+      );
+
+      satelliteButton.href = "#";
+      satelliteButton.title = isSatelliteView.value
+        ? "Vista Normal"
+        : "Vista Satélite";
+
+      // Usar el mismo estilo que los otros botones de draw
+      satelliteButton.style.backgroundImage = isSatelliteView.value
+        ? `url(${gpsIcon})`
+        : `url(${sateliteIcon})`;
+      satelliteButton.style.backgroundPosition = "center";
+      satelliteButton.style.backgroundRepeat = "no-repeat";
+      satelliteButton.style.backgroundSize = "20px 20px";
+
+      L.DomEvent.disableClickPropagation(satelliteButton);
+      L.DomEvent.on(satelliteButton, "click", toggleSatelliteView);
+
+      return container;
+    },
+  });
+
+  return new SatelliteControl({ position: "topleft" });
+};
+
+const toggleSatelliteView = (): void => {
+  if (!mapRender.value || !currentTileLayer.value) return;
+
+  isSatelliteView.value = !isSatelliteView.value;
+
+  // Remover la capa actual
+  mapRender.value.removeLayer(currentTileLayer.value as unknown as L.Layer);
+
+  // Agregar la nueva capa
+  if (isSatelliteView.value) {
+    currentTileLayer.value = L.tileLayer(
+      "https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=t8mWT2ozs1JWBqMZOnZr",
+      {
+        attribution:
+          '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }
+    );
+  } else {
+    currentTileLayer.value = L.tileLayer(
+      "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+      {
+        attribution:
+          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }
+    );
+  }
+
+  currentTileLayer.value.addTo(mapRender.value as L.Map);
+
+  // Actualizar el ícono del control satelital
+  const satelliteButtons = document.querySelectorAll(
+    ".leaflet-draw-draw-satellite"
+  );
+  satelliteButtons.forEach((button) => {
+    const htmlButton = button as HTMLElement;
+    htmlButton.style.backgroundImage = isSatelliteView.value
+      ? `url(${gpsIcon})`
+      : `url(${sateliteIcon})`;
+    htmlButton.title = isSatelliteView.value
+      ? "Vista Normal"
+      : "Vista Satélite";
+  });
+};
+
+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>