3 ms·

This is awesome. How did you work out the position of the maps so they overlay correctly?

• 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