<|start_filename|>examples/datafordeler.html<|end_filename|>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Datafordeler</title><link href="./prism.css" rel="stylesheet"><link href="./example.css" rel="stylesheet"><script src="./clipboard.min.js"></script><script src="./prism.js"></script><link href="../lib/okapi-1.5.0.min.css" rel="stylesheet"><script src="../lib/okapi-1.5.0.min.js"></script></head><body><div><div id="map" class="geomap" data-username="InsertYourUsernameHere" data-password="<PASSWORD>" style="height: 400px;" data-layerswitcher="true"></div><script>var maps = new okapi.Initialize({});</script></div><div><pre>
        <code class="language-markup">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
    &lt;title&gt;Simple&lt;/title&gt;
    &lt;script src=&quot;https://okapi.kortforsyningen.dk/lib/okapi-1.5.0.min.js&quot;
      integrity=&quot;sha384-nJI5MxfzjVBvjIihT+INfBIMdhsV50e0ZSCvsv1QaIYiu9zQ0TUSPSOryAF6spGb&quot;
      crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://okapi.kortforsyningen.dk/lib/okapi-1.5.0.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;div
      id=&quot;map&quot;
      class=&quot;geomap&quot;
      data-username=&quot;InsertYourUsernameHere&quot;
      data-password=&quot;<PASSWORD>&quot;
      style=&quot;height: 400px;&quot;
      data-layerswitcher=&quot;true&quot;&gt;
    &lt;!--
    Udskift data-username= og data-password med dit eget brugernavn og password fra Datafordeleren.
    Hvis ikke du har en bruger på datafordeleren kan du se hvordan du opretter en her:
    https://confluence.datafordeler.dk/pages/viewpage.action?pageId=13665234
    Brugernavn og password i dette eksempel er midlertidig og udelukkende til test brug.

    English
    Replace the data-username= and data-password with your own username and password from the Datafordeler.
    If you do not have a user already you can read how to create one here:
    https://confluence.datafordeler.dk/pages/viewpage.action?pageId=13665234
    The username and password in this example is temporary and solely for test use.
    --&gt;
    &lt;/div&gt;

    &lt;script&gt;
      var maps = new okapi.Initialize({});
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;

        </code>
      </pre></div><script>(function(){
        Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
          var linkCopy = document.createElement('a');
          linkCopy.textContent = ' Copy';

          if (!ClipboardJS) {
            callbacks.push(registerClipboard);
          } else {
            registerClipboard();
          }

          return linkCopy;

          function registerClipboard() {
            var clip = new ClipboardJS(linkCopy, {
              'text': function () {
                return env.code;
              }
            });


            clip.on('success', function() {
              linkCopy.textContent = ' Copied!';
            });
          }
        });
      })();</script></body></html>

<|start_filename|>src/Initialize.js<|end_filename|>
import Map from './Map'

export default class Initialize {
  constructor(opt) {

    // Push the marker DOM elements into an array.
    const markerElementsO = document.querySelectorAll('span.geomarker')

    // Target all map dom elements with the geomap class set
    const mapElementsO = document.querySelectorAll('div.geomap')

    // IE support
    const markerElements = []

    for (let i = 0; i < markerElementsO.length; i++) {
      markerElements.push(markerElementsO[i])
    }
    const mapElements = []

    for (let i = 0; i < mapElementsO.length; i++) {
      mapElements.push(mapElementsO[i])
    }

    let markers = []

    markerElements.forEach(function (element) {
      const dataset = element.dataset
      let marker = {}

      for (let key in dataset) {
        if (key === 'lat' || key === 'lon') {
          marker[key] = Number(dataset[key])
        } else {
          marker[key] = dataset[key]
        }
      }
      markers.push(marker)
    }, markers)

    const maps = []

    mapElements.forEach(function (element) {
      // Filter relevant markers
      const types = (typeof element.dataset.type === 'undefined') ? [''] : element.dataset.type.split(',')
      const filteredMarkers = markers.filter(function (marker) {
        return marker.type ? (marker.type.indexOf(types) > -1) : true
      }, types)
      const overlays = (typeof element.dataset.overlays === 'undefined') ? [''] : element.dataset.overlays.split(',')
      const filteredOverlays = opt.overlays ? opt.overlays.filter(function (e) {
        return e.name ? (e.name.indexOf(overlays) > -1) : true
      }) : []

      const autoView = element.dataset.center === 'auto'
      const center = element.dataset.centerLon ? [
        Number(element.dataset.centerLon),
        Number(element.dataset.centerLat)
      ] : 'auto'

      this._map = new Map({
        target: element.id,
        token: element.dataset.token,
        username: element.dataset.username,
        password: <PASSWORD>,
        background: element.dataset.background,
        icons: opt.icons,
        overlays: filteredOverlays,
        markers: filteredMarkers,
        popup: opt.popup,
        showPopup: element.dataset.showPopup !== 'false',
        zoomSlider: element.dataset.zoomslider === 'true',
        fullScreen: element.dataset.fullscreen === 'true',
        myLocation: element.dataset.mylocation === 'true',
        scaleLine: element.dataset.scaleline === 'true',
        layerSwitcher: element.dataset.layerswitcher === 'true',
        extent: element.dataset.extent ? JSON.parse(element.dataset.extent) : null,
        view: {
          center: autoView ? 'auto' : center,
          zoom: element.dataset.zoom
        }
      })
      maps.push(this._map)
    }, opt, markers)
    return maps
  }
}


