credomane / FactorioMods_FactorioMaps

Jeroon's Factorio Maps mod
http://www.factorioforums.com/14582
47 stars 7 forks source link

Use Leaflet instead of Google Maps? #15

Open NelsonMinar opened 7 years ago

NelsonMinar commented 7 years ago

Are you interested in using different maps Javascript for the browser UI? Thinking specifically of Leaflet. The main advantage is Leaflet doesn't require a Google API key to view online; the files will just work when copied. Leaflet is also open source and pretty nice to work with, I have a lot of experience with it.

If it interests you I could knock out a quick demo of how it'd work for you to look at, then work with you to submit a pull request for the alternative.

credomane commented 7 years ago

Very, actually. More so because the Google Map API is terrible to actually work with and the docs are rather lacking I find. There are a few things I'd like to add but making the Map API play along made me give up. leaflet looks nice. I'll play with it some or you can do a working PR. Whichever. :)

NelsonMinar commented 7 years ago

I'm glad you like the idea! I took a quick stab at it; demo is temporarily here: http://minar.us.to/~nelson/tmp/factorio/leaflet.html#5/75.365/44.802

It's very simple. The code for Google Maps had a whole lot of stuff for it that Leaflet or a plugin already does. I'll append the complete code I wrote for the page. It could do with some testing on larger maps, I'm a little confused as to how lat/lon is mapping to the image filenames.

Do you like it? Should I prepare a PR for you? What were you thinking of adding to the map UI you couldn't do with Google?

var map = L.map('map_canvas').setView([0, 0], 3);

L.tileLayer('Images/{z}_{x}_{y}.jpg', {
    attribution: '<a href="https://mods.factorio.com/mods/credomane/FactorioMaps">FactorioMaps</a>',
    minZoom: 3,
    maxZoom: 6,
    noWrap: true,
    tileSize: 1024,
}).addTo(map);
new L.Hash(map);
map.zoomControl.setPosition('topright')
credomane commented 7 years ago

That looks nice. Know of anyway to set the bounding box so the "scroll" stops at the end of the map? Currently you can scroll the map all the way off screen and potentially lose track of it completely. I did, anyways, trying to see if leaflet did that annoying looping on the x-axis like GMaps. Took me forever to figure out the right code to make GMaps stop that looping and it still does it sometimes anyways.

What were you thinking of adding to the map UI you couldn't do with Google?

Adding an overlay layer through the pin/notes api for displaying some of the features added in 0.15.

NelsonMinar commented 7 years ago

There's a maxBounds option when creating the map that limits scrolling, but it's not clear what the Factorio map's bounding box is. I did disable the looping: that's what noWrap: true does.

A feature overlay layer would be nice! One easy way to do that would be to create a GeoJSON file in the Lua code that contains all the features you want to highlight. It's very easy to put custom markers on a Leaflet map from that.

The real problem here is coordinate systems; WGS84 coordinates like 117°W, 43°N don't really make sense for Factorio. That's why I cautioned this should be tested on a larger world than I have.

pokemane commented 7 years ago

The real problem here is coordinate systems; WGS84 coordinates like 117°W, 43°N don't really make sense for Factorio.

Looks like they got you covered already, actually. Awesome. Nice find, @NelsonMinar

NelsonMinar commented 7 years ago

Oh nice, L.CRS.Simple looks like a way to use image pixel coordinates in Leaflet. The key thing is whatever coordinate system we use, the Lua code and Javascript code understand each other. Does Factorio have a natural coordinate system?

credomane commented 7 years ago

Does Factorio have a natural coordinate system?

Yes but it isn't pixel based. I don't think it would be too hard to "create" that when the screenshots are taken.

NelsonMinar commented 7 years ago

Gotcha. It's possible to use any custom CRS you want with Leaflet, just a bit of work. It's only necessary when you want to start georeferencing markers, etc; then the code needs to agree on the CRS. The thing I've done already replaces the existing Google Maps functionality pretty well.

EricReiche commented 6 years ago

@NelsonMinar any chance of that PR appearing at some point? :)

NelsonMinar commented 6 years ago

No one who works on the mod has said they wanted it. And there is an unresolved question about the proper CRS. My demo at http://minar.us.to/%7Enelson/tmp/factorio/leaflet.html is still working; you're welcome to take the HTML/Javascript code from there. It's very simple, I'll attach it here. map.zip

credomane commented 6 years ago

I've started working on this in the leaflet branch. Sorry for the extreme delay.

@NelsonMinar I would like to make a CRS that matches Factorio as closely as possible. http://leafletjs.com/examples/crs-simple/crs-simple.html looks to be what is needed.

NelsonMinar commented 6 years ago

Sweet. I don't think I have much else to offer than the one working demo already here. I've never used CRS-Simple but that looks like exactly the right thing.

