Sommarsemesterns projekt är nu genomfört, dåliga dagar var detsamma som kodning och hackande för att få ihop en ny interaktiv karta med utflyktsmål, rastplatser med mera för https://skaneturer.se vilket är en annan sida jag driver.
Under de senaste veckorna har vi utvecklat en interaktiv karta över MC‑destinationer i Skåne — ett projekt som vid första anblick kan verka enkelt, men som i praktiken kräver en noggrant genomtänkt arkitektur, ett flexibelt datalager, en robust WordPress‑integration och en visuellt tydlig kartmotor. Kartan är byggd för att vara snabb, modulär, lätt att uppdatera och enkel att bädda in på vilken WordPress‑sida som helst.
Det här är en djupgående genomgång av hur kartan byggdes, vilka tekniska val som gjordes, hur datastrukturen är uppbyggd, hur Leaflet driver interaktiviteten och hur shortcodes gör kartan flexibel för redaktörer. Artikeln beskriver också hur vi arbetat med design, prestanda och framtida möjligheter.
Det ursprungliga målet var att skapa en karta som visar MC‑vänliga destinationer i Skåne — caféer, utsiktsplatser, verkstäder, rastplatser och andra intressanta stopp. Men visionen var större än att bara placera ut punkter på en karta. Kartan skulle:
- vara interaktiv, inte statisk
- vara datadriven, inte hårdkodad
- vara modulär, inte monolitisk
- vara WordPress‑vänlig, inte beroende av specialmiljöer
- vara lätt att uppdatera, utan att redaktörer behöver röra kod
- vara visuellt tydlig, även på mobil
- vara prestandaoptimerad, även med många POI‑punkter
Det innebar att kartan behövde byggas som ett system — inte som en enskild komponent.
Varför JSON-baserad data till att börja med? JSON är ett naturligt val för kartdata, särskilt när kartan ska vara modulär och lätt att uppdatera. Fördelarna är tydliga:
- JSON är lätt att läsa och skriva
- JSON är kompatibelt med JavaScript och Leaflet
- JSON är filbaserat, vilket gör det enkelt att lägga till nya dataset
- JSON är flexibelt, vilket gör det möjligt att representera olika typer av punkter
- JSON är snabbt, eftersom Leaflet kan läsa och rendera det direkt
Det gör JSON till ett perfekt format för en destinationsfil.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "MC‑destination",
"description": "Beskrivning av platsen",
"category": "café"
},
"geometry": {
"type": "Point",
"coordinates": [13.12345, 55.67890]
}
}
]
}Den här strukturen gör det möjligt att:
- visa popup‑information
- filtrera på kategorier
- skapa olika ikonstilar
- kombinera flera POI‑filer i samma karta
- lägga till metadata som öppettider, prisnivå eller MC‑vänlighet
Eftersom kartan bygger helt på POI‑punkter är koordinaterna kritiska. Felaktiga koordinater leder till:
- punkter som hamnar långt utanför Skåne
- punkter som hamnar i havet
- punkter som hamnar på fel sida av vägen
- punkter som inte syns vid autozoom
Vi har därför lagt stor vikt vid:
- validering av koordinater
- kontroll av decimaler
- kontroll av ordningen (longitude först, latitude sedan)
- testning i kartan
Det här är en av de viktigaste delarna av arbetet.
WordPress och shortcodes.
Shortcodes är ett av WordPress mest kraftfulla verktyg. Genom att använda shortcodes kan vi:
- bädda in kartan på vilken sida som helst
- låta redaktörer välja vilka POI‑filer som ska laddas
- låta kartan vara olika på olika sidor
- skicka konfigurationsparametrar till JavaScript
- undvika att redaktörer behöver röra kod
Det gör kartan extremt flexibel.
Shortcoden vi utvecklade ser ut så här:
[leaflet_map poi="skane_poi.json"]Men den kan också vara mer avancerad:
[leaflet_map poi="mc_destinations.json" zoom="10" center="55.9,13.5"]Shortcoden är alltså inte bara ett sätt att ladda kartan — det är ett sätt att konfigurera den.
PHP-delen, shortcoden och kopplingen till kartan.
Shortcoden hanteras av ett PHP‑skript som:
- läser shortcode‑parametrarna
- genererar HTML‑containern
- skickar parametrarna vidare till JavaScript
- laddar rätt JSON‑filer
- initierar Leaflet‑kartan
Det här skapar en tydlig separation mellan:
- WordPress‑logik
- kartlogik
- datalagring
Det gör pluginet lätt att underhålla och utöka.
Varför Leaflet är perfekt för POI‑kartor?
Leaflet är ett av världens mest använda kartbibliotek. Det är:
- snabbt
- lättviktigt
- modulärt
- open source
- kompatibelt med alla moderna webbläsare
För en POI‑karta är Leaflet perfekt eftersom det:
- hanterar punktdata elegant
- har bra stöd för popup‑fönster
- har bra zoom‑kontroller
- fungerar utmärkt på mobil
- är lätt att utöka med plugins
Kartinitieringen
Kartinitieringen sker i map.js:
var map = L.map('map').setView([55.9, 13.5], 9);Därefter läggs bakgrundslagret på:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);POI‑punkter laddas med:
fetch(poiFile)
.then(response => response.json())
.then(data => L.geoJSON(data, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng);
}
}).addTo(map));Här kan vi lägga till:
- specialikoner
- popup‑mallar
- kategorifilter
- klickhändelser
fitBounds: kartans autozoom
Eftersom kartan bara innehåller punkter är fitBounds särskilt effektiv:
map.fitBounds(layer.getBounds());Det här gör kartan:
- användarvänlig
- automatiskt anpassad
- visuellt balanserad
Safari‑konsolen som verktyg.
Safari har en utmärkt JavaScript‑konsol, och den blev ett av våra viktigaste verktyg. Vi använde den för att:
- testa variabler
- kontrollera JSON‑innehåll
- se felmeddelanden
- följa POI‑rendering
- validera koordinater
Vanliga fel under utvecklingen.
Fel 1: felaktiga koordinater
Exempel:
- [55.67890, 13.12345] istället för [13.12345, 55.67890]
- koordinater i fel ordning
- koordinater som saknade decimaler
Fel 2: JSON‑fel
Orsak:
- saknade kommatecken
- felaktiga citationstecken
- felaktig struktur
Lösningen: validering och testning.
Vi byggde en rutin:
- validera JSON
- testa i konsolen
- rendera i kartan
- kontrollera fitBounds
- justera koordinater
Det här gjorde kartan stabil och förutsägbar.
Design: ikoner, färger, popup‑mallar och karttema.
Vi valde att använda:
- café‑ikoner
- utsiktsplatser
- MC‑vänliga stopp
- verkstäder
Ikonerna är viktiga eftersom de:
- gör kartan lätt att läsa
- skapar visuellt fokus
- hjälper användaren att navigera
Popup‑fönster kan innehålla:
- namn
- beskrivning
- kategori
- öppettider
- bilder
- länkar
Vi experimenterade med:
- ljus tema
- mörkt tema
- minimalistiskt OSM‑tema
Det slutliga valet blev ett ljus OSM‑tema eftersom det:
- är tydligt
- fungerar bra med färgade ikoner
- är lätt att läsa på mobil
Lazy loading.
Kartan laddar:
- POI‑filen först
- kartmotorn därefter
Browsercache gör kartan snabbare vid återbesök.