<|start_filename|>src/Map.js<|end_filename|>
import OlMap from 'ol/Map'
import View from 'ol/View'
import Group from 'ol/layer/Group'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import proj4 from 'proj4/dist/proj4'
import { register } from 'ol/proj/proj4'
import { get as getProjection } from 'ol/proj'
import { createEmpty, extend } from 'ol/extent'
import {defaults as defaultControls, ScaleLine, ZoomSlider, Attribution, FullScreen} from 'ol/control'
import MyLocation from './control/MyLocation'
import LayerSwitcher from './control/LayerSwitcher'
import CreateMarkers from './control/markers/CreateMarkers'
import { createLayer } from './CreateLayer'
import { fromLonLat } from 'ol/proj'
import CreateMarkerTooltip from './control/markers/CreateMarkerTooltip'
import { Center, Extent, Resolutions, MatrixIds } from './constants'
import VectorLayer from 'ol/layer/Vector'

import 'ol/ol.css'
import './Map.styl'
import './ZoomSlider.styl'
import './ScaleLine.styl'
import './FullScreen.styl'
import { none } from 'ol/centerconstraint'

export default class Map {

  constructor(opt) {
    const background = opt.background || ''
    const zoomSlider = typeof opt.zoomSlider === 'undefined' ? true : opt.zoomSlider
    const scaleLine = typeof opt.scaleLine === 'undefined' ? true : opt.scaleLine
    const layerSwitcher = opt.layerSwitcher || false
    const myLocation = typeof opt.myLocation === 'undefined' ? true : opt.myLocation
    const view = opt.view
    const autoCenter = view && view.center === 'auto'
    const center = (view && typeof view.center !== 'string') ?
      (view.center || Center) : Center
    const autoZoom = view && view.zoom === 'auto'
    const overrideExtent = opt.extent || false

    this.zoom = view ? view.zoom || 2 : 2
    const fullScreen = typeof opt.fullScreen === 'undefined' ? true : opt.fullScreen
    const markers = opt.markers || []
    const icons = opt.icons || {}
    const popup = opt.popup || null
    const showPopup = typeof opt.showPopup === 'undefined' ? true : opt.showPopup

    this._target = opt.target || 'map'
    this._source = opt.source || 'kf'
    this._token = opt.token || ''
    this._username = opt.username || ''
    this._password = opt.password || ''
    this.autocenter = autoCenter
    this.autoZoom = autoZoom

    proj4.defs('EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs')
    register(proj4)
    const projection = getProjection('EPSG:25832')

    projection.setExtent(Extent)

    const kfTileGrid = new WMTSTileGrid({
      extent: Extent,
      resolutions: Resolutions,
      matrixIds: MatrixIds
    })
    const dfTileGrid = new WMTSTileGrid({
      extent: Extent,
      resolutions: Resolutions,
      matrixIds: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']
    })
    const kfAuth = {
      source: 'kf',
      token: this._token
    }
    const dfAuth = {
      source: 'df',
      username: this._username,
      password: this._password
    }
    const layers = []

    if (this._username && this._password) {
      layers.push(createLayer({
        name: 'dtk_skaermkort',
        type: 'WMTS',
        title: 'Skærmkort',
        visible: background === 'dtk_skaermkort',
        service: 'DKskaermkort/topo_skaermkort_wmts/1.0.0/Wmts',
        layer: 'topo_skaermkort',
        matrixSet: 'View1',
        format: 'image/jpeg',
        tileGrid: dfTileGrid,
        auth: dfAuth
      }))
      layers.push(createLayer({
        name: 'dtk_skaermkort_daempet',
        type: 'WMTS',
        title: 'Skærmkort dæmpet',
        visible: background !== 'orto_foraar' && background !== 'forvaltning' &&
        background !== 'dtk_skaermkort',
        service: 'DKskaermkort/topo_skaermkort_daempet/1.0.0/Wmts',
        layer: 'topo_skaermkort_daempet',
        matrixSet: 'View1',
        format: 'image/jpeg',
        tileGrid: dfTileGrid,
        auth: dfAuth
      }))
      layers.push(createLayer({
        name: 'orto_foraar',
        type: 'WMTS',
        title: 'Ortofoto',
        color: 'white',
        visible: background === 'orto_foraar',
        service: 'GeoDanmarkOrto/orto_foraar_wmts/1.0.0/Wmts',
        layer: 'orto_foraar_wmts',
        matrixSet: 'KortforsyningTilingDK',
        format: 'image/jpeg',
        tileGrid: dfTileGrid,
        auth: dfAuth
      }))
    } else if (this._token) {
      layers.push(createLayer({
        name: 'dtk_skaermkort',
        type: 'WMTS',
        title: 'Skærmkort',
        visible: background === 'dtk_skaermkort',
        service: 'topo_skaermkort_wmts_DAF',
        layer: 'topo_skaermkort',
        matrixSet: 'View1',
        format: 'image/jpeg',
        tileGrid: kfTileGrid,
        auth: kfAuth
      }))
      layers.push(createLayer({
        name: 'dtk_skaermkort_daempet',
        type: 'WMTS',
        title: 'Skærmkort dæmpet',
        visible: background !== 'orto_foraar' && background !== 'forvaltning' &&
        background !== 'dtk_skaermkort',
        service: 'topo_skaermkort_daempet_DAF',
        layer: 'topo_skaermkort_daempet',
        matrixSet: 'View1',
        format: 'image/jpeg',
        tileGrid: kfTileGrid,
        auth: kfAuth
      }))
      layers.push(createLayer({
        name: 'orto_foraar',
        type: 'WMTS',
        title: 'Ortofoto',
        color: 'white',
        visible: background === 'orto_foraar',
        service: 'orto_foraar_wmts_DAF',
        layer: 'orto_foraar_wmts',
        matrixSet: 'KortforsyningTilingDK',
        format: 'image/jpeg',
        tileGrid: kfTileGrid,
        auth: kfAuth
      }))
    }
    if (this._token) {
      layers.push(createLayer({
        name: 'forvaltning',
        type: 'WMS',
        title: 'Basiskort',
        visible: background === 'forvaltning',
        service: 'forvaltning2',
        layer: 'basis_kort',
        format: 'image/png',
        auth: kfAuth
      }))
    }

    const overlays = []

    if (opt.overlays) {
      opt.overlays.forEach(function (e) {
        if (e.source === 'kf') {
          e.auth = kfAuth
          e.tileGrid = kfTileGrid
        } else if (e.source === 'df') {
          e.auth = dfAuth
          e.tileGrid = dfTileGrid
        }
        overlays.push(createLayer(e))
      })
    }

    this._map = new OlMap({
      target: this._target,
      layers: [
        new Group({
          'title': 'Base maps', // This title of the group is shown in the layer switcher
          layers: layers
        }),
        new Group({
          'title': 'Kort',
          layers: overlays
        }),
        new Group({
          'title': 'Hidden',
          layers: []
        })
      ],
      controls: defaultControls({ attribution: false, zoom: zoomSlider }),
      view: new View({
        center: fromLonLat(center, 'EPSG:25832'),
        zoom: this.zoom,
        resolutions: kfTileGrid.getResolutions(),
        projection: projection,
        extent: overrideExtent ? overrideExtent : Extent
      })
    })
    this._map.addControl(new Attribution({ collapsible: false }))
    scaleLine && this._map.addControl(new ScaleLine())
    zoomSlider && this._map.addControl(new ZoomSlider())
    fullScreen && this._map.addControl(new FullScreen())
    myLocation && this._map.addControl(new MyLocation({ zoomSlider: zoomSlider }))
    this._layerSwitcher = new LayerSwitcher({ visible: layerSwitcher })
    this._map.addControl(this._layerSwitcher)
    this.markerLayers = CreateMarkers(markers, icons, this)
    const _this = this

    this.markerLayers.forEach(function (layer) {
      _this._map.addLayer(layer)
    })
    showPopup && CreateMarkerTooltip(this, popup)

    this.autoCenter()

    this._map.on('click', function (evt) {
      const focus = document.activeElement

      focus.blur()
    })

    if (zoomSlider) {
      this.adjustControlsCss()
    }
  }

