From f7f2ca1d651cf2e161fbf372b18c5b646431c7d4 Mon Sep 17 00:00:00 2001 From: grauser Date: Wed, 3 Oct 2018 13:37:07 +0200 Subject: [PATCH] RideMapWindow : Use leaflet instead of googlemap api for OSM 2/4 Trace ride, intervals and markers --- src/Charts/RideMapWindow.cpp | 201 ++++++++++++++++++++++------------- 1 file changed, 126 insertions(+), 75 deletions(-) diff --git a/src/Charts/RideMapWindow.cpp b/src/Charts/RideMapWindow.cpp index b9f9350a2..73e7b5e4c 100644 --- a/src/Charts/RideMapWindow.cpp +++ b/src/Charts/RideMapWindow.cpp @@ -408,8 +408,9 @@ void RideMapWindow::createHtml() // Load Google Map v3 API currentPage += QString(" \n"); } else if (mapCombo->currentIndex() == OSM) { - // Load Google Map v3 API - //currentPage += QString(" \n"); + // Load leaflet (1.3.4) API + currentPage += QString(" \n"); + currentPage += QString(" \n"); } @@ -419,7 +420,8 @@ void RideMapWindow::createHtml() currentPage += QString(""); // fg/bg currentPage += QString("") .arg(bgColor.name()).arg(fgColor.name()); + currentPage += QString("\n" + "\n" + "
\n"); + // local functions currentPage += QString("\n"); - // the main page is rather trivial - currentPage += QString("\n" - "\n" - "
\n" - "\n" - "\n"); } else if (mapCombo->currentIndex() == OSM) { currentPage += QString("function drawInterval(latlons) { \n" // intervals will be drawn with these options " var polyOptions = {\n" - " strokeColor: '#0000FF',\n" - " strokeOpacity: 0.6,\n" - " strokeWeight: 10,\n" + " stroke : true,\n" + " color: '#0000FF',\n" + " opacity: 0.6,\n" + " weight: 10,\n" " zIndex: -1\n" // put at the bottom " }\n" - /*" var intervalHighlighter = new google.maps.Polyline(polyOptions);\n" - " intervalHighlighter.setMap(map);\n" - " intervalList.push(intervalHighlighter);\n" - " var path = intervalHighlighter.getPath();\n" + + + " var path = [];\n" " var j=0;\n" " while (jOpenStreetMap contributors'," + " maxZoom: 18" + " }).addTo(map);\n"); - /*currentPage += QString("" - " map.mapTypes.set(\"OSM\", new google.maps.ImageMapType({\n" - " getTileUrl: function(coord, zoom) {\n" - // "Wrap" x (logitude) at 180th meridian properly - // NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib - " var tilesPerGlobe = 1 << zoom; \n" - " var x = coord.x % tilesPerGlobe; \n" - " if (x < 0) { \n" - " x = tilesPerGlobe+x; \n" - " } \n" - // Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll - - " return \""+osmTSUrl->text()+"/\" + zoom + \"/\" + x + \"/\" + coord.y + \".png\"; \n" - " }, \n" - " tileSize: new google.maps.Size(256, 256), \n" - " name: \"OpenStreetMap\", \n" - " maxZoom: 18 \n" - " }));\n");*/ - currentPage += QString("" // initialise local variables " markerList = new Array();\n" @@ -763,21 +769,19 @@ void RideMapWindow::createHtml() " webBridge.drawOverlays();\n" // Liste mouse events - //dgr" google.maps.event.addListener(map, 'mouseup', function(event) { map.setOptions({draggable: true, zoomControl: true, scrollwheel: true, disableDoubleClickZoom: false}); webBridge.mouseup(); });\n" + //" map.on('mousedown', function(event) { webBridge.mouseup(); });\n" "}\n" "\n"); - // the main page is rather trivial - currentPage += QString("\n" - "\n" - "
\n" - "\n" - "\n"); } + // the main page is rather trivial + currentPage += QString("\n" + "\n"); + } @@ -815,7 +819,21 @@ RideMapWindow::drawShadedRoute() code += QString("path.push(new google.maps.LatLng(%1,%2));\n").arg(rfp->lat,0,'g',GPS_COORD_TO_STRING).arg(rfp->lon,0,'g',GPS_COORD_TO_STRING); } } else if (mapCombo->currentIndex() == OSM) { - // dgr + if (count == 0) { + code = QString("{\n" + " var polyline = new L.Polyline([]);\n" + " polyline.addTo(map);\n" + " path = polyline.getLatLngs();\n"); + + // Listen mouse events + /*code += QString("polyline.on('mousedown', function(event) { webBridge.clickPath(event.latLng.lat(), event.latLng.lng()); });\n" + "polyline.on('mouseup', function(event) { webBridge.mouseup(); });\n" + "polyline.on('mouseover', function(event) { webBridge.hoverPath(event.latLng.lat(), event.latLng.lng()); });\n");*/ + + } else { + if (rfp->lat || rfp->lon) + code += QString("path.push(new L.LatLng(%1,%2));\n").arg(rfp->lat,0,'g',GPS_COORD_TO_STRING).arg(rfp->lon,0,'g',GPS_COORD_TO_STRING); + } } // running total of time @@ -845,6 +863,19 @@ RideMapWindow::drawShadedRoute() "}\n").arg(styleoptions == "" ? color.name() : GColor(CPLOTMARKER).name()) .arg(styleoptions == "" ? 0.5f : 1.0f); + } else if (mapCombo->currentIndex() == OSM) { + // color the polyline + code += QString("var polyOptions = {\n" + " stroke : true,\n" + " color: '%1',\n" + " weight: 3,\n" + " opacity: %2,\n" // for out and backs, we need both + " zIndex: 0,\n" + "}\n" + "polyline.setStyle(polyOptions);\n" + "}\n").arg(styleoptions == "" ? color.name() : GColor(CPLOTMARKER).name()) + .arg(styleoptions == "" ? 0.5f : 1.0f); + } #ifdef NOWEBKIT @@ -962,6 +993,11 @@ RideMapWindow::createMarkers() "var image = new google.maps.MarkerImage('qrc:images/maps/loop.png');" "var marker = new google.maps.Marker({ icon: image, animation: google.maps.Animation.DROP, position: latlng });" "marker.setMap(map); }").arg(points[0]->lat,0,'g',GPS_COORD_TO_STRING).arg(points[0]->lon,0,'g',GPS_COORD_TO_STRING); + } else if (mapCombo->currentIndex() == OSM) { + code = QString("{ var latlng = new L.LatLng(%1,%2);" + "var image = new L.icon({iconUrl:'qrc:images/maps/loop.png'});" + "var marker = new L.marker(latlng, { icon: image });" + "marker.addTo(map); }").arg(points[0]->lat,0,'g',GPS_COORD_TO_STRING).arg(points[0]->lon,0,'g',GPS_COORD_TO_STRING); } #ifdef NOWEBKIT view->page()->runJavaScript(code); @@ -975,6 +1011,11 @@ RideMapWindow::createMarkers() "var image = new google.maps.MarkerImage('qrc:images/maps/cycling.png');" "var marker = new google.maps.Marker({ icon: image, animation: google.maps.Animation.DROP, position: latlng });" "marker.setMap(map); }").arg(points[0]->lat,0,'g',GPS_COORD_TO_STRING).arg(points[0]->lon,0,'g',GPS_COORD_TO_STRING); + } else if (mapCombo->currentIndex() == OSM) { + code = QString("{ var latlng = new L.LatLng(%1,%2);" + "var image = new L.icon({iconUrl:'qrc:images/maps/cycling.png'});" + "var marker = new L.marker(latlng, { icon: image });" + "marker.addTo(map); }").arg(points[0]->lat,0,'g',GPS_COORD_TO_STRING).arg(points[0]->lon,0,'g',GPS_COORD_TO_STRING); } #ifdef NOWEBKIT view->page()->runJavaScript(code); @@ -987,6 +1028,11 @@ RideMapWindow::createMarkers() "var image = new google.maps.MarkerImage('qrc:images/maps/finish.png');" "var marker = new google.maps.Marker({ icon: image, animation: google.maps.Animation.DROP, position: latlng });" "marker.setMap(map); }").arg(points[points.count()-1]->lat,0,'g',GPS_COORD_TO_STRING).arg(points[points.count()-1]->lon,0,'g',GPS_COORD_TO_STRING); + } else if (mapCombo->currentIndex() == OSM) { + code = QString("{ var latlng = new L.LatLng(%1,%2);" + "var image = new L.icon({iconUrl:'qrc:images/maps/finish.png'});" + "var marker = new L.marker(latlng, { icon: image });" + "marker.addTo(map); }").arg(points[points.count()-1]->lat,0,'g',GPS_COORD_TO_STRING).arg(points[points.count()-1]->lon,0,'g',GPS_COORD_TO_STRING); } #ifdef NOWEBKIT view->page()->runJavaScript(code); @@ -1040,6 +1086,11 @@ RideMapWindow::createMarkers() "var marker = new google.maps.Marker({ icon: image, animation: google.maps.Animation.DROP, position: latlng });" "marker.setMap(map);" "}").arg(rfp->lat,0,'g',GPS_COORD_TO_STRING).arg(rfp->lon,0,'g',GPS_COORD_TO_STRING); + } else if (mapCombo->currentIndex() == OSM) { + code = QString("{ var latlng = new L.LatLng(%1,%2);" + "var image = new L.icon({iconUrl:'qrc:images/maps/cycling_feed.png'});" + "var marker = new L.marker(latlng, { icon: image });" + "marker.addTo(map); }").arg(rfp->lat,0,'g',GPS_COORD_TO_STRING).arg(rfp->lon,0,'g',GPS_COORD_TO_STRING); } #ifdef NOWEBKIT @@ -1146,7 +1197,7 @@ void RideMapWindow::zoomInterval(IntervalItem *which) void MapWebBridge::call(int count) { Q_UNUSED(count); - //qDebug()<<"webBridge call:"<