Load leaflet from a separate chunk
This commit is contained in:
parent
011b575900
commit
2f633b5d23
9 changed files with 2040 additions and 2710 deletions
|
@ -1,64 +1,47 @@
|
|||
import { CREATE } from 'leaflet-freedraw';
|
||||
import { delegate } from '@utils';
|
||||
import {
|
||||
initMap,
|
||||
getCurrentMap,
|
||||
geocodeAddress,
|
||||
drawCadastre,
|
||||
drawQuartiersPrioritaires,
|
||||
drawParcellesAgricoles,
|
||||
drawUserSelection,
|
||||
addFreeDrawEvents
|
||||
} from '../../shared/carte';
|
||||
import { initMap, drawPolygons, addFreeDrawEvents } from '../../shared/carte';
|
||||
|
||||
function initialize() {
|
||||
for (let element of document.querySelectorAll('.carte')) {
|
||||
diplayMap(element, null, true);
|
||||
async function initialize() {
|
||||
const elements = document.querySelectorAll('.carte');
|
||||
|
||||
if (elements.length) {
|
||||
const editable = [...elements].find(element =>
|
||||
element.classList.contains('edit')
|
||||
);
|
||||
await loadLeaflet(editable);
|
||||
|
||||
for (let element of elements) {
|
||||
diplayMap(element, null, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.DS.drawMapData = (selector, data) => {
|
||||
let element = document.querySelector(selector);
|
||||
diplayMap(element, data);
|
||||
};
|
||||
// We load leaflet dynamically, ramda and freedraw and assign them to globals.
|
||||
// Latest freedraw version build needs globals.
|
||||
async function loadLeaflet(editable) {
|
||||
window.L = await import('leaflet').then(({ default: L }) => L);
|
||||
|
||||
if (editable) {
|
||||
window.R = await import('ramda').then(({ default: R }) => R);
|
||||
await import('leaflet-freedraw/dist/leaflet-freedraw.web.js');
|
||||
}
|
||||
}
|
||||
|
||||
function diplayMap(element, data, initial = false) {
|
||||
data = data || JSON.parse(element.dataset.geo);
|
||||
let editable = element.classList.contains('edit');
|
||||
const editable = element.classList.contains('edit');
|
||||
const map = initMap(element, data.position, editable);
|
||||
|
||||
let map = initMap(element, data.position, editable);
|
||||
drawPolygons(map, data, { initial, editable });
|
||||
|
||||
// draw external polygons
|
||||
drawCadastre(map, data, editable);
|
||||
drawQuartiersPrioritaires(map, data, editable);
|
||||
drawParcellesAgricoles(map, data, editable);
|
||||
|
||||
// draw user polygon
|
||||
if (initial) {
|
||||
drawUserSelection(map, data, editable);
|
||||
|
||||
if (editable) {
|
||||
let input = element.parentElement.querySelector('input[data-remote]');
|
||||
addFreeDrawEvents(map, input);
|
||||
}
|
||||
if (initial && editable) {
|
||||
const input = element.parentElement.querySelector('input[data-remote]');
|
||||
addFreeDrawEvents(map, input);
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('turbolinks:load', initialize);
|
||||
|
||||
delegate('click', '.toolbar .new-area', event => {
|
||||
event.preventDefault();
|
||||
let map = getCurrentMap(event.target);
|
||||
|
||||
if (map) {
|
||||
map.freeDraw.mode(CREATE);
|
||||
}
|
||||
});
|
||||
|
||||
delegate('autocomplete:select', '.toolbar [data-address]', event => {
|
||||
let map = getCurrentMap(event.target);
|
||||
|
||||
if (map) {
|
||||
geocodeAddress(map, event.detail.label);
|
||||
}
|
||||
addEventListener('carte:update', ({ detail: { selector, data } }) => {
|
||||
const element = document.querySelector(selector);
|
||||
diplayMap(element, data);
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue