From 1fc71a73b3f812e988b074ef3ce5d3ab3fd1d3bd Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Sun, 5 Jul 2020 17:06:59 +0200 Subject: [PATCH] gluon-config-mode-geo-location-osm, gluon-web-osm: add support for custom tile layers (#2072) Allow replacing the default OSM layer with a custom XYZ layer in site.conf. --- docs/user/site.rst | 12 +++++++++++- .../check_site.lua | 6 ++++++ .../lua/gluon/config-mode/geo-location-osm.lua | 1 + .../lib/gluon/web/view/model/osm/map.html | 2 +- .../lib/gluon/web/www/static/gluon-web-osm.js | 2 +- .../gluon-web-osm/javascript/gluon-web-osm.js | 18 ++++++++++++++---- .../luasrc/usr/lib/lua/gluon/web/model/osm.lua | 5 ++++- 7 files changed, 38 insertions(+), 8 deletions(-) diff --git a/docs/user/site.rst b/docs/user/site.rst index fa14d57f..feeacdaf 100644 --- a/docs/user/site.rst +++ b/docs/user/site.rst @@ -464,9 +464,14 @@ config_mode \: optional The *geo_location.osm* section is only relevant when the *gluon-config-mode-geo-location-osm* package is used. The *center.lon* and *center.lat* values are mandatory in this case and define the default center of the map when no position has been picked yet. The *zoom* level - defaults to 12 in this case. *openlayers_url* allows to override the base URL of the + defaults to 12 in this case. + + *openlayers_url* allows to override the base URL of the *build/ol.js* and *css/ol.css* files (the default is ``https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0``). + It is also possible to replace the default tile layer (which is OpenStreetMap) + with a custom one using the *tile_layer* section. Only XYZ layers are supported + at this point. The remote login page only shows SSH key configuration by default. A password form can be displayed by setting *remote_login.show_password_form* @@ -488,6 +493,11 @@ config_mode \: optional }, zoom = 13, -- openlayers_url = 'http://ffac.example.org/openlayer', + -- tile_layer = { + -- type = 'XYZ', + -- url = 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png', + -- attributions = '© OpenStreetMap contributors.', + -- }, }, }, remote_login = { diff --git a/package/gluon-config-mode-geo-location-osm/check_site.lua b/package/gluon-config-mode-geo-location-osm/check_site.lua index 8e69ba0a..2b3b0cb1 100644 --- a/package/gluon-config-mode-geo-location-osm/check_site.lua +++ b/package/gluon-config-mode-geo-location-osm/check_site.lua @@ -2,3 +2,9 @@ need_number(in_site({'config_mode', 'geo_location', 'osm', 'center', 'lon'})) need_number(in_site({'config_mode', 'geo_location', 'osm', 'center', 'lat'})) need_number(in_site({'config_mode', 'geo_location', 'osm', 'zoom'}), false) need_string(in_site({'config_mode', 'geo_location', 'osm', 'openlayers_url'}), false) + +if need_table(in_site({'config_mode', 'geo_location', 'osm', 'tile_layer'}), nil, false) then + need_one_of(in_site({'config_mode', 'geo_location', 'osm', 'tile_layer', 'type'}), {'XYZ'}) + need_string(in_site({'config_mode', 'geo_location', 'osm', 'tile_layer', 'url'})) + need_string(in_site({'config_mode', 'geo_location', 'osm', 'tile_layer', 'attributions'})) +end diff --git a/package/gluon-config-mode-geo-location-osm/luasrc/usr/lib/lua/gluon/config-mode/geo-location-osm.lua b/package/gluon-config-mode-geo-location-osm/luasrc/usr/lib/lua/gluon/config-mode/geo-location-osm.lua index 0ae54555..39f968c1 100644 --- a/package/gluon-config-mode-geo-location-osm/luasrc/usr/lib/lua/gluon/config-mode/geo-location-osm.lua +++ b/package/gluon-config-mode-geo-location-osm/luasrc/usr/lib/lua/gluon/config-mode/geo-location-osm.lua @@ -19,6 +19,7 @@ function M.options() return { openlayers_url = config.openlayers_url(), + tile_layer = config.tile_layer(), zoom = config.zoom(12), pos = config.center(), } diff --git a/package/gluon-web-osm/files/lib/gluon/web/view/model/osm/map.html b/package/gluon-web-osm/files/lib/gluon/web/view/model/osm/map.html index 1a42c510..2caa3f37 100644 --- a/package/gluon-web-osm/files/lib/gluon/web/view/model/osm/map.html +++ b/package/gluon-web-osm/files/lib/gluon/web/view/model/osm/map.html @@ -15,7 +15,7 @@ <%- end %> }, {once: true}); - initOSM(<%=json(self.openlayers_url)%>, function(createMap) { + initOSM(<%=json(self.options)%>, function(createMap) { elMap.style.display = ''; var pos = <%=json(self:cfgvalue().pos)%>; diff --git a/package/gluon-web-osm/files/lib/gluon/web/www/static/gluon-web-osm.js b/package/gluon-web-osm/files/lib/gluon/web/www/static/gluon-web-osm.js index 3d85f6f1..a017a649 100644 --- a/package/gluon-web-osm/files/lib/gluon/web/www/static/gluon-web-osm.js +++ b/package/gluon-web-osm/files/lib/gluon/web/www/static/gluon-web-osm.js @@ -1 +1 @@ -"use strict";function initOSM(e,o){var t=document.createElement("link");t.rel="stylesheet",t.type="text/css",t.href=e+"/css/ol.css",document.head.appendChild(t);var n=document.createElement("script"),r=!1;n.onload=n.onreadystatechange=function(){if(!(r||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){r=!0;var t=new Image;t.onload=function(){var e=new ol.style.Style({image:new ol.style.Icon({img:t,imgSize:[30,45],anchor:[.5,1]})}),c=new ol.Feature;c.setStyle(e),o(function(e,t,o,n,r){var a=new ol.Map({target:e,layers:[new ol.layer.Tile({source:new ol.source.OSM}),new ol.layer.Vector({source:new ol.source.Vector({features:[c]})})],view:new ol.View({center:ol.proj.fromLonLat(t),zoom:o})}),l=function(e){c.setGeometry(new ol.geom.Point(e))};return a.addEventListener("click",function(e){l(e.coordinate),r(ol.proj.toLonLat(e.coordinate))}),n&&l(ol.proj.fromLonLat(t)),a})},t.src="data:image/svg+xml,"+escape('')}},n.src=e+"/build/ol.js",document.head.appendChild(n)} \ No newline at end of file +"use strict";function initOSM(o,r){var e=document.createElement("link");e.rel="stylesheet",e.type="text/css",e.href=o.openlayers_url+"/css/ol.css",document.head.appendChild(e);var t=document.createElement("script"),l=!1;t.onload=t.onreadystatechange=function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){l=!0;var t=new Image;t.onload=function(){var i,e=new ol.style.Style({image:new ol.style.Icon({img:t,imgSize:[30,45],anchor:[.5,1]})}),s=new ol.Feature;s.setStyle(e),i=o.tile_layer&&"XYZ"===o.tile_layer.type?new ol.source.XYZ({url:o.tile_layer.url,attributions:o.tile_layer.attributions}):new ol.source.OSM,r(function(e,t,o,r,l){function n(e){s.setGeometry(new ol.geom.Point(e))}var a=new ol.Map({target:e,layers:[new ol.layer.Tile({source:i}),new ol.layer.Vector({source:new ol.source.Vector({features:[s]})})],view:new ol.View({center:ol.proj.fromLonLat(t),zoom:o})});return a.addEventListener("click",function(e){n(e.coordinate),l(ol.proj.toLonLat(e.coordinate))}),r&&n(ol.proj.fromLonLat(t)),a})},t.src="data:image/svg+xml,"+escape('')}},t.src=o.openlayers_url+"/build/ol.js",document.head.appendChild(t)} \ No newline at end of file diff --git a/package/gluon-web-osm/javascript/gluon-web-osm.js b/package/gluon-web-osm/javascript/gluon-web-osm.js index 65b06e26..b4acbf8b 100644 --- a/package/gluon-web-osm/javascript/gluon-web-osm.js +++ b/package/gluon-web-osm/javascript/gluon-web-osm.js @@ -6,7 +6,7 @@ 'use strict'; -function initOSM(openlayers_url, ready) { +function initOSM(options, ready) { var markerSvg = '' + '' + '' @@ -15,7 +15,7 @@ function initOSM(openlayers_url, ready) { var style = document.createElement('link'); style.rel = 'stylesheet'; style.type = 'text/css'; - style.href = openlayers_url + '/css/ol.css'; + style.href = options.openlayers_url + '/css/ol.css'; document.head.appendChild(style); var script = document.createElement('script'); @@ -42,12 +42,22 @@ function initOSM(openlayers_url, ready) { var marker = new ol.Feature(); marker.setStyle(markerStyle); + var source; + if (options.tile_layer && options.tile_layer.type === 'XYZ') { + source = new ol.source.XYZ({ + url: options.tile_layer.url, + attributions: options.tile_layer.attributions, + }); + } else { + source = new ol.source.OSM(); + } + ready(function(elMap, pos, zoom, set, onUpdate) { var map = new ol.Map({ target: elMap, layers: [ new ol.layer.Tile({ - source: new ol.source.OSM() + source: source }), new ol.layer.Vector({ source: new ol.source.Vector({ @@ -79,6 +89,6 @@ function initOSM(openlayers_url, ready) { markerImg.src = 'data:image/svg+xml,' + escape(markerSvg); }; - script.src = openlayers_url + '/build/ol.js'; + script.src = options.openlayers_url + '/build/ol.js'; document.head.appendChild(script); } diff --git a/package/gluon-web-osm/luasrc/usr/lib/lua/gluon/web/model/osm.lua b/package/gluon-web-osm/luasrc/usr/lib/lua/gluon/web/model/osm.lua index cf07c228..ec18a003 100644 --- a/package/gluon-web-osm/luasrc/usr/lib/lua/gluon/web/model/osm.lua +++ b/package/gluon-web-osm/luasrc/usr/lib/lua/gluon/web/model/osm.lua @@ -15,7 +15,10 @@ M.MapValue = MapValue function MapValue:__init__(title, options) classes.AbstractValue.__init__(self, title) self.subtemplate = "model/osm/map" - self.openlayers_url = options.openlayers_url or DEFAULT_URL + self.options = { + openlayers_url = options.openlayers_url or DEFAULT_URL, + tile_layer = options.tile_layer, + } self.lon = options.lon self.lat = options.lat