vue-geojson-view-ts 1.3.8 → 1.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-geojson-view-ts",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "type": "module",
   "files": [
     "dist",

package/src/components/MapHeatComponent.vue

@@ -199,7 +199,6 @@ export default defineComponent({
   },
   methods: {
     changeTypeMap(type: string) {
-      this.type = type;
       if (type === "0") {
         this.heatLayer.setVisible(true);
         this.pointLayer.setVisible(false);
@@ -330,7 +329,6 @@ export default defineComponent({
       return false;
     },
     async onClickListener(event: any) {
-      this.changeTypeMap("1");
       const content: any = document.getElementById("popup-content");
       const closer: any = document.getElementById("popup-closer");
 

package/src/components/MapView.vue

@@ -13,8 +13,8 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-draw/dist/leaflet.draw.css";
 import drawLocales from "leaflet-draw-locales";
 import axios from "axios";
-import 'leaflet.fullscreen/Control.FullScreen.css'
-import 'leaflet.fullscreen'
+import "leaflet.fullscreen/Control.FullScreen.css";
+import "leaflet.fullscreen";
 
 declare global {
   interface Window {
@@ -136,7 +136,7 @@ export default defineComponent({
           : this.markerIcon
         : this.markerIcon;
       window.type = true;
-      const map = L.map(this.idMap,{fullscreenControl:true} as any).setView(
+      const map = L.map(this.idMap, { fullscreenControl: true } as any).setView(
         [
           this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
           this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
@@ -203,8 +203,14 @@ export default defineComponent({
                 icon: L.icon(iconDefaultMarket),
               }
             : false,
-          polyline: false,
-          circlemarker: false,
+          polyline: this.configurationMap?.createFigures.polyline
+            ? {
+                shapeOptions: {
+                  color: "blue",
+                },
+              }
+            : false,
+          circlemarker: this.configurationMap?.createFigures.multipoint,
         },
         edit: contextEdit as any,
       });
@@ -213,7 +219,37 @@ export default defineComponent({
       map.on("draw:created", (event: any) => {
         const layer = event.layer;
         featureGroup.addLayer(layer);
-        const geojson = layer.toGeoJSON();
+        let geojson = layer.toGeoJSON();
+        // *** AGREGADO: Manejo especial para CircleMarker (convertir a MultiPoint) ***
+        if (event.layerType === "circlemarker") {
+          // Convertir CircleMarker a formato MultiPoint para consistencia
+          geojson = {
+            type: "Feature",
+            geometry: {
+              type: "MultiPoint",
+              coordinates: [geojson.geometry.coordinates],
+            },
+            properties: {
+              ...geojson.properties,
+              pointType: "multipoint",
+              style: {
+                color:
+                  this.configurationMap?.createFigures?.multipoint?.color ||
+                  "green",
+                fillColor:
+                  this.configurationMap?.createFigures?.multipoint?.fillColor ||
+                  "green",
+                fillOpacity:
+                  this.configurationMap?.createFigures?.multipoint
+                    ?.fillOpacity || 0.8,
+                radius:
+                  this.configurationMap?.createFigures?.multipoint?.radius || 6,
+                weight:
+                  this.configurationMap?.createFigures?.multipoint?.weight || 2,
+              },
+            },
+          };
+        }
         if (this.getGeoJSON) this.getGeoJSON([geojson]);
       });
 
@@ -232,17 +268,15 @@ export default defineComponent({
           : this.markerIcon
         : this.markerIcon;
       window.type = true;
-      const map = L.map(this.idMap,{fullscreenControl:true} as any).setView(
+      const map = L.map(this.idMap, { fullscreenControl: true } as any).setView(
         [
           this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
           this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
         ],
         this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
       );
-      //const map = L.map(this.idMap,{minZoom: 15,maxZoom: 500}).setView([this.renderCoordinates?this.renderCoordinates[0] as number:0,this.renderCoordinates?this.renderCoordinates[1] as number:0],this.renderCoordinates?this.renderCoordinates[2]as number:0);
       this.mapRender = map;
       L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-        //maxZoom: 120,//this.configurationMap?.maxZoom,
         attribution:
           '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       }).addTo(map);
@@ -270,10 +304,14 @@ export default defineComponent({
             item.features.forEach((feature: any) => {
               if (
                 feature.geometry.type === "Polygon" ||
-                feature.geometry.type === "MultiPolygon"
+                feature.geometry.type === "MultiPolygon" ||
+                feature.geometry.type === "LineString" ||
+                feature.geometry.type === "MultiLineString" ||
+                feature.geometry.type === "Point" ||
+                feature.geometry.type === "MultiPoint"
               ) {
-                //L.geoJSON(feature).addTo(featureGroup);
                 L.geoJson(feature, {
+                  pointToLayer: this.getPointToLayer.bind(this),
                   onEachFeature: function (feature, layer) {
                     featureGroup.addLayer(layer);
                   },
@@ -283,9 +321,12 @@ export default defineComponent({
           } else if (item.type === "Feature") {
             if (
               item.geometry.type === "Polygon" ||
-              item.geometry.type === "MultiPolygon"
+              item.geometry.type === "MultiPolygon" ||
+              item.geometry.type === "LineString" ||
+              item.geometry.type === "MultiLineString" ||
+              item.geometry.type === "Point" ||
+              item.geometry.type === "MultiPoint"
             ) {
-              //L.geoJSON(item).addTo(featureGroup);
               L.geoJson(item, {
                 onEachFeature: function (feature, layer) {
                   featureGroup.addLayer(layer);
@@ -314,8 +355,14 @@ export default defineComponent({
                 icon: L.icon(iconDefaultMarket),
               }
             : false,
-          polyline: false,
-          circlemarker: false,
+          polyline: this.configurationMap?.createFigures.polyline
+            ? {
+                shapeOptions: {
+                  color: "blue",
+                },
+              }
+            : false,
+          circlemarker: this.configurationMap?.createFigures.multipoint,
         },
         edit: contextEdit as any,
       });
@@ -324,7 +371,37 @@ export default defineComponent({
       map.on("draw:created", (event: any) => {
         const layer = event.layer;
         featureGroup.addLayer(layer);
-        const geojson = layer.toGeoJSON();
+        let geojson = layer.toGeoJSON();
+        // *** AGREGADO: Manejo especial para CircleMarker (convertir a MultiPoint) ***
+        if (event.layerType === "circlemarker") {
+          // Convertir CircleMarker a formato MultiPoint para consistencia
+          geojson = {
+            type: "Feature",
+            geometry: {
+              type: "MultiPoint",
+              coordinates: [geojson.geometry.coordinates],
+            },
+            properties: {
+              ...geojson.properties,
+              pointType: "multipoint",
+              style: {
+                color:
+                  this.configurationMap?.createFigures?.multipoint?.color ||
+                  "green",
+                fillColor:
+                  this.configurationMap?.createFigures?.multipoint?.fillColor ||
+                  "green",
+                fillOpacity:
+                  this.configurationMap?.createFigures?.multipoint
+                    ?.fillOpacity || 0.8,
+                radius:
+                  this.configurationMap?.createFigures?.multipoint?.radius || 6,
+                weight:
+                  this.configurationMap?.createFigures?.multipoint?.weight || 2,
+              },
+            },
+          };
+        }
         if (this.getGeoJSON) this.getGeoJSON(geojson);
       });
 
@@ -336,6 +413,43 @@ export default defineComponent({
         });
       });
     },
+    getPointToLayer(feature: any, latlng: any) {
+      const geometryType = feature.geometry?.type;
+
+      // Si es Point o MultiPoint
+      if (geometryType === "Point" || geometryType === "MultiPoint") {
+        // Si multipoint está habilitado, usar circleMarker con opciones personalizadas
+        if (this.configurationMap?.createFigures?.multipoint) {
+          const multipointOpts = this.configurationMap.createFigures.multipoint;
+          return L.circleMarker(latlng, {
+            color: multipointOpts.color || "green",
+            fillColor: multipointOpts.fillColor || "green",
+            fillOpacity: multipointOpts.fillOpacity ?? 0.8,
+            radius: multipointOpts.radius ?? 6,
+            weight: multipointOpts.weight ?? 2,
+          });
+        }
+
+        // Si marker está habilitado, usar icono personalizado
+        if (this.configurationMap?.createFigures?.marker) {
+          return L.marker(latlng, {
+            icon: L.icon(this.configurationMap.iconMarker || this.markerIcon),
+          });
+        }
+
+        // Por defecto, usar circleMarker básico
+        return L.circleMarker(latlng, {
+          color: "green",
+          fillColor: "green",
+          fillOpacity: 0.8,
+          radius: 6,
+          weight: 2,
+        });
+      }
+
+      // Para otros tipos de geometría, dejar que Leaflet use el valor por defecto
+      return L.marker(latlng);
+    },
     async searchAddress(query: string) {
       const address = await axios.get(
         location.protocol + "//nominatim.openstreetmap.org/search?",