Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Leaflet instead of Google Maps? #15

Open
NelsonMinar opened this issue Jul 8, 2017 · 30 comments
Open

Use Leaflet instead of Google Maps? #15

NelsonMinar opened this issue Jul 8, 2017 · 30 comments

Comments

@NelsonMinar
Copy link

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link

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

@NelsonMinar
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link

@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
Copy link

jahands commented Jul 1, 2018

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
Copy link

jahands commented Jul 1, 2018

@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
Copy link

dgw commented Jul 2, 2018

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
Copy link

jahands commented Jul 2, 2018

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

@NelsonMinar
Copy link
Author

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
Copy link

jahands commented Jul 17, 2018

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
Copy link

jahands commented Aug 4, 2018

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

@jahands
Copy link

jahands commented Aug 4, 2018

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
Copy link

jahands commented Aug 6, 2018

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
Copy link

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
Copy link

jahands commented Aug 6, 2018

@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
Copy link

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
Copy link

jahands commented Aug 6, 2018 via email

@dgw
Copy link

dgw commented Aug 12, 2018

@jahands No pull request?

@jahands
Copy link

jahands commented Aug 12, 2018

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
Copy link

jahands commented Aug 12, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants