website

My personal website www.ortlepp.eu
git clone https://git.ortlepp.eu/website.git/
Log | Files | Refs

commit 0e5b97a6d7bf0b87a53828842a64084899cbfa14
parent 05b98458cd1929afd1068099b271fba3bcb140d4
Author: Thorsten Ortlepp <post@ortlepp.eu>
Date:   Tue,  1 Feb 2022 22:51:02 +0100

Update GPX Viewer to version 6.15.1

Diffstat:
Mstatic/files/gpx/gpxviewer/GPX2GM.js | 222++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------
Mstatic/files/gpx/gpxviewer/GPX2GM_Defs.js | 103+++++++++++++++++++++++++++++++++++++++++++------------------------------------
Astatic/files/gpx/gpxviewer/gra_svg.js | 174+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mstatic/files/gpx/gpxviewer/osmutils.js | 253++++++++++++++++++++++++++++++++++++++++++++-----------------------------------
Mstatic/files/gpx/gpxviewer/plot.js | 150++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------
Mstatic/files/gpx/gpxviewer/readme.txt | 4++--
Mstatic/files/gpx/gpxviewer/shimg.js | 41+++++++++++++++++++----------------------
7 files changed, 678 insertions(+), 269 deletions(-)

diff --git a/static/files/gpx/gpxviewer/GPX2GM.js b/static/files/gpx/gpxviewer/GPX2GM.js @@ -3,14 +3,14 @@ // Lizenz CC BY-NC-SA 4.0 // Jürgen Berkemeier // www.j-berkemeier.de -// Version 6.9 vom 25. 7. 2020 +// Version 6.15.1 vom 25. 11. 2021 "use strict"; window.JB = window.JB || {}; window.JB.GPX2GM = window.JB.GPX2GM || {}; -JB.GPX2GM.ver = "6.9"; -JB.GPX2GM.dat = "25. 7. 2020"; +JB.GPX2GM.ver = "6.15.1"; +JB.GPX2GM.dat = "25. 11. 2021"; JB.GPX2GM.fname = "GPX2GM.js"; JB.GPX2GM.globalMapParameter = {}; @@ -38,30 +38,45 @@ if(JB.debuginfo) JB.gpxview_Start = Date.now(); window.requestAnimationFrame = window.requestAnimationFrame || function(callback) { window.setTimeout(callback,1) }; +(function() { + // CustomEvent-Polyfill für IE<=11 + if ( typeof window.CustomEvent != "function" ) { + function CustomEvent ( event, params ) { + params = params || { bubbles: false, cancelable: false, detail: null }; + const evt = document.createEvent( 'CustomEvent' ); + evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); + return evt; + } + window.CustomEvent = CustomEvent; + } +})(); + JB.Scripte = { GPX2GM_Defs:0, maplib:0, gra:0, plot:0, maputils:0 }; JB.makeMap = function (ID) { JB.Debug_Info(ID,"makeMap gestartet",false); - + var dieses = this; var gpxdaten; + this.gpxdaten = gpxdaten; var id = ID; this.id = id; var markers=[],trackpolylines=[],routepolylines=[]; var file,maptype; var Map; var newfile; - var div = document.getElementById(id); + + initEvents(this); this.parameters = {}; for(var par in JB.GPX2GM.parameters) this.parameters[par] = JB.GPX2GM.parameters[par]; JB.Debug_Info(ID,"Parameter: " + JSON.stringify(div.dataset),false); for(var par in div.dataset) { if(par in this.parameters) { - if(div.dataset[par] =="false") this.parameters[par] = false; - else if(div.dataset[par] =="true") this.parameters[par] = true; + if(div.dataset[par] == "false") this.parameters[par] = false; + else if(div.dataset[par] == "true") this.parameters[par] = true; else this.parameters[par] = div.dataset[par]; } else { @@ -118,6 +133,7 @@ JB.makeMap = function (ID) { if(typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Map_div_v"}); + fireEvent(this,this.events.Map_div_v); JB.GPX2GM.globalMapParameter[id] = {keydownhandler: null}; JB.GPX2GM.globalMapParameter[id] = {closeActivehandler: null}; @@ -152,6 +168,7 @@ JB.makeMap = function (ID) { } if(typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Map_div_n"}); + fireEvent(this,this.events.Map_div_n); JB.Debug_Info(ID,"Mapdiv angelegt "+mapdiv.offsetWidth+"*"+mapdiv.offsetHeight,false); this.parameters.profilflag = false; @@ -221,13 +238,49 @@ JB.makeMap = function (ID) { if(this.parameters.profilflag || this.parameters.trcolmod.length) { if(JB.Scripte.gra==0) { JB.Scripte.gra = 1; - JB.LoadScript(JB.GPX2GM.Path+'gra_canvas.js', function(){ JB.Scripte.gra = 2; }); +// JB.LoadScript(JB.GPX2GM.Path+'gra_canvas.js', function(){ JB.Scripte.gra = 2; }); + JB.LoadScript(JB.GPX2GM.Path+'gra_svg.js', function(){ JB.Scripte.gra = 2; }); JB.Scripte.plot = 1; JB.LoadScript(JB.GPX2GM.Path+"plot.js", function(){ JB.Scripte.plot = 2; }); JB.Debug_Info(ID,"Grafikscripte werden geladen",false); } } + function initEvents(mapObject) { + mapObject.events = {}; + mapObject.events.eventElement = document.getElementById(mapObject.id); + mapObject.events.Map_div_v = new CustomEvent("Map_div_v", { detail: mapObject } ); + mapObject.events.Map_div_n = new CustomEvent("Map_div_n", { detail: mapObject } ); + mapObject.events.Map_v = new CustomEvent("Map_v", { detail: mapObject } ); + mapObject.events.Map_n = new CustomEvent("Map_n", { detail: mapObject } ); + mapObject.events.Show = new CustomEvent("Show", { detail: mapObject } ); + mapObject.events.Wegpunkte_v = new CustomEvent("Wegpunkte_v", { detail: mapObject } ); + mapObject.events.Wegpunkte_n = new CustomEvent("Wegpunkte_n", { detail: mapObject } ); + mapObject.events.Routen_v = new CustomEvent("Routen_v", { detail: mapObject } ); + mapObject.events.Routen_n = new CustomEvent("Routen_n", { detail: mapObject } ); + mapObject.events.Tracks_v = new CustomEvent("Tracks_v", { detail: mapObject } ); + mapObject.events.Tracks_n = new CustomEvent("Tracks_n", { detail: mapObject } ); + mapObject.events.Profile_v = new CustomEvent("Profile_v", { detail: mapObject } ); + mapObject.events.Profile_n = new CustomEvent("Profile_n", { detail: mapObject } ); + mapObject.events.created_Marker_Text = new CustomEvent("created_Marker_Text", { detail: mapObject } ); + mapObject.events.created_Marker_Bild = new CustomEvent("created_Marker_Bild", { detail: mapObject } ); + mapObject.events.created_Marker_Link = new CustomEvent("created_Marker_Link", { detail: mapObject } ); + mapObject.events.created_Route = new CustomEvent("created_Route", { detail: mapObject } ); + mapObject.events.created_Track = new CustomEvent("created_Track", { detail: mapObject } ); + mapObject.events.click_Marker_Text = new CustomEvent("click_Marker_Text", { detail: mapObject, cancelable:true } ); + mapObject.events.click_Marker_Bild = new CustomEvent("click_Marker_Bild", { detail: mapObject, cancelable:true } ); + mapObject.events.click_Marker_Link = new CustomEvent("click_Marker_Link", { detail: mapObject, cancelable:true } ); + mapObject.events.click_Route = new CustomEvent("click_Route", { detail: mapObject, cancelable:true } ); + mapObject.events.click_Track = new CustomEvent("click_Track", { detail: mapObject, cancelable:true } ); + } // initEvents + + function fireEvent(mapObject,event,eventparameter) { + mapObject.events.eventparameter = eventparameter; + let notCanceled = mapObject.events.eventElement.dispatchEvent(event); + return notCanceled; + } // fireEvent + this.fireEvent = fireEvent; + this.ShowGPX = function(fn,mpt) { var filenames = []; file = []; @@ -252,7 +305,8 @@ JB.makeMap = function (ID) { gpxdaten = pict2WP.call(this,gpxdaten); gpxdaten = div2WP.call(this,gpxdaten); if(this.parameters.tracksort) gpxdaten = sort_tracks.call(this,gpxdaten); - gpxdaten = wp_dist.call(this,gpxdaten); + if(this.parameters.wpcluster) gpxdaten = wp_dist.call(this,gpxdaten); + this.gpxdaten = gpxdaten; setMapHead.call(this); if (this.parameters.legende) { JB.onresize(odiv, function(w,h) { @@ -280,6 +334,16 @@ JB.makeMap = function (ID) { this.GetMap = function() { return Map; } // GetMap + + this.removeElements = function() { + var i; + for(i=0;i<markers.length;i++) JB.RemoveElement(markers[i]); + markers = []; + for(i=0;i<trackpolylines.length;i++) JB.RemoveElement(trackpolylines[i]); + trackpolylines = []; + for(i=0;i<routepolylines.length;i++) JB.RemoveElement(routepolylines[i]); + routepolylines = []; + } this.Clear = function() { var p,pr,i; @@ -292,6 +356,7 @@ JB.makeMap = function (ID) { } profil = null; gpxdaten = null; + this.gpxdaten = gpxdaten; for(i=0;i<markers.length;i++) JB.RemoveElement(markers[i]); markers = []; for(i=0;i<trackpolylines.length;i++) JB.RemoveElement(trackpolylines[i]); @@ -551,6 +616,7 @@ JB.makeMap = function (ID) { texte = []; if(gpxdaten.tracks.anzahl==1) { gpxelement = strings.trk; + texte[0] = gpxdaten.tracks.track[0].name; if(this.parameters.legende_rr) { texte[0] = gpxdaten.tracks.track[0].name; infotext = " ("+Number(gpxdaten.tracks.track[0].laenge.toPrecision(10).toString(10))+units.way; @@ -560,7 +626,7 @@ JB.makeMap = function (ID) { infotext += ") "; } else - infotext = gpxdaten.tracks.track[0].name+" ("+Number(gpxdaten.tracks.track[0].laenge.toPrecision(10).toString(10))+units.way+") "; + infotext = " ("+Number(gpxdaten.tracks.track[0].laenge.toPrecision(10).toString(10))+units.way+") "; texte[0] += infotext; if(this.parameters.legende_info) gpxelement += infotext; } @@ -587,9 +653,9 @@ JB.makeMap = function (ID) { } else { texte[0] = strings.all; + infotext = " ("+Number(gpxdaten.tracks.laenge.toPrecision(10).toString(10))+units.way+") "; texte[0] += infotext; if(this.parameters.legende_info) gpxelement += infotext; - infotext = " ("+Number(gpxdaten.tracks.laenge.toPrecision(10).toString(10))+units.way+") "; for(var i=0;i<gpxdaten.tracks.anzahl;i++) texte[i+1] = gpxdaten.tracks.track[i].name+" ("+Number(gpxdaten.tracks.track[i].laenge.toPrecision(10).toString(10))+units.way+")"; } } @@ -631,39 +697,27 @@ JB.makeMap = function (ID) { new JB.activateCheckBoxGroups(id,MapHead); } // setMapHead - var profilcanvas="X"; var zoomchangeevent1=null,zoomchangeevent2=null; function show() { + fireEvent(this,this.events.Show); var dieses = this; JB.Debug_Info(id,"show",false); if(dieses.parameters.profilflag) { JB.Wait(ID,["gra","plot"], function() { showProfiles.call(dieses); - if(profilcanvas=="X") { - profilcanvas = document.getElementById(ID+"_profiles"); - if(profilcanvas) - JB.onresize(profilcanvas,function(w,h) { - for(var p in profil) { - var pr = profil[p]; - if(pr.ele) { - pr.diag.clear(); - pr.diag = null; - } - } - showProfiles.call(dieses); - }); - } }); } JB.Wait(id,["maplib","maputils"],function() { if(!Map) { if(typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Map_v",gpxdaten:gpxdaten,profil:profil,Map:Map}); - Map = new JB.Map(dieses); + fireEvent(dieses,dieses.events.Map_v); + dieses.Map = Map = new JB.Map(dieses); JB.Debug_Info(ID,"Karte erstellt",false); if(typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Map_n",gpxdaten:gpxdaten,profil:profil,Map:Map}); + fireEvent(dieses,dieses.events.Map_n); } if(newfile) { if (maptype!="") Map.change(maptype); @@ -709,24 +763,37 @@ JB.makeMap = function (ID) { if (!(chkwpt && chkwpt.status[0])) return; if(gpxdaten.wegpunkte.anzahl>0 && typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Wegpunkte_v",gpxdaten:gpxdaten,profil:profil,Map:Map}); + fireEvent(this,this.events.Wegpunkte_v); if(this.parameters.wpcluster && gpxdaten.wegpunkte.anzahl>1) { var clusters = wpcluster(); mrk = showClusters.call(this,clusters); markers = markers.concat(mrk); } for(var i=0;i<gpxdaten.wegpunkte.anzahl;i++) { - if(gpxdaten.wegpunkte.wegpunkt[i].cluster == -1 && chkwpt.status[gpxdaten.wegpunkte.anzahl==1?0:i+1]) { + if( (typeof(gpxdaten.wegpunkte.wegpunkt[i].cluster) == "undefined" || gpxdaten.wegpunkte.wegpunkt[i].cluster == -1) + && chkwpt.status[gpxdaten.wegpunkte.anzahl==1?0:i+1] ) { mrk = showWpt.call(this,gpxdaten.wegpunkte.wegpunkt[i]); markers = markers.concat(mrk); } } if(markers.length>0 && typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Wegpunkte_n",gpxdaten:gpxdaten,profil:profil,Map:Map,markers:markers}); + fireEvent(this,this.events.Wegpunkte_n,{markers:markers}); } // showWpts function showWpt(waypoint) { + var icon; var sym = waypoint.sym.toLowerCase() ; - var icon = JB.icons[sym]?JB.icons[sym]:null; + if(JB.icons[sym]) + icon = JB.icons[sym]; + else if(sym.length < 3) + icon = waypoint.sym; + else if(this.parameters.defaulticon !== "" && this.parameters.defaulticon.length >= 3) + icon = JB.icons[this.parameters.defaulticon.toLowerCase()] ? JB.icons[this.parameters.defaulticon.toLowerCase()] : null; + else if(this.parameters.defaulticon !== "" && this.parameters.defaulticon.length < 3) + icon = this.parameters.defaulticon; + else + icon = null; JB.Debug_Info(id,"Symbol: "+sym,false); var imgsrc=""; if (JB.checkImageName(waypoint.name)) imgsrc = waypoint.name; @@ -788,11 +855,13 @@ JB.makeMap = function (ID) { for(var i=0;i<wps.length;i++) wps[i].cluster = -1; for(var ii=0;ii<wps.length;ii++) { var i= wppointer[ii][0]; + if(!chkwpt.status[i+1]) continue; var wp = wps[i]; if(wp.cluster==-1 && wp.dist[1][1]<mindist) { clusternr = clusters.length; var cluster = {lat:0, lon:0, members: []}; - for(var j=0;j<wp.dist.length;j++) { + for(var j=0;j<wp.dist.length;j++) { + if(!chkwpt.status[wp.dist[j][0]+1]) continue; if(wp.dist[j][1]<mindist) { if(wps[wp.dist[j][0]].cluster==-1) { cluster.members.push(wp.dist[j][0]); @@ -805,10 +874,12 @@ JB.makeMap = function (ID) { } } for(var i=0;i<wps.length;i++) { + if(!chkwpt.status[i+1]) continue; var wp = wps[i]; if(wp.cluster==-1) { for(var j=0;j<wp.dist.length;j++) { if(wp.dist[j][1]<mindist) { + if(!chkwpt.status[wp.dist[j][0]+1]) continue; if(wps[wp.dist[j][0]].cluster>-1) { wps[i].cluster = wps[wp.dist[j][0]].cluster; clusters[wps[i].cluster].members.push(i); @@ -819,14 +890,14 @@ JB.makeMap = function (ID) { } } for(var i=0;i<clusters.length;i++) { - var lat=0,lon=0; + var av_lat=0,av_lon=0; for(var j=0;j<clusters[i].members.length;j++) { var wp = wps[clusters[i].members[j]]; - lat += wp.lat; - lon += wp.lon; + av_lat += wp.lat; + av_lon += wp.lon; } - clusters[i].lat = lat/clusters[i].members.length; - clusters[i].lon = lon/clusters[i].members.length; + clusters[i].lat = av_lat/clusters[i].members.length; + clusters[i].lon = av_lon/clusters[i].members.length; } JB.Debug_Info(id,clusters.length+" Wegpunktcluster angelegt",false); return clusters; @@ -839,6 +910,7 @@ JB.makeMap = function (ID) { if (!(chkrt && chkrt.status[0])) return; if(gpxdaten.routen.anzahl>0 && typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Routen_v",gpxdaten:gpxdaten,profil:profil,Map:Map}); + fireEvent(this,this.events.Routen_v); for(var i=0;i<gpxdaten.routen.anzahl;i++) if(chkrt.status[gpxdaten.routen.anzahl==1?0:i+1]) { var routei = gpxdaten.routen.route[i]; var info = ""; @@ -868,6 +940,7 @@ JB.makeMap = function (ID) { } if(routepolylines.length>0 && typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Routen_n",gpxdaten:gpxdaten,profil:profil,Map:Map,polylines:routepolylines}); + if(routepolylines.length) fireEvent(this,this.events.Routen_n,{polylines:routepolylines}); } // showRoutes function showTracks() { @@ -875,13 +948,12 @@ JB.makeMap = function (ID) { JB.Debug_Info(id,"showTracks",false); for(var i=0;i<trackpolylines.length;i++) JB.RemoveElement(trackpolylines[i]); trackpolylines = []; -// if(colmod.length) { - if(FB) FB.del(); - JB.offresize(fb_onresize); -// } + if(FB) FB.del(); + JB.offresize(fb_onresize); if (!(chktrk && chktrk.status[0])) return; if(gpxdaten.tracks.anzahl>0 && typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Tracks_v",gpxdaten:gpxdaten,profil:profil,Map:Map}); + fireEvent(this,this.events.Tracks_v); if( (colmod=="h" && gpxdaten.tracks.hflag) || (colmod=="v" && gpxdaten.tracks.tflag) || (colmod=="hr" && gpxdaten.tracks.hrflag) || (colmod=="cad" && gpxdaten.tracks.cadflag) || (colmod=="atemp" && gpxdaten.tracks.atempflag) ) { colmodflag = true; @@ -1014,6 +1086,7 @@ JB.makeMap = function (ID) { } if(trackpolylines.length>0 && typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Tracks_n",gpxdaten:gpxdaten,profil:profil,Map:Map,polylines:trackpolylines}); + if(trackpolylines.length>0) fireEvent(this,this.events.Tracks_n,{polylines:trackpolylines}); } // showTracks function streckenmarker(delta,daten) { @@ -1116,6 +1189,7 @@ JB.makeMap = function (ID) { if(profil) profil.setflags(gpxdaten.tracks,-1); if(typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Profile_v",gpxdaten:gpxdaten,profil:profil,Map:Map}); + fireEvent(this,this.events.Profile_v,{profil:profil}); for(var p in profil) { if(profil[p].ele && !profil[p].diag) { profil[p].diag = new JB.plot(profil[p].id,profil[p].x,profil[p].y); @@ -1209,6 +1283,7 @@ JB.makeMap = function (ID) { } if(typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({id:id,type:"Profile_n",gpxdaten:gpxdaten,profil:profil,Map:Map}); + fireEvent(this,this.events.Profile_n,{profil:profil}); } // showProfiles function markerstart() { @@ -1546,19 +1621,6 @@ JB.activateCheckBoxGroups = function(MapId,MapHead) { JB.GPX2GM.globalMapParameter[dieses.MapId].closeActive = closeActive; } // activateCheckBoxGroups -/*JB.sec2string_alt = function(sec,off) { - if(this.parameters.tkorr && this.parameters.mapapi=="gm") { - if(JB.GPX2GM.parameters.doclang=="en") return (new Date(sec*1000 + off*1000)).toLocaleString('en-EN',{timeZone:'UTC'}); - else if(JB.GPX2GM.parameters.doclang=="fr") return (new Date(sec*1000 + off*1000)).toLocaleString('fr-FR',{timeZone:'UTC'}); - else return (new Date(sec*1000 + off*1000)).toLocaleString('de-DE',{timeZone:'UTC'}); - } - else { - if(JB.GPX2GM.parameters.doclang=="en") return (new Date(sec*1000 + off*1000)).toLocaleString('en-EN'); - else if(JB.GPX2GM.parameters.doclang=="fr") return (new Date(sec*1000 + off*1000)).toLocaleString('fr-FR'); - else return (new Date(sec*1000 + off*1000)).toLocaleString('de-DE'); - } -}*/ // JB.sec2string - JB.sec2string = function(sec) { if(this.parameters.tkorr) { if(JB.GPX2GM.parameters.doclang=="en") return (new Date(sec*1000)).toLocaleString('en-EN'); @@ -1767,9 +1829,11 @@ JB.lpgpx = function(fns,id,callback) { JB.Debug_Info(id,"xmlParse -",false); if(str && typeof DOMParser != 'undefined') { str = str.replace(/>\s+</g,"><"); - str = str.replace(/gpxtpx:|gpxx:|ns3:/g,""); + str = str.replace(/gpxtpx:|gpxx:|ns3:|gpxdata:|wptx1:|ctx:/g,""); str = str.replace(/cadence>/g,"cad>"); str = str.replace(/heartrate>/g,"hr>"); + str = str.replace(/<\/temp>/g,"</atemp>"); + str = str.replace(/<temp>/g,"<atemp>"); return (new DOMParser()).parseFromString(str, 'text/xml'); } JB.Debug_Info(id,"xml konnte nicht geparsed werde!",false); @@ -1808,7 +1872,7 @@ JB.lpgpx = function(fns,id,callback) { var tag, val=defval; if(child) tag = ele.querySelector(':scope > '+tagname); else tag = ele.querySelector(tagname); - if( tag && tag.firstChild ) { val = tag.firstChild.data; } + if( tag && tag.textContent ) val = tag.textContent; return val; } // getTag_qs @@ -1827,8 +1891,8 @@ JB.lpgpx = function(fns,id,callback) { var tag = ele.getElementsByTagName(tagname), val=defval, tag0; if( tag && tag.length ) { tag0 = tag[0]; - if( tag0.firstChild && (child?(tag0.parentNode==ele):true) ) - val = tag0.firstChild.data; + if( tag0.textContent && (child?(tag0.parentNode==ele):true) ) + val = tag0.textContent; } return val; } // getTag_ge @@ -1843,7 +1907,7 @@ JB.lpgpx = function(fns,id,callback) { } } return val; - } // getLink_ge + } // getLink_ge var getTag,getLink; (function(){ @@ -2449,7 +2513,30 @@ JB.LoadCSS = function(url) { } } // LoadCSS -JB.onresize = function(ele,callback,run) { +JB.onresize_new = function(ele,callback,run) { + let to,last=0,delta=200,now; + const resfkt = function() { + let w = ele.offsetWidth; + let h = ele.offsetHeight; + callback(w,h); + last = Date.now(); + } + const resizeObserver = new ResizeObserver(function(entries, observer) { + now = Date.now(); + clearTimeout(to); + to = window.setTimeout(resfkt,delta); + if( (now-last) > delta) resfkt(); + }); + if(run) to = window.setTimeout(resfkt); + resizeObserver.observe(ele); + return resizeObserver; +} // onresize_new + +JB.offresize_new = function(resizeObserver) { + if(resizeObserver) resizeObserver.disconnect(); +} // offresize_new + +JB.onresize_old = function(ele,callback,run) { var w = ele.offsetWidth; var h = ele.offsetHeight; if(run) window.setTimeout(function() {callback(w,h)}); @@ -2462,11 +2549,20 @@ JB.onresize = function(ele,callback,run) { callback(w,h); } },200); -} // onresize +} // onresize_old -JB.offresize = function(id) { +JB.offresize_old = function(id) { window.clearInterval(id); -} // offresize +} // offresize_old + +if(typeof(ResizeObserver) != "undefined") { + JB.onresize = JB.onresize_new; + JB.offresize = JB.offresize_new; +} +else { + JB.onresize = JB.onresize_old; + JB.offresize = JB.offresize_old; +} JB.farbtafel = function(n) { var gauss = function(a,hwb,pos,x) { @@ -2700,7 +2796,7 @@ JB.GPX2GM.GM_usage_ok = function() { if(doc_lang in JB.GPX2GM.strings) JB.GPX2GM.parameters.doclang = doc_lang; else JB.GPX2GM.parameters.doclang = doc_lang = "de"; if(localStorage) { - var ls = localStorage.getItem("GM_OK"); + var ls = localStorage.getItem("MapApi_OK"); if(ls && ls.length) { return true; } @@ -2710,7 +2806,7 @@ JB.GPX2GM.GM_usage_ok = function() { var antwort = (JB.GPX2GM.parameters.mapapi=="gm")? JB.GPX2GM.strings[doc_lang].antwort_datenschutz_gm : JB.GPX2GM.strings[doc_lang].antwort_datenschutz_osm ; if(confirm(frage)) { - localStorage.setItem("GM_OK","Zustimmung, Google Maps zu nutzen, wurde erteilt."); + localStorage.setItem("MapApi_OK","Zustimmung, Map API zu nutzen, wurde erteilt."); return true; } else { diff --git a/static/files/gpx/gpxviewer/GPX2GM_Defs.js b/static/files/gpx/gpxviewer/GPX2GM_Defs.js @@ -2,7 +2,7 @@ // Jürgen Berkemeier // www.j-berkemeier.de // Platz für weitere Definitionen -// 21. 4. 2020 +// 3. 11. 2021 "use strict"; @@ -155,6 +155,7 @@ JB.GPX2GM.setparameters = function() { JB.GPX2GM.parameters.trackmarker = (typeof(Trackmarker)!="undefined") ? Trackmarker : ""; JB.GPX2GM.parameters.routemarker = (typeof(Routemarker)!="undefined") ? Routemarker : ""; JB.GPX2GM.parameters.shwpname = (typeof(Shwpname)!="undefined") ? Shwpname : true; + JB.GPX2GM.parameters.shwptooltip = (typeof(Shwptooltip)!="undefined") ? Shwptooltip : false; JB.GPX2GM.parameters.shwpcmt = (typeof(Shwpcmt)!="undefined") ? Shwpcmt : true; JB.GPX2GM.parameters.shwpdesc = (typeof(Shwpdesc)!="undefined") ? Shwpdesc : false; JB.GPX2GM.parameters.shwptime = (typeof(Shwptime)!="undefined") ? Shwptime : false; @@ -162,6 +163,7 @@ JB.GPX2GM.setparameters = function() { JB.GPX2GM.parameters.wpcluster = (typeof(Wpcluster)!="undefined") ? Wpcluster : false; JB.GPX2GM.parameters.bildpfad = (typeof(Bildpfad)!="undefined") ? Bildpfad : ""; JB.GPX2GM.parameters.gpxpfad = (typeof(Gpxpfad)!="undefined") ? Gpxpfad : ""; + JB.GPX2GM.parameters.defaulticon = (typeof(Defaulticon)!="undefined") ? Defaulticon : ""; JB.GPX2GM.parameters.bildwegpunkticon = (typeof(Bildwegpunkticon)!="undefined") ? Bildwegpunkticon : "Bild"; // Bei "" Icon aus sym-Tag JB.GPX2GM.parameters.shtrcmt = (typeof(Shtrcmt)!="undefined") ? Shtrcmt : false; JB.GPX2GM.parameters.shtrdesc = (typeof(Shtrdesc)!="undefined") ? Shtrdesc : false; @@ -477,52 +479,59 @@ JB.GPX2GM.strings.es = { all: "Todo", showlist: "Mostrar lista, moverse en la lista con las teclas de flecha" } - -/* // Prototyp für Callbackfunktion -JB.GPX2GM.callback = function(pars) { - JB.Debug_Info("callback",pars.id+" "+pars.type,false); - switch(pars.type) { - case "Map_div_v" : - break; - case "Map_div_n" : - break; - case "Map_v": - break; - case "Map_n": - break; - case "Wegpunkte_v": - break; - case "Wegpunkte_n": - break; - case "Routen_v": - break; - case "Routen_n": - break; - case "Tracks_v": - alert(pars.gpxdaten.tracks.laenge); - for(var i=0;i<pars.gpxdaten.tracks.track.length;i++) - alert(pars.gpxdaten.tracks.track[i].laenge); - break; - case "Tracks_n": - break; - case "Profile_v": - break; - case "Profile_n": - break; - case "click_Marker_Text": - break; - case "click_Marker_Bild": - break; - case "created_Marker_Bild": - break; - case "click_Route": - break; - case "click_Track": - console.info(pars); - break; - } - return true; -} // JB.GPX2GM.callback */ +// Italienische Übersetzung von Paolo Ferrari +JB.GPX2GM.strings.it = { + lenght: "Lunghezza", + way: "Itinerario", + duration: "Durata", + tstart: "Orario inizio", + time: "Tempo", + time_unit: "Ore", + altdiff: "Dislivello", + alt: "Altitudine", //"Altitude", + //alt_unit: "m", + in: " en ", + grade: "Pendenza", + grade_unit: "%", + avspeed: "Velocità media", + speed2: "Velocità istantanea", + speed: "V", + pace: "Frequenza", // ritmo + hr2: "Frequenza cardiaca", + hr: "HR", + hr_unit: "1/min", + cad: "Cadenza", + cad_unit: "rpm", + temp: "Temperatura", + wpt: "Waypoint", + wpts: "Waypoints", + pwpt: "Foto waypoint", + trk: "Traccia", + trks: "Tracce", + rte: "Itinerario", + rtes: "Itinerari", + inmo: "In movimento", + // wait: "Prego attendere.<br />Caricamento dati.", + wait: "", // Wartebild nehmen + clkz: "Premere per ingrandire", + zb: "Zoom precedente", + frage_datenschutz_gm: "Questa pagina utilizza mappe e un'API di Google e possibilmente anche mappe OSM. Questo trasferisce i dati dei visitatori al rispettivo fornitore di servizi. Maggiori informazioni su questo nell'impressum. Siete d'accordo?", + antwort_datenschutz_gm: "L'autorizzazione a utilizzare l'API di Google Maps è stata negata. Puoi cambiare idea quando ricarichi la pagina. ", + frage_datenschutz_osm: "Questa pagina utilizza le mappe OSM. Questo trasferisce i dati dei visitatori al rispettivo fornitore di servizi. Maggiori informazioni su questo nell'impressum. Siete d'accordo?", + antwort_datenschutz_osm: "Il permesso di utilizzare le mappe OSM è stato negato. Puoi cambiare idea quando ricarichi la pagina. ", + fullScreen: "Schermo intero", + normalSize: "Dimensione normale", + showCurrentLocation: "Vedi posiione attuale", + hideCurrentLocation: "Nascondi posizione attuale", + showTrafficLayer: "Vedi traffico", + hideTrafficLayer: "Nascondi il traffico", + noMap: "Nessuna mappa", + file: "File", + showhide: "Mostra/nascondi", + zoom: "Ingrandisci all'elemento", + all: "Tutti", + showlist: "mostra l'elenco, utilizza i tasti freccia per spostarti nell'elenco " +} /* // Autoscale in den Profilen abschalten JB.Scaling = { // nur paarweise verwenden diff --git a/static/files/gpx/gpxviewer/gra_svg.js b/static/files/gpx/gpxviewer/gra_svg.js @@ -0,0 +1,174 @@ +// gra_svg +// Version vom 22. 5. 2021 +// Jürgen Berkemeier +// www.j-berkemeier.de + +"use strict"; + +console.info("gra_svg vom 22. 5. 2021"); + +var JB = window.JB || {}; + +// Das Grafikobjekt +JB.grafik = function(grafikelement) { + this.method = "svg"; + // SVG in Größe des "grafikelement" anlegen + if(typeof grafikelement == "string") grafikelement = document.getElementById(grafikelement); + this.w = grafikelement.offsetWidth; + this.h = grafikelement.offsetHeight; + var linewidth = 1; + var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute("width","100%"); + svg.setAttribute("height","100%"); + svg.setAttribute("viewBox","0 0 "+this.w+" "+this.h); + svg.setAttribute("preserveAspectRatio","none"); + svg.style.position = "absolute"; + grafikelement.appendChild(svg); + + // Linienstärke setzen + this.setwidth = function(width) { + linewidth = width; + } // setwidth + + // Punkt bei x,y, in Farbe c + this.punkt = function(x,y,c) { + var kreis = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); + kreis.setAttribute("cx",x); + kreis.setAttribute("cy",y); + kreis.setAttribute("r",linewidth); + kreis.setAttribute('fill',c); + //kreis.setAttribute('stroke',c); + svg.appendChild(kreis); +// this.line(x,y,x+1,y,c); + } // punkt + + // Linie von (xs,ys) nach (xe,ye) in Farbe color zeichnen + this.line = function(xs,ys,xe,ye,color) { + var linie = document.createElementNS('http://www.w3.org/2000/svg', 'line'); + linie.setAttribute("x1",xs); + linie.setAttribute("y1",this.h-ys); + linie.setAttribute("x2",xe); + linie.setAttribute("y2",this.h-ye); + linie.setAttribute('stroke', color); + linie.setAttribute('stroke-width', linewidth); + linie.setAttribute("vector-effect","non-scaling-stroke"); + svg.appendChild(linie); + } // line + + // Polylinie mit den Werten in points in Farbe color zeichnen + this.polyline = function(points,color) { + var polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline'); + polyline.setAttribute('stroke', color); + polyline.setAttribute('stroke-width', linewidth); + polyline.setAttribute('fill', "none"); + polyline.setAttribute("vector-effect","non-scaling-stroke"); + var pointstring = ""; + for(var i=0;i<points.length;i++) pointstring += points[i].x+","+(this.h-points[i].y)+" "; + polyline.setAttribute('points', pointstring); + svg.appendChild(polyline); + } // polyline + + // Polylinie mit den Werten in points zeichnen + // Die von der Polylinie umschlossene Fläche wird in Farbe color mit Alphawert alpha eingefärbt + this.polyfill = function(points,color,alpha) { + var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); + polygon.setAttribute('stroke', "none"); + polygon.setAttribute('fill', color); + polygon.setAttribute('fill-opacity', alpha); + var pointstring = ""; + for(var i=0;i<points.length;i++) pointstring += points[i].x+","+(this.h-points[i].y)+" "; + polygon.setAttribute('points', pointstring); + svg.appendChild(polygon); + } // polyfill + + // Text an (x,y) ausgeben + // size: Schriftgröße + // text: Text + // align: Bezug für (x,y), zwei Buchstaben, z.B. lu für links unten, s. case + // diretion: Textrichtung: v für vertikal, sonst horizontal + this.text = function(x,y,size,color,text,align,direction) { + var stext = document.createElementNS('http://www.w3.org/2000/svg', 'text'); + stext.style.fontSize = size; + stext.style.color = color; + stext.style.fill = color; + stext.textContent = text; + + var align_h = "m"; + var align_v = "m"; + if(align && align.length) { + align_h = align.substr(0,1); + if(align.length>1) align_v = align.substr(1,1); + } + switch(align_h) { + case "l": stext.setAttribute("text-anchor","start"); break; + case "m": stext.setAttribute("text-anchor","middle"); break; + case "r": stext.setAttribute("text-anchor","end"); break; + default: stext.setAttribute("text-anchor","middle"); break; + } + switch(align_v) { + case "o": stext.setAttribute("dy","1.1em"); break; + case "m": stext.setAttribute("dy","0.3em"); break; + case "u": stext.setAttribute("dy","-0.1em"); break; + default: stext.setAttribute("dy","-0.3em"); break; + } + + stext.setAttribute("x",x); + stext.setAttribute("y",this.h-y); + if(direction && direction=="v") stext.setAttribute("transform","rotate(270 "+x+" "+(this.h-y)+")"); + + svg.appendChild(stext); + + // Werte für unscale + stext.setAttribute("class","noscale"); + stext.xorg = x; + stext.yorg = this.h-y; + if(direction && direction=="v") stext.phiorg = 270; + else stext.phiorg = 0; + } // text + + // Canvas löschen + this.del = function() { + grafikelement.innerHTML = ""; + grafikelement.appendChild(svg); + } // del + + // Textbreite ermiteln + this.getTextWidth = function(text,size) { + var stext = document.createElementNS('http://www.w3.org/2000/svg', 'text'); + stext.style.fontSize = size; + stext.textContent = text; + svg.appendChild(stext); + var textLength = stext.getComputedTextLength(); + svg.removeChild(stext); + return textLength; + } // getTextWidth + + // Einige automatische Skalierungen rückgängig machen + var unscale = function() { + var etext = document.querySelectorAll(".noscale"),esvg,m; + for(var i=0;i<etext.length;i++) { + esvg = etext[i].ownerSVGElement; + m = esvg.getScreenCTM(); + etext[i].setAttribute("transform","scale("+1/m.a+" "+1/m.d+")" + "rotate("+etext[i].phiorg+" "+etext[i].xorg*m.a+" "+etext[i].yorg*m.d+")"); + etext[i].setAttribute("x",etext[i].xorg*m.a); + etext[i].setAttribute("y",etext[i].yorg*m.d); + } + } + if(typeof(ResizeObserver) != "undefined") { + let to,last=0,delta=100,now; + const resizeObserver = new ResizeObserver(function(entries, observer) { + now = Date.now(); + clearTimeout(to); + to = setTimeout(function() { + unscale(); + last = Date.now(); + },delta); + if( (now-last) > delta) { + unscale(); + last = now; + } + }); + resizeObserver.observe(grafikelement); + } + +} // grafik diff --git a/static/files/gpx/gpxviewer/osmutils.js b/static/files/gpx/gpxviewer/osmutils.js @@ -2,7 +2,7 @@ // Lizenz CC BY-NC-SA 4.0 // Jürgen Berkemeier // www.j-berkemeier.de -// Version 1.8 vom 2. 7. 2020 +// Version 1.13 vom 25. 11. 2021 "use strict"; @@ -12,7 +12,7 @@ window.JB = window.JB || {}; JB.Debug_Info("",verstring,false); if(!JB.debuginfo && typeof(console) != "undefined" && typeof(console.info) == "function" ) console.info(verstring); -} )("osmutils.js 1.7 vom 2. 7. 2020"); +} )("osmutils 1.12 vom 5. 11. 2021"); JB.Map = function(makemap) { var dieses = this; @@ -25,73 +25,100 @@ JB.Map = function(makemap) { // Map anlegen - this.maptypes = {}; - var baseLayers = {}, overlayLayers = {}, nr=0; + const mycp = '<a href="https://www.j-berkemeier.de/GPXViewer" title="GPX Viewer '+JB.GPX2GM.ver+'">GPXViewer</a> | '; - var satellit = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { + this.baseLayers = {}; + + this.baseLayers["Satellit"] = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 21, - attribution: 'Map data &copy; <a href="https://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' + attribution: mycp+'Map data &copy; <a href="https://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }); - this.maptypes.Satellit = [nr++, satellit]; - baseLayers["Satellit"] = satellit; - var osm = L.tileLayer('https://osmproxy.ortlepp.eu/{z}/{x}/{y}.png', { + this.baseLayers["OSM"] = L.tileLayer('https://osmproxy.ortlepp.eu/{z}/{x}/{y}.png', { maxZoom: 19, - attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' + attribution: mycp+'Map data &copy; <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' }); - this.maptypes.OSM = [nr++, osm]; - baseLayers["OSM"] = osm; - var osmde = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { + this.baseLayers["OSMDE"] = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { maxZoom: 19, - attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' + attribution: mycp+'Map data &copy; <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' }); - this.maptypes.OSMDE = [nr++, osmde]; - baseLayers["OSMDE"] = osmde; - var opentopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { + this.baseLayers["Open Topo"] = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { maxZoom: 17, - attribution: 'Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © <a href="https://opentopomap.org/about">OpenTopoMap</a> (CC-BY-SA)' + attribution: mycp+'Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © <a href="https://opentopomap.org/about">OpenTopoMap</a> (CC-BY-SA)' + }); + + this.baseLayers["TopPlusOpen"] = L.tileLayer('https://sgx.geodatenzentrum.de/wmts_topplus_open/tile/1.0.0/web/default/WEBMERCATOR/{z}/{y}/{x}.png', { + maxZoom: 18, + attribution: mycp+'Kartendaten: © <a href="https://www.bkg.bund.de/SharedDocs/Produktinformationen/BKG/DE/P-2017/170922-TopPlus-Web-Open.html" target==_blank"">Bundesamt für Kartographie und Geodäsie</a>' }); - this.maptypes.OPENTOPO = [nr++, opentopo]; - baseLayers["Open Topo"] = opentopo; + + // https://tileserver.4umaps.com/${z}/${x}/${y}.png + // zoomlevel 16 + // https://www.4umaps.com/ if(JB.GPX2GM.OSM_Cycle_Api_Key && JB.GPX2GM.OSM_Cycle_Api_Key.length>0) { - var osmcycle = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey='+JB.GPX2GM.OSM_Cycle_Api_Key, { + this.baseLayers["Cycle"] = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey='+JB.GPX2GM.OSM_Cycle_Api_Key, { maxZoom: 22, - attribution: 'Map data &copy; <a href="https://www.thunderforest.com/" target="_blank">OpenCycleMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' + attribution: mycp+'Map data &copy; <a href="https://www.thunderforest.com/" target="_blank">OpenCycleMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' }); - this.maptypes.OSM_Cycle = [nr++, osmcycle]; - baseLayers["Cycle"] = osmcycle; } if(JB.GPX2GM.OSM_Landscape_Api_Key && JB.GPX2GM.OSM_Landscape_Api_Key.length>0) { - var osmlandscape = L.tileLayer('https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey='+JB.GPX2GM.OSM_Landscape_Api_Key, { + this.baseLayers["Landscape"] = L.tileLayer('https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey='+JB.GPX2GM.OSM_Landscape_Api_Key, { maxZoom: 22, - attribution: 'Map data &copy; <a href="https://www.thunderforest.com/" target="_blank">OpenLandscapeMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' + attribution: mycp+'Map data &copy; <a href="https://www.thunderforest.com/" target="_blank">OpenLandscapeMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' }); - this.maptypes.OSM_Landscape = [nr++, osmlandscape]; - baseLayers["Landscape"] = osmlandscape; } if(JB.GPX2GM.OSM_Outdoors_Api_Key && JB.GPX2GM.OSM_Outdoors_Api_Key.length>0) { - var osmoutdoors = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey='+JB.GPX2GM.OSM_Outdoors_Api_Key, { + this.baseLayers["Outdoors"] = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey='+JB.GPX2GM.OSM_Outdoors_Api_Key, { maxZoom: 22, - attribution: 'Map data &copy; <a href="https://www.thunderforest.com/" target="_blank">OpenOutdoorsMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' + attribution: mycp+'Map data &copy; <a href="https://www.thunderforest.com/" target="_blank">OpenOutdoorsMap</a> and contributors <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>' }); - this.maptypes.OSM_Outdoors = [nr++, osmoutdoors]; - baseLayers["Outdoors"] = osmoutdoors; } - var grau = L.tileLayer(JB.GPX2GM.Path+"Icons/Grau256x256.png", { maxZoom: 22 }); - this.maptypes.Keine_Karte = [nr++, grau]; - baseLayers[JB.GPX2GM.strings[JB.GPX2GM.parameters.doclang].noMap] = grau; + this.baseLayers[JB.GPX2GM.strings[JB.GPX2GM.parameters.doclang].noMap]= L.tileLayer(JB.GPX2GM.Path+"Icons/Grau256x256.png", { + maxZoom: 22, + attribution: mycp + }); + + this.overlayLayers = {}; - var opensea = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', { + this.overlayLayers["Open Sea"] = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', { attribution: 'Kartendaten: © <a href="http://www.openseamap.org">OpenSeaMap</a> contributors' }); - this.maptypes.Open_Sea = [nr++, opensea]; - overlayLayers["Open Sea"] = opensea; + + this.overlayLayers["Hiking"] = L.tileLayer('https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png', { + attribution: '&copy; <a href="http://waymarkedtrails.org">Sarah Hoffmann</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)', + }); + + this.overlayLayers["Cycling"] = L.tileLayer('https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png', { + attribution: '&copy; <a href="http://waymarkedtrails.org">Sarah Hoffmann</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)', + }); + + this.layerNameTranslate = { + satellit: "Satellit", + satellite: "Satellit", + osm: "OSM", + osmde: "OSMDE", + opentopo: "Open Topo", + topplusopen: "TopPlusOpen", + cycle: "Cycle", + landscape: "Landscape", + outdoors: "Outdoors", + keinekarte: "Keine Karte", + pasdecarte: "Pas de carte", + nomap: "No Map", + ning\u00FAnmapa: "Ning\u00FAn Mapa", + nessunamappa: "Nessuna mappa", + opensea: "Open Sea", + hiking: "Hiking", + cycling: "Cycling", + } + + // ['hiking', 'cycling', 'mtb', 'skating', 'slopes', 'riding']; var genugplatz = JB.platzgenug(makemap.mapdiv); @@ -111,9 +138,11 @@ JB.Map = function(makemap) { else L.control.scale({metric:false}).addTo(this.map); // Mit Maßstab ml var ctrl_layer = null; - JB.onresize(mapcanvas,function(w,h){ - if(w>200 && h>190 && makemap.parameters.showmaptypecontroll) { - if(!ctrl_layer) ctrl_layer = L.control.layers(baseLayers, overlayLayers).addTo(dieses.map); + var showmaptypecontroll_save = makemap.parameters.showmaptypecontroll; + JB.onresize(mapcanvas,function(w,h) { + makemap.parameters.showmaptypecontroll = (w>200 && h>190 && showmaptypecontroll_save); + if(makemap.parameters.showmaptypecontroll) { + if(!ctrl_layer) ctrl_layer = L.control.layers(dieses.baseLayers, dieses.overlayLayers).addTo(dieses.map); } else { if(ctrl_layer) { @@ -122,24 +151,6 @@ JB.Map = function(makemap) { } } },true); - - // Mein Copyright und Versionshinweis - L.Control.CP = L.Control.extend({ - onAdd: function(map) { - var jbcp = document.createElement('a'); - jbcp.href='https://www.j-berkemeier.de/GPXViewer'; - jbcp.innerHTML = "JB"; - jbcp.style.color = "white"; - jbcp.style.textDecoration = "none"; - jbcp.style.margin = " 0 0 0 8px"; - jbcp.style.fontSize = '10px'; - jbcp.style.fontFamily = 'Arial, sans-serif'; - jbcp.title = "GPX Viewer " + JB.GPX2GM.ver; - return jbcp; - }, - onRemove: function(map) {} - }); - new L.Control.CP({ position: 'bottomleft' }).addTo(this.map); // Button für Full Screen / normale Größe var fullscreen = false; @@ -153,7 +164,6 @@ JB.Map = function(makemap) { fsbim.width = 31; fsbim.height = 31; fsbim.src = JB.GPX2GM.Path+"Icons/fullscreen_p.svg"; - //fsbim.width = "200px"; fsb.title = fsbim.title = fsbim.alt = JB.GPX2GM.strings[JB.GPX2GM.parameters.doclang].fullScreen; fsbim.large = false; var ele = mapcanvas.parentNode; @@ -373,30 +383,15 @@ JB.Map.prototype.getZoom = function() { return {zoom:this.map.getZoom(),maxzoom:this.map.getMaxZoom()}; } -JB.Map.prototype.change = function(maptype) { - var mt = "OSM"; - if(maptype in this.maptypes) mt = maptype; - if(maptype=="Open_Sea") mt = "OSM"; - var nr = this.maptypes[mt][0]; - var type = this.maptypes[mt][1]; - for(var m in this.maptypes) this.map.removeLayer(this.maptypes[m][1]); - if(this.makemap.parameters.showmaptypecontroll) { - var layerControlElement = this.mapcanvas.getElementsByClassName('leaflet-control-layers')[0]; - if(layerControlElement) { - var openseacheckbox = layerControlElement.querySelectorAll('input[type=checkbox]')[0]; - if(maptype=="Open_Sea") { - if(!openseacheckbox.checked) openseacheckbox.click(); - } - else { - if(openseacheckbox.checked) openseacheckbox.click(); - } - } - else { - var dieses = this; - window.setTimeout(function(){ dieses.change(maptype);},100); - } +JB.Map.prototype.change = function(maptype) { + var mt_strip = maptype.toLowerCase().replace(/(^osm_)|(^osm )|(^osm-)/, "").replace(/( )|(_)|(-)/g, ""); + var mt_translate = (mt_strip in this.layerNameTranslate) ? this.layerNameTranslate[mt_strip] : "OSM"; + var mt = (mt_translate in this.baseLayers) ? mt_translate : "OSM"; + if(mt_translate in this.overlayLayers) { + this.overlayLayers[mt_translate].addTo(this.map); + mt = "OSMDE"; } - this.map.addLayer(type); + this.baseLayers[mt].addTo(this.map); JB.Debug_Info(this.id,"Maptype, gewählt: "+maptype+", eingestellt: "+mt,false); } // change @@ -459,7 +454,6 @@ JB.Map.prototype.infowindow = function(info,coord) { popup.setContent("<div class='JBinfofenster_gm'>"+info+"</div>"); else popup.setContent(info); - // popup.bringToFront(); // -------------------------- keine Auswirkung, aber Map-Controll liegt über popup ????? popup.openOn(this.map); return popup; } @@ -582,6 +576,8 @@ JB.Map.prototype.Polyline = function(daten,controls,route_oder_track,cols,click_ var retval = true; if(typeof(JB.GPX2GM.callback)=="function") retval = JB.GPX2GM.callback({type:cbtype,infotext:infotext,id:dieses.id,name:daten.name}); + let notCanceled = dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events[cbtype],{infotext:infotext,name:daten.name,clickEvent:o}); + retval = notCanceled && retval; if(retval) { if(daten.link) { JB.openurl(daten.link,dieses.makemap.parameters.popup_Pars); @@ -595,39 +591,63 @@ JB.Map.prototype.Polyline = function(daten,controls,route_oder_track,cols,click_ } } ); } // trackclick - + + var colors = []; + if(cols && cols.length) colors = cols; + else colors[0] = col; + if(route_oder_track == "Track") { + dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.created_Track,{line:line,daten:daten,colors:colors}); + } + else if(route_oder_track == "Route") { + dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.created_Route,{line:line,daten:daten,colors:colors}); + } + return line; } // Polyline -JB.Map.prototype.setMarker = function(coord,icon,title) { +JB.Map.prototype.setMarker = function(coord,icon,title) { var marker = []; + var tooltipoffset = [0,-15]; if(icon) { - var options = {popupAnchor: [-3, -76]}; - if (icon.icon) { - options.iconUrl = icon.icon.url; - options.iconAnchor = [icon.icon.anchor.x, icon.icon.anchor.y]; - if(icon.icon.size) options.iconSize = [icon.icon.size.width,icon.icon.size.height]; - } - if(this.makemap.parameters.shwpshadow) { - if(icon.icon) { - if (icon.shadow) { - options.shadowUrl = icon.shadow.url; - options.shadowAnchor = [icon.shadow.anchor.x, icon.shadow.anchor.y]; + if(typeof(icon) == "object") { + var options = {popupAnchor: [-3, -76]}; + if (icon.icon) { + options.iconUrl = icon.icon.url; + options.iconAnchor = [icon.icon.anchor.x, icon.icon.anchor.y]; + if(icon.icon.size) options.iconSize = [icon.icon.size.width,icon.icon.size.height]; + tooltipoffset = [0, -icon.icon.anchor.y]; + } + if(this.makemap.parameters.shwpshadow) { + if(icon.icon) { + if (icon.shadow) { + options.shadowUrl = icon.shadow.url; + options.shadowAnchor = [icon.shadow.anchor.x, icon.shadow.anchor.y]; + } } + /*else { + options.shadowUrl = JB.icons.DefShadow.shadow.url; + options.shadowAnchor = [JB.icons.DefShadow.shadow.anchor.x, JB.icons.DefShadow.shadow.anchor.y]; + }*/ } - /*else { - options.shadowUrl = JB.icons.DefShadow.shadow.url; - options.shadowAnchor = [JB.icons.DefShadow.shadow.anchor.x, JB.icons.DefShadow.shadow.anchor.y]; - }*/ + var thisIcon = L.Icon.extend({ options: options }); + var thisicon = new thisIcon(); + marker[0] = L.marker(coord, {icon: thisicon, title: title, zIndexOffset: 500} ); + } +// else if(typeof(icon) == "string" && icon.length && 0xD800 <= icon.charCodeAt(0) && icon.charCodeAt(0) <= 0xDBFF) { // Mehr-Byte-Unicode + else if(typeof(icon) == "string" && icon.length < 3) { // Kurzer String oder Emoji + var html = "<div style='position: absolute; font-size: 3em; transform: translate(-50%, -50%)'>"+icon+"</div>" + var thisicon = L.divIcon({className:"JBtext-icon", html: html, iconAnchor: [0, 0] }); + marker[0] = L.marker(coord, {icon: thisicon, title: title}); + } + else { + marker[0] = L.marker(coord, {title: title}); } - var thisIcon = L.Icon.extend({ options: options }); - var thisicon = new thisIcon(); - marker[0] = L.marker(coord, {icon: thisicon, title: title, zIndexOffset: 500} ); } else { marker[0] = L.marker(coord, {title: title}); } marker[0].addTo(this.map); + if(this.makemap.parameters.shwptooltip) if(title && title.length) marker[0].bindTooltip(title,{ permanent: true, direction: 'top', offset: tooltipoffset }); return marker; } // setMarker @@ -653,7 +673,7 @@ JB.Map.prototype.setDistanceMarker = function(coord,icon,title,label) { marker[0] = L.marker(coord, {icon: thisicon, title: title, zIndexOffset: 500 } ); marker[0].addTo(this.map); return marker; -} // setClusterMarker +} // setDistanceMarker JB.Map.prototype.setDirectionMarker = function(coord,direction,color) { var marker = []; @@ -670,10 +690,14 @@ JB.Map.prototype.Marker = function(coord,icon,title) { } // Marker JB.Map.prototype.Marker_Link = function(coord,icon,titel,url,popup_Pars) { + var dieses = this; var marker = this.setMarker(coord,icon,titel); - marker[0].on('click', function() { - JB.openurl(url,popup_Pars); + var text = coord.info; + marker[0].on('click', function(o) { + let notCanceled = dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.click_Marker_Link,{marker:marker[0],coord:coord,titel:titel,text:text,clickEvent:o}); + if(notCanceled) JB.openurl(url,popup_Pars); }); + dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.created_Marker_Link,{marker:marker[0],coord:coord,titel:titel,text:text}); return marker; } // Marker_Link @@ -681,11 +705,13 @@ JB.Map.prototype.Marker_Text = function(coord,icon,titel) { var dieses = this; var mapcenter,clk_ev; var marker = this.setMarker(coord,icon,titel); - marker[0].on("click", function() { + var text = coord.info; + marker[0].on("click", function(o) { var retval = true; - var text = coord.info; if(typeof(JB.GPX2GM.callback)=="function") retval = JB.GPX2GM.callback({type:"click_Marker_Text",coord:coord,titel:titel,text:text,id:dieses.id}); + let notCanceled = dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.click_Marker_Text,{marker:marker[0],coord:coord,titel:titel,text:text,clickEvent:o}); + retval = notCanceled && retval; if(retval) { var mapcenter = dieses.map.getCenter(); var infowindow = dieses.infowindow("<div>"+text+"</div>", coord); @@ -695,6 +721,8 @@ JB.Map.prototype.Marker_Text = function(coord,icon,titel) { } }); + dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.created_Marker_Text,{marker:marker[0],coord:coord,titel:titel,text:text}); + return marker; } // Marker_Text @@ -738,10 +766,12 @@ JB.Map.prototype.Marker_Bild = function(coord,icon,bild) { }); var text = coord.info; - marker[0].on("click", function() { + marker[0].on("click", function(o) { var retval = true; if(typeof(JB.GPX2GM.callback)=="function") retval = JB.GPX2GM.callback({type:"click_Marker_Bild",marker:marker[0],coord:coord,src:bild,text:text,id:dieses.id}); + let notCanceled = dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.click_Marker_Bild,{marker:marker[0],coord:coord,src:bild,text:text,clickEvent:o}); + retval = notCanceled && retval; if(retval) { if(img.loaded) { afterimgload(); @@ -785,6 +815,7 @@ JB.Map.prototype.Marker_Bild = function(coord,icon,bild) { if(typeof(JB.GPX2GM.callback)=="function") JB.GPX2GM.callback({type:"created_Marker_Bild",marker:marker[0],coord:coord,src:bild,text:text,id:dieses.id}); + dieses.makemap.fireEvent(dieses.makemap,dieses.makemap.events.created_Marker_Bild,{marker:marker[0],coord:coord,src:bild,text:text}); return marker; } // Marker_Bild @@ -930,7 +961,7 @@ JB.platzgenug = function(mapdiv) { var screenheight = window.innerHeight; var mapwidth = mapdiv.offsetWidth; var mapheight = mapdiv.offsetHeight; - var genugplatz = mapwidth/screenwidth < 0.80; + var genugplatz = mapwidth/screenwidth < 0.8; genugplatz |= docheight <= screenheight; genugplatz |= mapheight/screenheight < 0.8; genugplatz = genugplatz?true:false; diff --git a/static/files/gpx/gpxviewer/plot.js b/static/files/gpx/gpxviewer/plot.js @@ -1,22 +1,22 @@ // plot -// Version vom 6. 7. 2020 +// Version vom 24. 2. 2021 // Jürgen Berkemeier // www.j-berkemeier.de "use strict"; var JB = window.JB || {}; -JB.plot_version = 'Plot vom 6. 7. 2020'; +JB.plot_version = 'Plot vom 24. 2. 2021'; console.info(JB.plot_version); // Math.log10 wird noch nicht von allen Browsern unterstützt if(!Math.log10) Math.log10 = function(x) { return Math.log(x)/Math.LN10; }; // Das Plotobjekt -// feld ist das Objekt bzw. dessen Id, in dem das Diagramm erstellt werden soll +// plotarea ist das Objekt bzw. dessen Id, in dem das Diagramm erstellt werden soll // xstr und ystr geben die Bezeichner der Objektelemente mit den x- und y-Werten im Datenarray an. // Defaultwerte sind x und y. Das Datenarray sieht dan so aus: [{x:xwert,y:ywert}{...},...] -JB.plot = function(feld,xstr,ystr) { +JB.plot = function(plotarea,xstr,ystr) { // Defaultwerte this.ticwidth = 1; this.linewidth = 1; @@ -29,54 +29,95 @@ JB.plot = function(feld,xstr,ystr) { this.xscaletime = ""; this.tkorr = true; + // Plot-History + this.history = []; + this.generate_history = true; + // Plotbereich anlegen - if(typeof feld == "string") feld = document.getElementById(feld); - feld.innerHTML = ""; + if(typeof plotarea == "string") plotarea = document.getElementById(plotarea); + plotarea.innerHTML = ""; + +// var feld = JB.makediv(plotarea,"","","",plotarea.offsetWidth-1,plotarea.offsetHeight-1); + var feld = JB.makediv(plotarea,"","","","100%","100%"); + feld.style.position = "relative"; // Einige Variablen var xobj = xstr?xstr:"x"; var yobj = ystr?ystr:"y"; var xmin=0,xmax=0,ymin=0,ymax=0; + var dataxmin=0,dataxmax=0,dataymin=0,dataymax=0; var xfak=0,yfak=0; var dx,dy,fx,fy; var gr = null; var marker; + const dieses = this; + + // Bei Änderung der Größe des Plot-Canvas this.replot aufrufen + if(typeof(ResizeObserver) != "undefined") { + let to,last=0,delta=500,now; + const resizeObserver = new ResizeObserver(function(entries, observer) { + now = Date.now(); + clearTimeout(to); + to = setTimeout(function() { + dieses.replot(); + last = Date.now(); + },delta); + if( (now-last) > delta) { + dieses.replot(); + last = now; + } + }); + resizeObserver.observe(plotarea); + } // Zu den Werten in daten xmin, xmax, ymin und ymax ermitteln this.scale = function(daten) { - if(xmin==xmax) { // Startwerte beim ersten Datensatz - xmax = xmin = daten[0][xobj]; - ymax = ymin = daten[0][yobj]; + if(dataxmin==dataxmax) { // Startwerte beim ersten Datensatz + dataxmax = dataxmin = daten[0][xobj]; + dataymax = dataymin = daten[0][yobj]; } for(var i=0;i<daten.length;i++) { var t = daten[i]; - if(t[xobj]<xmin) xmin = t[xobj]; - if(t[xobj]>xmax) xmax = t[xobj]; - if(t[yobj]<ymin) ymin = t[yobj]; - if(t[yobj]>ymax) ymax = t[yobj]; + if(t[xobj]<dataxmin) dataxmin = t[xobj]; + if(t[xobj]>dataxmax) dataxmax = t[xobj]; + if(t[yobj]<dataymin) dataymin = t[yobj]; + if(t[yobj]>dataymax) dataymax = t[yobj]; } } // scale // Plotbereich leeren this.clear = function() { - feld.innerHTML = ""; - xmax = xmin = ymax = ymin = xfak = yfak = 0; + if(this.generate_history) this.history = []; + plotarea.innerHTML = ""; + dataxmax = dataxmin = dataymax = dataymin = xfak = yfak = 0; } // clear // Achsenkreuz, Tics und Beschriftung, linke untere Ecke bei (x0,y0) // xtext und ytext sind die Beschriftungen der Achsen this.frame = function(x0,y0,xtext,ytext) { + if(this.generate_history) { + this.history.push({ + cmd: "frame", + x0: x0, + y0:y0, + xtext: xtext, + ytext:ytext + }); + } + xmin = dataxmin; xmax = dataxmax; ymin = dataymin; ymax = dataymax; this.x0 = x0; this.y0 = y0; // Den Bereich für das Diagramm anlegen - feld.innerHTML = ""; +// feld = JB.makediv(plotarea,"","","",plotarea.offsetWidth-1,plotarea.offsetHeight-1); + feld = JB.makediv(plotarea,"","","","100%","100%"); + feld.style.position = "relative"; gr = new JB.grafik(feld); this.method = gr.method; // Elemente für ... this.ifeld = JB.makediv(feld,"","","",feld.offsetWidth-1,feld.offsetHeight-1); // ... Copyright this.cp = JB.makediv(this.ifeld,"",0,0,10,10); - this.cp.innerHTML = "<a href='http://www.j-berkemeier.de' title="+JB.plot_version+">JB</a><button></button"; + this.cp.innerHTML = "<a href='http://www.j-berkemeier.de' title='"+JB.plot_version+"'>JB</a><button></button"; this.cp.style.zIndex = "100"; this.cp.style.opacity = "0"; // ... und Mouseover, Marker, etc. @@ -211,6 +252,13 @@ JB.plot = function(feld,xstr,ystr) { // daten: Datenarray mit Objekten mit den x- und y-Werten // color Diagrammfarbe this.plot = function(daten,color) { + if(this.generate_history) { + this.history.push({ + cmd: "plot", + daten: daten, + color: color + }); + } var arr=[]; for(var i=0,l=daten.length;i<l;i++) arr.push({x:(daten[i][xobj]-xmin)*xfak+this.x0, y:(daten[i][yobj]-ymin)*yfak+this.y0}); @@ -257,8 +305,19 @@ JB.plot = function(feld,xstr,ystr) { } } // plot.setmarker this.markeron = function(a,callback_over,callback_out,callback_move,callback_click,markertype) { + if(this.generate_history) { + this.history.push({ + cmd: "markeron", + a: a, + callback_over: callback_over, + callback_out: callback_out, + callback_move: callback_move, + callback_click: callback_click, + markertype: markertype + }); + } var dieses = this; - var posx=0,posy=0,offx; + var posx=0,posy=0,offx,offy; this.ystart=-1000; var pi=0,al; var starttime; @@ -268,32 +327,43 @@ JB.plot = function(feld,xstr,ystr) { e.preventDefault(); if(e.targetTouches && e.targetTouches[0] && e.targetTouches[0].clientX) { posx = e.targetTouches[0].clientX - offx; - posy = e.targetTouches[0].clientY; + posy = e.targetTouches[0].clientY - offy; if(dieses.ystart>-1000 && Math.abs(dieses.ystart-posy)>10) { window.scrollBy(0,dieses.ystart - posy); dieses.ystart = posy; } } - else if(e.clientX) posx = e.clientX - offx; + else if(e.clientX) { + posx = e.clientX - offx; + posy = e.clientY - offy; + } pi = dieses.getPolylinePos(posx,a); dieses.setmarker(a[pi],markertype); - if(callback_move && typeof(callback_move)=="function") callback_move(pi,a[pi]); + if(callback_move && typeof(callback_move)=="function") callback_move(pi,a[pi],e,posx,posy); } // handle_move var handle_click = function(e) { e.preventDefault(); - if(e.targetTouches && e.targetTouches[0] && e.targetTouches[0].clientX) posx = e.targetTouches[0].clientX - offx; - else if(e.clientX) posx = e.clientX - offx; + if(e.targetTouches && e.targetTouches[0] && e.targetTouches[0].clientX) { + posx = e.targetTouches[0].clientX - offx; + posy = e.targetTouches[0].clientY - offy; + } + else if(e.clientX) { + posx = e.clientX - offx; + posy = e.clientY - offy; + } pi = dieses.getPolylinePos(posx,a); dieses.setmarker(a[pi],markertype); - if(callback_click && typeof(callback_click)=="function") callback_click(pi,a[pi]); + if(callback_click && typeof(callback_click)=="function") callback_click(pi,a[pi],e,posx,posy); } // handle_click var handle_start = function(e) { e.preventDefault(); offx = 0; + offy = 0; var feldt = dieses.mele; if(feldt.offsetParent) do { offx += feldt.offsetLeft; + offy += feldt.offsetTop; } while(feldt = feldt.offsetParent); dieses.cp.querySelector("button").focus(); if(e.targetTouches && e.targetTouches[0] && e.targetTouches[0].clientX) posx = e.targetTouches[0].clientX - offx; @@ -369,6 +439,11 @@ JB.plot = function(feld,xstr,ystr) { } } // plot.markeron this.markeroff = function() { + if(this.generate_history) { + this.history.push({ + cmd: "markeroff" + }); + } this.mele.removeEventListener("pointerover",handle_start); this.mele.removeEventListener("pointerout",handle_end); this.mele.removeEventListener("pointerdown",handle_down); @@ -400,7 +475,32 @@ JB.plot = function(feld,xstr,ystr) { } return pi; } // plot.getPolylinePos + + this.replot = function() { + var save_generate_history = this.generate_history; + this.generate_history = false; + plotarea.innerHTML = ""; + for(var i=0;i<this.history.length;i++) { + var hi = this.history[i]; + switch(hi.cmd) { + case "frame": + this.frame(hi.x0,hi.y0,hi.xtext,hi.ytext); + break; + case "plot": + this.plot(hi.daten,hi.color); + break; + case "markeron": + this.markeron(hi.a,hi.callback_over,hi.callback_out,hi.callback_move,hi.callback_click,hi.markertype) + break; + case "markeroff": + this.markeroff(); + break; + } + } + this.generate_history = save_generate_history; + } // plot.replot } // plot + JB.farbbalken = function(ele) { this.create = function(r,o,u,farbtafel,ymin,ymax,yl) { this.fbdiv = document.createElement("div"); @@ -483,7 +583,9 @@ JB.makediv = function(parentnode,id,x,y,w,h) { if(typeof x == "number") ele.style.left = x + "px"; if(typeof y == "number") ele.style.top = y + "px"; if(typeof w == "number") ele.style.width = w + "px"; + else if(typeof w == "string") ele.style.width = w ; if(typeof h == "number") ele.style.height = h + "px"; + else if(typeof h == "string") ele.style.height = h ; parentnode.appendChild(ele); return ele; } // makediv diff --git a/static/files/gpx/gpxviewer/readme.txt b/static/files/gpx/gpxviewer/readme.txt @@ -1,8 +1,8 @@ -GPX Viewer 6.9 (2020-07-25) +GPX Viewer 6.15.1 (2021-11-25) See https://www.j-berkemeier.de/GPXViewer/ CC BY-NC-SA 4.0 Jürgen Berkemeier - https://www.j-berkemeier.de Modification: -osmutils.js:38 : https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png -> https://osmproxy.ortlepp.eu/{z}/{x}/{y}.png +osmutils.js:37 : https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png -> https://osmproxy.ortlepp.eu/{z}/{x}/{y}.png diff --git a/static/files/gpx/gpxviewer/shimg.js b/static/files/gpx/gpxviewer/shimg.js @@ -1,24 +1,22 @@ "use strict"; -window.JB = window.JB || {}; -JB.GPX2GM.callback = function(pars) { - if(pars.type == "click_Marker_Bild") { - JB.show_im(pars.src,pars.text,pars.coord); - return false; - } - return true; -}; -JB.show_im = function(url,info,coords) { - var imdiv = document.createElement("div"); - var fig = document.createElement("figure"); - var im = document.createElement("img"); - var figcap = document.createElement("figcaption"); - var but = document.createElement("button"); - var cross = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><line x1="0.1" y1="0.1" x2="0.9" y2="0.9" stroke-width="0.15" stroke="black"/><line x1="0.1" y1="0.9" x2="0.9" y2="0.1" stroke-width="0.15" stroke="black"/></svg>'; -// but.innerHTML = "<img src='data:image/svg+xml,"+encodeURIComponent(cross)+"'>"; // "&#x274c;"; "&times;"; +const mapeles = document.querySelectorAll("div[class*='gpxview:'],figure[class*='gpxview:']"); +for(let i=0;i<mapeles.length;i++) { mapeles[i].addEventListener("click_Marker_Bild",function(event) { + const text = event.detail.events.eventparameter.text; + const coord = event.detail.events.eventparameter.coord; + const src = event.detail.events.eventparameter.src; + + event.preventDefault(); + + const imdiv = document.createElement("div"); + const fig = document.createElement("figure"); + const im = document.createElement("img"); + const figcap = document.createElement("figcaption"); + const but = document.createElement("button"); + const cross = '<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><line x1="0.1" y1="0.1" x2="0.9" y2="0.9" stroke-width="0.15" stroke="black"/><line x1="0.1" y1="0.9" x2="0.9" y2="0.1" stroke-width="0.15" stroke="black"/></svg>'; but.innerHTML = cross; - im.src = url; + im.src = src; imdiv.className = "JB_Photo"; - figcap.innerHTML = info; + figcap.innerHTML = text; fig.appendChild(but); fig.appendChild(im); fig.appendChild(figcap); @@ -36,14 +34,13 @@ JB.show_im = function(url,info,coords) { im.className=""; window.setTimeout(function(){document.body.removeChild(imdiv)},1000) ; } - if (coords.link && coords.link.length) { + if (coord.link && coord.link.length) { im.style.cursor = "pointer"; im.onclick = function() { - console.log(coords.link); - location.href = coords.link; + location.href = coord.link; } } -}; +})} ( function() { var style = function() {}; style.prototype.create = function() {