Merge pull request #3689 from open-formulieren/chore/replace-leaflet-…

…rd-with-lib

Replace leaflet rd with library

package.json

@@ -30,6 +30,7 @@
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@open-formulieren/design-tokens": "^0.51.0",
     "@open-formulieren/formio-builder": "^0.9.0",
+    "@open-formulieren/leaflet-tools": "^1.0.0",
     "@rjsf/core": "^4.2.1",
     "@tinymce/tinymce-react": "^3.12.6",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
@@ -46,7 +47,6 @@
     "leaflet": "^1.7.1",
     "microscope-sass": "^2.0.0",
     "paper-css": "^0.4.1",
-    "proj4leaflet": "^1.0.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/openforms/js/components/form/map.js

@@ -1,6 +1,7 @@
 /**
  * A form widget to select a location on a Leaflet map.
  */
+import {CRS_RD, TILE_LAYER_RD} from '@open-formulieren/leaflet-tools';
 import * as L from 'leaflet';
 import {Formio} from 'react-formio';
 
@@ -17,33 +18,15 @@ import {
 } from './edit/options';
 import {ADVANCED, REGISTRATION, TRANSLATIONS, VALIDATION} from './edit/tabs';
 import {localiseSchema} from './i18n';
-import {RD_CRS} from './rd';
 
 const TextFieldComponent = Formio.Components.components.textfield;
 
-const TILES = 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard';
-
-const ATTRIBUTION = `
-    Kaartgegevens ©
-    <a href="https://www.kadaster.nl">Kadaster</a> |
-    <a href="https://www.verbeterdekaart.nl">Verbeter de kaart</a>
-`;
-
 const latLngValidation =
   'valid = (Boolean(data.initialCenter.lat) === Boolean(data.initialCenter.lng)) ? true: "You need to configure both longitude and latitude."';
 
-const TILE_LAYERS = {
-  url: `${TILES}/EPSG:28992/{z}/{x}/{y}.png`,
-  options: {
-    minZoom: 1,
-    maxZoom: 13,
-    attribution: ATTRIBUTION,
-  },
-};
-
 const MAP_DEFAULTS = {
   continuousWorld: true,
-  crs: RD_CRS,
+  crs: CRS_RD,
   attributionControl: true,
   center: [52.1326332, 5.291266],
   zoom: 3,
@@ -83,8 +66,8 @@ const EDIT_FORM_TABS = {
               description: 'Default zoom level for the leaflet map.',
               validate: {
                 integer: true,
-                min: TILE_LAYERS.options.minZoom,
-                max: TILE_LAYERS.options.maxZoom,
+                min: TILE_LAYER_RD.minZoom,
+                max: TILE_LAYER_RD.maxZoom,
               },
             },
             {
@@ -184,17 +167,9 @@ export default class Map extends TextFieldComponent {
 
     const map = L.map(`map-${this.id}`, MAP_DEFAULTS);
 
-    const tiles = L.tileLayer(TILE_LAYERS.url, TILE_LAYERS.options);
-
+    const {url: tileUrl, ...options} = TILE_LAYER_RD;
+    const tiles = L.tileLayer(tileUrl, options);
     map.addLayer(tiles);
-
-    // Set initial marker at center
-    let marker = L.marker([52.1326332, 5.291266]).addTo(map);
-
-    map.on('click', e => {
-      map.removeLayer(marker);
-      marker = L.marker(e.latlng).addTo(map);
-    });
   }
 
   static editForm() {