openstreetmap for your website

by maning

Some prospective foreign tourist is scouting for good resorts around Zambales. While there are a lot of beaches and possible destinations, our traveller found out that most resorts don’t have any decent instructions on how to get there.

So here’s my tip, use openstreemap.

An image map to a webpage
1. Simply browse the map, check if your resort is there. Zoom in to the approximate area of your resort.
2. Select the export tab.
3. In the “Format to Export”, select either “mapnik” or “osmarender image”. Choose an image format.
4. The image map will be downloaded and you can now add them to your “contact” / “where” page.

Slippy map ala googlemap
1. Follow steps 1 and 2 above.
2. In the format to export, select “Embeddable HTML”.
3. You can also add a marker as an option.
4. An HTML code will be provided similar to this:

<small><a href="http://www.openstreetmap.org/?lat=12.1&lon=123.01&zoom=5&layers=B000FTFTT&mlat=14.60921&mlon=121.14232">View Larger Map</a></small>

5. Paste the HTML code to your “contact” / “where” page.

See it in action here and here (my wordpress account doesn’t allow me to embed it here).

But my resort isn’t mapped yet?
Then start mapping it! Or, talk to us. If you can give us free beer and an overnight stay, we can map them for you ;D.

UPDATE:
From the Openstreetmap Philippines, you can now easily create a map widget by pasting the HTML code just like this one . The place index is for the Philippines only.