Reusable Source

This example uses OpenLayers v4.0.1. The latest is v.

#### Reusable Source

Updating a tile source by changing the URL.

You can call `source.setUrl()` to update the URL for a tile source. Note that when you change the URL for a tile source, existing tiles will not be replaced until new tiles are loaded. If you are interested instead in clearing currently rendered tiles, you can call the `source.refresh()` method. Alternatively, you can use two separate sources if you want to remove rendered tiles and start over loading new tiles.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.layer.Tile
,
- ol.source.XYZ

Copy Edit
Reusable Source Updating a tile source by changing the URL. var urls = [ 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png', 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png', 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png', 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png' ]; var source = new ol.source.XYZ(); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: source }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); function updateUrl(index) { source.setUrl(urls[index]); } var buttons = document.getElementsByClassName('switcher'); for (var i = 0, ii = buttons.length; i < ii; ++i) { var button = buttons[i]; button.addEventListener('click', updateUrl.bind(null, Number(button.value))); } updateUrl(0); <div id="map" class="map"></div> <button class="switcher" value="0">January</button> <button class="switcher" value="1">January (with bathymetry)</button> <button class="switcher" value="2">July</button> <button class="switcher" value="3">July (with bathymetry)</button>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Reusable Source</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <button class="switcher" value="0">January</button>
        <button class="switcher" value="1">January (with bathymetry)</button>
        <button class="switcher" value="2">July</button>
        <button class="switcher" value="3">July (with bathymetry)</button>
        <script>
          var urls = [
            'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png',
            'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png',
            'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png',
            'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png'
          ];

          var source = new ol.source.XYZ();

          var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: source
              })
            ],
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          function updateUrl(index) {
            source.setUrl(urls[index]);
          }

          var buttons = document.getElementsByClassName('switcher');
          for (var i = 0, ii = buttons.length; i < ii; ++i) {
            var button = buttons[i];
            button.addEventListener('click', updateUrl.bind(null, Number(button.value)));
          }

          updateUrl(0);
        </script>
      </body>
    </html>