81 lines
1.8 KiB
JavaScript
81 lines
1.8 KiB
JavaScript
import L from 'leaflet';
|
|
|
|
import FreeDraw, { NONE, CREATE } from 'leaflet-freedraw';
|
|
import { fire, on, getJSON } from '@utils';
|
|
|
|
import { getData } from '../shared/data';
|
|
import { initMap } from '../shared/carto';
|
|
|
|
import polygonArea from './carto/polygon_area';
|
|
import drawFactory from './carto/draw';
|
|
|
|
function initialize() {
|
|
if (document.getElementById('map')) {
|
|
const data = getData('carto');
|
|
const position = data.position;
|
|
|
|
const map = initMap(position);
|
|
const freeDraw = new FreeDraw({
|
|
mode: NONE,
|
|
smoothFactor: 4,
|
|
mergePolygons: false
|
|
});
|
|
|
|
map.addLayer(freeDraw);
|
|
|
|
addEventFreeDraw(freeDraw);
|
|
addEventSearchAddress(map);
|
|
|
|
const cartoDrawZones = drawFactory(map, freeDraw);
|
|
window.DS = { cartoDrawZones };
|
|
|
|
cartoDrawZones(data);
|
|
|
|
if (freeDraw.polygons[0]) {
|
|
map.setZoom(18);
|
|
map.fitBounds(freeDraw.polygons[0].getBounds());
|
|
}
|
|
}
|
|
}
|
|
|
|
addEventListener('turbolinks:load', initialize);
|
|
|
|
function addEventFreeDraw(freeDraw) {
|
|
freeDraw.on('markers', ({ latLngs }) => {
|
|
const input = document.querySelector('input[name=selection]');
|
|
|
|
if (polygonArea(latLngs) < 300000) {
|
|
input.value = JSON.stringify(latLngs);
|
|
} else {
|
|
input.value = '{ "error": "TooManyPolygons" }';
|
|
}
|
|
|
|
fire(input, 'change');
|
|
});
|
|
|
|
on('#map', 'click', () => {
|
|
freeDraw.mode(NONE);
|
|
});
|
|
|
|
on('#new', 'click', () => {
|
|
freeDraw.mode(CREATE);
|
|
});
|
|
}
|
|
|
|
function getAddressPoint(map, request) {
|
|
getJSON('/ban/address_point', { request }).then(data => {
|
|
if (data.lat !== null) {
|
|
map.setView(new L.LatLng(data.lat, data.lon), data.zoom);
|
|
}
|
|
});
|
|
}
|
|
|
|
function addEventSearchAddress(map) {
|
|
on(
|
|
'#search-by-address input[type=address]',
|
|
'autocomplete:select',
|
|
(_, seggestion) => {
|
|
getAddressPoint(map, seggestion['label']);
|
|
}
|
|
);
|
|
}
|