  addVectorLayer(vector, styles, name) {
    this._map.addLayer(new VectorLayer({
      name: name,
      visible: false,
      source: vector,
      style: styles
    }))
  }

  getVectorLayer(name) {
    return this._map.getLayers().getArray().find(function (e) {
      return e.get('name') === 'name'
    })
  }

  autoCenter() {
    if (!this.autocenter || !this.markerLayers[0]) {
      return
    }
    const extent = createEmpty()

    this.markerLayers.forEach(function (layer) {
      extend(extent, layer.getSource().getExtent())
    })
    if (extent[0] === Infinity) {
      return
    }
    this._map.getView().fit(extent)
    this._map.getView().setZoom(Math.floor(this._map.getView().getZoom()))
    if (!this.autoZoom) {
      this._map.getView().setZoom(this.zoom)
    }
    this._map.updateSize()
  }

  toggleBackground(background) {
    this._layerSwitcher.toggleBackground(background)
  }

  toggleLayer(layer, value) {
    const layers = this._map.getLayers().getArray()
    const vectorLayer = layers.find(function (e) {
      return e.get('name') === layer
    })

    if (vectorLayer) {
      vectorLayer.setVisible(value)
      return
    }
    const overlays = layers.find(function (e) {
      return e.get('title') === 'Kort'
    })

    overlays.get('layers').getArray().forEach(function (e, idx, a) {
      if (e.get('name') === layer) {
        e.setVisible(value)
      }
    })
  }

