pan control for hextiles

337 views Asked by At

I need to render a large number of hextiles on a canvas. I would like to make this such that I render only the tiles that are visible to the user and load additional hextiles as the user scrolls (using drag or arrow keys or a pan control). I've the basic idea in my head but I'm looking for help in coming up with a more robust solution that will scale well.

What I have in mind and can do right now:

a. identify the tiles that need to be loaded to the screen and get the data for rendering them from the server b. when the user drags, figure out the new set of tiles that need to be loaded and get the data and reload the whole screen again.

This works but it doesn't give the feeling of scrolling - it essentially suddenly repositions everything. Ideally, I would like to get the feeling of google maps when scrolling this. I've been playing with loading some tiles on the side off the map and only scrolling the underlying canvas when dragging but this doesn't work too well because the canvas runs out... it would be really neat if I had a canvas that behaved like a circular buffer so scrolling in any direction only kept a certain number of tiles in memory and I can continuously scroll in all directions.

Any thoughts or helpful hints are much appreciated.

Thanks!

1

There are 1 answers

2
shaunhusain On

I would suggest using the Google Maps Flash API as the starting point for this. You can create a CustomTileLayer and if you have a single large source image you can search around for image pyramid makers that will slice up your image into samples for different zoom levels (usually I believe it ends up creating a folder structure that uses the zoom level as the folder name and then has x,y tiles in each folder depending on the res of the image and zoom level). If zooming isn't a requirement in any way you'd just have a single zoom level and would want to disable any zoom controls in the Map control. Let me know if there's a reason you're avoiding this or believe it to not be a good solution (possibly just weren't aware of it's existence but I figure if you want something like how google maps behaves, why not use google maps as the basis). If you need more help with this after digging in let me know and I'll be happy to help, I haven't ever implemented a CustomTileLayer myself but have a bit of experience with the Google Maps Flash API (it's flex as well make sure you use the right swc one is Flash only the other is Flex don't include both).

Good luck, Shaun

http://nl-samples.googlecode.com/svn/trunk/flexmap/9a/bin-release/CustomProjection.html