Localized OpenStreetMap

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

#### Localized OpenStreetMap

Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.

The base layer is OpenCycleMap with an overlay from OpenSeaMap.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.layer.Tile
,
- ol.source.OSM

Copy Edit
Localized OpenStreetMap Example of a localized OpenStreetMap map with a custom tile server and a custom attribution. var openCycleMapLayer = new ol.layer.Tile({ source: new ol.source.OSM({ attributions: [ 'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>', ol.source.OSM.ATTRIBUTION ], url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + '?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here' }) }); var openSeaMapLayer = new ol.layer.Tile({ source: new ol.source.OSM({ attributions: [ 'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>', ol.source.OSM.ATTRIBUTION ], opaque: false, url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png' }) }); var map = new ol.Map({ layers: [ openCycleMapLayer, openSeaMapLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ maxZoom: 18, center: [-244780.24508882355, 5986452.183179816], zoom: 15 }) }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Localized OpenStreetMap</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>
        <script>
          var openCycleMapLayer = new ol.layer.Tile({
            source: new ol.source.OSM({
              attributions: [
                'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
                ol.source.OSM.ATTRIBUTION
              ],
              url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
                  '?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here'
            })
          });

          var openSeaMapLayer = new ol.layer.Tile({
            source: new ol.source.OSM({
              attributions: [
                'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>',
                ol.source.OSM.ATTRIBUTION
              ],
              opaque: false,
              url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
            })
          });

          var map = new ol.Map({
            layers: [
              openCycleMapLayer,
              openSeaMapLayer
            ],
            target: 'map',
            controls: ol.control.defaults({
              attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
              })
            }),
            view: new ol.View({
              maxZoom: 18,
              center: [-244780.24508882355, 5986452.183179816],
              zoom: 15
            })
          });
        </script>
      </body>
    </html>