{"version":3,"sources":["webpack:///./src/components/form/controls/MapPolygon.vue?dc9c","webpack:///src/components/form/controls/MapPolygon.vue","webpack:///./src/components/form/controls/MapPolygon.vue?dc2f","webpack:///./src/components/form/controls/MapPolygon.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticStyle","attrs","staticRenderFns","name","mixins","data","drawingLayer","externalPolygonLayer","map","drawing","props","edit","type","default","defaultMapCenter","defaultMapZoom","extraPolygons","extraPolygonStyle","fillColor","color","isMultiple","created","L","mounted","methods","renderMap","getMapCenter","getMapZoom","renderPolygonFromJson","onEachFeature","layer","addDrawingControl","featureGroup","poly","allowIntersection","draw","polyline","polygon","showArea","drawError","timeout","shapeOptions","circle","circlemarker","marker","rectangle","setupMap","center","zoom","maxZoom","subdomains","attribution","layers","osm","googleSat","googleStreets","position","collapsed","addTo","getVolumeOfShapeByLatLng","registerMapEvents","seeArea","renderPolygonFromInput","properties","geometry","features","emitValue","saveHec","getAreaFromSelected","area","renderExternalPolygonFromJson","style","permanent","direction","watch","value","handler","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,CAAC,MAAQ,OAAO,OAAS,kBAAkBC,MAAM,CAAC,GAAK,UACzKC,EAAkB,G,mICaP,GACfC,kBAEAC,gBAEAC,OACA,OACAC,kBACAC,0BACAC,SACAC,aAIAC,OACAC,MACAC,aACAC,YAEAC,oBACAC,kBACAC,iBACAC,mBACAJ,cASAK,+BACAC,mBAGAC,YACAR,aACAC,aAIAQ,UACAC,sBAGAC,UACA,kBAGAC,SACAC,YACA,gBAEA,oCAEA,yBACA,qCACA,+BAGAC,eACA,IACA,6DACA,SACA,sDAIAC,aACA,kCAEA,2BACA,EAGA,IAGAC,yBACA,mBACAC,sBACAC,4BACA,oEAMA,mDAGAC,oBACA,oBACA,sBACApB,MACAqB,+BACAC,MACAC,uBAGAC,MACAC,YACAC,SACAH,qBACAI,YACAC,WACApB,gBACAqB,aAEAC,iBAIAC,UACAC,gBACAC,UACAC,kBAMAC,WACA,4BAAAC,2BAAAC,yBACA,qDACA,6DAEA,yEACAC,WACAC,qCACAC,uBAGA,qEACAF,WACAC,qCACAC,uBAGA,qEACAF,WACAE,mGAGA7B,YACA8B,OACA,CACAC,sBACAC,YACAC,iBAEA,CACA,yEACA,gGAEA,CAAAC,oBAAAC,eAEAC,iBAEAC,4BACA,0DAGAC,oBACA,eAEApD,gCACA,iDACA,gBACA,UAEA,8BACA,uDAEA,kBAGAA,kCACA,kBAGAA,iCACA,gBACA,mBAGAA,kCACA,kBAGAA,iCACA,gBACA,mBAGAA,gCACA,gBACA,mBAGAA,+BACA,IAEA,EAFA,WAGA4C,gBACAS,oEAEA,qBAMAC,yBACA,sBAEA,wDAEA,YACA,CAAAlD,eAAAmD,cAAAC,cAGA,GAAApD,yBAAAqD,YAEA,gCACA,+BAGAC,YACA,oCAEA,mDACA,MAEA,gDACAF,uBAEA,sBACA,4DAEA,yBACA,+BAIAG,aAMAC,sBACA,QAMA,OAJA,gCACAC,sDAGA,GAGAC,gCACA,2BAEA,kBAEA,OAAA1D,yBAAAqD,YAEA,mBACAM,6BACA1C,sBACA,SACAC,uBAAA0C,aAAAC,qBAAA,cAGA3C,sCAIA,YACA,4DAKA4C,OACAC,OACAC,UACA,gBACA,gCAKA5D,eACA4D,UACA,gBACA,uCAKAnE,WACA,2BC9TkX,I,YCO9WoE,EAAY,eACd,EACApF,EACAS,GACA,EACA,KACA,KACA,MAIa,aAAA2E,E","file":"js/chunk-2d0c7374.2e6d5dd4.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{\"width\":\"100%\",\"border\":\"1px solid #ccc\"},attrs:{\"id\":\"map\"}})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div id=\"map\" style=\"width: 100%; border: 1px solid #ccc\"></div>\n</template>\n\n<script>\nimport L from \"leaflet/dist/leaflet\"\nimport \"leaflet/dist/leaflet.css\"\n\nimport \"leaflet-draw\"\nimport \"leaflet-draw/dist/leaflet.draw.css\"\nimport { DEFAULT_MAP_CENTER } from \"@Platon/const\"\nimport InputControlMixin from \"@Platon/mixins/InputControlMixin\"\nimport LeafletDrawUz from \"@Platon/external/map/DrawingToolbarUz.js\"\n\nexport default {\n    name: \"MapPolygon\",\n\n    mixins: [InputControlMixin],\n\n    data() {\n        return {\n            drawingLayer: null,\n            externalPolygonLayer: null,\n            map: null,\n            drawing: false\n        }\n    },\n\n    props: {\n        edit: {\n            type: Boolean,\n            default: true\n        },\n        defaultMapCenter: {},\n        defaultMapZoom: {},\n        extraPolygons: {},\n        extraPolygonStyle: {\n            default: () => ({\n                // const exampleStyle = {\n                // \tweight: 2,\n                // \topacity: 1,\n                // \tcolor: 'red',\n                // \tfillOpacity: 0.7,\n                // \tfillColor: 'red'\n                // }\n\n                fillColor: \"rgba(255,0,0,0.35)\",\n                color: \"#ff0000\"\n            })\n        },\n        isMultiple: {\n            type: Boolean,\n            default: false\n        }\n    },\n\n    created() {\n        L.drawLocal = LeafletDrawUz\n    },\n\n    mounted() {\n        this.renderMap()\n    },\n\n    methods: {\n        renderMap() {\n            this.setupMap()\n\n            if (this.edit) this.addDrawingControl()\n\n            this.registerMapEvents()\n            this.renderExternalPolygonFromJson()\n            this.renderPolygonFromInput()\n        },\n\n        getMapCenter() {\n            try {\n                return new L.LatLng(...this.defaultMapCenter.split(\",\"))\n            } catch (e) {\n                return new L.LatLng(...DEFAULT_MAP_CENTER)\n            }\n        },\n\n        getMapZoom() {\n            let zoom = Number(this.defaultMapZoom)\n\n            if (Number.isInteger(zoom)) {\n                return zoom\n            }\n\n            return 13\n        },\n\n        renderPolygonFromJson(geoJson) {\n            let json = new L.GeoJSON(geoJson, {\n                onEachFeature: (feature, layer) => {\n                    layer.addTo(this.drawingLayer)\n                    let seeArea = (L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]) / 10000).toFixed(2)\n                    //console.log(seeArea);\n                    // saveHec(seeArea);\n                }\n            })\n\n            this.map.fitBounds(this.drawingLayer.getBounds())\n        },\n\n        addDrawingControl() {\n            this.map.addControl(\n                new L.Control.Draw({\n                    edit: {\n                        featureGroup: this.drawingLayer,\n                        poly: {\n                            allowIntersection: false\n                        }\n                    },\n                    draw: {\n                        polyline: false,\n                        polygon: {\n                            allowIntersection: false,\n                            showArea: true,\n                            drawError: {\n                                color: \"#b00b00\",\n                                timeout: 1000\n                            },\n                            shapeOptions: {\n                                // color: '#bada55'\n                            }\n                        },\n                        circle: false,\n                        circlemarker: false,\n                        marker: false,\n                        rectangle: false\n                    }\n                })\n            )\n        },\n\n        setupMap() {\n            this.map = new L.Map(\"map\", { center: this.getMapCenter(), zoom: this.getMapZoom() })\n            this.drawingLayer = L.featureGroup().addTo(this.map)\n            this.externalPolygonLayer = L.featureGroup().addTo(this.map)\n\n            let googleSat = L.tileLayer(\"http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}\", {\n                maxZoom: 20,\n                subdomains: [\"mt0\", \"mt1\", \"mt2\", \"mt3\"],\n                attribution: \"google\"\n            })\n\n            let googleStreets = L.tileLayer(\"http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}\", {\n                maxZoom: 20,\n                subdomains: [\"mt0\", \"mt1\", \"mt2\", \"mt3\"],\n                attribution: \"google\"\n            })\n\n            let osm = L.tileLayer(\"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n                maxZoom: 18,\n                attribution: '&copy; <a href=\"http://openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n            })\n\n            L.control\n                .layers(\n                    {\n                        osm: osm.addTo(this.map),\n                        googleSat,\n                        googleStreets\n                    },\n                    {\n                        [this.$l(\"platon.mappolygon.drawinglayer\", \"Чизмалар\")]: this.drawingLayer,\n                        [this.$l(\"platon.mappolygon.externalpolygonlayer\", \"Ташқи чизмалар\")]: this.externalPolygonLayer\n                    },\n                    { position: \"topright\", collapsed: false }\n                )\n                .addTo(this.map)\n        },\n        getVolumeOfShapeByLatLng(latLng) {\n            return +(L.GeometryUtil.geodesicArea(latLng) / 10000).toFixed(2)\n        },\n\n        registerMapEvents() {\n            let map = this.map\n\n            map.on(L.Draw.Event.CREATED, (e) => {\n                if (!this.isMultiple) this.drawingLayer.clearLayers()\n                let type = e.layerType\n                let layer = e.layer\n\n                this.drawingLayer.addLayer(layer)\n                var seeArea = this.getVolumeOfShapeByLatLng(layer.getLatLngs()[0])\n                //console.log(seeArea);\n                this.saveHec(seeArea)\n            })\n\n            map.on(L.Draw.Event.DRAWSTART, (e) => {\n                this.drawing = true\n            })\n\n            map.on(L.Draw.Event.DRAWSTOP, (e) => {\n                this.drawing = false\n                this.emitValue()\n            })\n\n            map.on(L.Draw.Event.EDITSTART, (e) => {\n                this.drawing = true\n            })\n\n            map.on(L.Draw.Event.EDITSTOP, (e) => {\n                this.drawing = false\n                this.emitValue()\n            })\n\n            map.on(L.Draw.Event.DELETED, (e) => {\n                this.drawing = false\n                this.emitValue()\n            })\n\n            map.on(L.Draw.Event.EDITED, (e) => {\n                var layers = e.layers\n                var countOfEditedLayers = 0\n                var seeArea\n                layers.eachLayer((layer) => {\n                    seeArea = (L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]) / 10000).toFixed(2)\n\n                    this.saveHec(seeArea)\n                    countOfEditedLayers++\n                })\n            })\n        },\n\n        renderPolygonFromInput() {\n            if (!this.value) return\n\n            let polygonData = Array.isArray(this.value) ? this.value : [this.value]\n\n            let featureCollection = polygonData.map((p) => {\n                return { type: \"Feature\", properties: {}, geometry: p }\n            })\n\n            let geoJSON = { type: \"FeatureCollection\", features: featureCollection }\n\n            this.drawingLayer.clearLayers()\n            this.renderPolygonFromJson(geoJSON)\n        },\n\n        emitValue() {\n            let geo = this.drawingLayer.toGeoJSON()\n\n            if (Array.isArray(geo.features) && geo.features.length > 0) {\n                let geometry\n\n                if (this.isMultiple) geometry = geo.features.map((f) => f.geometry)\n                else geometry = geo.features[0].geometry\n\n                this.$emit(\"input\", geometry)\n                this.$emit(\"selected-area\", this.getAreaFromSelected())\n            } else {\n                this.$emit(\"input\", null)\n                this.$emit(\"selected-area\", 0)\n            }\n        },\n\n        saveHec(hec) {\n            // console.log(`Area ${hec}`)\n            // saves area\n            // document.getElementById(\"asquare\").value = hec;\n        },\n\n        getAreaFromSelected() {\n            let area = 0\n\n            this.drawingLayer.eachLayer((layer) => {\n                area += this.getVolumeOfShapeByLatLng(layer.getLatLngs()[0])\n            })\n\n            return area\n        },\n\n        renderExternalPolygonFromJson() {\n            const polygons = this.extraPolygons\n\n            if (polygons == null) return\n\n            let geoJSON = { type: \"FeatureCollection\", features: polygons }\n\n            let json = new L.GeoJSON(geoJSON, {\n                style: this.extraPolygonStyle,\n                onEachFeature: (feature, layer) => {\n                    if (feature.label) {\n                        layer.bindTooltip(feature.label, { permanent: true, direction: \"center\" }).openTooltip()\n                    }\n\n                    layer.addTo(this.externalPolygonLayer)\n                }\n            })\n\n            if (!this.value) {\n                this.map.fitBounds(this.externalPolygonLayer.getBounds())\n            }\n        }\n    },\n\n    watch: {\n        value: {\n            handler() {\n                if (this.map != null) {\n                    this.renderPolygonFromInput()\n                }\n            }\n        },\n\n        extraPolygons: {\n            handler() {\n                if (this.map != null) {\n                    this.renderExternalPolygonFromJson()\n                }\n            }\n        },\n\n        drawing(val) {\n            this.$emit(\"drawing\", val)\n        }\n    }\n}\n</script>\n\n<style></style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MapPolygon.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MapPolygon.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./MapPolygon.vue?vue&type=template&id=58cfbf1c&\"\nimport script from \"./MapPolygon.vue?vue&type=script&lang=js&\"\nexport * from \"./MapPolygon.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}