From 354e8aa6abfcc37452c8bcf8bab2d481612bb750 Mon Sep 17 00:00:00 2001
From: Guilhem Moulin <guilhem@fripost.org>
Date: Fri, 17 Oct 2025 00:26:39 +0200
Subject: Add an help modal with instructions how to use the map.

---
 index.html | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)

(limited to 'index.html')

diff --git a/index.html b/index.html
index b5d4381..b3a8748 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,149 @@
         </div>
       </div>
     </div>
+    <div class="modal" id="help-modal" tabindex="-1" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" title="Stäng" aria-label="Stäng"></button>
+          </div>
+          <div id="help-body" class="modal-body">
+            <h3>Navigering</h3>
+            <p>Kartan är interaktiv och kontrolleras med musen.  Tryck ner på
+            musens första knapp och dra kartan för att byta koordinater.</p>
+            <p>Zoomnivån kan styras med musens rullhjul, eller alternativt med
+            knapparna och skjutreglaget längst upp till vänster.  Den aktuella
+            skalan visas längst ner till vänster på kartan.</p>
+            <p>Både koordinater och zoomnivå sparas i URL:en, så om du delar
+            URL:en med någon annan eller sparar den i din webbläsares bokmärken
+            kommer senare besök att landa på samma plats samt zoomnivå på
+            kartan.</p>
+            <p>Klickar du på ett objekt på kartan – exempelvis ett
+            undersökningstillstånd eller ett naturreservat (läs mer om lagerval
+            nedan) – så visar det valda objektet med en cyanfärgad kantlinje
+            samt dyker ett fönster upp med information om just det objektet.
+            Både informationen och geometrier kommer från ansvarig myndighet.
+            I fall det finns flera objekt i närheten av just platsen du klickade
+            på, så antalet träffar visas högst upp på informationsfönstret
+            (exempelvis ”<span class="fst-italic text-muted">Träff 1 av 3</span>”) och du
+            kan välja mellan dem genom att klicka på pilarna
+            <span class="popover-header">
+              <button class="popover-button popover-button-prev text-muted help-button"></button>/<button class="popover-button popover-button-next text-muted help-button"></button>
+            </span> bredvid.
+            Informationsfönstret kan flyttas runt om det står i vägen, samt att
+            det förstoras om rutan är för liten.</p>
+
+            <h3>Funktionsknappar</h3>
+            <p>Det finns ett antal funktionsknappar längst upp till
+            höger på kartan.  Om du låter muspekaren vila på varje
+            knapp, dyker en hjälptext upp.</p>
+
+            <ol id='help-describe-functions'>
+              <li data-for-button='layer-selection-button'>
+                <p>Här kan du välja mellan olika lager att ha på kartan.
+                Det finns massor med lager, och de grupperas ihop så att
+                det är enkelt att välja hela gruppen på en gång.  Klickar
+                du på pilen
+                <span class="accordion"><span class="accordion-button collapsed help-button text-muted"></span></span>
+                kan du istället välja ett specifikt lager.</p>
+                <p>Längst ned finns knappar där du kan välja att se
+                administrativa gränser, samt välja mellan nedtonad eller färgad
+                bakgrundskarta.</p>
+                <p>Lager, precis som koordinater och zoomnivå, sparas i URL:en.
+                Så om du delar URL:en med någon annan eller sparar den i din
+                webbläsares bokmärken kommer senare besök att landa på samma vy
+                (eventuellt med uppdaterat underlag).</p>
+              </li>
+
+              <li data-for-button='map-legend-button'>
+                <p>Här ser du symboler för alla lager som valts ut.</p>
+              </li>
+
+              <li data-for-button='measure-button'>
+                <p>Med det här verktyget kan du rita direkt på kartan och mäta
+                distanser eller ytor.  Till exempel kan du lätt mäta avståndet
+                mellan en viss exploatering och ett skyddat område eller
+                kommungräns.</p>
+              </li>
+
+              <li data-for-button='age-filter-button'>
+                <p>Med det här verktyget kan du filtrera bort gamla
+                exploateringar, vilket underlättar övervakning.  Det är bra att
+                kunna fokusera på nya exploateringen, då det annars snabbt kan
+                kännas överväldigande.</p>
+
+                <p>Om filtret är aktivt så blir knappen svart.  Filterparametrar
+                sparas i URL:en, så en övervaknings-URL till ett specifik område
+                kan enkelt delas med andra eller bokmärkas.</p>
+              </li>
+
+              <li data-for-button='fullscreen-toggle'>
+                <p>Genom att klicka på knappen kan du aktivera eller inaktivera
+                helskärmsläget.</p>
+              <li>
+
+              <li data-for-button='export-to-image'>
+                <p>Genom att klicka på knappen kan du ladda ner den aktuella
+                kartvyn som en bild.  Bilden kan då användas i en rapport eller
+                ett yttrande.</p>
+              </li>
+
+              <li data-for-button='info-button'>
+                <p>Här kan du se källor och licensvillkor för varje lager samt
+                själva kartverktyget.
+                För de flesta lager finns det också en produktlänk till den
+                ansvariga myndighetens webbplats.</p>
+                <p>Bredvid varje källa kan du se när den senast hämtades av
+                kartverktyget, samt när skikten generades på kartan (det vill
+                säga hur gammalt underlaget är på kartan).
+                Nedladdning samt uppdatering av underlag för kartan sker
+                automatiskt varje dag.</p>
+              </li>
+
+              <li data-for-button='help-button'>
+                <p>Om du klickar på den här knappen ser du det här
+                hjälpfönstret.</p>
+              </li>
+            </ol>
+
+            <h3>Målgrupp och syftet</h3>
+            <p class="mb-2">Kartan kan användas som en hjälp i att välja vilka
+            exploateringar som är viktigast att bekämpa.  Målgruppen för kartan
+            är individer och organisationer som vill:</p>
+            <ol>
+              <li>se kumulativa effekter av olika exploateringar i
+                norr</li>
+              <li>se var en viss exploatering ligger i förhållande
+                till ett område av intresse (ex formellt skydd, höga
+                naturvärden, riksintresse med flera)</li>
+              <li>övervaka de senaste exploateringarna i ett visst
+                område.</li>
+            </ol>
+
+            <p>Viktigt att komma ihåg är att allt underlag i kartan
+            kommer från olika myndigheter (Bergsstaten, Skogsstyrelsen,
+            Länsstyrelsen, Naturvårdsverket med flera) och ingen modell
+            finns för att assistera i själva avvägningen.
+            Med andra ord så samlar kartan in befintliga underlag från
+            olika myndigheter istället för att själv presentera något
+            nytt, och den data kartan presenterar är därmed information
+            som kan ingå i rapporter och yttranden (och ingen kan hävda
+            att underlaget är påhittat).</p>
+
+            <p>Underlagen för kartan uppdateras automatiskt varje dag.
+            Se ovan för detaljer om hur gammalt varje underlag är.</p>
+
+            <h3>Buggrapporter och feedback</h3>
+            <p>Tveka inte att skicka ett
+            <a href="mailto:Z3VpbGhlbQ __AT__ ZnJpcG9zdA __DOT__ b3Jn" target="_blank" class="link-secondary email-address-b64">mejl
+              <i class="bi bi-envelope-at"></i></a>
+            med önskemål, buggrapporter, förslag till
+            förbättring med flera.
+            Kartverktyget samt tillhörande verktyg är alla fri programvara.</p>
+          </div>
+        </div>
+      </div>
+    </div>
     <script type="module" src="./main.js"></script>
     <noscript>Den här sidan kräver JavaScript men din webbläsare stöder inte det (eller så är skript blockerade).</noscript>
   </body>
-- 
cgit v1.2.3