Stockholms kartor (s-map)

Beskrivning och dokumentation över Stockholms kartor (s-map) och dess funktioner samt riktlinjer hur dessa ska användas.

Om karta

Koordinatsystem

För att Stockholms kartor används koordinatsystem SWEREF 99 18 00 (EPSG:3011).

Open Layers

För Stockholms kartor används Open Layers. OpenLayers är ett open source-bibliotek skrivet i JavaScript för att visa, hantera och interagera med kartor direkt i webbläsaren. Det används ofta för att skapa webbaserade GIS-lösningar och stödjer många olika kartdataformat och tjänster, t.ex. WMS, WMTS och vector tiles. belt och låter dig bygga både enkla och avancerade kartapplikationer. Open Layers är släppt under BSD-licens 2-klausulen (även kallad FreeBSD).

Open Layers API

Den version av Open Layers som används i releaser för Stockholms kartor framgår av changelog.

Varianter på karta

Stor - s-map-lg skall ligga i enskilt i en sida. Se exempel karta stor.

Medium* - s-map-md skall ligga i column på sida. Se exempel karta medium.

Liten* - s-map-sm skall ligga i mindre column på sida. Se exempel karta liten.

* Karta medium och liten bör innehålla mindre funktionalitet.

XL** - s-map-xl för applikationer med speciella krav. Se exempel karta xl.

** Karta XL skall ligga i element med satt höjd och position relative.

Karta (E-tjänster) - s-map-e-service

Karta (Areaweb) - s-map-color-ostermalm

Karta (Stockholm.se) - s-map-color-norrmalm

HTML-struktur

HTML-strukturen ser ut som nedan

<div id="s-map" class="s-map s-map-lg smap-unique-class">
              <div class="s-map-search-autocomplete">
                <form id="s-map-search-form">
                  <label for="s-map-search-input" id="s-map-search-input-label" class="visuallyhidden">
                    Sök adress och välj sedan från listan nedan med hjälp av piltangenterna
                  </label>
                  <input type="search" id="s-map-search-input" name="s-map-search-input" placeholder="Sök adress i karta" class="form-control" autocomplete="off" spellcheck="false" role="combobox" aria-expanded="false" aria-owns="s-map-search-autocomplete" aria-autocomplete="list" aria-labelledby="s-map-search-input-label" value="" />
                  <button type="submit" id="s-map-search-button" class="s-map-btn icon-search-light s-map-search-button" aria-label="Sök karta">
                    <span class="visuallyhidden">Sök karta</span>
                  </button>
                </form>
              </div>

              <div class="s-map-container">
                <div class="s-map-top">
                  <nav class="s-map-nav s-map-nav-top-left s-map-panel-nav">
                    <button type="button" class="s-map-btn s-map-panel-nav-layers" id="s-map-panel-nav-layers" aria-controls="s-map-panel-layers" aria-label="Kartlager" aria-expanded="false">
                      <i class="icon icon-map-layers-light" aria-hidden="true"></i>
                      <span class="visuallyhidden-lg">Kartlager</span>
                    </button>
                    <button type="button" class="s-map-btn s-map-panel-nav-legend hide" id="s-map-panel-nav-legend" aria-controls="s-map-panel-legend" aria-label="Teckenförklaring" aria-expanded="false">
                      <i class="icon icon-information-light" aria-hidden="true"></i>
                      <span class="visuallyhidden-lg">Teckenförklaring</span>
                    </button>
                  </nav>
                </div>

                <nav class="s-map-nav s-map-nav-top-right">
                  <button type="button" class="s-map-btn s-map-btn-fullscreen" aria-expanded="false" aria-label="Fullskärm">
                    <span class="visuallyhidden-md">
                      <span class="show-fullscreen">Fullskärm</span>
                      <span class="show-normal">Stäng fullskärm</span>
                    </span>
                    <i class="icon icon-fullscreen-light" aria-hidden="true"></i>
                  </button>
                </nav>

                <nav class="s-map-nav s-map-nav-bottom" aria-label="Navigera karta">
                  <div>
                    <button type="button" class="s-map-btn s-map-btn-my-position" aria-label="Visa min position">
                      <i class="icon icon-my-position-light" aria-hidden="true"></i>
                      <span class="visuallyhidden-sm visuallyhidden-md">Visa min position</span>
                    </button>
                  </div>
                  <div class="s-map-btn-group s-map-btn-zoom">
                    <button type="button" class="s-map-btn s-map-btn-zoom-out" aria-label="Zooma ut">
                      <i class="icon icon-minus-light" aria-hidden="true"></i>
                      <span class="visuallyhidden">Zooma ut</span>
                    </button>
                    <button type="button" class="s-map-btn s-map-btn-zoom-in" aria-label="Zooma in">
                      <i class="icon icon-plus-light" aria-hidden="true"></i>
                      <span class="visuallyhidden">Zooma in</span>
                    </button>
                  </div>
                </nav>

                <div id="#s-map" class="s-map-viewport" tabindex="0" aria-label="Karta, navigeras med piltangenter. Zooma i karta med plus och minustangenter." style="cursor: grabbing;">
                  <div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                    <div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0;">
                      <div class="ol-layer" style="position: absolute; width: 100%; height: 100%;">
                        <canvas width="2312" height="960" style="position: absolute; left: 0px; transform-origin: left top; transform: matrix(0.5, 0, 0, 0.5, 0, 0);"></canvas>
                      </div>
                    </div>

                    <div class="ol-overlaycontainer" style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;"></div>

                    <div class="ol-overlaycontainer-stopevent" style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;">
                      <div class="s-map-popup" style="position: absolute; pointer-events: auto; display: none;">
                        <div>
                          <div class="popup">
                            <div class="s-map-popup-inner">
                              <div class="s-map-popup-header">Name</div>
                              <button type="button" class="s-map-popup-close icon-close-light" aria-label="Stäng dialog">
                                <span class="visuallyhidden">Stäng dialog</span>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="ol-zoom ol-unselectable ol-control" style="pointer-events: auto;">
                        <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
                        <button class="ol-zoom-out" type="button" title="Zoom out">–</button>
                      </div>

                      <div class="ol-rotate ol-unselectable ol-control ol-hidden" style="pointer-events: auto;">
                        <button class="ol-rotate-reset" type="button" title="Reset rotation">
                          <span class="ol-compass" style="transform: rotate(0rad);">⇧</span>
                        </button>
                      </div>

                      <div class="ol-attribution ol-unselectable ol-control ol-collapsed" style="pointer-events: auto; display: none;">
                        <button type="button" aria-expanded="false" title="Attributions">
                          <span class="ol-attribution-expand">i</span>
                        </button>
                        <ul></ul>
                      </div>

                      <div class="ol-scale-line ol-unselectable" style="pointer-events: none;">
                        <div class="ol-scale-line-inner" style="width: 68px;">2 km</div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>

