vue-geojson-view-ts 1.2.91 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/CoordinatesVerifyPolygon.vue.d.ts +1 -1
  2. package/dist/components/MapSearchAddress.vue.d.ts +3 -7
  3. package/dist/components/MapView.vue.d.ts +8 -2
  4. package/dist/style.css +1 -1
  5. package/dist/vue-geojson-view-ts.js +8220 -6070
  6. package/dist/vue-geojson-view-ts.umd.cjs +13 -4
  7. package/package.json +3 -1
  8. package/src/components/CoordinatesVerifyPolygon.vue +58 -55
  9. package/src/components/MapSearchAddress.vue +3 -1
  10. package/src/components/MapView.vue +338 -256
package/src/components/MapView.vue CHANGED
@@ -1,18 +1,20 @@
1
1
  <template>
2
- <div class="map-container" :style="`height:${configurationMap?.height}`">
3
- <div :id="idMap" style="height: 100%;"></div>
4
- </div>
2
+ <div class="map-container" :style="`height:${configurationMap?.height}`">
3
+ <div :id="idMap" style="height: 100%"></div>
4
+ </div>
5
5
  </template>
6
-
7
- <script lang="ts">
8
6
 
9
- import { defineComponent } from 'vue';
10
- import {markerDefault} from '../helpers/imgBase64'
11
- import * as L from 'leaflet';
12
- import 'leaflet-draw';
13
- import 'leaflet/dist/leaflet.css';
14
- import 'leaflet-draw/dist/leaflet.draw.css';
15
- import drawLocales from 'leaflet-draw-locales'
7
+ <script lang="ts">
8
+ import { defineComponent } from "vue";
9
+ import { markerDefault } from "../helpers/imgBase64";
10
+ import * as L from "leaflet";
11
+ import "leaflet-draw";
12
+ import "leaflet/dist/leaflet.css";
13
+ import "leaflet-draw/dist/leaflet.draw.css";
14
+ import drawLocales from "leaflet-draw-locales";
15
+ import axios from "axios";
16
+ import 'leaflet.fullscreen/Control.FullScreen.css'
17
+ import 'leaflet.fullscreen'
16
18
 
