murtnowski / gmap-jslicer

Image to Google Maps powered by javascript

GMap-JSlicer

Image to Google Maps powered by javascript

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

Allows you to view an image as a Google Map without have to do any pre-tiling or server-side work. Its quick and simple to implement.

This is not production ready and really should be only used as a code sample. However is does work.

We take a IMG element of the image we want to mapify then use Canvas to generate the necessary tiles used by Google Maps when rendering. The entire process is done client side in Javascript.

Eventually when Web Workers get better support for Canvas, we will use them to improve performance.

Also on some mobile device won't load images over a certain size. The iPhone is limited to width * height ≤ 3 * 1024 * 1024

See it in the wild: http://gvgmaps.com/

gmap-jslicer's Issues

Mobile Resource Limit

Due to iOS resource limits

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

GIF, PNG, and TIFF images can't load if width * height ≤ 3 * 1024 * 1024.

Rengineering of the downloadImage function is needed to get around this limitation

Making the map smaller

Thanks for this awesome script.

Currently the image occupies the entire map, making Google Map think that it is an entire planet. Makers, when dropped on the map, repeat across the left and right. Drawing circles near the top and bottom of the image create massive distortions as Google thinks we are near the poles.

One solution that I thought of was to make the image tiles smaller, making the entire image smaller. This way, the coordinates on the map are more representative of a flat surface (instead of a sphere). However, I could not center the new, smaller, image map in the view port. Any suggestions?