Static Attribution

Example of an attributions control with a static attribution

This example shows how to add an attribution that never disappears from the map. It works by passing a static string or HTML string into the attribution options, which is not linked to the layers. Click the 'Toggle layer' button to show that, even with no layers on, the static attribution remains on screen.

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Attribution from 'ol/control/Attribution.js';
import {defaults as defaultControls} from 'ol/control/defaults.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

const attribution = new Attribution({
  collapsible: false,
  attributions: `<a href="https://openlayers.org">I'm a static attribution. I never disappear</a>`,
});
const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  controls: defaultControls({attribution: false}).extend([attribution]),
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

document.getElementById('toggleLayerButton').addEventListener('click', () => {
  map.getLayers().forEach((l) => {
    l.setVisible(l.getVisible() ? false : true);
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Static Attribution</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <button id="toggleLayerButton">Toggle layer</button>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "static-attribution",
  "dependencies": {
    "ol": "10.5.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}