CODEWITHSUNDEEP
openlayers-3
guru
guru

Reputation: 173

How to use local stored X/Y/Z.png tiles from OpenLayers 3

In the OpenStreetMap Wiki there is a nice example about how to use Local Tiles with OpenLayers, but this is for version 2 of OpenLayers. I'm looking for the same with OpenLayers 3. Are there any good examples of how to do this?

Thanks in advance.

Upvotes: 3

Views: 10003

Answers (3)

guru
guru

Reputation: 173

A working example code is:

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
       lang="en" dir="ltr">
   <head>
     <link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
     <style>
       .map {
         height: 256px;
         width: 256px;
       }
     </style>
     <script src="http://openlayers.org/en/v3.14.2/build/ol.js" type="text/javascript"></script>
     <title>OpenLayers 3 example</title>
   </head>
   <body>
     <h2>My Map</h2>
     <div id="map" class="map"></div>
         <!-- Map -->
         <script src="libraries/ol.js"></script>
         <script>
                 var map = new ol.Map({
                   layers: [
                         new ol.layer.Tile({
                                 source: new ol.source.OSM({
                                         url: '../Maps/OSM/{z}/{x}/{y}.png'
                                         })
                           })
                   ],
                   controls: [],
                   target: 'map',
                   view: new ol.View({
                    <!--
                         center: ol.proj.transform([11.622789, 48.052647], 'EPSG:4326', 'EPSG:3857'),
                    -->
                         center: ol.proj.fromLonLat([11.622789, 48.052647]),
                         zoom: 18,
                         minZoom: 1,
                         maxZoom: 20
                   })
                 });
         </script>
   </body>
 </html>

which works fine in the chrome browser:

chrome --allow-file-access-from-files 2nd.html

Upvotes: 0

Costales
Costales

Reputation: 2873

In openlayers 3 you can do this like this (you need access to local files from the browser):

var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
            url: 'maps/{z}/{x}/{y}.png'
    })
});

var map = new ol.Map({
    layers: [
    newLayer
    ],
  controls: [],
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([4.666389, 50.009167], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4,
    minZoom: 1,
    maxZoom: 20
  })
});

Upvotes: 7

Alvin Lindstam
Alvin Lindstam

Reputation: 3142

All decent browsers limit what a webpage can do with local files, for good reason. Allowing a webpage to read the contents of local files would open up severe privacy and security issues.

OpenLayers 3 works best with the default canvas renderer, which requires that the tiles are readable to the script.

You should be able to display local tiles with OpenLayers 3 if you use the DOM renderer. Note that only the canvas renderer supports vector data.

Upvotes: 0

Related Questions