init

guide.json

@@ -0,0 +1,154 @@
+[
+  {
+    "target": "o-zoom-in",
+    "name": "zoom",
+    "description": "Zooma in i kartan",
+    "icon": "#ic_add_24px"
+  },
+  {
+    "target": "o-zoom-out",
+    "name": "zoom",
+    "description": "Zooma ut i kartan",
+    "icon": "#ic_remove_24px"
+  },
+  {
+    "target": "o-home-in",
+    "name": "home",
+    "description": "Tar kartan till startposition",
+    "icon": "#ic_home_24px"
+  },
+  {
+    "target": "o-geoposition",
+    "name": "geoposition",
+    "description": "Tar kartan till din position",
+    "icon": "#ic_near_me_24px"
+  },
+  {
+    "target": "o-measure",
+    "name": "measure",
+    "description": "Mät avtånd och ytor",
+    "icon": "#ic_straighten_24px"
+  },
+  {
+    "target": "o-bookmark-button",
+    "name": "bookmarks",
+    "description": "Här finns direktlänkar till specifika platser i kartan",
+    "icon": ""
+  },
+  {
+    "target": "o-external-url",
+    "name": "externalurl",
+    "description": "Öppnar fler knappar där du kan välja att öppna din kartposition i annan applikation",
+    "icon": "#ic_baseline_link_24px"
+  },
+  {
+    "target": "swiper-tool-button",
+    "name": "new control",
+    "description": "Jämför kartlager med svepare eller titthål",
+    "icon": "#mui-compare"
+  },
+  {
+    "target": "o-menu-button",
+    "name": "editor",
+    "description": "Växlar redigeringsläge",
+    "icon": "#ic_edit_24px"
+  },
+  {
+    "target": "o-mapmenu",
+    "name": "mapmenu",
+    "description": "",
+    "icon": "#ic_menu_24px",
+    "group": [
+      {
+        "target": "o-mapmenu",
+        "name": "about",
+        "description": "Här finner du mer information",
+        "icon": "#ic_help_outline_24px"
+      },
+      {
+        "target": "o-mapmenu",
+        "name": "link",
+        "description": "Tar dig någon annanstans...",
+        "icon": "#ic_launch_24px"
+      },
+      {
+        "target": "o-mapmenu",
+        "name": "print",
+        "description": "Skriv ut kartan till en pdf",
+        "icon": "#ic_print_24px"
+      },
+      {
+        "target": "o-mapmenu",
+        "name": "sharemap",
+        "description": "Dela din karta med en kompis!",
+        "icon": "#ic_screen_share_outline_24px"
+      },
+      {
+        "target": "o-mapmenu",
+        "name": "draw",
+        "description": "Rita och skriv på kartan i egna lager. Det går även att importera och/eller exportera ritade lager i formatet GeoJSON.",
+        "icon": "#fa-pencil"
+      }
+    ]
+  },
+  {
+    "target": "ol-attribution",
+    "name": "attribution",
+    "description": "Tillskrivningar för aktiva kartlager",
+    "icon": "#fa-copyright"
+  },
+  {
+    "target": "o-fullscreen",
+    "name": "fullscreen",
+    "description": "Öppnar kartan i helskärmsläge",
+    "icon": "#ic_fullscreen_24px"
+  },
+  {
+    "target": "o-legend",
+    "name": "legend",
+    "description": "Innehållsförteckning och teckenförklaring - visa eller dölj kartlager, klicka på rubriker och kartlager för information, ändra lagers genomskinlighet mm",
+    "icon": "#ic_layers_24px"
+  },
+  {
+    "target": "o-position",
+    "name": "position",
+    "description": "Klicka på denna om du vill ha positionen från kartans centrum och kan definiera egna koordinater direkt i koordinatdescriptionen. Byt system genom att klicka på koordinatsystemet",
+    "icon": "#ic_gps_not_fixed_24px"
+  },
+  {
+    "target": "ol-rotate",
+    "name": "rotate",
+    "description": "Rotera kartan med två fingrar på pekskärm, håll ned Shift+Alt på PC. Klicka på symbolen för att återgå",
+    "icon": "#origo-compass"
+  },
+  {
+    "target": "o-search",
+    "name": "search",
+    "description": "Sök i kartan",
+    "icon": "#ic_search_24px"
+  },
+  {
+    "target": "o-scale",
+    "name": "scale",
+    "description": "Visar kartans nuvarande skala",
+    "icon": ""
+  },
+  {
+    "target": "ol-scale-line",
+    "name": "scaleline",
+    "description": "Visar en skalstock som förmedlar ett ungefärligt världsligt avstånd i kartan",
+    "icon": "img/png/origo_skalstock.JPG"
+  },
+  {
+    "target": "undefined",
+    "name": "draganddrop",
+    "description": "Du har möjlighet att dra in kartlager från din dator till kartan. Möjliga format är: GPX, GeoJSON, IGC, KML och TopoJSON",
+    "icon": "#drag-and-drop"
+  },
+  {
+    "target": "o-scalepicker",
+    "name": "scalepicker",
+    "description": "Visar kartans nuvarande skala. Klicka för att välja skala manuellt",
+    "icon": ""
+  }
+]

