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).
OpenLayers
För att stadens kartapplikationer används OpenLayers. OpenLayers kan visa kartor, vektordata och markörer laddade från någon källa. OpenLayers har utvecklats för att vidareutveckla användningen av geografisk information av alla slag. OpenLayers är ett Open Source JavaScript, släppt under BSD-licens 2-klausulen (även kallad FreeBSD).
Den version av OpenLayers som används i releaser för Stockholms kartor framgår av changelog.
Varianter på karta
- Stor -
s-map-lgskall ligga i enskilt i en sida. Se exempel karta stor. - Medium* -
s-map-mdskall ligga i column på sida. Se exempel karta medium. - Liten* -
s-map-smskall ligga i mindre column på sida. Se exempel karta liten. - * Karta medium och liten bör innehålla mindre funktionalitet.
- XL** -
s-map-xlfö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-serviceKarta (Areaweb) -
s-map-color-ostermalmKarta (Stockholm.se) -
s-map-color-norrmalmHTML-struktur
HTML-strukturen ser ut som följande
<div class="s-map s-map-e-service s-map-lg">
<div class="s-map-container">
<div id="s-map" class="s-map-viewport"></div>
<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" 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>
<button type="button" class="s-map-btn s-map-panel-nav-tools hide" id="s-map-panel-nav-tools" aria-controls="s-map-panel-tools" aria-label="Kartverktyg" aria-expanded="false">
<i class="icon icon-tools-light" aria-hidden="true"></i>
<span class="visuallyhidden-lg">Kartverktyg</span></button>
<button type="button" class="s-map-btn s-map-panel-nav-share hide" id="s-map-panel-nav-share" aria-controls="s-map-panel-share" aria-label="Dela karta" aria-expanded="false">
<i class="icon icon-map-share-light" aria-hidden="true"></i>
<span class="visuallyhidden-lg">Dela</span></button>
<button type="button" class="s-map-btn s-map-panel-nav-searchresult hide" id="s-map-panel-nav-searchresult" aria-controls="s-map-panel-searchresult" aria-label="Visa sökresultat" aria-expanded="false">
<i class="icon icon-map-pin-light" aria-hidden="true"></i>
<span class="visuallyhidden-lg">Sökresultat</span></button>
</nav>
<div class="s-map-panel">
<div id="s-map-panel-layers" class="s-map-tab-panel fade s-map-panel-layers" aria-labelledby="s-map-panel-nav-layers">
<div class="s-map-tab-panel-inner">
<span class="s-map-panel-header" id="s-map-layers-header">Kartlager</span>
<div class="s-map-layers"></div>
</div>
</div>
<div id="s-map-panel-legend" class="s-map-tab-panel fade s-map-panel-legend" aria-labelledby="s-map-panel-nav-legend">
<div class="s-map-tab-panel-inner">
<span class="s-map-panel-header">Teckenförklaring</span>
</div>
</div>
<div id="s-map-panel-tools" class="s-map-tab-panel fade s-map-panel-tools" aria-labelledby="s-map-panel-nav-tools">
<div class="s-map-tab-panel-inner">
<span class="s-map-panel-header">Kartverktyg</span>
<button type="button" class="s-link icon icon-map-print">Skriv ut</button>
<button type="button" role="checkbox" aria-checked="false" class="s-switch">
<label for="s-map-switch-s-map-select-area" class="icon icon-map-select-area">
<span id="s-map-switch-label-s-map-map-select-area">Markera område</span>
<input type="checkbox" id="s-map-switch-s-map-select-area" name="s-map-tool" value="1">
<i aria-hidden="true"></i>
</label>
</button>
<button type="button" role="checkbox" aria-checked="false" class="s-switch">
<label for="s-map-switch-s-map-measure" class="icon icon-map-measure">
<span id="s-map-switch-label-s-map-map-measure">Mät avstånd</span>
<input type="checkbox" id="s-map-switch-s-map-measure" name="s-map-tool" value="1">
<i aria-hidden="true"></i>
</label>
</button>
</div>
</div>
<div id="s-map-panel-share" class="s-map-tab-panel fade s-map-panel-share" aria-labelledby="s-map-panel-nav-share">
<div class="s-map-tab-panel-inner">
<span class="s-map-panel-header">Dela karta</span>
<div class="s-map-input-group">
<label for="s-map-share" class="visuallyhidden">Länk till karta</label>
<input type="text" class="s-map-form-control" name="s-map-share" id="s-map-share" placeholder="Länk till karta" readonly value="">
<div class="s-map-input-group-btn">
<button type="button" class="s-map-btn" id="s-map-share-copy">
<span>Kopiera</span>
</button>
</div>
</div>
</div>
</div>
<div id="s-map-panel-searchresult" class="s-map-tab-panel fade s-map-panel-searchresult" aria-labelledby="s-map-panel-nav-searchresult">
<div class="s-map-tab-panel-inner">
<span class="s-map-panel-header">Sökresultat</span>
<div class="map-panel-searchresult-filter">
<div class="panel-group accordion b-b-1 m-b-sm" id="search-filter-accordion" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading panel-heading--child m-a-0 p-a-0" id="search-filter-heading">
<span class="s-map-panel-title b-b-0">
<a href="#search-filter-collapse" aria-controls="search-filter-collapse" data-parent="#search-filter-accordion" class="collapsed btn-block" role="button" data-toggle="collapse" aria-expanded="false">Filtrera på typ</a>
</span>
</div>
</div>
<div id="search-filter-collapse" aria-labelledby="search-filter-heading" class="panel-collapse collapse">
<div class="panel-body panel-body--parent p-x-0 p-y-0 p-b-sm b-b-0">
<div class="checkbox">
<input type="checkbox" checked="checked" id="filter-checkbox-lorem-ipsum-1" name="checkbox" class="visuallyhidden">
<label for="filter-checkbox-lorem-ipsum-1" class="field-option field-option--checkbox">Lorem ipsum 1 (3)</label>
</div>
<div class="checkbox">
<input type="checkbox" checked="checked" id="filter-checkbox-lorem-ipsum-2" name="checkbox" class="visuallyhidden">
<label for="filter-checkbox-lorem-ipsum-2" class="field-option field-option--checkbox">Lorem ipsum 2 (2)</label>
</div>
<div class="checkbox">
<input type="checkbox" checked="checked" id="filter-checkbox-lorem-ipsum-3" name="checkbox" class="visuallyhidden">
<label for="filter-checkbox-lorem-ipsum-3" class="field-option field-option--checkbox">Lorem ipsum 3 (2)</label>
</div>
<div class="checkbox">
<input type="checkbox" checked="checked" id="filter-checkbox-lorem-ipsum-4" name="checkbox" class="visuallyhidden">
<label for="filter-checkbox-lorem-ipsum-4" class="field-option field-option--checkbox">Lorem ipsum 4 (1)</label>
</div>
<div class="checkbox">
<input type="checkbox" checked="checked" id="filter-checkbox-lorem-ipsum-5" name="checkbox" class="visuallyhidden">
<label for="filter-checkbox-lorem-ipsum-5" class="field-option field-option--checkbox">Lorem ipsum 5 (2)</label>
</div>
</div>
</div>
</div>
</div>
<p class="s-map-searchresult-hits"><span>Visar 10 träffar av 25</span><a href="javascript:;" class="s-map-btn-link s-map-btn-search-reset">Rensa sökning</a></p>
<div id="s-map-searchresults">
<a href="javascript:;" class="s-map-list-group-item"><span class="link">Lorem ipsum 1</span><em>Exempel kategori</em></a>
<a href="javascript:;" class="s-map-list-group-item"><span class="link">Lorem ipsum 2</span><em>Exempel kategori</em></a>
<a href="javascript:;" class="s-map-list-group-item collapsed" data-toggle="collapse" data-target="#lorem-ipsum-collapse" aria-expanded="false"><span class="link">Lorem ipsum 3</span><em>Exempel med collapse</em></a>
<div id="lorem-ipsum-collapse" class="collapse" aria-expanded="false">
<div class="btn-group">
<a href="javascript:;" class="btn btn-block btn-primary icon-download-light u-icon-left">Ladda ner alla dokument</a>
<a href="javascript:;" class="btn btn-block btn-primary icon-download-light u-icon-left">Test lorem ipsum</a>
</div>
</div>
<a href="javascript:;" class="s-map-list-group-item"><span class="link">Lorem ipsum 4</span><em>Exempel kategori</em></a>
<a href="javascript:;" class="s-map-list-group-item icon-download u-icon-right"><span class="link">Lorem ipsum 5</span><em>Exempel med ladda ner länk</em></a>
<a href="javascript:;" class="s-map-list-group-item active"><span class="link">Lorem ipsum 6</span><em>Exempel på aktivt sökresultat</em></a>
<a href="javascript:;" class="s-map-list-group-item"><span class="link">Lorem ipsum 7</span><em>Exempel kategori</em></a>
<a href="javascript:;" class="s-map-list-group-item"><span class="link">Lorem ipsum 8</span><em>Exempel kategori</em></a>
<a href="javascript:;" class="s-map-list-group-item"><span class="link">Lorem ipsum 9</span><em>Exempel kategori</em></a>
<a href="javascript:;" class="s-map-list-group-item"><span class="link">Lorem ipsum 10</span><em>Exempel kategori</em></a>
</div>
<nav class="s-map-searchresult-show-more">
<a href="javascript:;" class="s-map-btn-link">Visa fler</a>
</nav>
</div>
</div>
</div>
</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 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>
</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ängligt i listvyer. Med det sagt finns det ett antal åtgärder som gör kartor mer tillgängliga.
OBS! Det finns ingen framtagen listvy för tillgänglighet i denna release.
Funktioner i karta
Intressepunkter i karta
Klustrad popup i karta
Kategori
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="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>
<a class="link" href="https://etjanstpp.stockholm.se/styleguide/">
<div class="s-map-popup-content">
<figure>
<img src="#" alt="">
</figure>
<span class="title">Exempel popup</span>
<p>Ingress text.</p>
</div>
</a>
</div>
</div>
</div>Popup med länklista
Kategori
Exempel med länklista
Popup med definitionslista
Kategori
Exempel med definitionslista
- Rubrik 1
- Text lorem
- Rubrik 2
- Text lorem ipsum
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="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 class="s-map-popup-content">
<span class="title">Exempel med definitionslista</span>
<dl>
<dt>Rubrik 1</dt>
<dd>Text lorem</dd>
<dt>Rubrik 2</dt>
<dd>Text lorem ipsum</dd>
</dl>
</div>
</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_MANERFö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" id="#">
<span class="s-map-panel-title">Teckenförklaring exempel</span>
<p>Ingress (kort beskrivning av kartlager)</p>
<dl>
<dt>Teckenrubrik</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 (kort beskrivning) bildstorlek 32x16px</div>
</dd>
</dl>
</div>Sök adress i karta
Möjlighet att lägga in en färdig sök funktion som hämtar data från stadens api:er för att positionera på adress.
// Search address in map
searchOptions: {
enabled: true,
apiUrl: "https://openstreetws.stockholm.se/LvWS-4.0/Lv.svc",
apiKey: "your-api-key-from-LvWS" // Sweref SWEREF99 18 00
},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.
Dela
Här har vi gett er möjlighet att visa en delnings funktion i kartan, bara med utseende och ingen funktionalitet.
OBS! Det finns ingen funktionalitet till att dela karta i denna release.
Visa lista
Här har vi gett er möjlighet att visa en lista över sökt innehåll i kartan, bara med utseende och ingen funktionalitet. Listan kan tex. vara intressepunkter som visas i kartan eller ett sökresultat.
OBS! Det finns ingen funktionalitet till visa sökresultat eller lista intressepunkter i denna release.
Geolocation
Visa min position, använder funktionaliteten från OpenLayers geolocation. Dessa kan användas om kartapplikationen kräver denna funktionalitet.
Nå kartans olika bestånds delar
Ifall man lägger den initierande funktionen som en variabel så kan man åkalla kartans olika beståndsdelar som tidigare (minus smap), genom att först åkalla den egenskapade variabeln.
Att lägga till ett eget feature lager med klickbara iconer samt popup
För att göra detta så 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 så kan man manuellt skapa upp ett nytt lager och pusha in denna i map variabeln.
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 ni tidigare skapat. 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.advancedMap.createPois(<layer>, <data>). Där layer är lagret där man vill skapa nya poi:ar till. Lagren kan hämtas ur smap.variabels.mapArray.
Finns även smap.advancedMap.addPois(<layer>, <data>) som lägger till poi:ar i lagret istället för att ersätta poi:arna som createPois gör.
Data 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
Ifall 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 ni nå den genom att åkalla 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.
var data = {
// Map start center
center: [154031, 6578889],
// Map options
mapOption: {
// Double click for zoom
doubleClickZoom: false,
// Scroll to search input on fullscreen mode instead of map top. Adding class .s-map-fullscreen-search in body.
scrollToSearchInput: false,
// Maxresolution for zoom out (ESPG:3011 20km)
maxResolution: 234.375,
// Minresolution for zoom in (ESPG:3011 10m, 0.11444091796875), (ESPG:3011 2m, 0.0286102294921875)
minResolution: 0.11444091796875,
// Map extent {minX, minY, maxX, maxY}
extent: [61500.0, 6465000.0, 301500.0, 6705000.0]
},
// Map zoom levels
zoomLevel: {
// Map start zoom
zoom: 6,
// Map max zoom
maxZoom: 0,
// Map min zoom
minZoom: 13,
// Zoom to popup on poi click
singelPopupZoomLevel: 9,
// Zoom for geolocation click
geolocationZoomLevel: 9,
},
// Search address in map
searchOptions: {
enabled: false,
apiUrl: "https://openstreetws.stockholm.se/LvWS-4.0/Lv.svc",
apiKey: "your-api-key-from-LvWS" // Sweref SWEREF99 18 00
},
// Popup cluster options
clusterOptions: {
// clusterPopupZoomLevel: nivå för när man klickar på clusterpopup
clusterPopupZoomLevel: 9,
// clusterZoomFeatureAmount: mängd av features under en cluster där man vill att inzoomning skall ske. mängd > 10 => inzoomning.
clusterZoomFeatureAmount: 5,
// combinedClusterLayer: super cluster lager för alla lager vilka har features
combinedClusterLayer: true,
// clusterIconPopupShow: om man vill att icon:en för featuren skall visas i litan i popupen
clusterIconPopupShow: true,
// clusterZoomLevelSwitch: zoom nivån där clusterlagret går ifrån supercluster till de individuella lagren
clusterZoomLevelSwitch: 7,
// clusterRadius: radius för clustringen på kartan.
clusterRadius: 70,
// clusterCount: aktiverar omformulering av mängd features i clustring. Defualt = true
clusterCount: true,
// clusterSortPopupResultByLayer: sortera multipopup på lagerordning. Default = true
// clusterSortPopupResultByLayer: false,
// clusterSortPopupResultByName: sortera multipopup på namn. Default = true
// clusterSortPopupResultByName: false,
},
// Buttons visibility map start
buttonVisibility: {
// geolocationVisibility: synlighet för 'geolocation' vid start
geolocationVisibility: false,
// fullScreenVisibility: synlighet för 'visa i helskärm' knappen vid start.
fullScreenVisibility: false,
// legendtab: synlighet för 'legend tab' vid start (baseras på ifall html elementet har klasses 'hide' sen tidigare)
legendtab: true,
// tooltab: synlighet för 'tool tab' vid start (baseras på ifall html elementet har klasses 'hide' sen tidigare)
tooltab: false,
// searchtab: synlighet för 'search tab' vid start (baseras på ifall html elementet har klasses 'hide' sen tidigare)
searchtab: false,
// layertab: synlighet för 'layer tab' vid start (baseras på ifall html elementet har klasses 'hide' sen tidigare)
layertab: false,
// sharetab: synlighet för 'share tab' vid start (baseras på ifall html elementet har klasses 'hide' sen tidigare)
sharetab: false
},
// tools
tools: {
customButton: [{
tool: 'LineString',
name: 'Rita linje',
class: 'icon-map-draw-line LineString-tool',
// id: 'går att lägga till vid behov',
}, {
tool: 'Polygon',
name: 'Rita ploygon',
class: 'icon-map-draw-poly Polygon-tool',
// id: 'går att lägga till vid behov',
// },{
// // tool: placePoi är ett verktyg där man kan lägga till ett poi i klienten genom att klicka på kartan.
// // alternativt kan man lägga till en ny POI genom funktionen advancedMap.createPois(layer, feature).
// // feature strukturen är likadan som den som finns för features i lager blocket.
// tool: 'placePoi',
// name: 'Lägg till intressepunkt',
// class: 'icon-map-pin pointer-tool',
// // id: 'går att lägga till vid behov',
// },{
// tool: 'pointAdd',
// name: 'Lägg till punkt',
// class: 'icon-my-position add-tool',
// // id: 'går att lägga till vid behov',
}]
},
// modify: Block för att ändra features sata samt att ta bort dem.
modify: {
// modifyPosition: Om man vill få möjligheten att flytta runt ikoner på kartan
modifyPosition: false,
// modifyData: Om man vill få möjligheten att ta ändra data:n för featuren sätt till true
modifyData: false,
// customButton: array för egna knappar placerade i popupen
customButton: [{
// modifyRemove: Om man vill få möjligheten att ta bort featuren
modifyRemove: false,
name: 'Ta bort intressepunkt',
class: 'icon icon-map-trashcan s-map-popup-test'
}, {
// saveData: Om man vill få möjligheten att lägga till nya features sätt till true
saveData: false,
name: 'Spara intressepunkt',
class: 'icon icon-map-upload s-map-popup-test'
}/*,{
// modifyEvent: Wildcard event när man trycker på en knapp för att få den aktuella featurn samt dess lager.
modifyEvent: false,
name: 'Redigera intressepunkt',
class: 'icon icon-map-pin s-map-popup-test',
// id: 'test'
}*/
]
},
// layers: de olika lager som ingår i kartan
layers: [
{
// name: lagernamn för lagret
name: 'Stockholm',
// Layer URL
url: 'http://kartor.stockholm.se/bios/wms/app/baggis/web/WMS_STHLM_STADENS_MANER',
// Visible from start
showhide: true,
// opactity: genomskinlighet på lager. 0-1 där 1 inte är genomskinligt alls
opacity: 1,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: true,
// backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: 'Bakgrundskarta',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 3,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"SERVICE": "WMS",
"VERSION": "1.1.1",
"REQUEST": "GetMap",
"STYLES": "",
"SRS": "EPSG:3011",
"TILED": true,
"TRANSPARENT": false
},
tilegrid: {
resolutions: [234.375, 117.1875, 58.59375, 29.296875, 14.6484375, 7.32421875, 3.662109375, 1.8310546875, 0.91552734375, 0.457763671875, 0.2288818359375, 0.11444091796875],
origin: [61500, 6465000],
extent: [61500.0, 6465000.0, 301500.0, 6705000.0],
tilesize: [256, 256],
},
// servertype: vilken typ av server det är.
servertype: 'geoserver'
}, {
// name: lagernamn för lagret
name: 'Ortofoto 2015',
// Layer URL
url: 'https://kartor.stockholm.se/bios/wms/app/baggis/web/WMS_STHLM_ORTOFOTO_2015',
// Visible from start
showhide: false,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: true,
// backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: 'Bakgrundskarta',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager
order: 4,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"SERVICE": "WMS",
"VERSION": "1.1.1",
"REQUEST": "GetMap",
"STYLES": "",
"SRS": "EPSG:3011",
"TILED": true,
"TRANSPARENT": false,
},
tilegrid: {
resolutions: [117.1875, 58.59375, 29.296875, 14.6484375, 7.32421875, 3.662109375, 1.8310546875, 0.91552734375, 0.457763671875, 0.2288818359375, 0.11444091796875],
origin: [135000, 6565000],
extent: [135000, 6565000, 165000, 6595000],
tilesize: [256, 256],
},
// servertype: vilken typ av server det är.
servertype: 'geoserver'
}, {
// name: lagernamn för lagret
name: 'Stockholm år 1805',
// Layer URL
url: 'https://kartor2.stockholm.se/bios/wms/app/dpmap/cust_sth/utbf/web/WMS_UTBF_1805',
// Visible from start
showhide: false,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: true,
// backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: 'Historisk bakgrundskarta',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 1,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"SERVICE": "WMS",
"VERSION": "1.1.1",
"REQUEST": "GetMap",
"STYLES": "",
"SRS": "EPSG:3011",
"TRANSPARENT": false,
"TILED": true
},
tilegrid: {
resolutions: [234.375, 117.1875, 58.59375, 29.296875, 14.6484375, 7.32421875, 3.662109375, 1.8310546875, 0.91552734375, 0.457763671875, 0.2288818359375, 0.11444091796875],
origin: [135000, 6565000],
extent: [135000, 6565000, 165000, 6595000],
tilesize: [256, 256],
},
// servertype: vilken typ av server det är.
servertype: 'geoserver'
}, {
// name: lagernamn för lagret
name: 'Stockholm år 1934',
// Layer URL
url: 'https://kartor2.stockholm.se/bios/wms/app/dpmap/cust_sth/utbf/web/WMS_UTBF_1934',
// Visible from start
showhide: false,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: true,
// backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: 'Historisk bakgrundskarta',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 2,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"SERVICE": "WMS",
"VERSION": "1.1.1",
"REQUEST": "GetMap",
"STYLES": "",
"SRS": "EPSG:3011",
"TRANSPARENT": false,
"TILED": true
},
tilegrid: {
resolutions: [234.375, 117.1875, 58.59375, 29.296875, 14.6484375, 7.32421875, 3.662109375, 1.8310546875, 0.91552734375, 0.457763671875, 0.2288818359375, 0.11444091796875],
origin: [135000, 6565000],
extent: [135000, 6565000, 165000, 6595000],
tilesize: [256, 256],
},
// servertype: vilken typ av server det är.
servertype: 'geoserver',
// legend: lager teckenförklaring
legend: {
// header: huvudrubrik för teckenförklaring
"header": "Rubrik",
// subheader: rubrik för ingress i tekenförklaring
"subheader": "Ingress (kort beskrivning av kartlager)",
// content: brödtext för teckenförklaring
"content": [{
//header: huvudrubrik för objekt
"header": "Teckenrubrik",
// text: text för objekt
"text": "Teckenförklaring (kort beskrivning)",
// image: bild för objekt
"image": ""
}, {
//header: huvudrubrik för objekt
"header": "",
// text: text för objekt
"text": "Teckenförklaring (kort beskrivning)",
// image: bild för objekt
"image": ""
}]
}
}, {
// Layer name
name: 'Stadsdelsområden',
// Layer URL
url: 'https://kartor.stockholm.se/bios/wms/app/baggis/web/WMS_STHLM_STDELAR_STDELSNAMNDER_TS',
// Visible from start
showhide: false,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: false,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: '',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 1,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"VERSION": "1.1.1"
},
// zoom ut: yttersta nivån lagret ska visas på
minZoom: 4,
// zoom in: lägsta nivån lagret ska visas på
maxZoom: 9,
// servertype: vilken typ av server det är.
servertype: 'geoserver',
// legend: lager teckenförklaring
legend: {
// header: huvudrubrik för teckenförklaring
"header": "Stadsdelsområden",
// subheader: rubrik för ingress i tekenförklaring
"subheader": "Ingress exempel (kort beskrivning av kartlager)",
// content: brödtext för teckenförklaring
"content": [{
"text": "Stadsdelsområde",
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAADCAYAAADyQg1sAAAAF0lEQVQYlWNk91/9n2EAAdNAWj4oHAAABZcCBj7I1+sAAAAASUVORK5CYII="
}, {
"text": "Stadsdel",
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACCAYAAAA5Ht7JAAAAGElEQVQYlWP8rej3n2EAAdNAWs7AwMAAAGrTAm2nw39KAAAAAElFTkSuQmCC"
}, {
// header: huvudrubrik för objekt
"header": "Teckenrubrik exempel",
// text: text för objekt
"text": "Teckenförklaring text exempel bildstorlek 32x32px",
// image: bild för objekt
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC1ElEQVRYhb2WW08TQRiGn9nd2ZaDXrBbTIiSaOIvANtySvSOeGv8KeqVp0T/i8R4iAYpkQCJJ/AYxT8ASEsRrsDIDnbHi11Kd9rbzuVm3p3nm+3zfVPUyq7ev/VNqw+/tdZaq7c7+uD29+bz0ec9ffDwp1bv0/VVI/9mRx/cacl/2dMHD9a0ereTrH/a1fs3v2q1unuSv/tDq5Uk78lSAFqjFuvgCOREAVxB9HILGho5UUBHjeRZgCyHEKd5IZCTBfAE0YstiDVyvID+2yCarYLrIEsBxKAWtpP1yQL4DtGzTYjBO/q4l2zqCKInG+CAe6Gf3NUh1HIdkXeR40lR6lUV/qWbQLJJa1HLO4ic2zyEmt2CozjJx5ro+a/kkMUAGhq1VMc7hspiAA6oSg3/yhnkRAHR43L4aJ08IEshHGnU4jb4TrNoVamCSiAi53I4s07+uKhG+qVyaV6AmjvJy7EQL3d9GFWpQRQnlUcxar4GrkCWQ/IaovkaOn0J3yF6upl8znIIKka9roGX5gVEc1X0YSPZL+cQPd4A3XKIhW2QAlkK8eRokIXadgBog7oXT9lz4M/9NfzpoZPfbLlOLu/ac8CfHkpOonUb1BsZsOCAOQeKQRY6FlpwwJwDw334lwdPoFYcKLXPgTZo1x0oh21zIAO14oA5BzpBu+6AeRcUgyy0HNpxIDMHOkFtOGC2pAntvgOd7oJWqBUHOs0BA9p9BzrdBa3QcRsOmC1pQL2RAUsOtLZkKchCrTnQ2pLFIAu15oDZkia06w50uAsyUCsOmC1pQos2HDBbctSAputddyAzB9ILrAm15YDZkia0+w60zQFDPCsOdJoDLVA5FjYdcG+Ia/dEj4d7vg/nbC+qUsM5LZETBZx+j8OZdZyBHPJSgJAOanEb0eMhSyHitERVqoh0+Di9aT5I876DWqojepM/NaLPQy3V8acGcc/14k8N8h/dQ+vXqPgAUgAAAABJRU5ErkJggg=="
}]
}
}, {
// Layer name
name: 'Cykelparkering - POINT',
// Layer URL
url: 'http://openstreetgs.stockholm.se/geoservice/api/717ec6af-49f9-4774-84da-35b8cb713dc5/wms',
// Visible from start
showhide: false,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: false,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: '',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 1,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"VERSION": "1.1.1",
"LAYERS": "od_gis:Cykelparkering_Punkt"
},
// zoom ut: yttersta nivån lagret ska visas på
minZoom: 4,
// zoom in: lägsta nivån lagret ska visas på
maxZoom: 9,
// servertype: vilken typ av server det är.
servertype: 'geoserver',
// legend: lager teckenförklaring
popup: {
nameProperty: 'Id',
template:
'<span class="title"></span>'
},
}, {
// Layer name
name: 'Hundrastgårdar - POLYGON',
// Layer URL
url: 'https://openstreetgs.stockholm.se/geoservice/api/1e8d9bf1-79e5-4f60-94b3-1ddd776f66c3/wms?layers=od_gis:Hundrastgard_Yta',
// Visible from start
showhide: false,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: false,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: '',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 1,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"VERSION": "1.1.1",
"LAYERS": "od_gis:Hundrastgard_Yta"
},
// zoom ut: yttersta nivån lagret ska visas på
minZoom: 4,
// zoom in: lägsta nivån lagret ska visas på
maxZoom: 9,
// servertype: vilken typ av server det är.
servertype: 'geoserver',
// legend: lager teckenförklaring
popup: {
nameProperty: 'Id',
template:
'<span class="title"></span>\
<dl>\
\
</dl>'
},
}, {
// Layer name
name: 'Servicedagar - LINESTRING',
// Layer URL
url: 'https://openstreetgs.stockholm.se/geoservice/api/1e8d9bf1-79e5-4f60-94b3-1ddd776f66c3/wms?layers=ltfr:LTFR_SERVICE_GROUP',
// Visible from start
showhide: false,
// Layer type
type: 'tileWMS',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: false,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: '',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 1,
},
// parameters: parametrar för kartserver
parameters: {
"FORMAT": "image/png",
"VERSION": "1.1.1",
"LAYERS": "ltfr:LTFR_SERVICE_GROUP"
},
// zoom ut: yttersta nivån lagret ska visas på
minZoom: 4,
// zoom in: lägsta nivån lagret ska visas på
maxZoom: 9,
// servertype: vilken typ av server det är.
servertype: 'geoserver',
// legend: lager teckenförklaring
popup: {
nameProperty: 'Id',
template:
'<span class="title"></span>\
<dl>\
\
\
\
\
\
</dl>'
},
}, {
// Layer name
name: 'Cykelpumpar - WFS',
// Layer URL
url: 'https://openstreetgs.stockholm.se/geoservice/api/717ec6af-49f9-4774-84da-35b8cb713dc5/wfs?SERVICE=WFS&REQUEST=GetFeature&typename=od_gis:Cykelpump_Punkt&outputFormat=application/json&srsname=EPSG:3011',
// Visible from start
showhide: true,
// Layer type
type: 'WFS-geoJSON',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: false,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: '',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 2,
},
servertype: 'geoserver',
poiType: '4',
// legend: lager teckenförklaring
legend: {
// icon: Ikon till teckenförklaring
icon: '4'
},
popup: {
nameProperty: 'Adress',
template:
'<span class="title"></span>\
<dl>\
\
\
\
\
</dl>'
},
}, {
// name: lagernamn för lagret
name: 'Intressepunkt',
// Visible from start
showhide: true,
// clusterLayer: ifall man vill att lagret skall finnas i ett cluster lager
clusterlayer: true,
// Layer type
type: 'geoJSON',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: false,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: '',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 3,
},
legend: {
// icon: Ikon till teckenförklaring
icon: "1",
},
// geojson: lagringsnamn för features i kartan
geojson: {
// features: feature i kartan är en punkt där man kan he 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": [154031, 6578889]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// name: namn på Poi
"name": "Intressepunkt med länk",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// url: ifall man vill att Poi:en skall innehålla en url länk till en annan sida
"url": "https://etjanstpp.stockholm.se/styleguide/karta/styleguide.html",
// content: informations text för Poi:en
"content": "Ingress text till intressepunkt popup med bild och länk, placerad på Stortorget i Gamla stan. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [153710, 6579720]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt exempel",
// name: namn på Poi
"name": "Intressepunkt med bild",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// 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": "Ingress text till intressepunkt popup med bild. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [154471, 6578079]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt med info lista",
// name: namn på Poi
"name": "Katarina kyrkobacke 24",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// 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": "<dl><dt>Info</dt><dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.</dd><dt>Info lista</dt><dd>Lorem ipsum.</dd><dt>Rubrik</dt><dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd></dl>",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [154831, 6588829]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt exempel",
// name: namn på Poi
"name": "Intressepunkt med länk",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// url: ifall man vill att Poi:en skall innehålla en url länk till en annan sida
"url": "https://etjanstpp.stockholm.se/styleguide/karta/styleguide.html",
// content: informations text för Poi:en
"content": "Ingress text till intressepunkt popup med bild och länk. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [153785, 6578889]
},
//properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt exempel",
// name: namn på Poi
"name": "Intressepunkt med bild",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// 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": "Ingress text till intressepunkt popup med bild. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [154600, 6578300]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt exempel",
// name: namn på Poi
"name": "Intressepunkt med länk",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// url: ifall man vill att Poi:en skall innehålla en url länk till en annan sida
"url": "https://etjanstpp.stockholm.se/styleguide/karta/styleguide.html",
// content: informations text för Poi:en
"content": "Ingress text till intressepunkt popup med bild och länk. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [153785, 6548145]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt exempel",
// name: namn på Poi
"name": "Intressepunkt med bild",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// 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": "Ingress text till intressepunkt popup med bild. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [154875, 6578145]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt exempel",
// name: namn på Poi
"name": "Intressepunkt med länk",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// url: ifall man vill att Poi:en skall innehålla en url länk till en annan sida
"url": "https://etjanstpp.stockholm.se/styleguide/karta/styleguide.html",
// content: informations text för Poi:en
"content": "Ingress text till intressepunkt popup med bild och länk. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [153582, 6579458]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt exempel",
// name: namn på Poi
"name": "Intressepunkt med bild",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// 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": "Ingress text till intressepunkt popup med bild. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
// image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
// geometry: geometrin för Poi:en
"geometry": {
// point: typ av geometri
"type": "Point",
// coordinates: koordinaterna för punkten
"coordinates": [155097, 6578685]
},
// properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Intressepunkt med lista",
// name: namn på Poi
"name": "Kastellholmen",
// poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "1",
// 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": "<ul><li>Lorem ipsum dolor</li><li>Dolore magna aliqua</li></ul>",
// image: ifall man vill att poi:en skall innehålla en bild
"image": ""
}
}]
}
}, {
// name: lagernamn för lagret
name: 'Intressepunkt blå',
//showhide: synlighet av lager vid start
showhide: true,
// clusterLayer: ifall man vill att lagret skall finnas i ett cluster lager
clusterlayer: true,
//type: typ av lager
type: 'geoJSON',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: false,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: '',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 4,
},
legend: {
// icon: Ikon till teckenförklaring
icon: "5",
},
//geojson: lagringsnamn för features i kartan
geojson: {
//features: feature i kartan är en punkt där man kan he 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": [154131, 6578889]
},
//properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
// rubrik för Poi
"header": "Egen rubrik blå",
//name: namn på Poi
"name": "Intressepunkt Köpmangatan",
//poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "5",
//url: ifall man vill att Poi:en skall innehålla en url länk till en annan sida
"url": "https://etjanstpp.stockholm.se/styleguide/karta/styleguide.html",
//content: informations text för Poi:en
"content": "Ingress text till intressepunkt popup med bild och länk, placerad på Köpmangatan. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
//image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}, {
//geometry: geometrin för Poi:en
"geometry": {
//point: typ av geometri
"type": "Point",
//coordinates: koordinaterna för punkten
"coordinates": [154181, 6578889]
},
//properties: all data för innehållet i en Poi
"properties": {
"type": "Feature",
//name: namn på Poi
"name": "Intressepunkt Köpmantorget",
//poiType: vilken typ av symbol som man vill ha i kartan för denna Poi
"poiType": "5",
//url: ifall man vill att Poi:en skall innehålla en url länk till en annan sida
"url": "https://etjanstpp.stockholm.se/styleguide/karta/styleguide.html",
//content: informations text för Poi:en
"content": "Ingress text till intressepunkt popup med bild och länk, placerad på Köpmantorget. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
//image: ifall man vill att poi:en skall innehålla en bild
"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAACdCAAAAABdzahGAAAC7klEQVR42u3b23GrMBCA4fTkUwANUIAKMAWEAkIBdgEqIH6PKSAUAAW4AChAFKDjXEcCjMRMTs5Y+++jzTDDN6vbsjzsiEk8QAAJJJBAAgkkkEACCSSQQAIJJJAQkEACCSSQQAIJJJBAAgkkkEACCQEJJJBAAgkkkEACCSSBqG04TCaJJLcxcZJEUkeR2FwOSVySWPsqhyQySawtpJDEJom1Fykk0UlibSWDJD5JrO0zESSvG0h+dSH+byRnuynK5Emy1m6MQ9Ik+f5s7Obon/b3TmL/cUACCSSQQAIJJD9GMnQn/RanbhRCMtZaX24+YVO5xTN1vAggad5Ps9ViAox6ftTN6zFxkq8yUBUH8n4QqtMm+T7KzkZEd7vcXAwpk3z/rid/HFdPzI08kjFUQ6zTJcmXnzFcfK+TJdFfQ8FsrTM3yS7CaqGcpqMqcEOyWzV9HTuP3nrTzettT/pxVjwrBG3olZ8Nh08vcy4ippMkSWrv+rJ3/nrxNm+5FJLR26JNXmIYFUqTFEnqFZGJSS6ExJ0wjgvdR24SXUSQjKHJonUu0CJI6uAOtVxdhxMkcY57WbitRASJM5WU4Sa1QQJJvjpTTBOpk0CyW3ve2REIktkZ6ATJRwV7rUKQNknDwJkeg5leZ4uwCi9KIvYln6Piz/KuY7JVy0WQOHPn0vsuf0NfyTgJuxcP60vw0iEoRRInCXZqXK0wZUYGSeOVGacmowoMrCRrr16hcZInF6/Q2MssR2d6vNVLUEl9abHLquZtmh2aym+uyHo5JG3cnbSkXrWoF6ClrPa9iK/2lJFFYlToNrmR1uQZMlG9vL5XU67dpDAiW4Gft641Arqj+xuTbNELbhhvF1CKVngPfa+9eVY993xWcJ1oW33YX0PrNuZrSAkkfHwCCSSQQAIJJJBA8lskdxuQQAIJJJBAAgkkkEACCSSQQAIJJAQkkEACCSSQQAIJJJBAAgkkkEBCQAIJJJBAAgkkkEACyV3GX0eztuDw36V2AAAAAElFTkSuQmCC"
}
}]
}
}, {
// Layer name
name: 'Stockholm - WMTS',
// Layer URL
url: 'http://kartor.stockholm.se/bios/wmts/app/baggis/web/WMTS_ALL/1.0.0/WMTSCapabilities.xml',
capabilitiesXml: "<Capabilities xmlns='http://www.opengis.net/wmts/1.0' xmlns:ows='http://www.opengis.net/ows/1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ns4='http://www.opengis.net/gml' xmlns:ns5='http://www.w3.org/2001/SMIL20/' xmlns:ns6='http://www.w3.org/2001/SMIL20/Language' version='1.0.0'><ows:ServiceIdentification><ows:Title>Digpro WMTS</ows:Title><ows:ServiceType>OGC WMTS</ows:ServiceType><ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion></ows:ServiceIdentification><ows:ServiceProvider><ows:ProviderName>Digpro AB</ows:ProviderName></ows:ServiceProvider><ows:OperationsMetadata><ows:Operation name='GetCapabilities'><ows:DCP><ows:HTTP><ows:Get xlink:href='http://kartor.stockholm.se:80/bios/wmts/app/baggis/web/WMTS_ALL/1.0.0/WMTSCapabilities.xml'><ows:Constraint name='GetEncoding'><ows:AllowedValues><ows:Value>RESTful</ows:Value></ows:AllowedValues></ows:Constraint></ows:Get></ows:HTTP></ows:DCP></ows:Operation><ows:Operation name='GetTile'><ows:DCP><ows:HTTP><ows:Get xlink:href='http://kartor.stockholm.se:80/bios/wmts/app/baggis/web/WMTS_ALL/1.0.0'><ows:Constraint name='GetEncoding'><ows:AllowedValues><ows:Value>RESTful</ows:Value></ows:AllowedValues></ows:Constraint></ows:Get></ows:HTTP></ows:DCP></ows:Operation></ows:OperationsMetadata><Contents><Layer><ows:Title>Stockholmskarta gra_gron Stockholms stad</ows:Title><ows:WGS84BoundingBox><ows:LowerCorner>17.73540698970735 59.20019773730185</ows:LowerCorner><ows:UpperCorner>18.26459301029265 59.46949251212496</ows:UpperCorner></ows:WGS84BoundingBox><ows:Identifier>1002120_3011</ows:Identifier><ows:BoundingBox crs='EPSG:3011'><ows:LowerCorner>135000.0 6565000.0</ows:LowerCorner><ows:UpperCorner>165000.0 6595000.0</ows:UpperCorner></ows:BoundingBox><Style isDefault='true'><ows:Identifier>default</ows:Identifier></Style><Format>image/png</Format><TileMatrixSetLink><TileMatrixSet>1002120_3011</TileMatrixSet></TileMatrixSetLink><ResourceURL format='image/png' resourceType='tile' template='http://kartor.stockholm.se:80/bios/wmts/app/baggis/web/WMTS_ALL/1.0.0/1002120/default/1002120_5850/{TileMatrix}/{TileRow}/{TileCol}.png'/></Layer><Layer><ows:Title>Stadens manér Stockholms stad</ows:Title><ows:WGS84BoundingBox><ows:LowerCorner>16.392112626454928 58.27664312985253</ows:LowerCorner><ows:UpperCorner>20.751260799157887 60.44739362118056</ows:UpperCorner></ows:WGS84BoundingBox><ows:Identifier>1005020_3011</ows:Identifier><ows:BoundingBox crs='EPSG:3011'><ows:LowerCorner>61500.0 6465000.0</ows:LowerCorner><ows:UpperCorner>301500.0 6705000.0</ows:UpperCorner></ows:BoundingBox><Style isDefault='true'><ows:Identifier>default</ows:Identifier></Style><Format>image/png</Format><TileMatrixSetLink><TileMatrixSet>1005020_3011</TileMatrixSet></TileMatrixSetLink><ResourceURL format='image/png' resourceType='tile' template='http://kartor.stockholm.se:80/bios/wmts/app/baggis/web/WMTS_ALL/1.0.0/1005020/default/1005020_5850/{TileMatrix}/{TileRow}/{TileCol}.png'/></Layer><TileMatrixSet><ows:Identifier>1002120_3011</ows:Identifier><ows:SupportedCRS>EPSG:3011</ows:SupportedCRS><TileMatrix><ows:Identifier>0</ows:Identifier><ScaleDenominator>418526.78571428574</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>1</MatrixWidth><MatrixHeight>1</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>1</ows:Identifier><ScaleDenominator>209263.39285714287</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>2</MatrixWidth><MatrixHeight>2</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>2</ows:Identifier><ScaleDenominator>104631.69642857143</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>4</MatrixWidth><MatrixHeight>4</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>3</ows:Identifier><ScaleDenominator>52315.84821428572</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>8</MatrixWidth><MatrixHeight>8</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>4</ows:Identifier><ScaleDenominator>26157.92410714286</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>16</MatrixWidth><MatrixHeight>16</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>5</ows:Identifier><ScaleDenominator>13078.96205357143</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>32</MatrixWidth><MatrixHeight>32</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>6</ows:Identifier><ScaleDenominator>6539.481026785715</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>64</MatrixWidth><MatrixHeight>64</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>7</ows:Identifier><ScaleDenominator>3269.7405133928573</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>128</MatrixWidth><MatrixHeight>128</MatrixHeight></TileMatrix></TileMatrixSet><TileMatrixSet><ows:Identifier>1002090_3011</ows:Identifier><ows:SupportedCRS>EPSG:3011</ows:SupportedCRS><TileMatrix><ows:Identifier>0</ows:Identifier><ScaleDenominator>418526.78571428574</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>1</MatrixWidth><MatrixHeight>1</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>1</ows:Identifier><ScaleDenominator>209263.39285714287</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>2</MatrixWidth><MatrixHeight>2</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>2</ows:Identifier><ScaleDenominator>104631.69642857143</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>4</MatrixWidth><MatrixHeight>4</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>3</ows:Identifier><ScaleDenominator>52315.84821428572</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>8</MatrixWidth><MatrixHeight>8</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>4</ows:Identifier><ScaleDenominator>26157.92410714286</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>16</MatrixWidth><MatrixHeight>16</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>5</ows:Identifier><ScaleDenominator>13078.96205357143</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>32</MatrixWidth><MatrixHeight>32</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>6</ows:Identifier><ScaleDenominator>6539.481026785715</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>64</MatrixWidth><MatrixHeight>64</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>7</ows:Identifier><ScaleDenominator>3269.7405133928573</ScaleDenominator><TopLeftCorner>135000.0 6595000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>128</MatrixWidth><MatrixHeight>128</MatrixHeight></TileMatrix></TileMatrixSet><ows:Identifier>1005020_3011</ows:Identifier><ows:SupportedCRS>EPSG:3011</ows:SupportedCRS><TileMatrix><ows:Identifier>0</ows:Identifier><ScaleDenominator>3348214.285714286</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>1</MatrixWidth><MatrixHeight>1</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>1</ows:Identifier><ScaleDenominator>1674107.142857143</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>2</MatrixWidth><MatrixHeight>2</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>2</ows:Identifier><ScaleDenominator>837053.5714285715</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>4</MatrixWidth><MatrixHeight>4</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>3</ows:Identifier><ScaleDenominator>418526.78571428574</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>8</MatrixWidth><MatrixHeight>8</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>4</ows:Identifier><ScaleDenominator>209263.39285714287</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>16</MatrixWidth><MatrixHeight>16</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>5</ows:Identifier><ScaleDenominator>104631.69642857143</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>32</MatrixWidth><MatrixHeight>32</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>6</ows:Identifier><ScaleDenominator>52315.84821428572</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>64</MatrixWidth><MatrixHeight>64</MatrixHeight></TileMatrix><TileMatrix><ows:Identifier>7</ows:Identifier><ScaleDenominator>26157.92410714286</ScaleDenominator><TopLeftCorner>61500.0 6705000.0</TopLeftCorner><TileWidth>256</TileWidth><TileHeight>256</TileHeight><MatrixWidth>128</MatrixWidth><MatrixHeight>128</MatrixHeight></TileMatrix></TileMatrixSet></Contents></Capabilities>",
layer: '1002120_3011',
// Sthlm manér layer: '1005020_3011',
// Visible from start
showhide: false,
// zoomnivåer
zoom: 7,
maxZoom: 16,
minZoom: 5,
singelPopupZoomLevel: 14,
geolocationZoomLevel: 12,
// Layer type
type: 'wmts',
placement: {
// backgroundlayer: ifall detta lagret skall vara ett bakgrundslager eller ej
backgroundlayer: true,
//backgroundlayername: namnet på grupperingen som ni vill att detta lagret skall ingå i. (ej nödvändigt ifall lagret ej är ett bakgrundslager)
backgroundlayername: 'Bakgrundskarta',
// order: ju högre värde numret har ju högre i position hamnar lagret, i respektive bakgrundslager eller kartlager.
order: 6,
},
servertype: 'geoserver',
legend: {
// header: huvudrubrik för teckenförklaring
"header": "Rubrik",
// subheader: rubrik för ingress i tekenförklaring
"subheader": "Ingress (kort beskrivning av kartlager)",
// content: brödtext för teckenförklaring
"content": [{
//header: huvudrubrik för objekt
"header": "Teckenrubrik",
// text: text för objekt
"text": "Teckenförklaring (kort beskrivning)",
// image: bild för objekt
"image": ""
}, {
//header: huvudrubrik för objekt
"header": "",
// text: text för objekt
"text": "Teckenförklaring (kort beskrivning)",
// image: bild för objekt
"image": ""
}]
}
}
]
}Releases (versioner)
Stockholms kartor finns i flera olika versioner, en för varje release som gjorts. Denna prototyp och styleguide ligger alltid i version 3.1.2 dvs den innehåller alltid det 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.
OBS! att använda "3.1.2" i produktion inte är att rekommendera då breaking changes kan ske från version till version. Alla referenser till filer i 3.1.2 sker på egen risk.
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-init.js
│ └── s-map.min.js
├── openlayers
│ ├── ol.css
│ └── ol.js
└── scss
└── *.scss
URL-strukturen ser ut som följande
| # Version | URL |
|---|---|
| 3.1.2 | https://static.test.stockholm.se/karta/3.1.2/ |
| 1.2.0 | https://static.test.stockholm.se/karta/1.2.0/ |
| 1.1.0 | https://static.test.stockholm.se/karta/1.1.0/ |
| 1.0.0 | https://static.test.stockholm.se/karta/1.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
## [1.6.0] - 2022-11-18
Release notes
- New feature, search address in map.
- New layer type WMTS can be added.
- Added support for polygon and linestring as clickable in WMS when pop-up enabled.
- Map scale now shows km.
- Layer switch is now <button> instead of <a> due to markup validation warnings.
- Popup with image has now a height this fixes popup jumps if loading image is slow.
- s-map-sm has new aspect-ratio CSS.
URL
- https://static.test.stockholm.se/karta/1.6.0/
## [1.5.4] - 2021-11-24
Release notes
For this release, HTML code needs to be changed. See example code for structure and basic functionality for s-map and popup further up on this page.
- Dropdown headers is now <span class="s-map-panel-header"> instead of <h4>.
- Panel headers is now <span class="s-map-panel-title"> instead of <h4>.
- Popup header .s-map-popup-header is now <div> instead of <h5>.
- Popup title <span class="title"> instead of <h5>.
- Button:s with redundant aria-label removed.
- <a> with attribute role="listitem" removed.
- <a> with attribute "aria-role" changed to "role".
- .s-map-panel-nav <a> and <label> with redundant aria-label removed.
- .s-map-panel-nav, bad role="tablist" and role="tab" removed.
- "Visa fullskärm" changed to "Fullskärm".
- For e-service .s-map-lg fullscreen has now fixed position fullscreen due to e-tjanst 3.0.0 navigation/footer and <div id="content" role="main"> new structure.
- Colors update from webbmanual.stockholm.
- Button:s with attribute aria-selected="false" changed to aria-expanded="false".
- Button:s with attribute aria-controls="#" id # removed.
URL
- https://static.test.stockholm.se/karta/1.5.4/
## [1.5.3] - 2019-11-15
Release notes
- Sharper shadows with layered box-shadow, for better contrast.
- Share map, button and tab, styles.
- Panel tabs min-height and max-height fix for s-map-md.
- Fullscreen s-map-lg padding top bottom removed.
- Added the ability to add if fullscreen for s-map-lg:s scroll to search input.
- Added the ability to add opacity on map layers.
- Map autopan margin now 24px for users to se the difference between s-map panel nav and popup header.
URL
- https://static.test.stockholm.se/karta/1.5.3/
## [1.5.2] - 2019-09-13
Release notes
- Yellow color is more distinguishable.
- S-map gets tab focus for keyboard pan and keyboard zoom. Also link in popups gets visible tab focus.
- Layer switch more accessible and distinguishable.
- Cursor change to pointer will now only happen if it is a geoJSON layer with features, or if it's a layer that drills data with connected template.
- Arcgis is now avalible as a map source for layers.
- Cluster popups will now always close on zoom in and out.
- New WFS layer with ability to configure poi:s and using cluster.
- Now it´s possible to add maxZoom and minZoom on layers.
URL
- https://static.test.stockholm.se/karta/1.5.2/
## [1.5.1] - 2019-06-24
Release notes
- Stockholm manér example WMS with parameter TILED: true
- Popup image figure removed min-height for use of different ratios.
- Added ability to have tiled layers connected to Arcgis, layer type needs to be 'tileArcGis' to use.
URL
- https://static.test.stockholm.se/karta/1.5.1/
## [1.5.0] - 2019-03-11
Release notes
- Get feature info on WMS
- Popup content max-height increased to 300px and better accessibility for popups.
- New map size s-map-xl for applications with special needs.
- OpenLayers version 5.3.0
URL
- https://static.test.stockholm.se/karta/1.5.0/
## [1.4.2] - 2019-02-18
Release notes
- Fixed issues concerning compatability with the Epi-addon 2.0.0
- Map styleguide URL change https://etjanstpp.stockholm.se/styleguide/karta/
- OpenLayers version 5.3.0
URL
- https://static.test.stockholm.se/karta/1.4.2/
## [1.4.1] - 2018-12-13
Release notes
- New tileGrid and resolutions using Stockholm manér ESPG:3011 calculations.
- New zoomlevels from min/maxResolution.
- Added param to be able to use default OSM layer in OpenLayer.
- Better responsive fullscreen heights for ios Safari action-bar.
- OpenLayers version 5.3.0
URL
- https://static.test.stockholm.se/karta/1.4.1/
## [1.4.0] - 2018-11-12
Release notes
- Added support to sort poi:s in popup.
- Added support to refresh popup with new poi:s when toggling layers and zooming.
- Added support to show sum of poi:s count in clusterpoi (1000-1k).
- Map sizes added .s-map-md and .s-map-sm.
- Fixed createPoi bug where the poi wouldn't show up on map and added new function addPoi.
- Removed "Nära mig" functionality from map.
- Added addPois() function that adds pois to a layer, compared to createPois() that replaces the existing pois.
- Increased accessibility, support to tab to items inside nav menus and .s-map-panel-nav and .s-map-switch to trigger functionality.
- OpenLayers version 5.2.0
URL
- https://static.test.stockholm.se/karta/1.4.0/
## [1.3.1] - 2018-10-01
Release notes
- Trimmed OpenLayers cluster distance and cluster POI:s are smaller.
- Visible zoom buttons on smallscreens for usability.
- Fixed bug that made it impossible to have several maps on same page.
- Change the initialization function name to init(), it works the same as the old function.
- Added the ability to change the visibility of the fullscreen button on start, with the fullScreenVisibility param.
- Added modify object in the config file.
- Added modifyPosition in modify object, to add the ability for change the poi positions.
- Added modifyRemove in modify object, to add the ability for removing poi:s.
- Added ability to change cluster size.
- Added ability to change zoomlevel where combinedclusterlayer toggels to normal layers.
- Added ability to add custom buttons (with draw tools).
- Added ability to add custom buttons to pupup.
- OpenLayers version 5.2.0
URL
- https://static.test.stockholm.se/karta/1.3.1/
## [1.3.0] - 2018-08-16
Release notes
- Combined cluster layer for POI.
- Combined cluster popup, change content based on visible POI layers.
- Geolocation updates the location marker if changed.
- Searchresults panel and cluster POI example in map.
- OpenLayers version 5.1.3
URL
- https://static.test.stockholm.se/karta/1.3.0/
## [1.2.2] - 2018-06-28
Release notes
- POI legend in layers panel.
- Display legend panel if layer has legend exists and layer is shown.
- Added tilegrid param, for ability to send a tileGrid with a tileWMS. With custom dimensions on tiles.
- OpenLayers version 4.6.4
URL
- https://static.test.stockholm.se/karta/1.2.2/
## [1.2.1] - 2018-06-20
Release notes
- Added parameter to json struct, now able to change zoomlevels in json.
- Fixed bug with fullscreen, if page content is not greater than page height.
- Legend list gets center align items for better looks.
- Firefox s-map-search form-control width fix.
- OpenLayers version 4.6.4
URL
- https://static.test.stockholm.se/karta/1.2.1/
## [1.2.0] - 2018-05-28
Release notes
- Added parameter to json struct for specific popups headers defaults to layer name if not set.
- Single feature zoom level to a dynamic parameter.
- Search example in header, .s-map-search .search-reset position and autocomplete-list.
- OpenLayers version 4.6.4
URL
- https://static.test.stockholm.se/karta/1.2.0/
## [1.1.0] - 2018-05-15
Release notes
- Max zoom level and min zoom level as a dynamic param.
- Cluster feature zoom level to a dynamic parameter.
- OpenLayers version 4.6.4
URL
- https://static.test.stockholm.se/karta/1.1.0/
## [1.0.0] - 2018-05-02
Release notes
- First release
- OpenLayers version 4.6.4
URL
- https://static.test.stockholm.se/karta/1.0.0/