Skip to content
Offentlig Kort API modul til indlejring af baggrundskort på hjemmesider. Modulet er tiltænkt webudviklere der har brug for en let implementerbar og fleksibel kortvisning på egen hjemmeside.
JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc First commit Mar 20, 2019
examples add sri hash Jul 8, 2019
lib build Jul 8, 2019
src add sri hash Jul 8, 2019
.babelrc First commit Mar 20, 2019
.editorconfig First commit Mar 20, 2019
.env.example create datafordeler example Jul 8, 2019
.eslintrc
.gitignore Setup .env file for local testing Mar 26, 2019
.nvmrc First commit Mar 20, 2019
.travis.yml First commit Mar 20, 2019
LICENSE Update LICENSE May 20, 2019
README.md add sri hash Jul 8, 2019
package-lock.json npm update Jul 8, 2019
package.json npm update Jul 8, 2019
webpack.config.js create datafordeler example Jul 8, 2019

README.md

OKAPI - Offentlig Kort API

Kortforsyningen har udviklet et modul til indlejring af baggrundskort på hjemmesider. Modulet er tiltænkt webudviklere der har brug for en let implementerbar og fleksibel kortvisning på egen hjemmeside.

Modulet er implementeret i Javascript og er baseret på OpenLayers 5.3.

Før brug skal man oprette en bruger på Kortforsyningen og oprette en token.

forhåndsvisning

Sådan gør du

  1. Opret en bruger på Kortforsyningen
  2. Log ind på kortforsyningen.dk med din nye bruger, og opret en token.
  3. Indsæt <script>-tag i <head>-tagget på din hjemmeside
    • Benyt enten vores CDN: <script src="https://okapi.kortforsyningen.dk/lib/okapi-1.2.min.js" integrity="sha384-5a57mLASpnU+Gillw8f0ROZf7iIk0+mFDHbkQZiMdYegeAB+k6UbovHneBm2/qP9" crossorigin="anonymous"></script>
    • Eller hav filen liggende på din egen server: <script src="/path/to/okapi.min.js"></script>
  4. Indsæt <div id="map" class="geomap" data-token="...">-tag, dér hvor du vil have kortet.
    • Husk at indsætte din egen token i data-token-attributten.

Nu har du et indlejret kort på din hjemmeside.

  1. Indsæt <span class="geomarker">-tag for hvert punkt, du vil sætte i kortet.

Indholdsfortegnelse

Installation

CDN

<script src="https://okapi.kortforsyningen.dk/lib/okapi-1.2.min.js"
integrity="sha384-5a57mLASpnU+Gillw8f0ROZf7iIk0+mFDHbkQZiMdYegeAB+k6UbovHneBm2/qP9"
crossorigin="anonymous"></script>

Lokal kopi

Download filen: https://okapi.kortforsyningen.dk/lib/okapi-1.2.min.js

<script src="/path/to/okapi.js"></script>

CSS

Vores standard styling kan findes her: https://okapi.kortforsyningen.dk/lib/okapi-1.2.css

Anvendelse

Simpelt kort

<div
  id="map"
  class="geomap"
  data-token="InsertYourTokenHere">
</div>

<script>
  var map = new okapi.Initialize({});
</script>

Demo

Markører

<span
  class="geomarker"
  data-type="some-type"
  data-title="The marker title"
  data-description="The marker description"
  data-address="The marker address">
</span>

<div
  id="map"
  class="geomap"
  data-type=""
  data-center="auto"
  data-token="InsertYourTokenHere">
</div>

<script>
  var map = new okapi.Initialize({});
</script>

Demo

Brug kort fra Datafordeleren

Det er muligt at hente det normale og dæmpede skærmkort fra Datafordeleren i stedet for Fortforsyningen. Det kræver at du opretter en tjenestebruger på Datafordeleren. Denne bruger er IKKE den samme som den du bruger på Kortforsyningen.

<div
  id="map"
  class="geomap"
  data-username="InsertYourUsernameHere"
  data-password="InsertYourPasswordHere">
</div>

<script>
  var map = new okapi.Initialize({});
</script>

Demo

Flere eksempler

Alle kort-parametre

Forskellige markører

To kort på samme side

Andre markør-tooltips

Kort-parametre

Følgende parametre kan anvendes i et kort-objekt (class: geomap):

data-type

Angiver hvilke markør-typer, der skal vises på kortet. Hvis man fx har både banker med data-type="bank", og hæveautomater med data-type="atm", kan man vise den ene type med:

data-type="bank"

eller begge typer med:

data-type="atm,bank"

data-zoom

Angiv zoomniveau i heltal, for at sætte et specifikt zoom-niveau. Hvis den sættes til "auto", vil kortet selv prøve at finde et passende zoom-niveau, hvor alle markører er med på kortet. Mulige værdier: 0-13, "auto".

data-center

Hvis centeret skal automatisk sættes udfra de markører der er på kortet kan denne blive sat til auto: data-center="auto". Hvis denne er sat til "auto" behøves data-center-lat og data-center-lon ikke at blive sat.

