Travel Mapping

Web Design Discussion => General Web Design Discussion => Topic started by: Jim on May 21, 2018, 10:58:52 pm

Title: TM implementation using Leaflet for mapping
Post by: Jim on May 21, 2018, 10:58:52 pm
I spent a a few hours this evening converting TM's Google Maps API calls to the free and open Leaflet mapping API.  The conversion was remarkably straightforward.  I definitely have a bunch of kinks to work out and I have done only minimal testing so far, but I think this is going to work.  If you want to see what it looks like so far, keeping in mind that there's more I would add and a lot more testing I'd do before we make the switch, check out http://tml.teresco.org .  You can also see the new code on GitHub in the "leaflet" branch: https://github.com/TravelMapping/Web/tree/leaflet

For those unaware, our current Google Maps implementation could cease to function on June 11 when Google starts requiring billing information even for non-commercial use of their API.  I don't think we'll have any problem getting switched over to Leaflet well before that deadline hits.
Title: Re: TM implementation using Leaflet for mapping
Post by: yakra on May 22, 2018, 12:36:06 am
Looks nice. Panning and zooming, and overall responsiveness seem faster than the Google API as well.

Yes, you still have kinks to work out, and I may be jumping the gun here, but...
Title: Re: TM implementation using Leaflet for mapping
Post by: oscar on May 22, 2018, 12:47:31 am
Looks nice. Panning and zooming, and overall responsiveness seem faster than the Google API as well.

Yes, you still have kinks to work out, and I may be jumping the gun here, but...
  • Can the default layer be set to OpenStreetMap instead of Stamen Terrain?
  • Can custom / 3rd party tile sets be added?
  • Shame about losing the satellite view, though...
Can we continue accessing Google Maps and satellite view through the Leaflet API? Both are useful in various ways (for example, GM is better than OSM at showing businesses and other landmarks, that can confirm the waypoint where I entered/left a route), even if we can't use them to grab coordinates for our mapping.

Is there open-source satellite imaging we can sub in, to replace the departed MQOpenSat?
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 22, 2018, 07:18:20 am
There are tons of map tiles we can add pretty easily.  I've only tried these three to get started.  The big exception is Google's, since they don't make their tiles available directly from outside their own API, and workarounds out there that do so are a very clear violation of Google's terms.  I also don't want to make the Mapnik tiles the default, since we're not supposed to use their tile server.  We got away with it in our previous implementation but we could get blocked if usage is too heavy.  There's the option of running our own tile server to get the Mapnik which is some work but looks completely doable.
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 24, 2018, 08:25:02 pm
Check out https://github.com/leaflet-extras/leaflet-providers and let's think about which of these map tiles make sense to include.  If you like one, please check out its terms of service and make sure it seems like our usage would be appropriate.  Also make sure it has an appropriate range of zoom levels.  Some don't zoom in close enough for our purposes.
Title: Re: TM implementation using Leaflet for mapping
Post by: si404 on May 25, 2018, 05:35:03 am
http://leaflet-extras.github.io/leaflet-providers/preview/index.html

OpenStreetMap.Mapnik, OpenStreetMap.DE, HERE.normalDay and Esri.WorldStreetMap are ones we currently have.

OpenStreetMap.France (effectively the old Mapnik style) is one I'd like for sure.

HERE has a hybrid layer, Esri has a satellite layer.

HikeBike.HikeBike is a possible - it doesn't have much hiking or biking stuff on it and gives a different way of showing roads. OpenStreetMap.HOT, OpenMapSurfer.Roads, OpenTopoMap and Wikimedia likewise offer different renderings of the same/similar data, but there's only so many you can do.
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 25, 2018, 09:31:47 am
I'm still trying out functionality, but the first version of HDX based on Leaflet is up.

http://coursesnew.teresco.org/metal/hdxl/

It could change without notice especially today as I continue testing and making fixes/improvements, but I'd be very happy to have additional testing.  You can mention things here or put issues in the EduTools repository.

Early testing shows that some things seem to be a little faster some slower.
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 25, 2018, 01:34:57 pm
Please test http://tml.teresco.org/ and report problems here or in GitHub issues.
Title: Re: TM implementation using Leaflet for mapping
Post by: michih on May 25, 2018, 02:22:54 pm
Loading a (simple) map takes about the same time. For instance France less than 10s on both: http://tml.teresco.org/user/mapview.php?units=miles&u=michih&rg=FRA

