jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP: POC of using Leaflet.IconLayers as tilelayers switcher

Browse source
This commit is contained in:
Yohan Boniface 2023-12-15 11:40:52 +01:00
parent 445ce7b6ba
commit fe9f4b4a48
9 changed files with 96 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
package-lock.json generated
View file

@ -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",
"resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.7.tgz",
"integrity": "sha512-5/QXEPmlSPNzl5r8rNlhcQOfI2Bx9vo/FBaBCV7o37MmZZ2jyA4aRu+6j91CnyRmKXfU5f/42E0yJva/Dwnqcw=="
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.9.tgz",
"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",
"resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.7.tgz",
"integrity": "sha512-5/QXEPmlSPNzl5r8rNlhcQOfI2Bx9vo/FBaBCV7o37MmZZ2jyA4aRu+6j91CnyRmKXfU5f/42E0yJva/Dwnqcw=="
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/leaflet-formbuilder/-/leaflet-formbuilder-0.2.9.tgz",
"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",

1
package.json
View file

@ -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",

1
scripts/vendorsjs.sh
View file

@ -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!'

17
umap/static/umap/js/umap.controls.js
View file

@ -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',
},

30
umap/static/umap/js/umap.js
View file

@ -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) {
if (this.options.tilelayers.hasOwnProperty(i)) {
this.tilelayers.push(this.createTileLayer(this.options.tilelayers[i]))
if (
this.options.tilelayer &&
this.options.tilelayer.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
}
for (const props of this.options.tilelayers) {
let layer = this.createTileLayer(props)
this.tilelayers.push(layer)
if (
this.options.tilelayer &&
this.options.tilelayer.url_template === props.url_template
) {
// Keep control over the displayed attribution for non custom tilelayers
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)
this._controls.tilelayers.openSwitcher({ callback: callback, className: 'dark' })
if (this._controls.tilelayersChooser)
this._controls.tilelayersChooser.openSwitcher({ callback: callback, className: 'dark' })
},
manageDatalayers: function () {

22
umap/static/umap/map.css
View file

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

2
umap/static/umap/test/index.html
View file

@ -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" />

2
umap/templates/umap/css.html
View file

@ -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">

1
umap/templates/umap/js.html
View file

@ -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>