I just set up local tile server following these instructions https://switch2osm.org/serving-tiles/building-a-tile-server-from-packages/ and I want to deploy OpenLayers on local too, such that it communicates with the local tile server.

So I got v3.5.0.zip from here: http://openlayers.org/download

I am looking where to modify the code in OpenLayers libraries to make them contact the local tile server. I am testing on example below. Can anyone help me to figure out how to make this set up?

I've tried to modify it by myself in a couple of places, but it didn't work

<!doctype html>
<html lang="en">
    <link rel="stylesheet" href="" type="text/css">
      .map {
        height: 400px;
        width: 100%;
    <script src="" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
        view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4

1 Answer 1


You just need to follow the official sample Localized OpenStreetMap.

You will just have to copy/paste the referenced sample in a new html file.

Then, if your tiles "root" is located at http://localhost/osm/, replace http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png with http://localhost/osm/{z}/{x}/{y}.png

Save and it should work by opening the file in your browser.

  • In this case I connect to the local tile server, but javascript libraries are loaded from other places. For example: <script src="cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></…>
    – Alex
    May 21, 2015 at 2:56
  • I want to load them from my local server, such that I can use maps without any connection to internet
    – Alex
    May 21, 2015 at 2:57
  • If you have an index.html at /var/www/, your js file /var/www/v3.5.0/build/ol.js and css file /var/www/v3.5.0/css/ol.css, you just have to use <link rel="stylesheet" href="v3.5.0/css/ol.css" type="text/css"> and <script src="v3.5.0/build/ol.js" type="text/javascript"></script>. You need to understand absolute/relative path (search using a search engine to know more). I also considered your are using Apache and /var/www/ should be replaced using Virtual Host configuration (do a search again)
    – ThomasG77
    May 21, 2015 at 17:02
  • I have my tiles in localhost/maps i had tried replacing tiles.openseamap.org/seamark{z}/{x}/{y}.png by mine. But when i see in browser, i cant see anything. My get request fails and its printed in console.
    – User123
    Dec 17, 2016 at 5:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.