  adjustControlsCss() {
    const slider = document.getElementsByClassName("ol-zoomslider")[0]
    const button = document.getElementsByClassName("ol-zoom-out")[0]
    const myLoc = document.getElementsByClassName("ol-my-location")[0]
    const mapHeight = document.getElementById(this.target).offsetHeight
    if (mapHeight < 300) {
      slider.style.display = none
      if (myLoc) {
        myLoc.style.bottom = '97px'
      }
    } else {
      const m = Math.floor(mapHeight * 0.25) + 6 + 'px' //25% + 6px
      button.style.marginTop = m
    }
  }

  get olMap() {
    return this._map
  }

  get target() {
    return this._target
  }
}


<|start_filename|>examples/overlay.html<|end_filename|>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Overlay</title><link href="./prism.css" rel="stylesheet"><link href="./example.css" rel="stylesheet"><script src="./clipboard.min.js"></script><script src="./prism.js"></script><link href="../lib/okapi-1.5.0.min.css" rel="stylesheet"><script src="../lib/okapi-1.5.0.min.js"></script></head><body><div><div id="map" class="geomap" data-overlays="dhm" data-token="<PASSWORD>" style="height: 400px;" data-background="orto_foraar"></div><div><input type="checkbox" id="checkbox" checked="checked"> <label for="checkbox">Stednavne</label></div><script>var maps = new okapi.Initialize({
        overlays: [
          {
            name: 'dhm',
            type: 'WMS',
            title: 'Stednavne',
            visible: true,
            service: 'forvaltning2',
            layer: 'Stednavne_basiskort',
            format: 'image/png',
            source: 'kf'
          }
        ]
      });

      const checkbox = document.getElementById('checkbox')
      checkbox.addEventListener('change', function (e) {
        maps[0].toggleLayer('dhm', this.checked)
      })</script></div><div><pre>
        <code class="language-markup">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
    &lt;title&gt;Simple&lt;/title&gt;
    &lt;script src=&quot;https://okapi.kortforsyningen.dk/lib/okapi-1.5.0.min.js&quot;
      integrity=&quot;<KEY>IMdhsV50e0ZSCvsv1QaIYiu9zQ0TUSPSOryAF6spGb&quot;
      crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://okapi.kortforsyningen.dk/lib/okapi-1.5.0.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;div
      id=&quot;map&quot;
      class=&quot;geomap&quot;
      data-overlays=&quot;dhm&quot;
      data-token=&quot;InsertYourTokenHere&quot;
      style=&quot;height: 400px;&quot;
      data-background=&quot;orto_foraar&quot;&gt;
    &lt;!--
    Udskift data-token= med din egen token fra Kortforsyningen.
    Hvis ikke du har en token så log ind på ’Min side’ https://www.kortforsyningen.dk/indhold/min-side-0
    Opret en token og brug den i din applikation
    Token i dette eksempel er midlertidig og udelukkende til test brug.

    English
    Replace the data-token = with your own token from the Danish map supply.
    If you do not have a token please log in to &quot;My page&quot; https://www.kortforsyningen.dk/indhold/min-side-0
    Create a token and use it in your application
    Token in this example is temporary and solely for test use.
    --&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;checkbox&quot; checked&gt;
        &lt;label for=&quot;checkbox&quot;&gt;
            Stednavne
        &lt;/label&gt;
    &lt;/div&gt;

    &lt;script&gt;
      var maps = new okapi.Initialize({
        overlays: [
          {
            name: &#39;dhm&#39;,
            type: &#39;WMS&#39;,
            title: &#39;Stednavne&#39;,
            visible: true,
            service: &#39;forvaltning2&#39;,
            layer: &#39;Stednavne_basiskort&#39;,
            format: &#39;image/png&#39;,
            source: &#39;kf&#39;
          }
        ]
      });

      const checkbox = document.getElementById(&#39;checkbox&#39;)
      checkbox.addEventListener(&#39;change&#39;, function (e) {
        maps[0].toggleLayer(&#39;dhm&#39;, this.checked)
      })
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;

        </code>
      </pre></div><script>(function(){
        Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
          var linkCopy = document.createElement('a');
          linkCopy.textContent = ' Copy';

          if (!ClipboardJS) {
            callbacks.push(registerClipboard);
          } else {
            registerClipboard();
          }

          return linkCopy;

          function registerClipboard() {
            var clip = new ClipboardJS(linkCopy, {
              'text': function () {
                return env.code;
              }
            });


            clip.on('success', function() {
              linkCopy.textContent = ' Copied!';
            });
          }
        });
      })();</script></body></html>

