OpenStreetMap Carto Tutorials - OpenStreetMap Carto documentation     Site map    

JavaScript libraries for implementing OSM interactive maps

JavaScript libraries for implementing OSM interactive maps

A number of client JavaScript libraries can be used to interactively show OpenStreetMap tiled web maps1. Each configuration in this document points to the OSM tile server (tile.openstreetmap.org) with a note on how to reconfigure the related script to connect your own tile server (http://your-server-ip/osm_tiles).

Leaflet

The following example exploits Leaflet to show OpenStreetMap data.

Default tiles can be replaced with your tile server ones by changing

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

to http://your-server-ip/osm_tiles/{z}/{x}/{y}.png.

To edit the sample, click on Edit in JSFiddle. Then in the Javascript panel modify the string inside quotes as descripted above. Press Run.

OpenLayers

The following example exploits OpenLayers to show OpenStreetMap data.

Default tiles can be replaced with your tile server ones by changing

http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png

to http://your-server-ip/osm_tiles/{z}/{x}/{y}.png.

To edit the sample, click on Edit in JSFiddle. Then in the Javascript panel modify the string inside quotes as descripted above. Press Run.

Google Maps API

Example of using Google Maps API to show OpenStreetMap data.

Default tiles can be replaced with your tile server ones by changing

http://tile.openstreetmap.org/

to http://your-server-ip/osm_tiles/.

To edit the sample, click on Edit in JSFiddle. Then in the Javascript panel modify the string inside quotes as descripted above. Press Run.

Bing Maps

Example of using Bing Maps to show OpenStreetMap data.

Default tiles can be replaced with your tile server ones by changing

http://tile.openstreetmap.org/

to http://your-server-ip/osm_tiles/.

To edit the sample, click on Edit in JSFiddle. Then in the Javascript panel modify the string inside quotes as descripted above. Press Run.

Mapbox API

Example of using Mapbox API to show OpenStreetMap data.

Default tiles can be replaced with your tile server ones by changing

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

to http://your-server-ip/osm_tiles/{z}/{x}/{y}.png.

To edit the sample, click on Edit in JSFiddle. Then in the Javascript panel modify the string inside quotes as descripted above. Press Run.

Carto API

Example of using Carto API to show OpenStreetMap data.

Default tiles can be replaced with your tile server ones by changing

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

to http://your-server-ip/osm_tiles/{z}/{x}/{y}.png.

To edit the sample, click on Edit in JSFiddle. Then in the Javascript panel modify the string inside quotes as descripted above. Press Run.

ESRI ArcGIS API

Example of using ESRI ArcGIS API to show OpenStreetMap data.

Default tiles can be replaced with your tile server ones by changing

http://tile.openstreetmap.org/

to http://your-server-ip/osm_tiles/.

To edit the sample, click on Edit in JSFiddle. Then in the Javascript panel modify the string inside quotes as descripted above. Press Run.


Footnotes

  1. useful information taken form Getting started with Leaflet and from Getting started with OpenLayers 


Please, avoid using Disqus below to notify issues on this page, just use it for general comments. Create a GitHub issue instead. This is the most effective way to track problems.
comments powered by Disqus