Migrate from Google Maps API to an open source alternative

[TGRHavoc]

As of right now, the map is usable but certain features are disabled due to Google's crack down on keyless use of their APIs.

So, instead of making people (potentially) pay money to Google just to use the map, I want to migrate to a (preferably) open source alternative.

I've had a look around and at the moment, OpenLayers seems like the best alternative.

[JasonO99]

https://leafletjs.com/

Is this any good or not quite the thing you're looking for?

[davwheat]

That actually looks really good and performs well on my devices compared to Google's Dynamic Maps

…

On Sat, 17 Nov 2018, 15:15 Jason Olsen ***@***.*** wrote: https://leafletjs.com/ Is this any good or not quite the thing you're looking for? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#20 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHEE5q9C_sJ5_XC-5dAS-WNO7XOpiR0aks5uwCgngaJpZM4Wqid3> .

[JasonO99]

It has an option where you can use a single mapping image, avoids having to create tiles. For the simplicity of a 2d map that's probably good enough. You can then set your own coordinate range from corner to corner. All that in about 2 lines.

[davwheat]

That makes it waaay more simple! The issue is, do you go for a very high resolution image which might take a long time to load or a low resolution image that will load faster but look worse. On 17 Nov 2018 15:37, "Jason Olsen" <notifications@github.com> wrote: It has an option where you can use a single mapping image, avoids having to create tiles. For the simplicity of a 2d map that's probably good enough. You can then set your own coordinate range from corner to corner. All that in about 2 lines. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#20 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHEE5m8wyBZdylaAh0wCQP8rjK1PSlz2ks5uwC00gaJpZM4Wqid3> .

[matsn0w]

@davwheat tested an 2K pic which loaded quite good, so it will probably be fine

[davwheat]

I'll try to convert the map over then On 17 Nov 2018 15:45, "matsn0w" <notifications@github.com> wrote: @davwheat <https://github.com/davwheat> tested an 2K pic which loaded quite good, so it will probably be fine — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHEE5mbX78o5qXD481OJU5jYBog6V_6rks5uwC8egaJpZM4Wqid3> .

[JasonO99]

It's worth noting the tile option is still available too, should that be preferred.

[TGRHavoc]

Is this any good or not quite the thing you're looking for?

Hmmm... I'll have a look at this as well. Nice find.

It has an option where you can use a single mapping image, avoids having to create tiles

The plan was to just export GTA's map images and use them for the images which, would result in like 4 tiles instead of the however many there currently is. If we could make that into a single image and use that instead (think in total it would be 1024x1024 pixels) it would be the best of both worlds, easy exporting for custom maps such as the "postal" map and/or whatever other creations people have.

Mind you, OpenMaps has this as well so I would have to do a comparison of the two libraries to see which one best fits the resource (leaflet seems to be the better options ATM due to small size and easy integration, you mentioned two lines to get it working?)

That makes it waaay more simple! The issue is, do you go for a very high resolution image which might take a long time to load or a low resolution image that will load faster but look worse.

Well, the browser cache would hopefully help with that. If not, maybe we could implement a caching system with local storage or something so, it would only have to load the image once.

[JasonO99]

Regarding 2 lines. I fibbed - but it's no more than 5 for basic custom, single image, map layer.

var map = L.map('map', {
    crs: L.CRS.Simple
});
var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
map.fitBounds(bounds);

Source: https://leafletjs.com/examples/crs-simple/crs-simple.html

[davwheat]

I found that it's easier to use tiles as that's how the current map works. On 17 Nov 2018 17:38, "Jason Olsen" <notifications@github.com> wrote: Regarding 2 lines. I fibbed - but it's no more than 5 for basic custom, single image, map layer. var map = L.map('map', { crs: L.CRS.Simple }); var bounds = [[0,0], [1000,1000]]; var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map); map.fitBounds(bounds); Source: https://leafletjs.com/examples/crs-simple/crs-simple.html — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHEE5lCsjVfjVYWS08h8Ygc8TFlMfmE2ks5uwEmygaJpZM4Wqid3> .

[TGRHavoc]

Ok guys. I've been working on it a bit in my spare time and I've managed to get Leaflet.js to work.

So. We can either stay with the ungodly amount of images we currently have, and have zooming. Or, we can replace it with fewer images (at a higher resolution, like 1024x1024 each) and sacrifice the zooming feature?

I'm for one am happy just using the fewer images. It allows people to use the postal map (or whatever other map they choose) with real ease. They get the PNGs, pop it into a folder and add it to an array,
Example of the array:

    var map_tiles = {
        "Normal" : L.tileLayer("images/tiles/normal/minimap_sea_{y}_{x}.png", {maxNativeZoom: 0}), //Originally had the "tileSize" attribute set. Removing it allows for the "zoomed out" look
        "Postal" : L.tileLayer("images/tiles/postal/minimap_sea_{y}_{x}.png", {maxNativeZoom: 0})
    };

Actually. Doesn't matter. Whilst writing this, I found the solution to the zoom problem.

I will be committing the changes to the development branch soon:tm:. In the mean time, the video below is what you can expect the map to look like in future,

https://tgrhavoc.me/fuck_you/tit_wank/livemap_update_2.mp4

[matsn0w]

Awesome!

[davwheat]

How pleasant.

[Starystars67]

Nice work sir! Glad to see this is not a dead project!

[TGRHavoc]

Guys, if you want to test the new framework and stuff before I release it to everyone (want to get the other features done first) then, I'd check out the development branch. The new map should be working as of 163a39a.

The new tile image location are hard-coded into js/src/map.js (lines 24 and 25) at the minute. That will change in the future, and use the config's location.

The images can be extracted by yourselves. Just extract the PNG files from the YTD files inside GTA with OpenIV. Or, extract them from the YTD files for the custom maps. I highly suggest you use the minimap_sea files as they're a higher resolution than the normal minimap files.

If you're too lazy to extract yourself, I have a ZIP file containing the images used in the previous comment. It's attached to this comment as "tiles.zip".

tiles.zip