<|start_filename|>src/control/MyLocation.js<|end_filename|>
import Control from 'ol/control/Control'
import Point from 'ol/geom/Point'
import Style from 'ol/style/Style'
import Icon from 'ol/style/Icon'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import Feature from 'ol/Feature'
import { fromLonLat } from 'ol/proj'
import marker from './images/marker.png'
import location from './images/location_icon.png'
import './MyLocation.styl'

export default class MyLocation extends Control {

  constructor(opt) {
    const options = opt || {}

    super({
      element: document.createElement('div'),
      target: options.target
    })

    let cssClassName = options.className !== undefined ? options.className :
      'ol-my-location ol-unselectable ol-control'

    cssClassName += options.zoomSlider ? ' zoom-slider-exists' : ''

    this.labelNode_ = document.createElement('img')
    this.labelNode_.src = location

    this.button_ = document.createElement('button')

    const tipLabel = options.tipLabel ? options.tipLabel : 'Min Lokation'

    this.button_.setAttribute('type', 'button')
    this.button_.title = tipLabel
    this.button_.appendChild(this.labelNode_)

    const _this = this

    this.button_.onclick = function (e) {
      e.preventDefault()
      _this.showMyPosition()
    }

    const element = this.element

    element.className = cssClassName
    element.appendChild(this.button_)

    const myLocationStyle = new Style({
      image: new Icon(({
        anchor: [0.5, 18],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: marker
      }))
    })

    this._myLocationVector = new VectorSource({})
    this._myLocationLayer = new VectorLayer({
      source: this._myLocationVector,
      style: myLocationStyle
    })
  }

