fix map zoom for ocean, tweak mayflower icon size

This commit is contained in:
Dave Conway-Jones 2021-04-13 10:36:15 +01:00
parent 606e8edce0
commit a0ea7a2817
No known key found for this signature in database
GPG Key ID: 88BA2B8A411BE9FF
4 changed files with 8 additions and 7 deletions

View File

@ -1,6 +1,6 @@
### Change Log for Node-RED Worldmap ### Change Log for Node-RED Worldmap
- v2.13.1 - Add mayflower icon. - v2.13.2 - Add mayflower icon.
- v2.13.0 - Tidy velocity layer. Feedback any url parameters. - v2.13.0 - Tidy velocity layer. Feedback any url parameters.
- v2.12.1 - Only show online layer options if we are online. - v2.12.1 - Only show online layer options if we are online.
- v2.12.0 - Add live rainfall radar data layer. Remove some non-loading overlays. - v2.12.0 - Add live rainfall radar data layer. Remove some non-loading overlays.

View File

@ -11,6 +11,7 @@ map web page for plotting "things" on.
### Updates ### Updates
- v2.13.2 - Add mayflower icon.
- v2.13.0 - Tidy velocity layer. Feedback any url parameters. - v2.13.0 - Tidy velocity layer. Feedback any url parameters.
- v2.12.1 - Only show online layer options if we are online. - v2.12.1 - Only show online layer options if we are online.
- v2.12.0 - Add live rainfall radar data layer. Remove some non-loading overlays. - v2.12.0 - Add live rainfall radar data layer. Remove some non-loading overlays.

View File

@ -1,6 +1,6 @@
{ {
"name": "node-red-contrib-web-worldmap", "name": "node-red-contrib-web-worldmap",
"version": "2.13.1", "version": "2.13.2",
"description": "A Node-RED node to provide a web page of a world map for plotting things on.", "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies": { "dependencies": {
"cgi": "0.3.1", "cgi": "0.3.1",

View File

@ -771,13 +771,13 @@ if (navigator.onLine) {
var Esri_OceanBasemap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', { var Esri_OceanBasemap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri', attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
maxZoom: 13 maxNativeZoom:13
}); });
basemaps["Esri Ocean"] = Esri_OceanBasemap; basemaps["Esri Ocean"] = Esri_OceanBasemap;
var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', { var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ', attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
maxZoom: 16 maxNativeZoom:13
}); });
basemaps["Esri Dark Grey"] = Esri_WorldGrayCanvas; basemaps["Esri Dark Grey"] = Esri_WorldGrayCanvas;
@ -1566,14 +1566,14 @@ function setMarker(data) {
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag}); marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
} }
else if (data.icon === "mayflower") { else if (data.icon === "mayflower") {
data.iconColor = data.iconColor || "white"; data.iconColor = data.iconColor || "#910000";
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="60" viewBox="0 0 4 10" aria-hidden="true" stroke-width="1.5">'; icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="60" viewBox="0 0 4 10" aria-hidden="true" stroke-width="1.5">';
icon += '<path d="M2 .2L1.5 5l-1 .5L.2 4S.09 5.551.1 6.25c.01.759.1 2.25.1 2.25L.5 7l1 .3.3 2.5h.4l.3-2.5 1-.3.3 1.5s.058-1.518.1-2.25C3.945 5.455 3.8 4 3.8 4l-.3 1.5-1-.5z" fill="'+data.iconColor+'"/></svg>'; icon += '<path d="M2 .2L1.5 5l-1 .5L.2 4S.09 5.551.1 6.25c.01.759.1 2.25.1 2.25L.5 7l1 .3.3 2.5h.4l.3-2.5 1-.3.3 1.5s.058-1.518.1-2.25C3.945 5.455 3.8 4 3.8 4l-.3 1.5-1-.5z" fill="'+data.iconColor+'"/></svg>';
var svgmay = "data:image/svg+xml;base64," + btoa(icon); var svgmay = "data:image/svg+xml;base64," + btoa(icon);
myMarker = L.divIcon({ myMarker = L.divIcon({
className:"mayflowericon", className:"mayflowericon",
iconAnchor: [16, 32], iconAnchor: [12, 24],
html:'<img src="'+svgmay+'" style="width:32px; height:64px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>', html:'<img src="'+svgmay+'" style="width:24px; height:48px; -webkit-transform:rotate('+dir+'deg); -moz-transform:rotate('+dir+'deg);"/>',
}); });
marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag}); marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
} }