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).
The following example exploits Leaflet to show OpenStreetMap data.
Default tiles can be replaced with your tile server ones by changing
https://{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.
The following example exploits OpenLayers to show OpenStreetMap data.
Default tiles can be replaced with your tile server ones by changing
https://{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.
Example of using Google Maps API to show OpenStreetMap data.
Default tiles can be replaced with your tile server ones by changing
https://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.
Example of using Bing Maps to show OpenStreetMap data.
Default tiles can be replaced with your tile server ones by changing
https://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.
Example of using Mapbox API to show OpenStreetMap data.
Default tiles can be replaced with your tile server ones by changing
https://{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.
Example of using Carto API to show OpenStreetMap data.
Default tiles can be replaced with your tile server ones by changing
https://{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.
Example of using ESRI ArcGIS API to show OpenStreetMap data.
Default tiles can be replaced with your tile server ones by changing
https://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.
useful information taken form Getting started with Leaflet and from Getting started with OpenLayers ↩