Jag tänkte återkoppla lite till slutet på gårdagen där jag mer eller mindre bara konstaterade att man kan fixa till stilen på kartan med css…
Det har jag nu gjort ganska mycket, och lärt mig en hel del, som jag därför tänkte dela med mig av.
Sedan gårdagen så har jag ändrat lite bland kontrollerna. Jag tyckte exempelvis att skalstocken såg tråkig ut och bytte från ”scaleLine” till ”scaleBar”, vilket i sig inte är svårt, men då denna inte ingår som standard i OpenLayers så fick man ladda hem ScaleBar.js och hänvisa till denna i HTML-dokumentet på samma sätt som för OpenLayers.js. Det går att hänvisa till skriptet online, men jag ville ändra texten ”KILOMETERS” till det mer svenska ”KILOMETER” och då blev det lättast att helt enkelt ändra texten i javaskriptet. Till ”scaleBar” så finns en mängd stilar som styr utseendet och dessa hämtade jag från ett exempel, modifierade och lade till i min egen css-fil.
Erfarenhet:
När man ändrar en stil i en css-fil och ändringen inte slår igenom så är det för att stilen redan regleras av standardstilmallen. En lösning är att använda standardstilmallen och ändra där, eller så får man ge de stilar som inte vill slå igenom extra betydelse med tillägget ”!important”.
I bilden ovan så framgår även hur man fixar till rundningar på hörn med två rader. Vill man ha samma radie på alla hörn så räcker det att ange ett värde, men i mitt fall så ville jag att det inte skulle vara någon rundning ut mot högerkanten.
Det mesta som jag använt i min karta tror jag nog att jag därmed tagit upp. Olika objekt positioneras med top, bottom, left, right och textfärger ändras med color. Vill man ändra stilen på en länk i en kontroll (exempelvis OpenStreetMap länken) så lägger man till en stil enligt bilden nedan.
Just det. Knappar och sliders med mera. Här hittade jag en mall där man kan skapa egna ”ikoner” men mallen såg så bra ut att jag helt enkelt använde den oförändrad.
En SVG-fil (länk) går enkelt att redigera i exempelvis Inkscape och de markerade ytorna exporteras ut med angivna namn. Bilderna sparas sedan som standard i ”img” katalogen för OpenLayers.
Att notera är att det blir samma knapp för att visa översiktskartan som för att välja lager. Detta går inte enkelt att ändra då parametern är hårdkodad i javaskriptet. Tillvägagångssättet blir då att redigera källkoden och kompilera en ny egen OpenLayers.js. Det tänker jag dock inte göra här.
Jag har även lagt till en extra DIV-tag för rubriken. Även denna ”stajlas” med css och för att få till det så att den ritas ut över kartan så behöver man göra ett par saker.
- För det första skall man använda z-index för både rubrik, i mitt fall, och karta där rubriken har ett högre index.
- Detta räcker dock ej utan både rubrik och karta måste ha en position, vilket kan låta märkligt när min karta är 100% bred och 100% hög.
Jag gav div-taggen för kartan klassnamnet ”map” (class=”map”) och rubriken namnet ”rubrik”. På så sätt så adresserar jag alla element på samma sätt. Kartan fick z-index -1 och alla andra element jag vill ha ovanpå ges ett positivt index, vilket får dessa att ritas ut över kartan.
I morgon skall jag titta närmare på mina QGIS-Server lager, och exempelvis se vad som händer när det blir många lager i listan.
0 thoughts on “Experimentet fortsätter – Stil”