Tillgänglighet

Kartor är inte optimala ur tillgänglighetsperspektiv, eftersom det är en visuell representation av spatial data vilket är svårt att tolka med synsvårigheter. Därmed är det viktigt att intressepunkter samt sökresultat och annan information representerad på kartan även finns tillgänglig utanför kartan.

Funktioner i karta

Intressepunkter i karta

Popup:s innehåll har en max-höjd på 300px och bildstorlek skall vara 274x156px. Om bild inte används ta bort <figure><img> tagg om innehållet inte skall vara länkat ta bort <a class="link"> tagg. Koden för ovanstående popup i karta ser ut så här.

<div class="popup">
  <div class="s-map-popup-inner">
    <div class="s-map-popup-header">Intressepunkt blå</div>
    <button
      type="button"
      class="s-map-popup-close icon-close-light"
      aria-label="Stäng dialog"
    >
      <span class="visuallyhidden">Stäng dialog</span>
    </button>
    <a
      href="https://etjanster.test.stockholm.se/styleguide/"
      class="link"
      target="_self"
      rel="noopener noreferrer"
    >
      <div class="s-map-popup-content">
        <figure>
          <img src="#" alt="Feature" />
        </figure>
        <span class="title">Exempel popup</span>
        <p class="preamble">
          Ingress text.
        </p>
      </div>
    </a>
  </div>
</div>

Koden för ovanstående popup:er i karta ser ut så här.

<div class="s-map-popup">
  <div class="popup">
    <div class="s-map-popup-inner">
      <div class="s-map-popup-header">Kategori</div>
      <button type="button" class="s-map-popup-close icon-close-light" aria-label="Stäng dialog"><span class="visuallyhidden">Stäng dialog</span></button>
      <div>
        <span class="title">Exempel med länklista</span>
        <nav>
          <a href="#" class="icon icon-pdf">Dokument</a>
          <a href="#" class="icon icon-map-pin">Hitta hit</a>
        </nav>
      </div>
    </div>
  </div>
</div>