  setMap(map) {
    super.setMap(map)
    if (map) {
      map.addLayer(this._myLocationLayer)
    }
  }

  handleNoGeolocation() {
    console.error('Geolocation is not supported by this browser.')
  }

  showMyPosition() {
    const _this = this
    const showPosition = function (position) {
      const lonlat = [position.coords.longitude, position.coords.latitude]
      const xy = fromLonLat(lonlat, 'EPSG:25832')
      const feature = new Feature({
        geometry: new Point(xy),
        title: 'Min lokation'
      })

      _this._myLocationVector.clear()
      _this._myLocationVector.addFeature(feature)
      _this.getMap().getView().fit(_this._myLocationVector.getExtent())
    }

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition,
        function () { this.handleNoGeolocation() })
    } else {
      this.handleNoGeolocation()
    }
  }

}


<|start_filename|>examples/markers-simple.html<|end_filename|>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Markers simple</title><link href="./prism.css" rel="stylesheet"><link href="./example.css" rel="stylesheet"><script src="./clipboard.min.js"></script><script src="./prism.js"></script><link href="../lib/okapi-1.5.0.min.css" rel="stylesheet"><script src="../lib/okapi-1.5.0.min.js"></script></head><body><div><span class="geomarker" data-title="<NAME>" data-description="<NAME>" data-address="Hans Jensens Stræde 45, 5000 Odense"></span><div id="map" class="geomap" data-center="auto" data-token="<PASSWORD>YourToken<PASSWORD>" style="height: 400px;"></div><script>var maps = new okapi.Initialize({});</script></div><div><pre>
        <code class="language-markup">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
    &lt;title&gt;Simple&lt;/title&gt;
    &lt;script src=&quot;https://okapi.kortforsyningen.dk/lib/okapi-1.5.0.min.js&quot;
      integrity=&quot;sha384-nJI5MxfzjVBvjIihT+INfBIMdhsV50e0ZSCvsv1QaIYiu9zQ0TUSPSOryAF6spGb&quot;
      crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://okapi.kortforsyningen.dk/lib/okapi-1.5.0.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;span
      class=&quot;geomarker&quot;
      data-title=&quot;<NAME>&quot;
      data-description=&quot;<NAME>&quot;
      data-address=&quot;Hans Jensens Stræde 45, 5000 Odense&quot;&gt;
    &lt;/span&gt;

    &lt;div
      id=&quot;map&quot;
      class=&quot;geomap&quot;
      data-center=&quot;auto&quot;
      data-token=&quot;InsertYourTokenHere&quot;
      style=&quot;height: 400px;&quot;&gt;
    &lt;!--
    Udskift data-token= med din egen token fra Kortforsyningen.
    Hvis ikke du har en token så log ind på ’Min side’ https://www.kortforsyningen.dk/indhold/min-side-0
    Opret en token og brug den i din applikation
    Token i dette eksempel er midlertidig og udelukkende til test brug.

    English
    Replace the data-token = with your own token from the Danish map supply.
    If you do not have a token please log in to &quot;My page&quot; https://www.kortforsyningen.dk/indhold/min-side-0
    Create a token and use it in your application
    Token in this example is temporary and solely for test use.
    --&gt;
    &lt;/div&gt;

    &lt;script&gt;
      var maps = new okapi.Initialize({});
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;

        </code>
      </pre></div><script>(function(){
        Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
          var linkCopy = document.createElement('a');
          linkCopy.textContent = ' Copy';

          if (!ClipboardJS) {
            callbacks.push(registerClipboard);
          } else {
            registerClipboard();
          }

          return linkCopy;

          function registerClipboard() {
            var clip = new ClipboardJS(linkCopy, {
              'text': function () {
                return env.code;
              }
            });


            clip.on('success', function() {
              linkCopy.textContent = ' Copied!';
            });
          }
        });
      })();</script></body></html>

<|start_filename|>src/constants.js<|end_filename|>
export const Center = [10.61010906, 56.15950977]
export const Extent = [120000, 5900000, 1000000, 6500000]
export const Resolutions = [1638.4, 819.2, 409.6, 204.8, 102.4, 51.2, 25.6, 12.8, 6.4, 3.2, 1.6, 0.8, 0.4, 0.2]
export const MatrixIds =
  ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13']
export const Size = [256, 256]