abrahamvarricatt commented 6 years ago

@credomane , I made a local clone of your leaflet branch and just tried it with Factorio 0.16.51 on Linux. Works like a charm! (when I open the map locally at least). And in one aspect, it's superior to google maps - mouse dragging to explore Leaflet maps works really well! Oddly enough, I need to use my keyboard for the google version.

Is there any reason you haven't updated the mod?

jahands commented 6 years ago

You have to add &v=3.3 to the script src=https://maps.googleapis.com/maps/api/js line in the generated map, that fixes the mouse dragging issue.

jahands commented 6 years ago

@NelsonMinar Hey that demo looks great except for one thing: if you try to zoom to fast, the screen goes blank. Is it possible to make sure it's always rendering the lower resolution images until the higher zoom level is loaded?

dgw commented 6 years ago

You have to add &v=3.3 to the script src=https://maps.googleapis.com/maps/api/js line in the generated map, that fixes the mouse dragging issue.

It also prints a deprecation warning to the console, and should probably not be relied on long-term. It's just a temporary workaround, not a fix.

Switching JS libraries is a good thing to at least consider, given that Google seems more and more inclined to charge for things these days.

jahands commented 6 years ago

I agree, and I really like the idea of using a library that's actually made for what we are doing.

NelsonMinar commented 6 years ago

Credomane's branch looks like a fine place to start for Leaflet. As we've discussed, the only slightly complicated thing here is the Coordinate Reference System. You don't even have to get that right to have something basically working though.

@jahands, sorry, I don't know how to optimize for fast zooming. There probably is a way though, many Leaflet users would like what you are describing.

jahands commented 6 years ago

I found a really solid example of Leaflet: http://thomasrast.ch/factorio/ It even has multiple versions of the map using layers! Oh and it doesn't have the zoom issue.

jahands commented 6 years ago

Google retired v3.3 so this mod is basically broken now

jahands commented 6 years ago

I've gotten a Leaflet map working really well. It even has both day/night view (which is stored in the url so you can link to whatever version of the map.)

https://factoriomaps.com/PublicServers/Factory-Vanilla/2018-08-03/leaflet.html#2/0/0

jahands commented 6 years ago

I've made an update that uses embedded json (easy to generate for me) so that layers can have different zoom levels if needed (would be useful if layers are used for different times during the playthrough.)

https://factoriomaps.com/user/Nilaus/Nilaus-Final-Factory/2018-08-04-E16/index.html#3/-37.09/-77.87/Day

EricReiche commented 6 years ago

Hey @jahands , can you share this code so I can test it? I cloned jahands/FactorioMods_FactorioMaps:master but it still just generates GoogleMaps. (and the leftlet branch seems outdated?!)

jahands commented 6 years ago

@EricReiche Oh uh, right now I generate maps from a json file containing the map info via a script. I haven't gotten around to updating the mod as I just got it working the way I want.

Here's the template + .json + function to generate the map that I'm using: https://gist.github.com/jahands/04e145d0b0f7be66ff930fc48aaf82eb

EricReiche commented 6 years ago

I don't quite understand how it works. Do you export the map with the existing mod and then convert the output files with the script? Is that for powershell? Not familiar with "psm1".

jahands commented 6 years ago

Currently I export the map using my fork of the mod, delete the index.html, create the map.json file with correct info and run the script on the map.json.

This is PowerShell, yes. You can import the function using `Import-Module

` and then run the function with the path to the map.json. All it does is replace the {{bits_like_this}} in my template with stuff from the json. On Mon, Aug 6, 2018 at 10:04 AM Eric Reiche wrote: > I don't quite understand how it works. > Do you export the map with the existing mod and then convert the output > files with the script? Is that for powershell? Not familiar with "psm1". > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > , > or mute the thread > > . >
jahands commented 6 years ago

Here are a few recent maps that all use Leaflet and seem to work well:

This one has a day/night toggle: https://factoriomaps.com/user/L0laapk3/megabase-208h/2018-08-09/index.html#3/69.44/16.17/Day https://factoriomaps.com/user/Mullematsch/World100h/2018-08-09/index.html https://factoriomaps.com/user/golga/RotationallySymmetric6000spm/2018-08-11/index.html https://factoriomaps.com/anonymous/6ykus/TG/2018-08-11/index.html https://factoriomaps.com/user/Darkren/Multiplayer/2017-11-28/index.html

dgw commented 6 years ago

@jahands No pull request?

jahands commented 6 years ago

This gist has my template, but it's rather specialized to my use-case on factoriomaps.com

It would be pretty easy to integrate, but I haven't had time to update the mod.

jahands commented 6 years ago

My fork is also completely diverged from what public users would want because it only generates the max soon level and the rest of the zoom levels are generated by an external python script.