DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Refactor carto to share more code

Browse source
This commit is contained in:
Paul Chavard 2018-10-16 11:49:00 +03:00
parent 902184fab2
commit febef735b8
8 changed files with 192 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.js
View file

@ -10,6 +10,7 @@ module.exports = {
plugins: ['prettier'],
extends: ['eslint:recommended', 'prettier'],
env: {
es6: true,
browser: true
},
rules: {

11
app/javascript/new_design/carto.js
View file

@ -1,16 +1,17 @@
import { getData } from '../shared/data';
import { initMap } from '../shared/carto';
import {
initMap,
drawCadastre,
drawQuartiersPrioritaires,
drawUserSelection
} from './carto/draw';
} from '../shared/carto';
function initialize() {
if (document.getElementById('map')) {
const position = getData('carto').position;
const map = initMap(position);
const element = document.getElementById('map');
if (element) {
const data = getData('carto');
const map = initMap(element, data.position);
// draw external polygons
drawCadastre(map, data);

35
app/javascript/new_design/carto/draw.js
View file

@ -1,35 +0,0 @@
import L from 'leaflet';
import {
drawLayer,
noEditStyle,
CADASTRE_POLYGON_STYLE,
QP_POLYGON_STYLE
} from '../../shared/carto';
export function drawCadastre(map, data) {
drawLayer(
map,
data.cadastres,
noEditStyle(CADASTRE_POLYGON_STYLE),
'cadastres'
);
}
export function drawQuartiersPrioritaires(map, data) {
drawLayer(
map,
data.quartiersPrioritaires,
noEditStyle(QP_POLYGON_STYLE),
'quartiersPrioritaires'
);
}
export function drawUserSelection(map, data) {
if (data.selection.length > 0) {
const polygon = L.polygon(data.selection, {
color: 'red',
zIndex: 3
}).addTo(map);
map.fitBounds(polygon.getBounds());
}
}

89
app/javascript/old_design/carto.js
View file

@ -1,81 +1,52 @@
import L from 'leaflet';
import FreeDraw, { NONE, CREATE } from 'leaflet-freedraw';
import { fire, on, getJSON } from '@utils';
import { CREATE } from 'leaflet-freedraw';
import { on } from '@utils';
import { getData } from '../shared/data';
import { initMap } from '../shared/carto';
import polygonArea from './carto/polygon_area';
import drawFactory from './carto/draw';
import {
initMap,
geocodeAddress,
drawUserSelection,
drawCadastre,
drawQuartiersPrioritaires,
addFreeDrawEvents
} from '../shared/carto';
function initialize() {
if (document.getElementById('map')) {
const data = getData('carto');
const position = data.position;
const element = document.getElementById('map');
const map = initMap(position);
const freeDraw = new FreeDraw({
mode: NONE,
smoothFactor: 4,
mergePolygons: false
if (element) {
const data = getData('carto');
const map = initMap(element, data.position, true);
addAddressSelectEvent(map);
on('#new', 'click', () => {
map.freeDraw.mode(CREATE);
});
map.addLayer(freeDraw);
const cartoDrawZones = data => {
drawCadastre(map, data, true);
drawQuartiersPrioritaires(map, data, true);
};
addEventFreeDraw(freeDraw);
addEventSearchAddress(map);
const cartoDrawZones = drawFactory(map, freeDraw);
window.DS = { cartoDrawZones };
// draw external polygons
cartoDrawZones(data);
if (freeDraw.polygons[0]) {
map.setZoom(18);
map.fitBounds(freeDraw.polygons[0].getBounds());
}
// draw user polygon
drawUserSelection(map, data, true);
addFreeDrawEvents(map, 'input[name=selection]');
}
}
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('/address/geocode', { request }).then(data => {
if (data.lat !== null) {
map.setView(new L.LatLng(data.lat, data.lon), data.zoom);
}
});
}
function addEventSearchAddress(map) {
function addAddressSelectEvent(map) {
on(
'#search-by-address input[type=address]',
'autocomplete:select',
(_, seggestion) => {
getAddressPoint(map, seggestion['label']);
(_, { label }) => {
geocodeAddress(map, label);
}
);
}

45
app/javascript/old_design/carto/draw.js
View file

@ -1,45 +0,0 @@
import { EDIT, DELETE } from 'leaflet-freedraw';
import { on } from '@utils';
import {
drawLayer,
CADASTRE_POLYGON_STYLE,
QP_POLYGON_STYLE
} from '../../shared/carto';
const SOURCES = {
cadastres: CADASTRE_POLYGON_STYLE,
quartiersPrioritaires: QP_POLYGON_STYLE
};
export default function draw(map, freeDraw) {
return data => {
if (data.selection) {
drawSelection(freeDraw, data.selection);
}
for (let source of Object.keys(SOURCES)) {
if (data[source]) {
drawLayer(map, data[source], SOURCES[source], source);
}
}
addEventEdit(freeDraw);
};
}
function drawSelection(selection, freeDraw) {
for (let polygon of selection) {
freeDraw.createPolygon(polygon);
}
}
function addEventEdit(freeDraw) {
document
.querySelector('.leaflet-container svg')
.removeAttribute('pointer-events');
on('.leaflet-container g path', 'click', () => {
setTimeout(() => {
freeDraw.mode(EDIT | DELETE);
}, 50);
});
}

193
app/javascript/shared/carto.js
View file

@ -1,57 +1,117 @@
import L from 'leaflet';
import FreeDraw, { NONE, EDIT, DELETE } from 'leaflet-freedraw';
import { fire, getJSON, delegate } from '@utils';
import polygonArea from './polygon_area';
const LAYERS = {};
const MAPS = new WeakMap();
export function initMap(position) {
const map = L.map('map', {
scrollWheelZoom: false
}).setView([position.lat, position.lon], position.zoom);
export function initMap(element, position, editable = false) {
if (MAPS.has(element)) {
return MAPS.get(element);
} else {
const map = L.map(element, {
scrollWheelZoom: false
}).setView([position.lat, position.lon], editable ? 18 : position.zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
return map;
}
if (editable) {
const freeDraw = new FreeDraw({
mode: NONE,
smoothFactor: 4,
mergePolygons: false
});
map.addLayer(freeDraw);
map.freeDraw = freeDraw;
}
export function drawLayer(map, data, style, layerName = 'default') {
removeLayer(map, layerName);
if (Array.isArray(data) && data.length > 0) {
const layer = createLayer(map, layerName);
data.forEach(function(item) {
layer.addData(item.geometry);
});
layer.setStyle(style).addTo(map);
MAPS.set(element, map);
return map;
}
}
export function noEditStyle(style) {
return Object.assign({}, style, {
opacity: 0.7,
fillOpacity: 0.5,
color: style.fillColor
export function drawCadastre(map, { cadastres }, editable = false) {
drawLayer(
map,
cadastres,
editable ? CADASTRE_POLYGON_STYLE : noEditStyle(CADASTRE_POLYGON_STYLE),
'cadastres'
);
}
export function drawQuartiersPrioritaires(
map,
{ quartiersPrioritaires },
editable = false
) {
drawLayer(
map,
quartiersPrioritaires,
editable ? QP_POLYGON_STYLE : noEditStyle(QP_POLYGON_STYLE),
'quartiersPrioritaires'
);
}
export function drawUserSelection(map, { selection }, editable = false) {
let hasSelection = selection && selection.length > 0;
if (editable) {
if (hasSelection) {
selection.forEach(polygon => map.freeDraw.create(polygon));
let polygon = map.freeDraw.all()[0];
if (polygon) {
map.fitBounds(polygon.getBounds());
}
}
} else if (hasSelection) {
const polygon = L.polygon(selection, {
color: 'red',
zIndex: 3
}).addTo(map);
map.fitBounds(polygon.getBounds());
}
}
export function geocodeAddress(map, query) {
getJSON('/address/geocode', { request: query }).then(data => {
if (data.lat !== null) {
map.setView(new L.LatLng(data.lat, data.lon), data.zoom);
}
});
}
const POLYGON_STYLE = {
weight: 2,
opacity: 0.3,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
export function getCurrentMap(input) {
let element = input.closest('.toolbar').parentElement.querySelector('.carte');
export const CADASTRE_POLYGON_STYLE = Object.assign({}, POLYGON_STYLE, {
fillColor: '#8a6d3b'
});
if (MAPS.has(element)) {
return MAPS.get(element);
}
}
export const QP_POLYGON_STYLE = Object.assign({}, POLYGON_STYLE, {
fillColor: '#31708f'
});
export function addFreeDrawEvents(map, selector) {
const input = findInput(selector);
map.freeDraw.on('markers', ({ latLngs }) => {
if (polygonArea(latLngs) < 300000) {
input.value = JSON.stringify(latLngs);
} else {
input.value = '{ "error": "TooManyPolygons" }';
}
fire(input, 'change');
});
}
function findInput(selector) {
return typeof selector === 'string'
? document.querySelector(selector)
: selector;
}
function createLayer(map, layerName) {
const layer = (LAYERS[layerName] = new L.GeoJSON(undefined, {
@ -69,3 +129,58 @@ function removeLayer(map, layerName) {
map.removeLayer(layer);
}
}
function drawLayer(map, data, style, layerName = 'default') {
removeLayer(map, layerName);
if (Array.isArray(data) && data.length > 0) {
const layer = createLayer(map, layerName);
data.forEach(function(item) {
layer.addData(item.geometry);
});
layer.setStyle(style).addTo(map);
}
}
function noEditStyle(style) {
return Object.assign({}, style, {
opacity: 0.7,
fillOpacity: 0.5,
color: style.fillColor
});
}
const POLYGON_STYLE = {
weight: 2,
opacity: 0.3,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
const CADASTRE_POLYGON_STYLE = Object.assign({}, POLYGON_STYLE, {
fillColor: '#8a6d3b'
});
const QP_POLYGON_STYLE = Object.assign({}, POLYGON_STYLE, {
fillColor: '#31708f'
});
delegate('click', '.carte.edit', event => {
let element = event.target;
let isPath = element.matches('.leaflet-container g path');
let map = element.matches('.carte') ? element : element.closest('.carte');
let freeDraw = MAPS.has(map) ? MAPS.get(map).freeDraw : null;
if (freeDraw) {
if (isPath) {
setTimeout(() => {
freeDraw.mode(EDIT | DELETE);
}, 50);
} else {
freeDraw.mode(NONE);
}
}
});

0
app/javascript/old_design/carto/polygon_area.js → app/javascript/shared/polygon_area.js
View file

2
app/views/users/carte/_map.html.haml
View file

@ -1,6 +1,6 @@
#carte-page.row
.col-md-12.col-lg-12
#map.edit
#map.carte.edit
%span.zones
= render partial: 'zones', locals: { dossier: dossier, error: @error }