Shortcode for openstreetmap (#264)

* Spelling correction on `notices.md`

* Added shortcode for `openstreetmap`
Updated `README.md`
Added `map.md` under `exampleSite\content\post`

* Fixed title on example page

* Spelling correction on `notices.md`

Signed-off-by: Imran Akram <imran@biznamics.com>

* Added shortcode for `openstreetmap`
Updated `README.md`
Added `map.md` under `exampleSite\content\post`

Signed-off-by: Imran Akram <imran@biznamics.com>

* Fixed title on example page

Signed-off-by: Imran Akram <imran@biznamics.com>

* Fixed spelling error

* Removed `frameBorder` from iframe

* Added css class `openstreetmap` on iframe

* Fixed incorrect heading levels

5 files changed, 64 insertions, 1 deletions

diff --git a/README.md b/README.md
index d4a1b5a..f9dd595 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,7 @@ A technology-minded theme for Hugo based on VMware's open-source [Clarity Design
   * [Hooks](#hooks)
   * [Comments](#comments)
   * [Math notation](#math-notation)
+  * [Open Street Map](#map)
   * [Search](#search)
 
 ## Features
@@ -856,6 +857,33 @@ The site configuration option `showRelatedInArticle` controls if this option is
 
 Likewise, the site configuration option `showRelatedInSidebar` controls if related content is shown on the sidebar. There is no corresponding option within a post to disable this.
 
+### Map
+
+#### Creating and including a map
+
+First create a map for free on https://umap.openstreetmap.fr/en/. Then include this map by using the `openstreetmap` shortcode, e.g. `{{<openstreetmap mapName="demo-map_1" >}}`
+
+#### Options
+
+The only required parameter is `mapName`. All other parameters are completely optional.
+
+Available parameters are:
+- `coordX` (default `auto`)
+- `coordY` (default `auto`)
+- `scale`  (default `auto`)
+- `scaleControl` (default `true`)
+- `miniMap` (default `false`)
+- `scrollWheelZoom` (default `true`)
+- `zoomControl` (default `true`)
+- `allowEdit` (default `false`)
+- `moreControl` (default `true`)
+- `searchControl` (default `true`)
+- `tilelayersControl` (default `null`)
+- `embedControl` (default `null`)
+- `datalayersControl` (default `true`)
+- `onLoadPanel` (default `none`)
+- `captionBar` (default `false`)
+
 ### Search
 
 Search is currently a BETA feature. Ensure you have these settings inside your configuration files:
diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index ccd0b85..beaeb12 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -762,3 +762,7 @@ figcaption
   .search
     &_title, &_result
       padding: 0.5rem 0
+
+.openstreetmap
+	border: none
+	
\ No newline at end of file
diff --git a/exampleSite/content/post/map.md b/exampleSite/content/post/map.md
new file mode 100644
index 0000000..af6c611
--- /dev/null
+++ b/exampleSite/content/post/map.md
@@ -0,0 +1,8 @@
+---

+author: Hugo Authors

+title: Using OpenStreetMap

+date: 2022-02-14

+description: Using Map functionality within this theme using openstreetmap

+---

+

+{{<openstreetmap mapName="demo-map_1" scale="14" coordX="-37.7989" coordY="145.0003">}}
\ No newline at end of file
diff --git a/exampleSite/content/post/notices.md b/exampleSite/content/post/notices.md
index 34ecd44..66b9a50 100644
--- a/exampleSite/content/post/notices.md
+++ b/exampleSite/content/post/notices.md
@@ -2,7 +2,7 @@
 author: Hugo Authors
 title: Using Notices
 date: 2021-08-20
-description: Using Notices functionality withhin this theme
+description: Using Notices functionality within this theme
 ---
 
 The "Notices" shortcode enables you to call out pieces of information - sidebars, warnings, tips, etc.
diff --git a/layouts/shortcodes/openstreetmap.html b/layouts/shortcodes/openstreetmap.html
new file mode 100644
index 0000000..9136717
--- /dev/null
+++ b/layouts/shortcodes/openstreetmap.html
@@ -0,0 +1,23 @@
+{{ $mapName := .Get "mapName" }}

+

+{{ $mapWidth := .Get "mapWidth" | default "100%" }}

+{{ $mapHeight := .Get "mapHeight" | default "600px" }}

+

+{{ $scaleControl := .Get "scaleControl" | default "true"  }}

+{{ $miniMap := .Get "miniMap" | default "false" }}

+{{ $scrollWheelZoom := .Get "scrollWheelZoom" | default "true" }}

+{{ $zoomControl := .Get "zoomControl" | default "true" }}

+{{ $allowEdit := .Get "allowEdit" | default "false" }}

+{{ $moreControl := .Get "moreControl" | default "true" }}

+{{ $searchControl := .Get "searchControl" | default "true" }}

+{{ $tilelayersControl := .Get "tilelayersControl" | default "null" }}

+{{ $embedControl := .Get "embedControl" | default "null" }}

+{{ $datalayersControl := .Get "datalayersControl" | default "true" }}

+{{ $onLoadPanel := .Get "onLoadPanel" | default "none" }}

+{{ $captionBar := .Get "captionBar" | default "false" }}

+

+{{ $scale := .Get "scale" }}

+{{ $coordX := .Get "coordX" }}

+{{ $coordY := .Get "coordY" }}

+

+<iframe class="openstreetmap" width="{{ $mapWidth }}" height="{{ $mapHeight }}" src="https://umap.openstreetmap.fr/en/map/{{- $mapName -}}?scaleControl={{ $scaleControl }}&miniMap={{ $miniMap }}&scrollWheelZoom={{ $scrollWheelZoom }}&zoomControl={{ $zoomControl }}&allowEdit={{ $allowEdit }}&moreControl={{ $moreControl }}&searchControl={{ $searchControl }}&tilelayersControl={{ $tilelayersControl }}&embedControl={{ $embedControl }}&datalayersControl={{ $datalayersControl }}&onLoadPanel={{ $onLoadPanel }}&captionBar={{ $captionBar }}{{ with $scale}}#{{ . }}{{ end }}/{{ $coordX }}/{{ $coordY }}"></iframe>