2 ms·
Thanks! It was a lot of fun and simultaneously a big headache. The original bounds came in a shape file from the city's open data catalog [1]. After that it
by eunoia 8y ago
Thanks! It was a lot of fun and simultaneously a big headache.
The original bounds came in a shape file from the city's open data catalog [1].
After that it becomes a multi step process that has to be repeated at each zoom level.
So say zoom level 20:
+ Size the image where 1 px = 1 mercator pixel @ zoom level
+ "Seat" the image. Map tiles are usually 256x256 and your large image probably does not align correctly. i.e. probably (width % 256 != 0 && height % 256 != 0). So you have to calculate those offsets and add them as a border to the huge image.
+ Tile the large image into 256x256px tiles. (~240k of them at zoom level 19!, 60k at 18 etc etc.)
+ Repeat @ next zoom level
+ Store all the raster tiles on S3 and put CloudFront in front
+ Have your app implement a custom tile overlay (iOS, Android, GMaps JS all support this)
+ ???
+ Profit (just kidding, this costs me money)
There might be a better way to do this. I couldn't find a lot of good resources when I set out on the project so I made it up as I went along.
[1] https://www.denvergov.org/opendata https://www.denvergov.org/opendata