17
19
  declare global {
18
20
  interface Window {
@@ -23,284 +25,364 @@ declare global {
23
25
  L.Edit.Circle = L.Edit.CircleMarker.extend({
24
26
  _createResizeMarker: function () {
25
27
  var center = this._shape.getLatLng(),
26
- resizemarkerPoint = this._getResizeMarkerPoint(center)
28
+ resizemarkerPoint = this._getResizeMarkerPoint(center);
27
29
 
28
- this._resizeMarkers = []
29
- this._resizeMarkers.push(this._createMarker(resizemarkerPoint, this.options.resizeIcon))
30
+ this._resizeMarkers = [];
31
+ this._resizeMarkers.push(
32
+ this._createMarker(resizemarkerPoint, this.options.resizeIcon)
33
+ );
30
34
  },
31
35
 
32
- _getResizeMarkerPoint: function (latlng:any) {
36
+ _getResizeMarkerPoint: function (latlng: any) {
33
37
  var delta = this._shape._radius * Math.cos(Math.PI / 4),
34
- point = this._map.project(latlng)
35
- return this._map.unproject([point.x + delta, point.y - delta])
38
+ point = this._map.project(latlng);
39
+ return this._map.unproject([point.x + delta, point.y - delta]);
36
40
  },
37
41
 
38
- _resize: function (latlng:any) {
39
- var moveLatLng = this._moveMarker.getLatLng()
40
- var radius
42
+ _resize: function (latlng: any) {
43
+ var moveLatLng = this._moveMarker.getLatLng();
44
+ var radius;
41
45
 
42
46
  if (L.GeometryUtil.isVersion07x()) {
43
- radius = moveLatLng.distanceTo(latlng)
44
- }
45
- else {
46
- radius = this._map.distance(moveLatLng, latlng)
47
+ radius = moveLatLng.distanceTo(latlng);
48
+ } else {
49
+ radius = this._map.distance(moveLatLng, latlng);
47
50
  }
48
51
 
49
52
  // **** This fixes the cicle resizing ****
50
- this._shape.setRadius(radius)
53
+ this._shape.setRadius(radius);
51
54
 
52
- this._map.fire(L.Draw.Event.EDITRESIZE, { layer: this._shape })
53
- }
54
- })
55
+ this._map.fire(L.Draw.Event.EDITRESIZE, { layer: this._shape });
56
+ },
57
+ });
55
58
 
56
59
  export default defineComponent({
57
- name: 'MapView',
58
- props: {
59
- loadPolygon: Boolean,
60
- reverseCoordinatesPolygon: Boolean,
61
- dataPolygon: Object,
62
- configurationMap: Object as any,
63
- coordinatesMap: Array,
64
- getGeoJSON: Function,
65
- getCoodMarker:Function,
60
+ name: "MapView",
61
+ props: {
62
+ loadPolygon: Boolean,
63
+ reverseCoordinatesPolygon: Boolean,
64
+ dataPolygon: Object,
65
+ configurationMap: Object as any,
66
+ coordinatesMap: Array,
67
+ getGeoJSON: Function,
68
+ getCoodMarker: Function,
69
+ },
70
+ data() {
71
+ return {
72
+ idMap: "",
73
+ mapRender: null as L.Map | null,
74
+ markerRender: null as L.Marker | null,
75
+ renderCoordinates: this.coordinatesMap,
76
+ renderGeojson: this.dataPolygon as any,
77
+ markerIcon: {
78
+ iconUrl: markerDefault,
79
+ iconSize: [25, 41],
80
+ iconAnchor: [12, 41],
81
+ },
82
+ layersFeatureGroup: null as any,
83
+ featuresData: null as any,
84
+ };
85
+ },
86
+ mounted() {
87
+ this.makeid(10);
88
+ this.renderMap();
89
+ },
90
+ methods: {
91
+ getLayersFeaturesInGeoJson() {
92
+ const geojson = L.geoJSON().addTo(this.mapRender as any);
93
+ this.featuresData.eachLayer((layer: any) => {
94
+ geojson.addLayer(layer);
95
+ });
96
+ const geojsonString = [geojson.toGeoJSON()]; //JSON.stringify([geojson.toGeoJSON()]);
97
+ return geojsonString;
66
98
  },
67
- data() {
68
- return {
69
- idMap: '',
70
- mapRender: null as L.Map | null,
71
- markerRender:null as L.Marker | null,
72
- renderCoordinates: this.coordinatesMap,
73
- renderGeojson: this.dataPolygon as any,
74
- markerIcon:{
75
- iconUrl: markerDefault,
76
- iconSize: [25, 41],
77
- iconAnchor: [12, 41],
78
- },
79
- layersFeatureGroup:null as any,
80
- featuresData:null as any,
81
- };
99
+ triggerSaveEdit(): void {
100
+ const buttons =
101
+ document.getElementsByClassName(
102
+ "leaflet-draw-actions leaflet-draw-actions-top"
103
+ ) ||
104
+ document.getElementsByClassName(
105
+ "leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom"
106
+ );
107
+ buttons[0]?.querySelector("li")?.querySelector("a")?.click();
82
108
  },
83
- mounted() {
84
- this.makeid(10);
85
- this.renderMap();
109
+ makeid(length: number): void {
110
+ let result = "";
111
+ const characters = "abcdefghijklmnopqrstuvwxyz";
112
+ const charactersLength = characters.length;
113
+ let counter = 0;
114
+ while (counter < length) {
115
+ result += characters.charAt(
116
+ Math.floor(Math.random() * charactersLength)
117
+ );
118
+ counter += 1;
119
+ }
120
+ this.idMap = result;
86
121
  },
87
- methods: {
88
- getLayersFeaturesInGeoJson(){
89
- const geojson = L.geoJSON().addTo(this.mapRender as any);
90
- this.featuresData.eachLayer((layer:any) => {
91
- geojson.addLayer(layer);
92
- });
93
- const geojsonString = [geojson.toGeoJSON()];//JSON.stringify([geojson.toGeoJSON()]);
94
- return geojsonString
95
- },
96
- triggerSaveEdit():void{
97
- const buttons = document.getElementsByClassName("leaflet-draw-actions leaflet-draw-actions-top") || document.getElementsByClassName("leaflet-draw-actions leaflet-draw-actions-top leaflet-draw-actions-bottom")
98
- buttons[0]?.querySelector("li")?.querySelector("a")?.click()
99
- },
100
- makeid(length: number): void {
101
- let result = '';
102
- const characters = 'abcdefghijklmnopqrstuvwxyz';
103
- const charactersLength = characters.length;
104
- let counter = 0;
105
- while (counter < length) {
106
- result += characters.charAt(Math.floor(Math.random() * charactersLength));
107
- counter += 1;
122
+ renderMap(): void {
123
+ drawLocales("es");
124
+ setTimeout(() => {
125
+ if (this.loadPolygon) {
126
+ this.viewMap();
127
+ } else {
128
+ this.createMap();
108
129
  }
109
- this.idMap = result;
110
- },
111
- renderMap(): void {
112
- drawLocales('es')
113
- setTimeout(() => {
114
- if (this.loadPolygon) {
115
- this.viewMap();
116
- } else {
117
- this.createMap();
118
- }
119
- }, 500);
120
- },
121
- createMap(): void {
122
- const iconDefaultMarket = this.configurationMap?this.configurationMap.iconMarker?this.configurationMap.iconMarker:this.markerIcon:this.markerIcon
123
- window.type = true
124
- const map = L.map(this.idMap).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);
125
- this.mapRender = map;
126
- L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
127
- //maxZoom: this.configurationMap?.maxZoom,
128
- attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
129
- }).addTo(map);
130
- map.setZoom(this.configurationMap?.maxZoom);
131
- if(this.configurationMap.renderMarker){
132
- const marker = L.marker([this.renderCoordinates?this.renderCoordinates[0] as number:0,this.renderCoordinates?this.renderCoordinates[1] as number:0], {
133
- icon: L.icon(iconDefaultMarket),
130
+ }, 500);
131
+ },
132
+ createMap(): void {
133
+ const iconDefaultMarket = this.configurationMap
134
+ ? this.configurationMap.iconMarker
135
+ ? this.configurationMap.iconMarker
136
+ : this.markerIcon
137
+ : this.markerIcon;
138
+ window.type = true;
139
+ const map = L.map(this.idMap,{fullscreenControl:true} as any).setView(
140
+ [
141
+ this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
142
+ this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
143
+ ],
144
+ this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
145
+ );
146
+ this.mapRender = map;
147
+ L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
148
+ //maxZoom: this.configurationMap?.maxZoom,
149
+ attribution:
150
+ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
151
+ }).addTo(map);
152
+ map.setZoom(this.configurationMap?.maxZoom);
153
+ if (this.configurationMap.renderMarker) {
154
+ const marker = L.marker(
155
+ [
156
+ this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
157
+ this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
158
+ ],
159
+ {
160
+ icon: L.icon(iconDefaultMarket),
134
161
  draggable: this.configurationMap.dragMarker,
135
- }).addTo(map);
136
- this.markerRender = marker
137
- if(this.getCoodMarker){
138
- marker.on('dragend', (event) => {
139
- const updatedCoordinates = event.target.getLatLng();
140
- const lat = updatedCoordinates.lat;
141
- const lng = updatedCoordinates.lng;
142
- if(this.getCoodMarker)
143
- this.getCoodMarker(lat, lng)
144
- });
145
162
  }
163
+ ).addTo(map);
164
+ this.markerRender = marker;
165
+ if (this.getCoodMarker) {
166
+ marker.on("dragend", (event) => {
167
+ const updatedCoordinates = event.target.getLatLng();
168
+ const lat = updatedCoordinates.lat;
169
+ const lng = updatedCoordinates.lng;
170
+ if (this.getCoodMarker) this.getCoodMarker(lat, lng);
171
+ });
146
172
  }
147
- const featuresData = L.featureGroup()
148
- this.featuresData = featuresData
149
- const featureGroup = featuresData.addTo(map);
150
- let contextEdit = {
151
- featureGroup:featureGroup, // Crea un nuevo grupo de capas para los polígonos
152
- edit:false,
153
- remove: this.configurationMap?.editFigures.remove
154
- }
155
- if(this.configurationMap?.editFigures.edit){
156
- contextEdit={
157
- featureGroup:featureGroup, // Crea un nuevo grupo de capas para los polígonos
158
- ...this.configurationMap?.editFigures.edit,
159
- remove: this.configurationMap?.editFigures.remove
160
- }
161
- }
162
- const drawControl = new L.Control.Draw({
163
- position: "topleft",
164
- draw: {
165
- polygon: this.configurationMap?.createFigures.polygon,
166
- circle: false,//this.configurationMap?.createFigures.circle,
167
- rectangle: this.configurationMap?.createFigures.rectangle?{
168
- shapeOptions: {
169
- color: 'blue',
170
- },
171
- }:false,
172
- marker: this.configurationMap?.createFigures.marker?{
173
- icon: L.icon(iconDefaultMarket),
174
- }:false,
175
- polyline: false,
176
- circlemarker:false
177
- },
178
- edit: contextEdit as any
179
- });
180
- map.addControl(drawControl);
181
-
182
- map.on('draw:created', (event:any) => {
183
- const layer = event.layer;
184
- featureGroup.addLayer(layer);
173
+ }
174
+ const featuresData = L.featureGroup();
175
+ this.featuresData = featuresData;
176
+ const featureGroup = featuresData.addTo(map);
177
+ let contextEdit = {
178
+ featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
179
+ edit: false,
180
+ remove: this.configurationMap?.editFigures.remove,
181
+ };
182
+ if (this.configurationMap?.editFigures.edit) {
183
+ contextEdit = {
184
+ featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
185
+ ...this.configurationMap?.editFigures.edit,
186
+ remove: this.configurationMap?.editFigures.remove,
187
+ };
188
+ }
189
+ const drawControl = new L.Control.Draw({
190
+ position: "topleft",
191
+ draw: {
192
+ polygon: this.configurationMap?.createFigures.polygon,
193
+ circle: false, //this.configurationMap?.createFigures.circle,
194
+ rectangle: this.configurationMap?.createFigures.rectangle
195
+ ? {
196
+ shapeOptions: {
197
+ color: "blue",
198
+ },
199
+ }
200
+ : false,
201
+ marker: this.configurationMap?.createFigures.marker
202
+ ? {
203
+ icon: L.icon(iconDefaultMarket),
204
+ }
205
+ : false,
206
+ polyline: false,
207
+ circlemarker: false,
208
+ },
209
+ edit: contextEdit as any,
210
+ });
211
+ map.addControl(drawControl);
212
+
213
+ map.on("draw:created", (event: any) => {
214
+ const layer = event.layer;
215
+ featureGroup.addLayer(layer);
216
+ const geojson = layer.toGeoJSON();
217
+ if (this.getGeoJSON) this.getGeoJSON([geojson]);
218
+ });
219
+
220
+ map.on("draw:edited", (event: any) => {
221
+ const layers = event.layers;
222
+ layers.eachLayer((layer: any) => {
185
223
  const geojson = layer.toGeoJSON();
186
- if(this.getGeoJSON)
187
- this.getGeoJSON([geojson]);
188
- });
189
-
190
- map.on('draw:edited', (event:any) => {
191
- const layers = event.layers;
192
- layers.eachLayer((layer:any) => {
193
- const geojson = layer.toGeoJSON();
194
- if(this.getGeoJSON)
195
- this.getGeoJSON([geojson]);
196
- });
224
+ if (this.getGeoJSON) this.getGeoJSON([geojson]);
197
225
  });
198
- },
199
- viewMap(): void {
200
- const iconDefaultMarket = this.configurationMap?this.configurationMap.iconMarker?this.configurationMap.iconMarker:this.markerIcon:this.markerIcon
201
- window.type = true
202
- const map = L.map(this.idMap).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);
203
- //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);
204
- this.mapRender = map;
205
- L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
206
- //maxZoom: 120,//this.configurationMap?.maxZoom,
207
- attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
208
- }).addTo(map);
209
- map.setZoom(this.configurationMap?.maxZoom);
210
- const featuresData = L.featureGroup()
211
- this.featuresData = featuresData
212
- const featureGroup = featuresData.addTo(map);
213
- let contextEdit = {
214
- featureGroup:featureGroup, // Crea un nuevo grupo de capas para los polígonos
215
- edit:false,
216
- remove: this.configurationMap?.editFigures.remove
217
- }
218
- if(this.configurationMap?.editFigures.edit){
219
- contextEdit={
220
- featureGroup:featureGroup, // Crea un nuevo grupo de capas para los polígonos
221
- ...this.configurationMap?.editFigures.edit,
222
- remove: this.configurationMap?.editFigures.remove
223
- }
224
- }
226
+ });
227
+ },
228
+ viewMap(): void {
229
+ const iconDefaultMarket = this.configurationMap
230
+ ? this.configurationMap.iconMarker
231
+ ? this.configurationMap.iconMarker
232
+ : this.markerIcon
233
+ : this.markerIcon;
234
+ window.type = true;
235
+ const map = L.map(this.idMap,{fullscreenControl:true} as any).setView(
236
+ [
237
+ this.renderCoordinates ? (this.renderCoordinates[0] as number) : 0,
238
+ this.renderCoordinates ? (this.renderCoordinates[1] as number) : 0,
239
+ ],
240
+ this.renderCoordinates ? (this.renderCoordinates[2] as number) : 0
241
+ );
242
+ //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);
243
+ this.mapRender = map;
244
+ L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
245
+ //maxZoom: 120,//this.configurationMap?.maxZoom,
246
+ attribution:
247
+ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
248
+ }).addTo(map);
249
+ map.setZoom(this.configurationMap?.maxZoom);
250
+ const featuresData = L.featureGroup();
251
+ this.featuresData = featuresData;
252
+ const featureGroup = featuresData.addTo(map);
253
+ let contextEdit = {
254
+ featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
255
+ edit: false,
256
+ remove: this.configurationMap?.editFigures.remove,
257
+ };
258
+ if (this.configurationMap?.editFigures.edit) {
259
+ contextEdit = {
260
+ featureGroup: featureGroup, // Crea un nuevo grupo de capas para los polígonos
261
+ ...this.configurationMap?.editFigures.edit,
262
+ remove: this.configurationMap?.editFigures.remove,
263
+ };
264
+ }
225
265
 
226
- const renderGeojson = this.renderGeojson
227
- if (renderGeojson && renderGeojson.length) {
228
- renderGeojson.forEach((item: any) => {
229
- if (item.type === 'FeatureCollection') {
230
- item.features.forEach((feature: any) => {
231
- if (feature.geometry.type === 'Polygon' || feature.geometry.type === 'MultiPolygon') {
232
- //L.geoJSON(feature).addTo(featureGroup);
233
- L.geoJson(feature, {
234
- onEachFeature: function (feature, layer) {
235
- featureGroup.addLayer(layer);
236
- }
237
- });
238
- }
239
- });
240
- } else if (item.type === 'Feature') {
241
- if (item.geometry.type === 'Polygon' || item.geometry.type === 'MultiPolygon') {
242
- //L.geoJSON(item).addTo(featureGroup);
243
- L.geoJson(item, {
266
+ const renderGeojson = this.renderGeojson;
267
+ if (renderGeojson && renderGeojson.length) {
268
+ renderGeojson.forEach((item: any) => {
269
+ if (item.type === "FeatureCollection") {
270
+ item.features.forEach((feature: any) => {
271
+ if (
272
+ feature.geometry.type === "Polygon" ||
273
+ feature.geometry.type === "MultiPolygon"
274
+ ) {
275
+ //L.geoJSON(feature).addTo(featureGroup);
276
+ L.geoJson(feature, {
244
277
  onEachFeature: function (feature, layer) {
245
278
  featureGroup.addLayer(layer);
246
- }
279
+ },
247
280
  });
248
281
  }
282
+ });
283
+ } else if (item.type === "Feature") {
284
+ if (
285
+ item.geometry.type === "Polygon" ||
286
+ item.geometry.type === "MultiPolygon"
287
+ ) {
288
+ //L.geoJSON(item).addTo(featureGroup);
289
+ L.geoJson(item, {
290
+ onEachFeature: function (feature, layer) {
291
+ featureGroup.addLayer(layer);
292
+ },
293
+ });
249
294
  }
250
- });
251
- const bounds = featureGroup.getBounds();
252
- map.fitBounds(bounds);
253
- }
254
- const drawControl = new L.Control.Draw({
255
- position: "topleft",
256
- draw: {
257
- polygon: this.configurationMap?.createFigures.polygon,
258
- circle: false,//this.configurationMap?.createFigures.circle,
259
- rectangle: this.configurationMap?.createFigures.rectangle?{
260
- shapeOptions: {
261
- color: 'blue',
262
- },
263
- }:false,
264
- marker: this.configurationMap?.createFigures.marker?{
265
- icon: L.icon(iconDefaultMarket),
266
- }:false,
267
- polyline: false,
268
- circlemarker:false
269
- },
270
- edit: contextEdit as any
295
+ }
271
296
  });
272
- map.addControl(drawControl);
297
+ const bounds = featureGroup.getBounds();
298
+ map.fitBounds(bounds);
299
+ }
300
+ const drawControl = new L.Control.Draw({
301
+ position: "topleft",
302
+ draw: {
303
+ polygon: this.configurationMap?.createFigures.polygon,
304
+ circle: false, //this.configurationMap?.createFigures.circle,
305
+ rectangle: this.configurationMap?.createFigures.rectangle
306
+ ? {
307
+ shapeOptions: {
308
+ color: "blue",
309
+ },
310
+ }
311
+ : false,
312
+ marker: this.configurationMap?.createFigures.marker
313
+ ? {
314
+ icon: L.icon(iconDefaultMarket),
315
+ }
316
+ : false,
317
+ polyline: false,
318
+ circlemarker: false,
319
+ },
320
+ edit: contextEdit as any,
321
+ });
322
+ map.addControl(drawControl);
323
+
324
+ map.on("draw:created", (event: any) => {
325
+ const layer = event.layer;
326
+ featureGroup.addLayer(layer);
327
+ const geojson = layer.toGeoJSON();
328
+ if (this.getGeoJSON) this.getGeoJSON(geojson);
329
+ });
273
330
 
274
- map.on('draw:created', (event:any) => {
275
- const layer = event.layer;
276
- featureGroup.addLayer(layer);
331
+ map.on("draw:edited", (event: any) => {
332
+ const layers = event.layers;
333
+ layers.eachLayer((layer: any) => {
277
334
  const geojson = layer.toGeoJSON();
278
- if(this.getGeoJSON)
279
- this.getGeoJSON(geojson);
280
- });
281
-
282
- map.on('draw:edited', (event:any) => {
283
- const layers = event.layers;
284
- layers.eachLayer((layer:any) => {
285
- const geojson = layer.toGeoJSON();
286
- if(this.getGeoJSON)
287
- this.getGeoJSON(geojson);
288
- });
335
+ if (this.getGeoJSON) this.getGeoJSON(geojson);
289
336
  });
290
- },
337
+ });
291
338
  },
292
- watch: {
293
- coordinatesMap(newVal) {
294
- this.renderCoordinates = newVal;
295
- if(this.mapRender && this.markerRender){
296
- const newLatLng = L.latLng([newVal[0], newVal[1]]);
297
- this.mapRender.setView([newVal[0], newVal[1]], newVal[2]);
298
- this.markerRender.setLatLng(newLatLng)
339
+ async searchAddress(query: string) {
340
+ const address = await axios.get(
341
+ location.protocol + "//nominatim.openstreetmap.org/search?",
342
+ {
343
+ params: {
344
+ //query
345
+ q: query,
346
+ limit: 1,
347
+ format: "json",
348
+ },
299
349
  }
300
- },
301
- dataPolygon(newVal, oldVal) {
302
- this.renderGeojson = newVal;
350
+ );
351
+ if (address.data.length === 1) {
352
+ const lat = parseFloat(address.data[0].lat);
353
+ const lng = parseFloat(address.data[0].lon);
354
+ const coord = { lng, lat };
355
+ this.setCoordinates({ ...coord, moveMarker: true });
356
+ return address.data[0];
303
357
  }
304
- }
305
- });
358
+ return address.data;
359
+ },
360
+ setCoordinates({
361
+ lat,
362
+ lng,
363
+ }: {
364
+ lat: number;
365
+ lng: number;
366
+ moveMarker?: boolean;
367
+ }): void {
368
+ if (this.mapRender) {
369
+ const newCenter = L.latLng(lat, lng);
370
+ this.mapRender.panTo(newCenter, { animate: true, duration: 0.5 });
371
+ }
372
+ },
373
+ },
374
+ watch: {
375
+ coordinatesMap(newVal) {
376
+ this.renderCoordinates = newVal;
377
+ if (this.mapRender && this.markerRender) {
378
+ const newLatLng = L.latLng([newVal[0], newVal[1]]);
379
+ this.mapRender.setView([newVal[0], newVal[1]], newVal[2]);
380
+ this.markerRender.setLatLng(newLatLng);
381
+ }
382
+ },
383
+ dataPolygon(newVal) {
384
+ this.renderGeojson = newVal;
385
+ },
386
+ },
387
+ });
306
388
  </script>