<div class="popup">
  <div class="s-map-popup-inner">
    <div class="s-map-popup-header">Kategori</div>
    <button
      type="button"
      class="s-map-popup-close icon-close-light"
      aria-label="Stäng dialog"
    >
      <span class="visuallyhidden">Stäng dialog</span>
    </button>
    <div class="s-map-popup-content">
      <span class="title">Exempel med definitionslista</span>
      <p class="preamble">
         <dl>
          <dt>Rubrik 1</dt>
          <dd>Text lorem</dd>
          <dt>Rubrik 2</dt>
          <dd>Text lorem ipsum</dd>
        </dl>
      </p>
    </div>
  </div>
</div>

Kartlager och bakgrundslager

Baskartans utformning är en av de faktorer som påverkar en kartfunktionalitets användbarhet. Därför rekommenderas att det finns en baskarta för olika applikationer som möjliggör en bra användarupplevelse. Riktlinjen är att använda Stockholm Manér som baskarta.

https://kartor.stockholm.se/bios/wms/app/baggis/web/WMS_STHLM_STADENS_MANER

För kartlager och bakgrundslager finns möjlighet att sätta rubrik och lagertyp samt sorteringsordning.

Teckenförklaring

Teckenförklaring med rubriknivåer, ingress, text och legend bild. Bildstorlek är 32x32px alt. 32x16px. HTML-struktur ser ut som följande.

<div class="s-map-legend">
  <p>Ingress exempel (kort beskrivning av kartlager)</p>
  <dl>
    <dt>Teckenrubrik exempel</dt>
    <dd>
      <figure>
        <img src="#" alt="">
      </figure>
      <div>Teckenförklaring (kort beskrivning) bildstorlek 32x32px</div>
    </dd>
    <dd>
      <figure>
        <img src="#" alt="">
      </figure>
      <div>Teckenförklaring text exempel bildstorlek 32x32px</div>
    </dd>
  </dl>
</div>

Möjlighet att aktivera en sökfunktion som hämtar data från ett av stadens api:er för att positionera på adress.

// Search address in map
searchOptions: {
  enabled: true
},

Verktyg

Funktionalitet som skall ligga under fliken verktyg kan vara, skriv ut karta, mäta och rita i karta.

Ifall man vill använda den befintliga funktionen så kan man då se på objektet tools vilket finns nedan i konfigurationen, där i kan man se sen array som heter customButton. Om man skapar upp ett nytt objekt i denna array kan man skapa en ny knapp med ett verktyg kopplat tilla sig.

Man kan göra dett genom att definera upp vilket drawtool man vill använda sig utav, vad den skall heta samt dess klasser.

Geolocation

Visa min position, använder funktionalitet från OpenLayers geolocation. Dessa kan användas om kartapplikationen kräver denna funktionalitet.

Nå kartans olika beståndsdelar

Ifall man lägger den initierande funktionen som en variabel kan man kalla på kartans olika beståndsdelar som tidigare (utöver smap), genom att först kalla på den egenskapade variabeln.

Att lägga till ett eget feature lager med klickbara ikoner samt popup

För att göra detta måste man först antingen skapa upp ett tomt Geojson lager vid start av kartan som inte innehåller några features.

Om man inte väljer att göra detta kan man manuellt skapa upp ett nytt lager och lägga till denna i variablen "map".

Därefter får man skapa upp de features som man vill ha på liknande sätt (se nedan), samt sedan lägga in dem i det lager som tidigare skapats. Genom json strukturen eller manuellt.

var feature = new ol.Feature({
    geometry: new ol.geom.Point([obj.coordinates.x, obj.coordinates.y]),
    name: 'Rubrik i innehållet (kan bli till en länk)',
    url: 'url adress',
    content: 'Innehåll',
    image: 'Bild för pupup:en',
    poiType: 1, //viken typ av ikon som skall synas i kartan
    header: 'Huvudrubrik för popup:en (ifall den är satt som en tom sträng så defaultar den till lagernamnet)'
});

Man kan även anropa funtionen smap.modifyPois(params: {name, values, deleteIndex}). Där name är lagret där man vill skapa, redigera eller radera poi:ar till. Lagren kan hämtas ur smap.variables.mapArray.

"Values" förväntas vara en array av objekt i samma struktur som man väntar sig att "features" skall vara i den initiala json-strukturen. Liknande nedan:

