Hoppa till innehåll
Meny
  • Hem
  • Dokument
  • Om Mig
Geosupportsystem

Experimentet fortsätter – Stil

Publicerat den 2014-05-21

(Läs del 1 och del 2)

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.

Screenshot from 2014-05-17 15:37:33

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”.

Screenshot from 2014-05-17 10:55:19

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.

Screenshot from 2014-05-17 11:01:36Just 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.

Screenshot from 2014-05-17 11:05:13

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.

  1. 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.
  2. 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.

Screenshot from 2014-05-17 15:42:55

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 svar på ”Experimentet fortsätter – Stil”

  1. Pingback: Experimentet fortsätter – Lager | Geosupportsystem
  2. Pingback: Experimentet avslutas – eller? | Geosupportsystem

Lämna ett svar Avbryt svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Translate with Google

GBR In English
GER Auf Deutch
FRA En Français
ESP En Español
Swedish is a hard language for a machine to translate. Nuance and detail will likely be lost.
     Mastodon  

Bok om QGIS på Svenska

Bok

Beställ Boken/E-bok genom att klicka på bilden (även förhandsgranskning).

Senaste kommentarer

  • Albin om DTM från laserdata
  • William om Koordinater och 32 bitar
  • 10gbrand om Geonode 4.0 (jag har i alla fall försökt)
  • Anders Jackson om Bästa nybörjar Linux
  • Magnus Storsjö om LM Open Data Plug-In för QGIS 3.0

Arkiv

geosupport

Dags att testa GNSS Dags att testa GNSS
Det går en gräns någonstans där det är mer lämpligt att använda ett program som Blender för att visualisera geografi i stället för GIS. Här har jag passerat den gränsen för ganska länge sedan...
GoPro och OpenDroneMap samt visualisering i QGIS. GoPro och OpenDroneMap samt visualisering i QGIS.
Bara tänk om fler GIS program kunde stödja öppna punktmolnsformat som dom inte hittat på själva...
COPC/LAZ
Ladda mer...

Meta

  • Logga in
  • Flöde för inlägg
  • Flöde för kommentarer
  • WordPress.org
©2023 Geosupportsystem | WordPress-tema av Superbthemes.com