adds the leaflet.markercluster package

dist/nlmaps/dist/assets/css/nlmaps.css

@@ -1,5 +1,5 @@
 .nlmaps-hidden {
-  display: none;
+  display:none;
 }
 
 /*** Geolocator control ***/
@@ -10,12 +10,12 @@
   height: 26px;
   width: 26px;
   border-radius: 26px 26px;
-  right: ".5em";
-  top: ".5em";
+  right: '.5em';
+  top: '.5em';
 }
 
 .nlmaps-geolocator-control img {
-  background-image: url("../img/geolocator_icon.svg");
+  background-image: url('./assets/img/geolocator_icon.svg');
   display: block;
   box-sizing: border-box;
   width: 26px;
@@ -24,6 +24,7 @@
 }
 /*myControlEl.className = 'ol-control';*/
 
+
 /*** Geocoder control ***/
 .nlmaps-geocoder-control-container {
   width: 326px;
@@ -37,7 +38,7 @@
   flex-flow: row;
 }
 
-.nlmaps-geocoder-control-container input[type="text"] {
+.nlmaps-geocoder-control-container input[type="text"]{
   flex-grow: 1;
   padding: 4px 10px;
 
@@ -52,7 +53,7 @@
   width: 34px;
   border: none;
   background-color: rgb(255, 255, 255);
-  background-image: url("../img/search_icon.svg");
+  background-image: url('../img/search_icon.svg');
   box-shadow: rgba(0, 0, 0, 0.65) 0px 1px 5px;
   height: 34px;
   border-radius: 0px 5px 5px 0px;
@@ -68,9 +69,10 @@
   color: #fff;
 }
 
+
 .nlmaps-geocoder-result-list {
   padding: 10px 10px 2px 10px;
-  width: 300px;
+  width:300px;
   background-color: #fff;
   border-radius: 5px 5px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
@@ -93,5 +95,5 @@
 }
 
 .leaflet-grab.nlmaps-marker-cursor {
-  cursor: pointer;
+  cursor: pointer
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datapunt/amsterdam-amaps",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "implementation of nlmaps for Amsterdam",
   "main": "dist/amaps.js",
   "browser": "dist/amaps.iife.js",
@@ -40,6 +40,8 @@
     "eslint-plugin-standard": "^3.1.0",
     "esm": "3.0.63",
     "http-server": "^0.11.1",
+    "leaflet": "^1.6.0",
+    "leaflet.markercluster": "^1.4.1",
     "live-server": "^1.2.1",
     "live-server-https": "0.0.2",
     "node-fetch": "^2.1.2",
@@ -59,6 +61,10 @@
     "tape": "^4.9.1",
     "tape-catch": "^1.0.6"
   },
+  "peerDependencies": {
+    "leaflet": "^1.6.0",
+    "leaflet.markercluster": "^1.4.1"
+  },
   "scripts": {
     "dev": "npm-run-all --parallel serve watch-browser-test watch-unit-test watch-build-amaps watch-nlmaps",
     "test": "npm-run-all browser-test unit-test",
@@ -69,6 +75,7 @@
     "serve": "node scripts/devserver.js",
     "lint": "eslint test scripts src",
     "build-amaps": "node scripts/build-amaps.js",
+    "build": "node scripts/build-amaps.js --production",
     "watch-build-amaps": "NODE_ENV=development node scripts/build-amaps.js -w",
     "get-nlmaps": "shx rm -rf nlmaps && git clone --depth=1 --branch v$npm_package_nlmaps_version https://github.com/webmapper/nlmaps",
     "install-nlmaps": "node scripts/install-nlmaps.js",
@@ -90,4 +97,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

src/index.js

@@ -1,4 +1,5 @@
 /*amaps is just nlmaps built with Amsterdam's config. So let's rename it amaps.*/
 import { nlmaps } from '../nlmaps/packages/nlmaps/src/index.js';
+import 'leaflet.markercluster';
 const amaps = nlmaps;
 export default amaps;

src/multiselect.js

@@ -2,6 +2,7 @@ import 'whatwg-fetch';
 import tress from 'tress';
 import { nlmaps } from '../nlmaps/dist/nlmaps.es.js';
 import { pointQueryChain } from './lib.js';
+import 'leaflet.markercluster';
 import emitonoff from 'emitonoff';
 /* eslint-disable-next-line max-len */
 const URL = 'https://map.data.amsterdam.nl/maps/parkeervakken?REQUEST=GetFeature&SERVICE=wfs&OUTPUTFORMAT=application/json;%20subtype=geojson;%20charset=utf-8&Typename=fiscaal_parkeervakken&version=1.1.0&srsname=urn:ogc:def:crs:EPSG::4326';

src/pointquery.js

@@ -1,7 +1,8 @@
-import "whatwg-fetch";
-import { nlmaps } from "../nlmaps/dist/nlmaps.es.js";
-import { pointQueryChain } from "./lib.js";
-import emitonoff from "emitonoff";
+import 'whatwg-fetch';
+import { nlmaps } from '../nlmaps/dist/nlmaps.es.js';
+import { pointQueryChain } from './lib.js';
+import 'leaflet.markercluster';
+import emitonoff from 'emitonoff';
 const mora = {};
 emitonoff(mora);