Map controls for a single image with OpenLayers

For a demo recently I needed to display a map, have pan/zoom controls, add markers and overlays etc etc. Google Maps (or similar) to the rescue right? Not in this case. Unfortunately the place wasn’t real, it was a location within the Battlefield 2 game being used for some simulation of research we were doing. Now I know it’s possible to use something like Google Maps to display my own map tiles etc but it looked complicated and I think I’d have to pretend I was working with real latitude/longitudes etc. Then I stumbled upon OpenLayers. I actually knew about OpenLayers before, as an open-source client-side library for mapping controls. What I didn’t realise was how flexible it was and that I could simply give it a single image and my own coordinate system and then let it do all the rest. This example from the handy list of OpenLayers examples demonstrates how it works in just a few lines of JavaScript. Perfect.

3 thoughts on “Map controls for a single image with OpenLayers

      • The image size is set to:

        OpenLayers.Size(799, 530)

        And I set the bounds to:

        OpenLayers.Bounds(-400, -265, 399, 265)

        And that seems to center the image on the map. Thank you!!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s