//features: feature i kartan är en punkt där man kan ha en symbol i detta fallet Poi:ar
"features": [{
    //geometry: geometrin för Poi:en
    "geometry": {
        //point: typ av geometri
        "type": "Point",
        //coordinates: koordinaterna för punkten
        "coordinates": [155132, 6578600]
    },
    //properties: all data för innehållet i en Poi
    "properties": {
        "type": "Feature",
        // rubrik för Poi
        "header": "Intressepunkt gul",
        //name: namn på Poi
        "name": "Intressepunkt Kastellet",
        //poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
        "poiType": "4",
        //url: ifall man vill att Poi:en skall innehålla en url länk till en annan sida
        "url": "",
        //content: informations text för Poi:en
        "content": "",
        //image: ifall man vill att poi:en skall innehålla en bild
        "image": ""
    }
}]

Lägg till egna verktyg och lager

Om man vill använda den befintliga koden men även lägga till andra verktyg till kartan efter den har blivit skapad. För att kunna lägga till något så måste man kunna nå kartans Map element, vilket man kan göra via:

För att lägga till tools manuellt måste man gå in den initierande funktionen i en variabel liknande smap.init(<data>, <target>, <target container>). Därefter kan man nå den genom att kalla på smap.basicMap.map.

Därifrån kan man gå in på OpenLayers map för att se hur man kan lägga till verktyg eller lager på en redan skapad karta.

För att se på exempel hur man skapar dessa se här OpenLayers exempel.

Aktivera karta

Aktiverar kartan genom att åkalla smap.init(<data>, <target>, <target container>).

Strukturen på JSON-datat som funktionen förväntar sig kan ses nedanför.

Releases (versioner)

Stockholms kartor finns i flera olika versioner, en för varje release som gjorts. Denna prototyp och styleguide använder alltid den senaste versionen dvs den innehåller alltid de allra senaste uppdateringarna.

Det är upp till var och en att bestämma vilken version av Stockholms karta som skall lyftas in. En satt version ändras aldrig.

CDN för Karta

Alla statiska filer för Stockholms kartor hostas på Stadens CDN. Kartans statiska referenser till CSS, JS-fil skall därför länkas från detta CDN.

Filerna ligger i sina respektive versioner.

https://static.test.stockholm.se/karta/#.#.#/
├── css
│   └── s-map.min.css
└──js
    └── s-map.min.js
    └── s-map-init.js

URL-strukturen ser ut som följande

# Version	URL
2.1.0	https://static.test.stockholm.se/karta/2.1.0/
2.0.0	https://static.test.stockholm.se/karta/2.0.0/
osv.

Filer till karta som länkas in från Stadens CDN

Filtyp	URL
CSS	https://static.test.stockholm.se/karta/version/css/s-map.min.css
JS	https://static.test.stockholm.se/karta/version/js/s-map.min.js

# CHANGELOG

## [2.1.0] - 2025-06-17

Release notes

Felrättningar för Optimizely-funktionskopplingar
Justering av PoI-funktionalitet
Mobil panoreringsfunktion och användargränssnitt
OpenLayers v.9.2.4

URL

https://static.test.stockholm.se/karta/2.1.0/

## [2.0.0] - 2025-06-17

Release notes

Ny s-map-release byggd med React-struktur
OpenLayers v.9.2.4

URL

https://static.test.stockholm.se/karta/2.0.0/

Stockholms kartor (s-map)

Om karta

Koordinatsystem

Open Layers

Varianter på karta

HTML-struktur

Tillgänglighet

Funktioner i karta

Intressepunkter i karta

Kartlager och bakgrundslager

Teckenförklaring

Verktyg

Geolocation

Nå kartans olika beståndsdelar

Att lägga till ett eget feature lager med klickbara ikoner samt popup

Lägg till egna verktyg och lager

Aktivera karta

Releases (versioner)

CDN för Karta

Filer till karta som länkas in från Stadens CDN

# CHANGELOG

## [2.1.0] - 2025-06-17

## [2.0.0] - 2025-06-17

Versioner & CDN

Övergripande

Funktioner i karta

Stockholms kartor (s-map)

Om karta

Koordinatsystem

Open Layers

Varianter på karta

HTML-struktur

Tillgänglighet

Funktioner i karta

Intressepunkter i karta

Popup i karta

Klustrad popup i karta

Popup med länklista

Popup med definitionslista

Kartlager och bakgrundslager

Teckenförklaring

Sök adress i karta

Verktyg

Geolocation

Nå kartans olika beståndsdelar

Att lägga till ett eget feature lager med klickbara ikoner samt popup

Lägg till egna verktyg och lager

Aktivera karta

Releases (versioner)

CDN för Karta

Filer till karta som länkas in från Stadens CDN

# CHANGELOG

## [2.1.0] - 2025-06-17

## [2.0.0] - 2025-06-17

Versioner & CDN

Övergripande

Funktioner i karta