Programming zoom levels and fitting points
Last week I started adding content to the front page. In PHP, I programmed a script to pull the latest 6 places from the database, grab their main photo and display it with a link to the page. I also grabbed the coordinates for each place and put them all on a map. The general way this is done on other sites is to give each place a number and have a special pin for that number. Maybe later I’ll do that.
Now, the coordinates of the centre of the map, and the zoom level of the map are fixed, so that it shows most of Tokyo and a bit of Chiba. Of course this isn’t ideal, since any places outside this area won’t be shown. So one of the next things I’ll be working on is a way to dynamically centre and zoom the map so that all points are shown, and the zoom isn’t too wide that they all squish together.
How to do this? Thinking about it, the obvious solution is to get the biggest and smallest latitude and longutude and find their centres. This will be the centre point of the map.
For example, if I have these points:
1,2
5,2
3,8
1,7
5,1
The biggest latitude is 5 and the smallest is 1. The centre of these is 3. The biggest longitude is 8 and the smallest 2, giving a centre of 5. So I get a centre point of 3,5.
The zoom is more difficult, as google maps uses a number from 1 to 20 as the zoom. I still don’t know how to correlate the zoom number and latitude and longitude. I’m going to have to find a funciton in the gmaps API that let’s me enter in a top and side latitude, either that or work out how to correlate the two.
One thing I do know is that when you have the centre point, and you know the points at the extremities, you still have to give the points a little extra space, so they don’t bump against the sides of the map. 10 or 15% seems about right for this.
So in the above example, I have latitude extremes of 1 and 5, and longitude extremes of 2 and 8. If my maps on the page is square shaped (e.g. 500px x 500px) it’s easy to see that I have to accommodate the longitude and not worry about the latitude (since the longitude is much bigger). But what about a map size of 640px x 480px? Now I have a wide map, so is the longitude still important?
To figure this out I need to think about ratios. Compare 640×480 (640 wide by 480 tall) to 5×5. Obviously the height is the constraining factor. But what about 640×480 and 5×3? If you divide the height by the width, you can figure it out easily.
640/480 = 1.333
5/5 = 1
5/3 = 1.66
5/1 = 5
If you divide and get a lower number, the height is important. If you get a higher number, the width is important. To do this calculation, you need to know beforehand what the dimensions of the map are going to be. Now all I have to do is make a function out of this.
No Comments Yet