Webbverktyg för att publicera scenarion och uppgifter på en karta. Den "platta" versionen använder enbart frontend-tekniker och flat-files-datahantering för enkel driftsättning med Github Pages. Det finns en mer utförlig version med fler funktioner baserad på backend-tekniker och databaser under utveckling.
Systemet kan ses i aktiv användning på Nätverksskolan.
För att kunna jobba med systemet behövs en grundläggande förståelse för JSON och webbkoncept. Kunskap i Bootstraps färg och klassystem hjälper för vissa valfria funktioner.
Det snabbaste sättet att komma igång med din egen version av scenariokartan är att använda Githubs funktioner Fork och Pages, och den här guiden utgår från dem. Du kan även ladda ner filerna, redigera dem och lägga upp dem på en webbserver.
Se till att du har ett konto på Github och klicka på knappen Fork uppe i högra hörnet på den här sidan.
När du följt guiden så har du en egen kopia av systemet. Om du är intresserad kan du läsa mer om forking
För att använda Google Maps behövs en API-nyckel kopplad till ett debiteringkonto hos Google. Det är inte gratis att använda Google Maps men det ingår 28000 visningar per månad innan det börjar kosta något. Läs mer om vad det kostar på [https://cloud.google.com/maps-platform/pricing/sheet].
Följ instruktionerna på [https://developers.google.com/maps/gmp-get-started#procedures] för att skapa ett konto och en kopplad nyckel. Tänk på att sätta en begränsning på vilka domäner som kan använda nyckeln så att ingen annan kan använda din nyckel.
- Byt namn på template_settings.json till settings.json eller skapa en settings.json.
- Redigera settings.json och skriv in din API-nyckel och namn på sidan, "area" kan lämnas som den är.
- area: En area / område är en fil med ett antal markörer angivna på kartan och information för de punkterna. Du kan välja om du vill ha en enda fil, flera som du växlar mellan i settings.json eller flera som du växlar mellan med hjälp av URL-Parametrar. Ett sätt att använda detta är att ha olika områden för olika moment eller kurser istället för att ha flera olika sidor.
Om du vill göra mer ingående inställningar kan du läsa mer i wikin.
- Byt namn på /areas/template_default_area.json till default_area.json eller skapa en default_area.json i mappen areas. Din area-fil kan heta vad som helst så länge den ligger i mappen area och är angiven i settings.json.
- Redigera default_area.json med de platser och uppgifter du vill ha. Ett enkelt sätt att få fram latitud och longitud för en plats är att öppna Google Maps och högerklicka på platsen, den första raden i menyn som kommer upp är latitud och longitud för den punkten.
- location: En location / plats är en markör på kartan kopplad till ett informationsfönster. En plats kan representera ett scenario / en uppgift eller en samlingsplats för flera uppgifter genom actions. Systemet med JSON är inte så enkelt att använda för långa texter så du kan välja om du vill skriva fullständiga instruktioner i beskrivningen eller istället länka till dokument med instruktioner.
- action: En action / uppgift är en knapp med en länk till en fritt vald sida/fil/annat.
Viktigt att namnet på varje plats är unikt då det används för att generera interna och externa länkar till informationsrutor.
Om du vill göra mer ingående inställningar kan du läsa mer i wikin.
Genom Github Pages kan du driftsätta en sida utan att behöva ha en egen server så länge den bara innehåller frontend-tekniker.
- Gå till ditt repository för din sida och klickar på Settings.
- Hitta rubriken Github Pages och klicka på knappen None
- Välj main i listan och klicka på Save
- När sidan har laddat om så går du tillbaka till rubriken Github Pages och nu kan du se adressen för din sida.
- Använd den adressen för att begränsa vilka sidor som kan använda din Google Maps API Key
Nybearbetning av ideerna i [https://github.com/KajSchmidt/natverksskolan]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent