I have a question about Openlayers3 , I have the below code that initializes my map on my small demo application:

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
    view: view

You can see a demo HERE

Now my question is how do I get the Tile url , so that I can store it locally using localstorage ? how do I get the Tile url ?

I saw the ol.TileUrlFunctionType() , but I am not sure how to use it ? can anybody help me understand how to get the tile url ? (can can play around in the Chrome Developer Tools for the demo that I have provided.)


Just get the source with

// From the map we get all layers, then take the first one
// (index 0 in item) and then access the source
var source = map.getLayers().item(0).getSource()

Then, get urls with


We deduced this from the API for the OSM source.


To get each individual tiles, do

var source = map.getLayers().item(0).getSource()
var tileUrlFunction = source.getTileUrlFunction()
source.on('tileloadend', function (evt) {
    console.log(tileUrlFunction(evt.tile.getTileCoord(), 1, ol.proj.get('EPSG:3857')));

Where evt.tile.getTileCoord() is an array of [z, x, y], 1 the pixelRatio (1 if not on Retina) and ol.proj.get('EPSG:3857'), the getter for projection used in OpenStreetMap. you can replace the 1 with ol.has.DEVICE_PIXEL_RATIO in fact, to "automagically" get the "right" ratio.

Again, deduced from the API e.g the TileUrlFunctionType part. Forgot also to mentioned the tileloadend event documentation

  • that workedd just fine , any idea , how to store the tiles locally ? in openlayers3 ? – Tenali Raman Oct 26 '15 at 16:39
  • OpenLayers 3 doesn't provide function for storing tiles locally. You will need storage from HTML5 (but limited because restrictions on data size you can store) or through a DB via direct access (like in Cordoba) or via a local web service – ThomasG77 Oct 26 '15 at 17:00
  • i don't see any method by the name of tileUrlFunction in the documentation , also that line throws an error . thanks for the tip though and yeah , the change event does fire ! – Tenali Raman Oct 28 '15 at 8:57
  • You were right. I just forgot to cut & paste some lines, hence the wrong behaviour. Corrected now, confirm please? Tried on my side at openlayers.org/en/v3.10.1/examples/simple.html – ThomasG77 Oct 28 '15 at 14:22
  • works thanks :) but i must say openlayers has some danm complex syntax ... i meanso many objects inside objects inside object ! danm ! – Tenali Raman Oct 29 '15 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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