Openstreetmap: embed a map on a web page (e.g. Google Maps)

Question

Is there a way to embed / mashup OpenStreetMap on your page (e.g. the Google Maps API is working )?

I need to show a map inside my page with some markers and allow drag / drop around, possibly routing. I suspect there will be some kind of Javascript API for this, but I cannot find it.

The search gets me an API for accessing the raw map data , but it is like editing the map; besides, working with this would be a daunting task for AJAX.

Answer 1

You need to use some JavaScript materials to show your map. OpenLayers is number one for this.

There is an example at http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example and something more advanced in

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

and

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Answer 2

There is now also a Leaflet , which is built with mobile in mind.

The leaflet has a Quick Guide . In addition to basic functions, such as tokens, with plugins, it also supports routing with an external service.

For simple display, IMHO is easier and faster to set up than OpenLayers, but fully customizable and customizable for more complex purposes.

Answer 3

Simple OSM Slippy Map Demo / Example

Click "Run Code Snippet" to see the built-in OpenStreetMap stickiness map with a marker on it. It was created using Leaflet .

The code

// Where you want to render the map. var element = document.getElementById('osm-map'); // Height has to be set. You can do this in CSS too. element.style = 'height:300px;'; // Create Leaflet map on map element. var map = L.map(element); // Add OSM tile leayer to the Leaflet map. L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // Target GPS coordinates. var target = L.latLng('47.50737', '19.04611'); // Set map center to target with zoom 14. map.setView(target, 14); // Place a marker on the same location. L.marker(target).addTo(map); 

 <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/> <div id="osm-map"></div> 

Speculation

• Uses OpenStreetMaps.
• Center the map to the GPS target.
• Places a marker on a GPS target.

Note:

I used the CDN version of Leaflet here, but you can download the files so that they can be served and included from your own host.

Answer 4

Look at mapstraction . This may give you more options for providing maps based on Google, OSM, Yahoo, etc., however, your code will not need to be changed.

Answer 5

I will also look at CloudMade's developer tools . They offer a beautifully designed OSM basemap, an OpenLayers plugin, and even their own lightweight, very fast JavaScript mapping client. They also host their own routing service, which you mentioned as a possible requirement. They have excellent documentation and examples.

Answer 6

You can use OpenLayers (js API for maps).

There's an example on the page that shows how to embed OSM tiles.

Answer 7

If you just want to insert an OSM map into a web page, the easiest way is to get the iframe code directly from the OSM website:

1. Go to the desired map at https://www.openstreetmap.org
2. On the right side, click the Share icon, then click HTML
3. Copy the resulting iframe code directly to your web page. It should look like this:

 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" style="border: 1px solid black"></iframe> <br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small> 

If you want to do something more complicated, see the OSM Wiki Deploying Your Own Slippy Card .

Answer 8

There is an easy way to do this if you are scared of Javascript ... I'm still learning. Open Street makes a simple plugin for Wordpress that you can customize. Add the OSM Widget plugin.

This will be filling until I figure out my mix of Python Java using the TIGER line files created by cover from the Census Bureau.