Refactor carto to share more code

app/javascript/old_design/carto.js

@@ -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);
     }
   );
 }