scss/_guide.scss

@@ -0,0 +1,22 @@
+.o-guide {
+    align-items: center;
+}
+
+.o-guide span {
+    max-width: 30px;
+    min-width:60px;
+}
+
+.o-guide-target {
+    animation: target-animate 1s ease infinite alternate;
+}
+
+@keyframes target-animate {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(1.1);
+    }
+}

scss/origo.scss

@@ -49,6 +49,7 @@
   @import 'scalepicker';
   @import 'embedded-overlay';
   @import 'spinner';
+  @import 'guide';
 }
 
 html,
@@ -92,4 +93,4 @@ body {
     border-top-color: #fff;
     animation: spin 1s ease-in-out infinite;
   }
-}
+}

scss/ui/_variables.scss

@@ -132,6 +132,7 @@ $size-full: calc(100% - (#{$app-margin} * 2));
 $size-100: 100%;
 
 // padding
+$padding-largest: $size-7;
 $padding-larger: $size-5;
 $padding-large: $size-2;
 $padding-standard: $size-1;

scss/ui/helpers/_padding.scss

@@ -60,6 +60,68 @@
   padding-top: $padding-large;
 }
 
+// larger padding
+.padding-larger {
+  padding: $padding-larger;
+}
+
+.padding-top-larger {
+  padding-top: $padding-larger;
+}
+
+.padding-right-larger {
+  padding-right: $padding-larger;
+}
+
+.padding-bottom-larger {
+  padding-bottom: $padding-larger;
+}
+
+.padding-left-larger {
+  padding-left: $padding-larger;
+}
+
+.padding-x-larger {
+  padding-left: $padding-larger;
+  padding-right: $padding-larger;
+}
+
+.padding-y-larger {
+  padding-bottom: $padding-larger;
+  padding-top: $padding-larger;
+}
+
+// largest padding
+.padding-largest {
+  padding: $padding-largest;
+}
+
+.padding-top-largest {
+  padding-top: $padding-largest;
+}
+
+.padding-right-largest {
+  padding-right: $padding-largest;
+}
+
+.padding-bottom-largest {
+  padding-bottom: $padding-largest;
+}
+
+.padding-left-largest {
+  padding-left: $padding-larger;
+}
+
+.padding-x-largest {
+  padding-left: $padding-largest;
+  padding-right: $padding-largest;
+}
+
+.padding-y-largest {
+  padding-bottom: $padding-largest;
+  padding-top: $padding-largest;
+}
+
 // small padding
 .padding-small {
   padding: $padding-small;

src/controls.js

@@ -23,3 +23,4 @@ export { default as Splash } from './controls/splash';
 export { default as Zoom } from './controls/zoom';
 export { default as Externalurl } from './controls/externalurl';
 export { default as Scalepicker } from './controls/scalepicker';
+export { default as Guide } from './controls/guide';

src/controls/about.js

@@ -7,7 +7,7 @@ const About = function About(options = {}) {
   } = options;
   const {
     content = '<p></p>',
-    icon = '#ic_help_outline_24px',
+    icon = '#ic_info_outline_24px',
     title = 'Om kartan'
   } = options;
 

src/controls/externalurl/externalurlSeveralButtons.js

@@ -43,7 +43,7 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = {
       });
 
       externalUrlMainButton = Button({
-        cls: 'o-measure padding-small margin-bottom-smaller icon-smaller round light box-shadow',
+        cls: 'o-external-url padding-small margin-bottom-smaller icon-smaller round light box-shadow',
         icon: '#ic_baseline_link_24px',
         tooltipText: mainbuttonTooltipText,
         tooltipPlacement: 'east',

src/controls/externalurl/externalurlSingleButton.js

@@ -47,7 +47,7 @@ const ExternalurlSingleButton = function ExternalurlSingleButton(options = {}) {
         cls: 'flex column'
       });
       exUrlBtn = Button({
-        cls: 'o-measure padding-small margin-bottom-smaller icon-smaller round light box-shadow',
+        cls: 'o-external-url padding-small margin-bottom-smaller icon-smaller round light box-shadow',
         icon: buttonImage,
         tooltipText: tooltip,
         tooltipPlacement: 'east',