data-center-lat og data-center-lon

Angiv centerpunkt for kortet. Et koordinatpar i WGS84/epsg:4326 Eksempelvis: data-lat="55.5" og data-lon="11.5".

Disse er ikke relevante, hvis data-center har værdien auto.

data-background

Man kan vælge imellem disse fire forskellige baggrundskort:

  • "dtk_skaermkort" (Almindeligt skærmkort)
  • "dtk_skaermkort_daempet" (Dæmpet skærmkort)
  • "forvaltning" (Kort til forvaltning - uden navne)
  • "orto_foraar" (ortofoto)

Som standard bliver det dæmpede skærmkort brugt.

data-mylocation

Angiv om knap til Min Position skal vises. Mulige værdier: true , false. Standard = true.

data-zoomslider

Angiv om Zoomslider skal vises. Mulige værdier: true , false. Standard = true.

data-layerswitcher

Angiv om funktionen Kortvælger skal vises. Mulige værdier: true , false. Standard = true.

data-token

Angiv Kortforsyningen token til autentificering. Har du ikke allerede en token kan du oprette en [her](https://www.kortforsyningen.dk/indhold/min-side-0 Kortforsyningen).

data-show-popup

Angiv om der skal vises en popup med mere information når der klikkes på en markør. Mulige værdier: true , false. Standard = true.

Markør Parametre

Følgende parametre kan anvendes i et markør-object (class: geomarker):

data-type

Angiver hvilken markør-type det skal være. Det kunne fx være atm eller bank. Dette kan især være smart hvis man skal vise flere kort på samme side.

data-title

Angiver titlen på markøren. Kommer frem i popup-boksen.

data-description

Angiver beskrivelsen eller brødteksten på markøren. Kommer frem i popup-boksen.

data-lat og data-lon

Angiver koordinaterne til markøren. Et koordinatpar i WGS84/epsg:4326.

data-lat="55.674802"
data-lon="12.558091"

data-address

Angiver adressen hvor markøren skal placeres. Denne behøves ikke at angives hvis lat og lon er angivet. Adressen vil blive slået op i DAWA-AWS. Det kan f.eks. være data-address="Roskildevej 32, 2000 Frederiksberg".

Brugerdefinerede Markører og Tooltips

Hvis man ønsker selv at vælge markør icon, kan det gøres ved at sende et object der mapper icon navn til en path til et billede.

<script>
  var map = new okapi.Initialize({
    icons: {
      'museum': 'custom.png'
    }
  });
</script>

Demo

Det er også muligt selv at lave det html element der skal vises som tooltip når der klikkes på en markør. Hvis man gør det kan man sætte flere parametre på markørene som vil blive vist i tooltippet's element med matchene class navn.

<div id="popup">
  <a href="#" class="ol-popup-closer closer"></a>
  <div id="popup-content" class="ol-popup-content"></div>
  <div class="title"></div>
  <div class="description"></div>
  <div class="link"></div>
</div>

<script>
  var map = new okapi.Initialize({
    popup: document.getElementById('popup')
  });
</script>

Demo

Fremsøgning af koordinater

For at finde koordinater til en adresse kan du bruge OpenStreetMap eller Google Maps. Du kan også bruge API'et til Danmarks AdresseRegister igennem DAWA-AWS, dette er nok det smarteste valg, hvis man vil lave automatiseret adressesøgning via et API.

OpenStreetMap

OSM kan du søge efter din adresse, hvorefter du højreklikker og vælger Vis adresse.

Herefter vil koordinaterne fremgå i venstre side af skærmen. Se screendump. Det første tal er breddegrad (lat) og det næste tal er længdegrad (lon).

forhåndsvisning

Google

GoogleMaps kan du søge efter din adresse, hvorefter du højreklikker og vælger Hvad er der her?. Så vil der komme en lille boks op nederst i midten af skærmen. Tryk på tallene i boksen. (se screendump).

forhåndsvisning

Herefter vil koordinaterne fremgå i venstre side af skærmen. Se screendump. Det første tal er breddegrad (lat) og det næste tal er længdegrad (lon).

forhåndsvisning

DAWA-AWS

Her er et eksempel på en adresse, som vi får et koordinat på igennem AWS:

http://dawa.aws.dk/adresser?q=rentemestervej%208,%202400&format=geojson&struktur=mini

Returnerer en samling adresser, hvor koordinaterne står i geometry.coordinates:

forhåndsvisning

Omregning til decimalgrader

Hvis man ikke har decimalgrader i WGS84, kan man transformere dem ved hjælp af Kortforsyningens service: RestGeoKeys. (Læs mere her).

Her er en eksempel-url, man kan sende af sted. Man skal dog indsætte sin egen token først:

https://services.kortforsyningen.dk/?servicename=RestGeokeys_v2&method=koortrans&ingeoref=EPSG:25832&ingeop=550000,6220000&outgeoref=EPSG:4326&token=insertYourToken

You can’t perform that action at this time.