HB: Center map at wp (for hwy data issue reports)

[michihdeu]

With #179 we have lat/lon/zoom in url now. The url is only updated when changing to another route (and removed with 'Zoom to fit').

When we click through the routes and find hwy data issues, it's nice to copy the HB link to the forum. When another person opens the link, a wp is centered and one might think that that's the relevant wp. But it isn't, see recent report. I must admit that @yakra has the wrong route. It should be DN1 or E60 centered at DN19 wp.

Nevertheless, when I wanna center the map so that the hwy data manager directly seen the wp I'm talking about, I need to center the wp in HB. It's possible by clicking on the wp line of the wp table to the left. However, the url is not updated! And that's the request.

[yakra]

I've had thoughts about adding a "link here" button...

A sticking point with that, as discussed in #312, is that we're starting to run out of real estate in the area above the map pane in the HB. We could use the unicode &#x1f517 link symbol, as in wayptlabels.php.

Mission creep:
Might be good for the sake of consistency to use unicode symbols for Zoom to Fit, and maybe even Related Routes as well. Currently looking around for some good options to serve that purpose.
If there are none, there's the option of creating a few small PNGs. An upside to that is mouseover or ALT text to help explain what the symbols actually do. (...Though, we can do that with text too. For example, the Err.? column in the wptedit table.)

[yakra]

For Zoom to Fit, maybe &#x26F6 ?

⛶

Best I've seen so far; Unicode is a lot less helpful than I'd like here...

[michihdeu]

fine to me

[yakra]

https://leafletjs.com/reference-1.6.0.html#map-zoomlevelschange

What's going on under the hood in wptedit:

Web/wptedit/index.php

Line 170 in c21e895

map.on("moveend", UpdateCoords);

Web/wptedit/wptfunctions.js

Lines 1336 to 1340 in c21e895

	function UpdateCoords()
	{
	var center = map.getCenter();
	document.getElementById("coordbar").innerHTML = '<a onclick="javascript:AddWaypoint();" class="button">Add waypoint</a> ' + OSMUrl(center.lat, center.lng) + "<br>Open location in <a href='" + GMSVUrl(center.lat, center.lng) + "' target='sv' class='button'>Street View</a> <a href='" + OSMUrl(center.lat, center.lng) + "&amp;zoom=15' target='o' class='button'>OSM</a> <a href='" + GoogleUrl(center.lat, center.lng) + "' target='g' class='button'>Google</a> <a href='" + YahooUrl(center.lat, center.lng) + "' target='y' class='button'>Yahoo</a> <a href='" + BingUrl(center.lat, center.lng) + "' target='b' class='button'>Bing</a>";
	}

[jteresco]

Here's an idea that's not thought through yet. Add code to popups that appear when a waypoint is clicked that is a "permanent link" to this route centered at the given waypoint, using the current zoom level.

Web/lib/tmjsfuncs.js

Lines 945 to 949 in c21e895

	function markerInfo(i, wpt) {
	return '<p style="line-height:160%;"><span style="font-size:24pt;color:black;">' + wpt.label + '</span><br><b>Waypoint ' + i + '<\/b><br><b><a target="_blank" href="http://www.openstreetmap.org/?lat='+wpt.lat+'&lon='+wpt.lon+'">Coords.:<\a><\/b> ' + wpt.lat + '&deg;, ' + wpt.lon + '&deg;<\/p><div id="intersections' + i + '"><\/div>';
	}

[yakra]

I like it, but think a "link here" that would work anywhere would be more versatile.
Should be doable, I think; I may have a look into it soon.

[yakra]

Can use CSS tricks to overlay a 🔍 on top of a ⛶

[jteresco]

"Link Here" button is now on tmtest's showroute.php. @yakra @michihdeu can you see if this functionality meets you needs related to this issue?

In any case, I think we have a few separate Issues discussed here. If there's anything that's not addressed by the Link Here button maybe new Issues should be opened?

[michihdeu]

Works, thanks 😄