WIP: POC of using Leaflet.IconLayers as tilelayers switcher

package-lock.json

@@ -18,10 +18,11 @@
         "leaflet-contextmenu": "^1.4.0",
         "leaflet-editable": "^1.2.0",
         "leaflet-editinosm": "0.2.3",
-        "leaflet-formbuilder": "0.2.7",
+        "leaflet-formbuilder": "0.2.9",
         "leaflet-fullscreen": "1.0.2",
         "leaflet-hash": "0.2.1",
         "leaflet-i18n": "0.3.3",
+        "leaflet-iconlayers": "^0.2.0",
         "leaflet-loading": "0.1.24",
         "leaflet-measurable": "0.1.0",
         "leaflet-minimap": "^3.6.1",
@@ -1384,9 +1385,9 @@
       "integrity": "sha1-8HFmTEpSe3b3uPm87HRLJIiVwHE="
     },
     "node_modules/leaflet-formbuilder": {
-      "version": "0.2.7",
+      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.9.tgz",
-      "integrity": "sha512-5/QXEPmlSPNzl5r8rNlhcQOfI2Bx9vo/FBaBCV7o37MmZZ2jyA4aRu+6j91CnyRmKXfU5f/42E0yJva/Dwnqcw=="
+      "integrity": "sha512-6akc6pqVMDqoKxTfXvurK4tfDMqnAYTxqxS8GVkOXipEXumsP9qScLFYEzhuZcMeOJ+AeKZrq8ZCsNti1syusg=="
     },
     "node_modules/leaflet-fullscreen": {
       "version": "1.0.2",
@@ -1406,6 +1407,19 @@
       "resolved": "https://registry.npmjs.org/leaflet-i18n/-/leaflet-i18n-0.3.3.tgz",
       "integrity": "sha512-bl1HkR/8ZbQ9/S2x736rBQL/40P+5zSItMAW5lOpuZSrM5PK0ezsux8znug8JJQtE+2QkBBsWIngfVlGERN0AA=="
     },
+    "node_modules/leaflet-iconlayers": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/leaflet-iconlayers/-/leaflet-iconlayers-0.2.0.tgz",
+      "integrity": "sha512-iSa5v+Lrovt2wLY3wQnzudatb+l7SEMUOvrmDrky2TkhUjJscrJKj8doP16xG94E2rHQaQmqxUWKGv6JNUfIOQ==",
+      "dependencies": {
+        "leaflet": "^0.7.3"
+      }
+    },
+    "node_modules/leaflet-iconlayers/node_modules/leaflet": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-0.7.7.tgz",
+      "integrity": "sha512-H1lR7J5VxhvQJQHlW2UywtxO63zilLrnwVsDvjKeyfntffj63Ml94gCk9YPYWBkiQgxisdiA8aJ30Zoou4VhEA=="
+    },
     "node_modules/leaflet-loading": {
       "version": "0.1.24",
       "resolved": "https://registry.npmjs.org/leaflet-loading/-/leaflet-loading-0.1.24.tgz",
@@ -3584,9 +3598,9 @@
       "integrity": "sha1-8HFmTEpSe3b3uPm87HRLJIiVwHE="
     },
     "leaflet-formbuilder": {
-      "version": "0.2.7",
+      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.9.tgz",
-      "integrity": "sha512-5/QXEPmlSPNzl5r8rNlhcQOfI2Bx9vo/FBaBCV7o37MmZZ2jyA4aRu+6j91CnyRmKXfU5f/42E0yJva/Dwnqcw=="
+      "integrity": "sha512-6akc6pqVMDqoKxTfXvurK4tfDMqnAYTxqxS8GVkOXipEXumsP9qScLFYEzhuZcMeOJ+AeKZrq8ZCsNti1syusg=="
     },
     "leaflet-fullscreen": {
       "version": "1.0.2",
@@ -3603,6 +3617,21 @@
       "resolved": "https://registry.npmjs.org/leaflet-i18n/-/leaflet-i18n-0.3.3.tgz",
       "integrity": "sha512-bl1HkR/8ZbQ9/S2x736rBQL/40P+5zSItMAW5lOpuZSrM5PK0ezsux8znug8JJQtE+2QkBBsWIngfVlGERN0AA=="
     },