Loading a multi-region map takes about twice the time than on the old version (200s vs. 90s): http://tml.teresco.org/user/mapview.php?units=miles&u=michih&rg=DEU-BY,DEU-HE,DEU-BW,DEU-RP,DEU-SL,DEU-NW,FRA,LUX,BEL,IRL,NIR,SCT,WLS,ENG

Moving the map with mouse is incredibly slow with less and much data on the new server (both links above). It stucks and the map is not moving anymore.

Look at the multi-region map. The world is displayed twice. It's not centered to the relevant regions.

On top right "Show Route Table" is on top of tiles selection.

As already mentioned by you (https://github.com/TravelMapping/Web/issues/256), tier order is wrong on maps (zIndex).

Some shields do not appear: http://tml.teresco.org/hb/index.php?units=miles&u=michih&r=deush.e47

Info window at waypoint does not appear when clicking on the table (but appears when clicking on the wp itself).

HB: Filter by region / system does not work (drop-down cannot be opened: http://tml.teresco.org/hb/index.php?units=miles&u=michih&sys=null&rg=DEU-SH

...
Title: Re: TM implementation using Leaflet for mapping
Post by: si404 on May 25, 2018, 03:40:42 pm
Loading a multi-region map takes about twice the time than on the old version (200s vs. 90s): http://tml.teresco.org/user/mapview.php?units=miles&u=michih&rg=DEU-BY,DEU-HE,DEU-BW,DEU-RP,DEU-SL,DEU-NW,FRA,LUX,BEL,IRL,NIR,SCT,WLS,ENG
try taking NIR out - it could be the weird error where one point is at lon=-366 rather than -6 (which is now a datacheck, and also something that I've fixed locally) that's slowing stuff down.
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 25, 2018, 03:48:02 pm
I'm guessing @si404's observation might be correct about NIR.  Things are still slow in any case.
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 25, 2018, 03:56:01 pm
I also have some debugging output in there right now as I try to figure out how to get the route table on top of the map and the concurrent segments showing in the correct tier ordering.  So that will cause some extra slowness.
Title: Re: TM implementation using Leaflet for mapping
Post by: michih on May 25, 2018, 03:59:09 pm
Loading a multi-region map takes about twice the time than on the old version (200s vs. 90s): http://tml.teresco.org/user/mapview.php?units=miles&u=michih&rg=DEU-BY,DEU-HE,DEU-BW,DEU-RP,DEU-SL,DEU-NW,FRA,LUX,BEL,IRL,NIR,SCT,WLS,ENG
try taking NIR out

But I wanna travel there soon! :D

- it could be the weird error where one point is at lon=-366 rather than -6 (which is now a datacheck, and also something that I've fixed locally) that's slowing stuff down.

Yes, I think you are right. The map is loaded correct w/o NIR but it also worked with the Google API including NIR. Odd.

Zooming in is not possible with the map (w/o NIR). I pressed "+" 3 or 4 times and just have a grey screen now... (and loading circle in the middle)
When I go to a different TAB in my FF, where I have opened GitHub, I have the same problem now. CPU load 60...80%, more than 3 GB RAM usage. Never had this before...
Title: Re: TM implementation using Leaflet for mapping
Post by: michih on May 25, 2018, 04:00:48 pm
So that will cause some extra slowness.

Yep, it's slower than before. Route table is currently almost completely off my screen now... Well, no criticism...
Title: Re: TM implementation using Leaflet for mapping
Post by: osu-lsu on May 25, 2018, 07:23:19 pm
FWIW, When on leaflet, I cannot pull down the route table (not sure if that is by design right now, or a flaw)
Also, in the upper right corner there is a '3 sheet' icon where you can change maps. The option to choose OTM is covered by the box for the route table (you can reach the other two mapping options)

That and maybe finding a different color for our "pretend" truck route(s) for Ohio 37 around Delaware, Ohio for use on the maps.
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 25, 2018, 10:18:48 pm
Lots of improvements to mapview tonight.  Thanks for the testing so far - keep trying to break it and keep the reports coming.
Title: Re: TM implementation using Leaflet for mapping
Post by: yakra on May 26, 2018, 03:09:49 am
That and maybe finding a different color for our "pretend" truck route(s) for Ohio 37 around Delaware, Ohio for use on the maps.
With the way the site is set up, this has the be the same color as the rest of the Ohio State Highways system.
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on May 26, 2018, 08:12:00 am
I just forced the use of the Canvas renderer rather then SVG, which some sites say is a little more lightweight.  Let's see if this helps/hurts performance.
Title: Re: TM implementation using Leaflet for mapping
Post by: vdeane on May 26, 2018, 01:58:42 pm
I like it.  It actually seems to load faster than the existing one now.  Street view will be missed, but it's not like we can do anything about that.
Title: Re: TM implementation using Leaflet for mapping
Post by: michih on May 26, 2018, 02:19:39 pm
Yes, it's loaded faster than the old version now - Thanks :)
Title: Re: TM implementation using Leaflet for mapping
Post by: Markkos1992 on May 26, 2018, 02:24:12 pm
My main issue is that I cannot see the waypoint labels on the map when I click them on the left side of the screen though the map does go to that point..  I do see them when clicking on the actual point on the map though.
Title: Re: TM implementation using Leaflet for mapping
Post by: yakra on May 26, 2018, 02:29:49 pm
http://tml.teresco.org/user/mapview.php?units=miles&u=yakra&rg=NH,MA,CT,NY
Loads and works much faster than before (https://github.com/TravelMapping/Web/issues/258#issuecomment-392240787).
I can zoom and pan with relative ease now. Show Markers still takes ~25 seconds in Firefox, ~35 seconds in Chromium.
Clicking on a waypoint produces a Popup straight away, which I can easily close.

Edit: With waypoint markers shown, panning and zooming are very laggy when zoomed closely in on the Albany area. I have to leave the mouse button depressed until I see the map move, which can take a couple seconds. Responding to zoom command takes several seconds.
If I were to attempt to Show Markers while zoomed out enough to fit the entire 4-state graph on the map -- fuhgeddaboutit!
Title: Re: TM implementation using Leaflet for mapping
Post by: froggie on May 27, 2018, 03:53:31 pm
At first blush, I'm not a fan of Leaflet.  Does not render route shields until you're well zoomed in, and does not do a good job of populating them, either.
Title: Re: TM implementation using Leaflet for mapping
Post by: oscar on May 27, 2018, 05:28:57 pm
Just testing out the Leaflet version of the Highway Browser, it seems that compared to OSM, you can only zoom in one fewer level for Stamen Toner, and four fewer for Stamen Terrain. This is probably a Stamen rather than a Leaflet issue.

I haven't noticed a problem with rendering of our own route markers (the ones above the waypoint list, not the ones shown on maps).

As for map options for the HB and ultimately the new Waypoint Editor:

-- we should probably allow lots of options at the outset, and perhaps narrow down later as non-team members get a chance to comment.

-- for HERE, there seems to be a cap on free usage; have we run into it with the Highway Browser which already has it, and would it be an issue in the Leaflet version of the HB or of a new Waypoint Editor?

-- I couldn't find the TOS for HERE [EDIT: duh, it's here (https://developer.here.com/terms-and-conditions), not linked to HERE's pricing page where I had looked for it], has somebody else looked and found something that would prevent us from grabbing coordinates from HERE in the Waypoint Editor? I noticed, in responding to one of julmac's comments on cansk, that HERE's mapping seemed to match Google Maps in that particular area (and both seem to be more up-to-date than OSM). But it does not match in west Maui, and indeed shows a new roadway absent from Google Maps, OSM, and Stamen, which might show how well I guesstimated the new locations of HI 30 and HI 3000 once my pending pull request is processed. If HERE's mapping uses Google Maps data or otherwise is unavailable for coordinate-grabbing, no luck; but otherwise it could be a partial replacement for Google Maps.
Title: Re: TM implementation using Leaflet for mapping
Post by: yakra on June 09, 2018, 12:19:30 am
And if you've gotta "scrub" commercial coordinates, well...
https://github.com/yakra/tmtools/tree/master/gisplunge ;)
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on June 09, 2018, 08:14:10 am
I'm not too concerned about running into usage limits for the non-default options as I expect the majority of our users will never bother switching from OSM.  None of the providers have any kind of ability to charge any money.  They worst that could happen is that they shut us off.

I really don't have a good idea of how much usage we generate.  Is it enough to be a problem using the OSM servers for our default maps?  I am still thinking we might want our own tile server to make sure this is not a problem.  This could be my next bigger TM-related project.
Title: Re: TM implementation using Leaflet for mapping
Post by: vdeane on June 09, 2018, 06:05:52 pm
Since Leaflet is faster than the old implementation I tried loading TM on my phone and am delighted that maps actually appear on my phone in a reasonable amount of time (about 10 seconds, whereas I'm pretty sure it was over a minute before).  If I ever need to look at TM while away from a computer, I now can!
Title: Re: TM implementation using Leaflet for mapping
Post by: Highway63 on June 10, 2018, 01:26:21 am
The site has been loading great for me. I like all the map options.

BUT FOR THE LOVE OF RAND MCNALLY WHY WON'T ANY OF THEM SHOW COUNTY LINES?!?!?! >:( >:(
Title: Re: TM implementation using Leaflet for mapping
Post by: si404 on June 10, 2018, 04:10:33 am
OSM / OSM German do, but you need to be relatively zoomed in. The German render shows them better, IMO.
Title: Re: TM implementation using Leaflet for mapping
Post by: yakra on June 13, 2018, 02:28:25 am
Are there any other Linux users here on the forum?

While Mapview and polylines are no longer a problem for me, I've noticed that it really gets bogged down by increasing numbers of the graphical overlays used for waypoints. Graphs such as FRA-region.tmg (4774 vertices) or ME-region.tmg (3277 vertices) were laggy but mostly usable. DEU-country.tmg (36842 vertices) OTOH, was torture.

Jim suggested (https://github.com/TravelMapping/Web/issues/258#issuecomment-392255501) this may be a graphics acceleration issue, and I'm inclined to agree.

What's your experience with the new Leaflet HDX been like?
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on June 13, 2018, 10:54:40 am
What's your experience with the new Leaflet HDX been like?

As we work on the HDX algorithm visualizations with the Leaflet maps, we're seeing that the efficiency is a mixed bag.  With relatively small graphs (up to a few hundred waypoints and connections, at least) it's probably faster and smoother than Google was.  But as things get big (a few thousand waypoints and connections), the whole thing slows down.  I am suspicious that the markers and polylines are ALL redrawn any time ANY marker or polyline is modified, even if there is no pan or zoom.

Checking this out and hopefully optimizing is likely to become a priority for me before the end of summer, as we are hoping to submit a paper about the newest developments on the algorithm visualization side of things.
Title: Re: TM implementation using Leaflet for mapping
Post by: yakra on June 15, 2018, 12:30:43 am
Shields are not displaying for UNECE International 'E' Roads
http://travelmapping.net/hb/index.php?units=miles&u=&r=nor.e69
Quote
Warning: file_get_contents(/home/www/tm/shields/template_eure_wide.svg): failed to open stream: No such file or directory in /home/www/tm/shields/shieldgen.php on line 331
Title: Re: TM implementation using Leaflet for mapping
Post by: Jim on June 15, 2018, 07:16:22 am
Shields are not displaying for UNECE International 'E' Roads
http://travelmapping.net/hb/index.php?units=miles&u=&r=nor.e69
Quote
Warning: file_get_contents(/home/www/tm/shields/template_eure_wide.svg): failed to open stream: No such file or directory in /home/www/tm/shields/shieldgen.php on line 331

https://github.com/TravelMapping/Web/issues/261

Since the shieldgen code and files are not mine, I've been hoping one of the authors of that will take care of this and other problems.  It's possible none f them are currently active in the project or at least don't have the time currently to take a look.
Title: Re: TM implementation using Leaflet for mapping
Post by: michih on June 15, 2018, 03:56:45 pm
https://github.com/TravelMapping/Web/issues/268

Quote
Shield Generator: Have converted some shields from SVGs into Blade templates as a proof-of-concept for the shield generator, but not many

I think it just makes no sense to work on the "old" shield generator...