openstreetmap for your website

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.

9 responses to “openstreetmap for your website

  1. Hey, thanks for linking to my site.

    And thanks for all your work with Open Street Map, the maps of the Philippines are great and I think they’re going to prove really useful when I move across there in a few months.

  2. Pingback: geofumadas » Blog Archive » Geofumadas al vuelo, enero 2009·

  3. Pingback: DIY garmin routable map from openstreetmap data « 4253·

  4. Pingback: Greşeli frecvente pe semi site-urile de turism electronic (IV) | Ghid Turistic Digital 2.0·

  5. Pingback: FossFolks.com » Using Open Street Map on a Website·

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s