+    "leaflet-iconlayers": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/leaflet-iconlayers/-/leaflet-iconlayers-0.2.0.tgz",
+      "integrity": "sha512-iSa5v+Lrovt2wLY3wQnzudatb+l7SEMUOvrmDrky2TkhUjJscrJKj8doP16xG94E2rHQaQmqxUWKGv6JNUfIOQ==",
+      "requires": {
+        "leaflet": "^0.7.3"
+      },
+      "dependencies": {
+        "leaflet": {
+          "version": "0.7.7",
+          "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-0.7.7.tgz",
+          "integrity": "sha512-H1lR7J5VxhvQJQHlW2UywtxO63zilLrnwVsDvjKeyfntffj63Ml94gCk9YPYWBkiQgxisdiA8aJ30Zoou4VhEA=="
+        }
+      }
+    },
     "leaflet-loading": {
       "version": "0.1.24",
       "resolved": "https://registry.npmjs.org/leaflet-loading/-/leaflet-loading-0.1.24.tgz",

package.json

@@ -46,6 +46,7 @@
     "leaflet-fullscreen": "1.0.2",
     "leaflet-hash": "0.2.1",
     "leaflet-i18n": "0.3.3",
+    "leaflet-iconlayers": "^0.2.0",
     "leaflet-loading": "0.1.24",
     "leaflet-measurable": "0.1.0",
     "leaflet-minimap": "^3.6.1",

scripts/vendorsjs.sh

@@ -28,5 +28,6 @@ mkdir -p umap/static/umap/vendors/locatecontrol/ && cp -r node_modules/leaflet.l
 mkdir -p umap/static/umap/vendors/dompurify/ && cp -r node_modules/dompurify/dist/purify.js umap/static/umap/vendors/dompurify/
 mkdir -p umap/static/umap/vendors/colorbrewer/ && cp node_modules/colorbrewer/index.js umap/static/umap/vendors/colorbrewer/colorbrewer.js
 mkdir -p umap/static/umap/vendors/simple-statistics/ && cp node_modules/simple-statistics/dist/simple-statistics.min.js umap/static/umap/vendors/simple-statistics/
+mkdir -p umap/static/umap/vendors/iconlayers/ && cp node_modules/leaflet-iconlayers/dist/* umap/static/umap/vendors/iconlayers/
 
 echo 'Done!'

umap/static/umap/js/umap.controls.js

@@ -1178,7 +1178,22 @@ L.U.Map.include({
   },
 })
 
-L.U.TileLayerControl = L.Control.extend({
+L.U.TileLayerControl = L.Control.IconLayers.extend({
+  initialize: function (map, options) {
+    const layers = []
+    for (const layer of map.tilelayers) {
+      layers.push({
+        title: layer.options.name,
+        layer: layer,
+        icon: L.Util.template(layer.options.url_template, map.demoTileInfos),
+      })
+    }
+    L.Control.IconLayers.prototype.initialize.call(this, layers, {position: 'topleft'})
+  }
+})
+
+
+L.U.TileLayerChooser = L.Control.extend({
   options: {
     position: 'topleft',
   },

umap/static/umap/js/umap.js

@@ -60,8 +60,8 @@ L.U.Map.include({
     'measure',
     'editinosm',
     'datalayers',
-    'tilelayers',
     'star',
+    'tilelayers',
   ],
 
   initialize: function (el, geojson) {
@@ -326,7 +326,7 @@ L.U.Map.include({
     })
     this._controls.search = new L.U.SearchControl()
     this._controls.embed = new L.Control.Embed(this, this.options.embedOptions)
-    this._controls.tilelayers = new L.U.TileLayerControl(this)
+    this._controls.tilelayersChooser = new L.U.TileLayerChooser(this)
     this._controls.star = new L.U.StarControl(this)
     this._controls.editinosm = new L.Control.EditInOSM({
       position: 'topleft',
@@ -345,6 +345,8 @@ L.U.Map.include({
     this.browser = new L.U.Browser(this)
     this.importer = new L.U.Importer(this)
     this.drop = new L.U.DropControl(this)
+    this._controls.tilelayers = new L.U.TileLayerControl(this)
+
     this.renderControls()
   },
 
@@ -581,17 +583,15 @@ L.U.Map.include({
 
   initTileLayers: function () {
     this.tilelayers = []
-    for (const i in this.options.tilelayers) {
+    for (const props of this.options.tilelayers) {
-      if (this.options.tilelayers.hasOwnProperty(i)) {
+      let layer = this.createTileLayer(props)
-        this.tilelayers.push(this.createTileLayer(this.options.tilelayers[i]))
+      this.tilelayers.push(layer)
       if (
         this.options.tilelayer &&
-          this.options.tilelayer.url_template ===
+        this.options.tilelayer.url_template === props.url_template
-            this.options.tilelayers[i].url_template
       ) {
         // Keep control over the displayed attribution for non custom tilelayers
-          this.options.tilelayer.attribution = this.options.tilelayers[i].attribution
+        this.options.tilelayer.attribution = props.attribution
-        }
       }
     }
     if (
@@ -816,8 +816,8 @@ L.U.Map.include({
         self.options.tilelayer = tilelayer.toJSON()
         self.isDirty = true
       }
-    if (this._controls.tilelayers)
+    if (this._controls.tilelayersChooser)
-      this._controls.tilelayers.openSwitcher({ callback: callback, className: 'dark' })
+      this._controls.tilelayersChooser.openSwitcher({ callback: callback, className: 'dark' })
   },
 
   manageDatalayers: function () {

umap/static/umap/map.css

@@ -161,6 +161,28 @@
     background-image: url('./img/16.svg');
     background-position: 0px 0px;
 }
+.leaflet-iconLayers-layer {
+    width: 38px;
+    height: 38px;
+    box-shadow: none;
+    border: 1px solid #bbb;
+    border-radius: 4px;
+}
+.leaflet-iconLayers-layerTitleContainer {
+    display: none;
+    left: 0;
+}
+.leaflet-iconLayers-layerTitle {
+    text-align: center;
+    display: inline-block;
+}
+.leaflet-iconLayers:hover .leaflet-iconLayers-layer {
+    width: 80px;
+    height: 80px;
+}
+.leaflet-iconLayers:hover .leaflet-iconLayers-layerTitleContainer {
+    display: initial;
+}
 
 
 

umap/static/umap/test/index.html

@@ -21,6 +21,7 @@
     <script src="../vendors/toolbar/leaflet.toolbar-src.js"></script>
     <script src="../vendors/formbuilder/Leaflet.FormBuilder.js"></script>
     <script src="../vendors/measurable/Leaflet.Measurable.js"></script>
+    <script src="../vendors/iconlayers/iconLayers.js"></script>
     <script src="../vendors/locatecontrol/L.Control.Locate.js"></script>
     <script src="../vendors/dompurify/purify.js"></script>
     <script src="../vendors/togpx/togpx.js"></script>
@@ -52,6 +53,7 @@
     <link rel="stylesheet" href="../vendors/contextmenu/leaflet.contextmenu.css" />
     <link rel="stylesheet" href="../vendors/toolbar/leaflet.toolbar.css" />
     <link rel="stylesheet" href="../vendors/measurable/Leaflet.Measurable.css" />
+    <link rel="stylesheet" href="../vendors/iconlayers/iconLayers.css" />
     <link rel="stylesheet" href="../../umap/font.css" />
     <link rel="stylesheet" href="../../umap/base.css" />
     <link rel="stylesheet" href="../../umap/content.css" />

umap/templates/umap/css.html

@@ -18,6 +18,8 @@
       href="{{ STATIC_URL }}umap/vendors/fullscreen/leaflet.fullscreen.css" />
 <link rel="stylesheet"
       href="{{ STATIC_URL }}umap/vendors/locatecontrol/L.Control.Locate.css" />
+<link rel="stylesheet"
+      href="{{ STATIC_URL }}umap/vendors/iconlayers/iconLayers.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/font.css">
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/base.css">
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/content.css">

umap/templates/umap/js.html

@@ -20,6 +20,7 @@
   <script src="{{ STATIC_URL }}umap/vendors/toolbar/leaflet.toolbar-src.js"></script>
   <script src="{{ STATIC_URL }}umap/vendors/formbuilder/Leaflet.FormBuilder.js"></script>
   <script src="{{ STATIC_URL }}umap/vendors/measurable/Leaflet.Measurable.js"></script>
+  <script src="{{ STATIC_URL }}umap/vendors/iconlayers/iconLayers.js"></script>
   <script src="{{ STATIC_URL }}umap/vendors/togpx/togpx.js"></script>
   <script src="{{ STATIC_URL }}umap/vendors/tokml/tokml.js"></script>
   <script src="{{ STATIC_URL }}umap/vendors/locatecontrol/L.Control.Locate.js"></script>