├── .gitignore
├── Gruntfile.js
├── LICENSE
├── dist
    ├── css
    │   ├── waymark-js.css
    │   └── waymark-js.min.css
    ├── fonts
    │   ├── FontAwesome.otf
    │   ├── fontawesome-webfont.eot
    │   ├── fontawesome-webfont.svg
    │   ├── fontawesome-webfont.ttf
    │   ├── fontawesome-webfont.woff
    │   ├── fontawesome-webfont.woff2
    │   ├── ionicons.eot
    │   ├── ionicons.svg
    │   ├── ionicons.ttf
    │   └── ionicons.woff
    ├── images
    │   ├── fullscreen.png
    │   ├── fullscreen@2x.png
    │   ├── geocoder.png
    │   ├── layers-2x.png
    │   ├── layers.png
    │   ├── throbber.gif
    │   └── waymark-icon-red.png
    └── js
    │   ├── waymark-js.js
    │   └── waymark-js.min.js
├── docs
    ├── .gitignore
    ├── README.md
    ├── app.vue
    ├── assets
    │   ├── main.less
    │   └── prism.css
    ├── components
    │   ├── Content.vue
    │   ├── ContentNav.vue
    │   ├── ContentToc.vue
    │   ├── Footer.vue
    │   ├── Header.vue
    │   ├── Icon.vue
    │   ├── Map.vue
    │   └── Nav.vue
    ├── content
    │   ├── 1.index.md
    │   ├── 2.map.md
    │   ├── 3.viewer.md
    │   ├── 4.editor.md
    │   └── 5.customise.md
    ├── nuxt.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── assets
    │   │   └── icon
    │   │   │   ├── github.svg
    │   │   │   ├── waymark.svg
    │   │   │   └── wordpress.svg
    │   ├── dist
    │   │   └── latest
    │   │   │   ├── css
    │   │   │       ├── waymark-js.css
    │   │   │       └── waymark-js.min.css
    │   │   │   ├── fonts
    │   │   │       ├── FontAwesome.otf
    │   │   │       ├── fontawesome-webfont.eot
    │   │   │       ├── fontawesome-webfont.svg
    │   │   │       ├── fontawesome-webfont.ttf
    │   │   │       ├── fontawesome-webfont.woff
    │   │   │       ├── fontawesome-webfont.woff2
    │   │   │       ├── ionicons.eot
    │   │   │       ├── ionicons.svg
    │   │   │       ├── ionicons.ttf
    │   │   │       └── ionicons.woff
    │   │   │   ├── images
    │   │   │       ├── fullscreen.png
    │   │   │       ├── fullscreen@2x.png
    │   │   │       ├── geocoder.png
    │   │   │       ├── layers-2x.png
    │   │   │       ├── layers.png
    │   │   │       ├── throbber.gif
    │   │   │       └── waymark-icon-red.png
    │   │   │   └── js
    │   │   │       ├── waymark-js.js
    │   │   │       └── waymark-js.min.js
    │   └── examples
    │   │   ├── assets
    │   │       ├── config
    │   │       │   └── route.json
    │   │       ├── css
    │   │       │   └── examples.css
    │   │       ├── geo
    │   │       │   ├── 404.geojson
    │   │       │   ├── route-busy.geojson
    │   │       │   ├── route.geojson
    │   │       │   ├── route.gpx
    │   │       │   └── route.kml
    │   │       └── img
    │   │       │   └── canada.svg
    │   │   ├── editor-form.html
    │   │   ├── editor
    │   │       ├── custom.html
    │   │       └── pub.html
    │   │   └── viewer
    │   │       ├── 404.html
    │   │       ├── basemap.html
    │   │       ├── formats.html
    │   │       ├── pub.html
    │   │       └── route.html
    └── tsconfig.json
├── index.html
├── libs
    ├── css
    │   ├── Control.Geocoder.css
    │   ├── L.Control.Locate.min.css
    │   ├── font-awesome.min.css
    │   ├── ionicons.min.css
    │   ├── leaflet-elevation.css
    │   ├── leaflet.fullscreen.min.css
    │   └── leaflet.min.css
    └── js
    │   ├── Control.Geocoder.js
    │   ├── L.Control.Locate.min.js
    │   ├── Leaflet.Editable.js
    │   ├── Leaflet.FeatureGroup.SubGroup.js
    │   ├── Leaflet.Sleep.js
    │   ├── leaflet-elevation.js
    │   ├── leaflet.fullscreen.min.js
    │   ├── leaflet.markercluster.js
    │   ├── leaflet.min.js
    │   ├── leaflet.polylineDecorator.js
    │   ├── togeojson.min.js
    │   ├── togpx.js
    │   └── tokml.js
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── readme.md
└── src
    ├── css
        ├── Waymark_Map.css
        ├── Waymark_Map_Editor.css
        └── Waymark_Map_Viewer.css
    ├── js
        ├── Waymark_Map.js
        ├── Waymark_Map_Editor.js
        ├── Waymark_Map_Factory.js
        └── Waymark_Map_Viewer.js
    └── less
        ├── Waymark_Map.less
        ├── Waymark_Map_Editor.less
        └── Waymark_Map_Viewer.less


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (grunt) {
 2 | 	grunt.initConfig({
 3 | 		pkg: grunt.file.readJSON("package.json"),
 4 | 
 5 | 		less: {
 6 | 			js_css: {
 7 | 				files: {
 8 | 					"src/css/Waymark_Map.css": "src/less/Waymark_Map.less",
 9 | 					"src/css/Waymark_Map_Viewer.css": "src/less/Waymark_Map_Viewer.less",
10 | 					"src/css/Waymark_Map_Editor.css": "src/less/Waymark_Map_Editor.less",
11 | 				},
12 | 			},
13 | 		},
14 | 
15 | 		concat: {
16 | 			js_js: {
17 | 				src: [
18 | 					"libs/js/leaflet.min.js",
19 | 					"libs/js/*",
20 | 					"src/js/Waymark_Map.js",
21 | 					"src/js/Waymark_Map_Viewer.js",
22 | 					"src/js/Waymark_Map_Editor.js",
23 | 					"src/js/Waymark_Map_Factory.js",
24 | 				],
25 | 				dest: "dist/js/waymark-js.js",
26 | 			},
27 | 			js_css: {
28 | 				src: ["libs/css/*.css", "src/css/*.css"],
29 | 				dest: "dist/css/waymark-js.css",
30 | 			},
31 | 		},
32 | 
33 | 		terser: {
34 | 			js_js: {
35 | 				files: {
36 | 					"dist/js/waymark-js.min.js": ["dist/js/waymark-js.js"],
37 | 				},
38 | 			},
39 | 		},
40 | 
41 | 		cssmin: {
42 | 			js_css: {
43 | 				files: {
44 | 					"dist/css/waymark-js.min.css": "dist/css/waymark-js.css",
45 | 				},
46 | 			},
47 | 		},
48 | 
49 | 		copy: {
50 | 			js: {
51 | 				files: [
52 | 					{
53 | 						expand: true,
54 | 						cwd: "dist/",
55 | 						src: ["**"],
56 | 						dest: "docs/public/dist/latest/",
57 | 					},
58 | 				],
59 | 			},
60 | 		},
61 | 
62 | 		watch: {
63 | 			js_js: {
64 | 				files: ["src/js/*.js"],
65 | 				tasks: ["build_js_js", "copy:js"],
66 | 			},
67 | 			js_css: {
68 | 				files: ["src/less/*.less"],
69 | 				tasks: ["build_js_css", "copy:js"],
70 | 			},
71 | 		},
72 | 	});
73 | 
74 | 	grunt.loadNpmTasks("grunt-terser");
75 | 	grunt.loadNpmTasks("grunt-contrib-concat");
76 | 	grunt.loadNpmTasks("grunt-contrib-cssmin");
77 | 	grunt.loadNpmTasks("grunt-contrib-less");
78 | 	grunt.loadNpmTasks("grunt-contrib-watch");
79 | 	grunt.loadNpmTasks("grunt-contrib-copy");
80 | 
81 | 	grunt.registerTask("default", [
82 | 		"less",
83 | 		"concat",
84 | 		"terser",
85 | 		"cssmin",
86 | 		"copy",
87 | 		"watch",
88 | 	]);
89 | 
90 | 	grunt.registerTask("build_js_js", ["concat:js_js", "terser:js_js"]);
91 | 
92 | 	grunt.registerTask("build_js_css", [
93 | 		"less:js_css",
94 | 		"concat:js_css",
95 | 		"cssmin:js_css",
96 | 	]);
97 | };
98 | 


--------------------------------------------------------------------------------
/dist/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/dist/fonts/ionicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/ionicons.eot


--------------------------------------------------------------------------------
/dist/fonts/ionicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/ionicons.ttf


--------------------------------------------------------------------------------
/dist/fonts/ionicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/fonts/ionicons.woff


--------------------------------------------------------------------------------
/dist/images/fullscreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/images/fullscreen.png


--------------------------------------------------------------------------------
/dist/images/fullscreen@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/images/fullscreen@2x.png


--------------------------------------------------------------------------------
/dist/images/geocoder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/images/geocoder.png


--------------------------------------------------------------------------------
/dist/images/layers-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/images/layers-2x.png


--------------------------------------------------------------------------------
/dist/images/layers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/images/layers.png


--------------------------------------------------------------------------------
/dist/images/throbber.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/images/throbber.gif


--------------------------------------------------------------------------------
/dist/images/waymark-icon-red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/dist/images/waymark-icon-red.png


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .data
8 | .env
9 | /dist


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Waymark JS Docs
 2 | 
 3 | ## Setup
 4 | 
 5 | Make sure to install the dependencies:
 6 | 
 7 | ```bash
 8 | # pnpm (npm|yarn) install
 9 | pnpm install
10 | ```
11 | 
12 | ## Development Server
13 | 
14 | Start the development server on http://localhost:3000
15 | 
16 | ```bash
17 | pnpm run dev
18 | ```
19 | 
20 | ## Build
21 | 
22 | Build the application for production:
23 | 
24 | ```bash
25 | pnpm run generate
26 | ```
27 | 


--------------------------------------------------------------------------------
/docs/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header />
 4 | 
 5 |     <Content />
 6 | 
 7 |     <Footer />
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/docs/assets/main.less:
--------------------------------------------------------------------------------
  1 | @waymark-primary: rgba(180, 39, 20, 1); //#b42714
  2 | @waymark-grey-light: #eee;
  3 | @waymark-grey-dark: rgba(51, 51, 51, 1); //#333
  4 | @waymark-text: #333;
  5 | @waymark-link: #1e98bb;
  6 | @waymark-highlight: #54a322;
  7 | 
  8 | body {
  9 |   padding: 10px;
 10 |   // background: #0d1117;
 11 |   // color: @waymark-grey-light;
 12 |   font-family: "Noto Sans", Helvetica, Arial, sans-serif;
 13 |   font-size: 18px;
 14 | 
 15 |   /* Global Styles */
 16 |   img {
 17 |     max-width: 100%;
 18 |     max-height: 100%;
 19 |   }
 20 | 
 21 |   /* Header */
 22 |   header {
 23 |     border-bottom: 1px solid #ddd;
 24 |     background: #0d1117;
 25 | 
 26 |     span {
 27 |       color: @waymark-primary;
 28 |     }
 29 | 
 30 |     select {
 31 |       padding: 5px 10px;
 32 |       border: 1px solid @waymark-grey-light;
 33 |       border-radius: 3px;
 34 |       background: @waymark-grey-dark;
 35 |       color: @waymark-grey-light;
 36 |       font-size: 16px;
 37 | 
 38 |       option {
 39 |         background: @waymark-grey-dark;
 40 | 
 41 |         &:hover {
 42 |           background: @waymark-grey-light;
 43 |         }
 44 |       }
 45 |     }
 46 |   }
 47 | 
 48 |   /* Main */
 49 |   main {
 50 |     padding-top: 80px;
 51 | 
 52 |     .markdown-body {
 53 |       font-size: inherit;
 54 | 
 55 |       > p:first-child {
 56 |         font-size: 24px;
 57 |         line-height: 1.2em;
 58 |       }
 59 | 
 60 |       h1,
 61 |       h2,
 62 |       h3,
 63 |       h4 {
 64 |         margin: 0 0 10px 0;
 65 |         padding: 5px 0;
 66 |         border-bottom: 3px solid @waymark-grey-light;
 67 |         color: @waymark-primary;
 68 | 
 69 |         &:first-child {
 70 |           margin-top: 0;
 71 |           padding-top: 0;
 72 |         }
 73 | 
 74 |         a {
 75 |           color: @waymark-primary !important;
 76 | 
 77 |           text-decoration: none;
 78 |           border-bottom: none;
 79 |         }
 80 |       }
 81 | 
 82 |       h1:not(:first-child),
 83 |       h2:not(:first-child),
 84 |       h3:not(:first-child) {
 85 |         padding-top: 100px !important;
 86 |       }
 87 | 
 88 |       h3 {
 89 |         margin-bottom: 15px;
 90 |         // padding: 7px 0;
 91 |         border-bottom-width: 2px;
 92 |       }
 93 |       h4 {
 94 |         margin-bottom: 15px 0;
 95 |         padding: 5px 0;
 96 |         border-bottom-width: 1px;
 97 |       }
 98 |     }
 99 | 
100 |     a {
101 |       color: @waymark-link !important;
102 |       border-bottom: 1px dotted @waymark-link;
103 | 
104 |       &:visited {
105 |         color: darken(@waymark-link, 30%);
106 |         border-bottom: none;
107 |       }
108 |     }
109 | 
110 |     p,
111 |     td {
112 |       code {
113 |         display: inline-block;
114 |         border: 1px dashed #ddd;
115 |       }
116 |     }
117 | 
118 |     blockquote {
119 |       margin-top: 20px !important;
120 |       // margin: 0 !important;
121 |       padding: 20px !important;
122 |       border-left: 4px solid @waymark-highlight !important;
123 |       background: @waymark-grey-light;
124 |       color: @waymark-text;
125 |       p {
126 |         overflow: hidden;
127 |         font-size: 18px !important;
128 | 
129 |         span {
130 |           margin-left: -5px;
131 |           display: block;
132 |           font-weight: bold;
133 |         }
134 |       }
135 |     }
136 | 
137 |     pre {
138 |       &.shiki.github-dark {
139 |         font-size: 12px;
140 | 
141 |         code {
142 |           span {
143 |             margin-bottom: 2px;
144 |           }
145 |         }
146 |       }
147 |     }
148 |   }
149 | 
150 |   /* Footer */
151 |   footer {
152 |     display: flex;
153 |     justify-content: space-between;
154 |     margin-top: 30px;
155 |     padding-top: 20px;
156 |     border-top: 2px solid #ddd;
157 |     font-size: 14px;
158 | 
159 |     a {
160 |       color: @waymark-text;
161 |       text-decoration: none;
162 |     }
163 | 
164 |     > div {
165 |       display: flex;
166 |       align-items: center;
167 | 
168 |       &.middle {
169 |         justify-content: center;
170 | 
171 |         .waymark-icon-github {
172 |           margin: 0 10px;
173 |         }
174 |       }
175 |     }
176 |   }
177 | }
178 | 
179 | /* Mobile */
180 | @media (max-width: 768px) {
181 |   main {
182 |     table {
183 |       td {
184 |         font-size: 12px;
185 | 
186 |         code {
187 |           word-break: break-all;
188 |         }
189 |       }
190 |     }
191 |   }
192 | 
193 |   footer {
194 |     .right {
195 |       display: none;
196 |     }
197 |   }
198 | }
199 | 


--------------------------------------------------------------------------------
/docs/assets/prism.css:
--------------------------------------------------------------------------------
 1 | pre[class*="language-"],
 2 | code[class*="language-"],
 3 | pre[class*="language-"] *,
 4 | code[class*="language-"] * {
 5 | 	white-space: pre-wrap;
 6 | 	margin-bottom: 10px;
 7 | 	z-index: 0;
 8 | 	background: #222 !important;
 9 | }
10 | pre[class*="language-"],
11 | code[class*="language-"] {
12 | 	/* Light Grey  */
13 | 	color: #f1f1f1;
14 | 	font-family: Monaco, "Andale Mono", "Ubuntu Mono", monospace;
15 | 	border: 1px solid #b4271450;
16 | }
17 | .token.comment,
18 | .token.prolog,
19 | .token.doctype,
20 | .token.cdata,
21 | .token.punctuation {
22 | 	/* Warm Grey  */
23 | 	color: #bea6a0;
24 | }
25 | .token.property,
26 | .token.tag,
27 | .token.boolean,
28 | .token.number,
29 | .token.constant,
30 | .token.symbol,
31 | .token.deleted {
32 | 	/* Pink */
33 | 	color: #aad3df;
34 | }
35 | .token.selector,
36 | .token.attr-name,
37 | .token.string,
38 | .token.char,
39 | .token.builtin,
40 | .token.inserted {
41 | 	/* Light Green / Grey */
42 | 	color: #a5ae9d;
43 | }
44 | .token.operator,
45 | .token.entity,
46 | .token.url,
47 | .language-css .token.string,
48 | .style .token.string {
49 | 	/* Light Green / Grey */
50 | 	color: #a5ae9d;
51 | }
52 | .token.atrule,
53 | .token.attr-value,
54 | .token.keyword {
55 | 	/* Light Green / Grey */
56 | 	color: #a5ae9d;
57 | }
58 | .token.regex,
59 | .token.important,
60 | .token.variable,
61 | .token.function {
62 | 	/* Pink  */
63 | 	color: #ff8897;
64 | }
65 | 


--------------------------------------------------------------------------------
/docs/components/Content.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | // onMounted(() => {
 3 | //   setTimeout(() => {
 4 | //     //Iterate over each .remark-highlight .token.comment element
 5 | //     document.querySelectorAll("span.token.comment").forEach((el) => {
 6 | //       // Add newline
 7 | //       el.innerHTML += "\n";
 8 | //     });
 9 | //   }, 200);
10 | // });
11 | </script>
12 | 
13 | <template>
14 |   <main>
15 |     <article>
16 |       <ClientOnly>
17 |         <Map />
18 |       </ClientOnly>
19 | 
20 |       <ContentToc />
21 | 
22 |       <ContentDoc class="markdown-body">
23 |         <template #not-found>
24 |           <Map mapPath="/examples/viewer/404.html" />
25 | 
26 |           <h1>Not Found</h1>
27 | 
28 |           <p>The content you are looking for can not be found.</p>
29 |         </template>
30 |       </ContentDoc>
31 | 
32 |       <ContentNav />
33 |     </article>
34 |   </main>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/docs/components/ContentNav.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const { prev, next } = useContent();
 3 | 
 4 | const scrollToTop = () => {
 5 |   setTimeout(() => {
 6 |     window.scrollTo({
 7 |       top: 0,
 8 |       behavior: "smooth",
 9 |     });
10 |   }, 100);
11 | };
12 | </script>
13 | <template>
14 |   <!-- Smooth scroll to top of body -->
15 |   <div class="pagination">
16 |     <NuxtLink v-if="prev" :to="prev._path" class="prev" @click="scrollToTop">{{
17 |       prev.title
18 |     }}</NuxtLink>
19 | 
20 |     <NuxtLink v-if="next" :to="next._path" class="next" @click="scrollToTop">{{
21 |       next.title
22 |     }}</NuxtLink>
23 |   </div>
24 | </template>
25 | 
26 | <style lang="less">
27 | .pagination {
28 |   display: flex;
29 |   justify-content: space-between;
30 |   margin-top: 2rem;
31 |   margin-bottom: 2rem;
32 | 
33 |   a {
34 |     display: inline-block;
35 |     padding: 1rem;
36 |     border: none;
37 |     text-decoration: none;
38 | 
39 |     &.prev {
40 |       margin-right: auto;
41 | 
42 |       &:before {
43 |         content: "←";
44 |         margin-right: 0.5rem;
45 |       }
46 |     }
47 | 
48 |     &.next {
49 |       margin-left: auto;
50 | 
51 |       &:after {
52 |         content: "→";
53 |         margin-left: 0.5rem;
54 |       }
55 |     }
56 |   }
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/docs/components/ContentToc.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const { toc, page } = useContent();
 3 | const { route } = useRoute();
 4 | 
 5 | const title = computed(() => {
 6 | 	if (page.title) {
 7 | 		return page.title;
 8 | 	}
 9 | 
10 | 	return "Contents";
11 | });
12 | </script>
13 | 
14 | <template>
15 | 	<nav class="toc" v-if="page">
16 | 		<h4 v-if="title">{{ title }}</h4>
17 | 
18 | 		<ul v-if="toc && toc.links">
19 | 			<li v-for="link in toc.links" :key="link.text">
20 | 				<NuxtLink :href="`#${link.id}`">
21 | 					{{ link.text }}
22 | 				</NuxtLink>
23 | 
24 | 				<ul v-if="link.children">
25 | 					<li v-for="child in link.children" :key="child.text">
26 | 						<NuxtLink :href="`#${child.id}`">
27 | 							{{ child.text }}
28 | 						</NuxtLink>
29 | 					</li>
30 | 				</ul>
31 | 
32 | 				<!-- <li v-for="link in toc.links" :key="link.text">
33 | 				<a :href="`#${link.id}`">
34 | 					{{ link.text }}
35 | 				</a>
36 | 			</li> -->
37 | 			</li>
38 | 		</ul>
39 | 	</nav>
40 | </template>
41 | 
42 | <style lang="less">
43 | .toc {
44 | 	color: #666 !important;
45 | 	padding: 10px;
46 | 	padding-left: 10px;
47 | 	margin-bottom: 20px;
48 | 	background-color: #f7f7f7;
49 | 	border-left: 4px solid #e0e0e0;
50 | 
51 | 	h4 {
52 | 		margin: 10px 0;
53 | 		font-weight: 600;
54 | 		color: #999;
55 | 	}
56 | 
57 | 	ul {
58 | 		margin-left: 10px;
59 | 		padding-left: 0;
60 | 		list-style: none;
61 | 
62 | 		li {
63 | 			display: block;
64 | 			padding: 5px;
65 | 
66 | 			a {
67 | 				text-decoration: none;
68 | 
69 | 				&:hover {
70 | 					background-color: #f0f0f0;
71 | 				}
72 | 			}
73 | 
74 | 			ul {
75 | 				li {
76 | 				}
77 | 			}
78 | 		}
79 | 	}
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/docs/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { version } from "../../package.json";
 3 | </script>
 4 | 
 5 | <template>
 6 |   <footer>
 7 |     <div class="left">
 8 |       <!-- WordPress -->
 9 |       <a href="https://www.waymark.dev/"
10 |         >&laquo;
11 |         <Icon
12 |           width="20"
13 |           height="20"
14 |           color="#b42714"
15 |           title="Waymark WordPress Plugin" />
16 |         + <Icon name="wordpress" width="18" height="18" color="#333"
17 |       /></a>
18 |     </div>
19 | 
20 |     <div class="middle">
21 |       <!-- Version -->
22 |       v{{ version }}
23 | 
24 |       <!-- GitHub -->
25 |       <a href="https://github.com/OpenGIS/Waymark-JS">
26 |         <Icon name="github" color="#555" width="30" height="30" />
27 |       </a>
28 | 
29 |       <!-- Joe -->
30 |       <a href="https://www.morehawes.ca/">by Joe</a>
31 |     </div>
32 | 
33 |     <div class="right">
34 |       <Nav />
35 |     </div>
36 |   </footer>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/docs/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const smoothScroll = () => {
 3 |   setTimeout(() => {
 4 |     window.scrollTo({
 5 |       top: 0,
 6 |       behavior: "smooth",
 7 |     });
 8 |   }, 100);
 9 | };
10 | </script>
11 | 
12 | <template>
13 |   <header>
14 |     <NuxtLink href="/" title="Home" @click="smoothScroll">
15 |       <Icon width="60" height="60"><span>JS</span></Icon>
16 |     </NuxtLink>
17 | 
18 |     <Nav />
19 |   </header>
20 | </template>
21 | 
22 | <style lang="less">
23 | /*
24 |   header {
25 |     // position: fixed;
26 |     // top: 15px;
27 |     // right: 15px;
28 | 
29 |     img {
30 |       width: 90px !important;
31 |       height: 90px !important;
32 |       border-radius: 50%;
33 |     }
34 |   }
35 | */
36 | 
37 | header {
38 |   position: fixed;
39 |   display: flex;
40 |   width: 100%;
41 |   top: 0;
42 |   left: 0;
43 |   z-index: 100;
44 |   height: 80px;
45 |   align-items: center;
46 |   justify-content: space-between;
47 |   margin-bottom: 2rem;
48 | 
49 |   a {
50 |     margin: 15px;
51 |     position: relative;
52 | 
53 |     width: 60px;
54 |     height: 60px;
55 | 
56 |     span {
57 |       position: absolute;
58 |       bottom: 5px;
59 |       right: -13px;
60 |       font-size: 14px;
61 |       font-family: Monaco, "Andale Mono", "Ubuntu Mono", monospace;
62 |       // font-style: italic;
63 |     }
64 |   }
65 | 
66 |   select {
67 |     margin: 15px;
68 |   }
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/docs/components/Icon.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const config = useRuntimeConfig();
 3 | 
 4 | const props = defineProps({
 5 |   name: { default: "waymark", type: String },
 6 |   color: { default: "#fff", type: String },
 7 |   width: { default: "30", type: String },
 8 |   height: { default: "30", type: String },
 9 | });
10 | 
11 | const getStyle = () => {
12 |   return `
13 |     background-color: ${props.color};
14 |     color: ${props.color};
15 |     mask-image: url(${config.app.baseURL}assets/icon/${props.name}.svg);
16 |     width: ${props.width}px;
17 |     height: ${props.height}px;
18 |     mask-size: ${props.width}px ${props.height}px;
19 |   `;
20 | };
21 | </script>
22 | 
23 | <template>
24 |   <div :class="`waymark-icon-wrap waymark-icon-${props.name}`">
25 |     <div class="waymark-icon" :style="getStyle()" />
26 | 
27 |     <slot />
28 |   </div>
29 | </template>
30 | 
31 | <style lang="less">
32 | .waymark-icon-wrap {
33 |   display: inline-block;
34 |   overflow: hidden;
35 |   vertical-align: middle;
36 | 
37 |   .waymark-icon {
38 |     display: inline-block;
39 |     mask-repeat: no-repeat;
40 |     min-width: 20px;
41 |     min-height: 20px;
42 |     mask-position: center;
43 |     overflow: hidden;
44 |   }
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/docs/components/Map.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const route = useRoute();
 3 | const config = useRuntimeConfig();
 4 | 
 5 | const props = defineProps({
 6 |   mapPath: String,
 7 | });
 8 | 
 9 | const demoURL = computed(() => {
10 |   // Use prop if available
11 |   if (props.mapPath) {
12 |     return props.mapPath;
13 |   }
14 | 
15 |   let url = config.app.baseURL;
16 | 
17 |   // Load the Waymark Map
18 |   switch (route.path) {
19 |     // Docs Home
20 |     case "/":
21 |       url += "examples/viewer/pub.html";
22 | 
23 |       break;
24 | 
25 |     // Map
26 |     case "/map":
27 |       url += "examples/viewer/basemap.html";
28 | 
29 |       break;
30 | 
31 |     // Viewer
32 |     case "/viewer":
33 |       url += "examples/viewer/route.html";
34 | 
35 |       break;
36 | 
37 |     // Editor
38 |     case "/editor":
39 |       url += "examples/editor/pub.html";
40 | 
41 |       break;
42 | 
43 |     // Customise
44 |     case "/customise":
45 |       url += "examples/editor/custom.html";
46 | 
47 |       break;
48 | 
49 |     // None
50 |     default:
51 |       url = "";
52 |   }
53 | 
54 |   return url;
55 | });
56 | </script>
57 | 
58 | <template>
59 |   <div class="demo">
60 |     <a :href="demoURL" target="_blank">View Example &raquo;</a>
61 | 
62 |     <iframe
63 |       v-if="demoURL"
64 |       :src="demoURL"
65 |       frameborder="0"
66 |       scrolling="no"
67 |       width="100%"
68 |       height="400"
69 |     />
70 |   </div>
71 | </template>
72 | 
73 | <style>
74 | .demo {
75 |   max-height: 400px;
76 |   overflow: hidden;
77 |   position: relative;
78 |   margin-bottom: 20px;
79 | 
80 |   a {
81 |     position: absolute;
82 |     top: -1px;
83 |     right: -1px;
84 |     font-size: 14px;
85 |     height: 22px;
86 |     line-height: 22px;
87 |     padding: 3px 10px;
88 |     /*    padding: 5px 15px;*/
89 |     border: 1px solid #ddd;
90 |     background-color: #f9f9f9;
91 |     color: #333 !important;
92 |     text-decoration: none;
93 |     border-radius: 0 0 0 5px;
94 |   }
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/docs/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const { data: navData } = await useAsyncData("navigation", () =>
 3 |   fetchContentNavigation(),
 4 | );
 5 | 
 6 | const route = useRoute();
 7 | 
 8 | const navigation = computed(() => {
 9 |   return navData.value.filter((item) => item._path !== "/");
10 | });
11 | 
12 | const goTo = (path) => {
13 |   navigateTo(path);
14 | 
15 |   // Scroll to top
16 |   window.scrollTo({
17 |     top: 0,
18 |     behavior: "smooth",
19 |   });
20 | };
21 | </script>
22 | 
23 | <template>
24 |   <nav>
25 |     <select @change="goTo($event.target.value)">
26 |       <!-- Home -->
27 |       <option value="/" :selected="route.path === '/'">Docs:</option>
28 | 
29 |       <option
30 |         v-for="item in navigation"
31 |         :key="item._path"
32 |         :value="item._path"
33 |         :selected="route.path.startsWith(item._path)"
34 |       >
35 |         &ndash; {{ item.title }}
36 |       </option>
37 |     </select>
38 |   </nav>
39 | </template>
40 | 


--------------------------------------------------------------------------------
/docs/content/1.index.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Start Here
  3 | description: Create, Edit and Share Meaningful Maps
  4 | ---
  5 | 
  6 | Create, Edit and Share Meaningful Maps
  7 | 
  8 | Waymark JS is a JavaScript library for creating and sharing geographical information. It is designed to be easy to use and intuitive, and is suitable for a wide range of applications due to its flexibility and customisation [options](map#map-options).
  9 | 
 10 | Powered by [Leaflet JS](https://leafletjs.com/) with [OpenStreetMap](https://www.openstreetmap.org/) as the default Basemap. Waymark JS stores data in GeoJSON format, with support for GPX and KML files.
 11 | 
 12 | > Waymark JS is completely free, [Open-Source](https://github.com/OpenGIS/Waymark-JS) and requires **no API key**! ❤️
 13 | 
 14 | ## Quick Start
 15 | 
 16 | Display a Map with a custom Marker.
 17 | 
 18 | ```html
 19 | <!doctype html>
 20 | <html>
 21 |   <head>
 22 |     <meta charset="utf-8" />
 23 | 
 24 |     <link rel="stylesheet" href="dist/css/waymark-js.min.css" />
 25 | 
 26 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 27 |     <script src="dist/js/waymark-js.min.js"></script>
 28 |   </head>
 29 |   <body>
 30 |     <!-- Map Container -->
 31 |     <div id="waymark-map"></div>
 32 | 
 33 |     <script>
 34 |       // Create viewer Instance
 35 |       const viewer = window.Waymark_Map_Factory.viewer();
 36 | 
 37 |       // Initialise with our options
 38 |       viewer.init({
 39 |         map_options: {
 40 |           // Initial Map Zoom
 41 |           map_init_zoom: 16,
 42 | 
 43 |           // Our Pub Icon
 44 |           marker_types: [
 45 |             {
 46 |               // The Title is used to create the "pub" Type Key
 47 |               marker_title: "Pub",
 48 |               marker_icon: "ion-beer",
 49 |               marker_colour: "brown",
 50 |             },
 51 |           ],
 52 |         },
 53 |       });
 54 | 
 55 |       // Load GeoJSON
 56 |       viewer.load_json({
 57 |         type: "FeatureCollection",
 58 |         features: [
 59 |           {
 60 |             type: "Feature",
 61 |             properties: {
 62 |               type: "pub",
 63 |               title: "The Scarlet Ibis",
 64 |               description:
 65 |                 "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
 66 |               image_large_url: "https://www.waymark.dev/assets/geo/pub.jpeg",
 67 |             },
 68 |             geometry: {
 69 |               type: "Point",
 70 |               coordinates: [-128.0094, 50.6539],
 71 |             },
 72 |           },
 73 |         ],
 74 |       });
 75 |     </script>
 76 |   </body>
 77 | </html>
 78 | ```
 79 | 
 80 | ## Installation
 81 | 
 82 | To use Waymark JS, you will need to include the following assets in your page. Here we are adding them to the `<head>` of the document so they are immediately available to the `<body>`:
 83 | 
 84 | ```html
 85 | <!-- jQuery (required) -->
 86 | <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 87 | 
 88 | <!-- Waymark CSS & JavaScript -->
 89 | <link rel="stylesheet" href="dist/css/waymark-js.min.css" />
 90 | <script src="dist/js/waymark-js.min.js"></script>
 91 | ```
 92 | 
 93 | Alternatively, the `<script>` tags could be placed at the end of the `<body>` to defer loading.
 94 | 
 95 | > [!TIP]
 96 | > Waymark JS requires the `jQuery` global to be available before creating a Map. If you are not already using [jQuery](https://jquery.com/), you can include it from a CDN as shown above.
 97 | 
 98 | ## Usage
 99 | 
100 | To display a Map, place an empty `<div>` in the body of your document. If you plan to display just one Map on the page, you can use the default `id` of `waymark-map`.
101 | 
102 | ```html
103 | <!-- Map Container -->
104 | <div id="waymark-map"></div>
105 | ```
106 | 
107 | To initialise the Map, we need to add a `<script>` tag to the document. This should be placed _after_ the Map Container and JS/CSS assets have been included.
108 | 
109 | Here we are creating a new Viewer Instance, setting some [options](map#map-options), and adding a Marker to the Map.
110 | 
111 | > [!TIP]
112 | > For multiple Maps, provide the unique `id` for each using the `map_options.map_div_id` [option](map#map-options).
113 | 
114 | ```html
115 | <!-- Map Initialisation -->
116 | <script>
117 |   // Create a Viewer Instance
118 |   const viewer = window.Waymark_Map_Factory.viewer();
119 | 
120 |   // Initialise with our options
121 |   viewer.init({
122 |     map_options: {
123 |       // Initial Map Zoom
124 |       map_init_zoom: 16,
125 | 
126 |       // Define a new Type
127 |       marker_types: [
128 |         {
129 |           // The title is used to create the "pub" Type Key
130 |           marker_title: "Pub",
131 |           marker_icon: "ion-beer",
132 |           marker_colour: "brown",
133 |         },
134 |       ],
135 |     },
136 |   });
137 | 
138 |   // Load a Marker from GeoJSON
139 |   viewer.load_json({
140 |     type: "FeatureCollection",
141 |     features: [
142 |       {
143 |         type: "Feature",
144 |         properties: {
145 |           // The "pub" Type Key
146 |           type: "pub",
147 |           title: "The Scarlet Ibis",
148 |           description:
149 |             "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
150 |           image_large_url: "https://www.waymark.dev/assets/geo/pub.jpeg",
151 |         },
152 |         geometry: {
153 |           type: "Point",
154 |           coordinates: [-128.0094, 50.6539],
155 |         },
156 |       },
157 |     ],
158 |   });
159 | </script>
160 | ```
161 | 
162 | The above example creates a Viewer Instance and initialises it with a custom Marker Type, defined in the `map_options` [object](map#map-options). The Marker location is loaded from GeoJSON and because the feature has a `type` property of `pub`, it is displayed using the custom Type.
163 | 
164 | While the `load_json` method only accepts GeoJSON FeatureCollections, Waymark JS includes a GPX and KML parser to [load data](viewer#loading-data) from those formats.
165 | 
166 | > [!TIP]
167 | > Each Type has a unique Key that is used to identify it (e.g. `pub` in the above example). This is created from the `marker_title` property, so Type Titles should be unique.
168 | 


--------------------------------------------------------------------------------
/docs/content/4.editor.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Editor
  3 | description: The Editor Mode allows users to create and edit Overlays on a Map.
  4 | ---
  5 | 
  6 | # Editor
  7 | 
  8 | The Editor Mode allows users to create and edit Overlays (Markers, Lines, and Shapes) on a Map. Each Overlay can be customised with a Title, Description, Image URL and categorised using [Types](map#types).
  9 | 
 10 | Every time the Map is edited, the Map is converted to GeoJSON and output into (the inner HTML of) a `<textarea>` element. This can be used to easily integrate Waymark JS with a form. You can specify the container ID using the `data_div_id` [option](editor#options). The default `<textarea id="waymark-data">` will be created automatically if the container is not found.
 11 | 
 12 | > [!IMPORTANT]
 13 | > Waymark JS does not currently handle reading from file. You can see how Waymark JS can be integrated with a WordPress back-end to handle this [here](https://github.com/OpenGIS/Waymark/blob/master/assets/js/admin.js).
 14 | 
 15 | ## Creation
 16 | 
 17 | ```javascript
 18 | // Create an Editor Instance
 19 | const editor = window.Waymark_Map_Factory.editor();
 20 | ```
 21 | 
 22 | ## Options
 23 | 
 24 | These options, provided in the `editor_options` object, are used to customise the Editor Mode.
 25 | 
 26 | | Option           | Values  | Description                                                                        | Example        |
 27 | | ---------------- | ------- | ---------------------------------------------------------------------------------- | -------------- |
 28 | | `confirm_delete` | `1`/`0` | Whether to show a confirmation message when deleting an object.                    | `1`            |
 29 | | `data_div_id`    | string  | The ID of a element to output the GeoJSON into. By default this is a `<textarea>`. | `waymark-data` |
 30 | 
 31 | ### Example Config
 32 | 
 33 | This configuration disables the confirmation message when deleting an object and specifies a custom container for the GeoJSON output.
 34 | 
 35 | ```javascript
 36 | const config = {
 37 |   editor_options: {
 38 |     confirm_delete: "0",
 39 |     data_div_id: "data",
 40 |   },
 41 | };
 42 | ```
 43 | 
 44 | ## Initialisation
 45 | 
 46 | Once the configuration is set, the `init` method is called to initialise the Map:
 47 | 
 48 | ```javascript
 49 | // Create an Editor Instance
 50 | const editor = window.Waymark_Map_Factory.editor();
 51 | 
 52 | // Initialise with our options
 53 | editor.init(config);
 54 | ```
 55 | 
 56 | The Map is now displayed on the page according to the provided options.
 57 | 
 58 | ## Loading Data
 59 | 
 60 | As with the Viewer, data can be loaded into the Map using the `load_json` method, which accepts a GeoJSON object as an argument.
 61 | 
 62 | ```javascript
 63 | viewer.load_json({
 64 |   type: "FeatureCollection",
 65 |   features: [
 66 |     {
 67 |       geometry: { type: "Point", coordinates: [-85.038, 49.4595] },
 68 |       type: "Feature",
 69 |       properties: { type: "food" },
 70 |     },
 71 |   ],
 72 | });
 73 | ```
 74 | 
 75 | Data can be loaded asynchronously using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), the `load_json` method is called within the `fetch` promise to ensure the data is available:
 76 | 
 77 | ```javascript
 78 | // Load GeoJSON
 79 | fetch("../examples/assets/geo/route.geojson")
 80 |   .then((response) => response.json())
 81 |   .then((geojson) => {
 82 |     editor.load_json(geojson);
 83 |   });
 84 | ```
 85 | 
 86 | Alternatively, if a GeoJSON string exists in the Data Container, it will be loaded into the Map when the Editor is initialised. For example, if the Data Container is a `<textarea>` element with an ID of `waymark-data`, the GeoJSON will be loaded into the Map when the Editor is initialised.
 87 | 
 88 | ```html
 89 | <textarea id="waymark-data" name="map_data">
 90 |   {
 91 |     "type": "FeatureCollection",
 92 |     "features": [
 93 |       {
 94 |         "type": "Feature",
 95 |         "geometry": {
 96 |           "type": "Point",
 97 |           "coordinates": [-85.038, 49.4595]
 98 |         },
 99 |         "properties": {
100 |           "type": "food"
101 |         }
102 |       }
103 |     ]
104 |   }
105 | </textarea>
106 | ```
107 | 
108 | This is useful for integrating Waymark JS with a `<form>`.
109 | 
110 | ## Retrieving Data
111 | 
112 | The Map data can be retrieved as GeoJSON using the `toGeoJSON` method:
113 | 
114 | ```javascript
115 | //Map Data
116 | const map_data = editor.map_data.toGeoJSON();
117 | ```
118 | 
119 | Every time the Map is edited, the Map GeoJSON is output into the inner HTML of the Data Container. By default this is a `<textarea>` element with an ID of `waymark-data` to easily integrate Waymark JS with a form.
120 | 
121 | You can specify an alternative container ID using the `data_div_id` [option](editor#options). The default `<textarea id="waymark-data">` will be created automatically if a container is not found.
122 | 
123 | ## Examples
124 | 
125 | ### Marker With Custom Icon
126 | 
127 | Here we are creating a new Editor Instance, setting some [options](editor#options), and adding a Marker to the Map.
128 | 
129 | ```html
130 | <!doctype html>
131 | <html>
132 |   <head>
133 |     <meta charset="utf-8" />
134 | 
135 |     <!-- Stylesheet -->
136 |     <link rel="stylesheet" href="../dist/css/waymark-js.css" />
137 | 
138 |     <!-- JS -->
139 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
140 |     <script src="dist/js/waymark-js.js"></script>
141 |   </head>
142 |   <body>
143 |     <!-- Map Container -->
144 |     <div id="waymark-map"></div>
145 | 
146 |     <script>
147 |       // Create and initilise the Editor with the default options
148 |       const editor = window.Waymark_Map_Factory.editor();
149 | 
150 |       editor.init({
151 |         // Don't confirm delete
152 |         editor_options: {
153 |           confirm_delete: "0",
154 |         },
155 | 
156 |         map_options: {
157 |           // Our Pub Icon
158 |           marker_types: [
159 |             {
160 |               marker_title: "Pub",
161 |               marker_icon: "ion-beer",
162 |               marker_colour: "brown",
163 |             },
164 |           ],
165 |         },
166 |       });
167 | 
168 |       editor.load_json({
169 |         type: "FeatureCollection",
170 |         features: [
171 |           {
172 |             type: "Feature",
173 |             properties: {
174 |               type: "pub",
175 |               title: "The Scarlet Ibis",
176 |               description:
177 |                 "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
178 |               image_large_url: "https://www.waymark.dev/assets/geo/pub.jpeg",
179 |             },
180 |             geometry: {
181 |               type: "Point",
182 |               coordinates: [-128.0094, 50.6539],
183 |             },
184 |           },
185 |         ],
186 |       });
187 |     </script>
188 |   </body>
189 | </html>
190 | ```
191 | 
192 | ### Multiple Overlays From File
193 | 
194 | Here we are creating a new Editor Instance initialised with some [Types](map#types) and loading GeoJSON data from a file.
195 | 
196 | ```html
197 | <!doctype html>
198 | <html>
199 |   <head>
200 |     <meta charset="utf-8" />
201 | 
202 |     <!-- Stylesheet -->
203 |     <link rel="stylesheet" href="../dist/css/waymark-js.css" />
204 | 
205 |     <!-- JS -->
206 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
207 |     <script src="dist/js/waymark-js.js"></script>
208 |   </head>
209 |   <body>
210 |     <div id="waymark-map"></div>
211 | 
212 |     <script>
213 |       // Create an Editor Instance
214 |       const editor = window.Waymark_Map_Factory.editor();
215 | 
216 |       // Initialise with our options
217 |       editor.init({
218 |         // Editor Specific Options
219 |         editor_options: {
220 |           confirm_delete: "0",
221 |         },
222 | 
223 |         // General Map Options
224 |         map_options: {
225 |           debug_mode: true,
226 | 
227 |           // Line Types
228 |           line_types: [
229 |             {
230 |               line_title: "Route",
231 |               line_colour: "green",
232 |             },
233 |           ],
234 | 
235 |           // Marker Types
236 |           marker_types: [
237 |             {
238 |               marker_title: "Photo",
239 |               icon_type: "icon",
240 |               marker_icon: "ion-camera",
241 |               marker_colour: "#70af00",
242 |               icon_colour: "#ffffff",
243 |             },
244 |             {
245 |               marker_title: "Information",
246 |               icon_type: "icon",
247 |               marker_icon: "ion-information-circled",
248 |               marker_colour: "#fbfbfb",
249 |               icon_colour: "#0069a5",
250 |             },
251 |             {
252 |               marker_title: "Alert",
253 |               icon_type: "icon",
254 |               marker_icon: "ion-android-alert",
255 |               marker_colour: "#da3d20",
256 |               icon_colour: "white",
257 |             },
258 |             {
259 |               marker_title: "Food",
260 |               icon_type: "icon",
261 |               marker_icon: "ion-pizza",
262 |               marker_colour: "#da3d20",
263 |               icon_colour: "#ffba00",
264 |             },
265 |             {
266 |               marker_title: "Beer",
267 |               icon_type: "icon",
268 |               marker_icon: "ion-beer",
269 |               marker_colour: "#fbfbfb",
270 |               icon_colour: "#754423",
271 |             },
272 |             {
273 |               marker_title: "Camp",
274 |               icon_type: "icon",
275 |               marker_icon: "ion-android-home",
276 |               marker_colour: "#a43233",
277 |               icon_colour: "#ffffff",
278 |             },
279 |           ],
280 |         },
281 |       });
282 | 
283 |       // Load GeoJSON asycnhronously from file
284 |       const geojson = fetch("./assets/geo/route.geojson")
285 |         .then((response) => response.json())
286 |         .then((data) => {
287 |           editor.load_json(data);
288 |         });
289 |     </script>
290 |   </body>
291 | </html>
292 | ```
293 | 


--------------------------------------------------------------------------------
/docs/content/5.customise.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Customise
  3 | description: Watmark JS was designed to be customisable and flexible.
  4 | ---
  5 | 
  6 | # Customise
  7 | 
  8 | Watmark JS was designed to be customisable and flexible.
  9 | 
 10 | In addition to the available options, you can customise Waymark JS using CSS and JavaScript.
 11 | 
 12 | > [!TIP]
 13 | > The Map above has lots of (Patriotic) customisations to help illustrate some of the concepts outlined here. Be sure to view the <a href="/examples/editor/custom.html" target="_blank">source code</a>.
 14 | 
 15 | ## Options
 16 | 
 17 | Waymark has lots of options so you can create custom Maps with Overlays to suit your needs.
 18 | 
 19 | Be sure to check out the full list of:
 20 | 
 21 | - **[Map Options](map#map-options)** &ndash; for setting up the Map view, including custom [Basemaps](map#basemaps) and [Types](map#types).
 22 | - **[Veiwer Options](viewer#options)** &ndash; enabling and configuring Viewer features, including the Image Gallery, Overlay Filter, Marker Clustering and Elevation Profile.
 23 | 
 24 | - **[Editor Options](editor#options)** &ndash; to customise the Editor Mode, including the GeoJSON output and confirmation messages.
 25 | 
 26 | ### Localization
 27 | 
 28 | All text displayed by Waymark JS is fully customisable and can be translated/localised into any language.
 29 | 
 30 | You can modify the default strings using the `config.language` option when initialising the Map. In the example above, all text displayed by the Editor user interface will be in French.
 31 | 
 32 | ```javascript
 33 | // Add translations for the Editor
 34 | config.language = {
 35 |   action_fullscreen_activate: "Plein écran",
 36 |   action_fullscreen_deactivate: "Sortir du plein écran",
 37 |   action_locate_activate: "Montre-moi où je suis",
 38 | 
 39 |   // Etc..
 40 | 
 41 |   show_direction: "Montrer la direction",
 42 |   reverse_direction: "Inverser la direction",
 43 |   sleep_wake_message: "Cliquez ou survolez pour réveiller",
 44 | };
 45 | 
 46 | // Initialise with our options
 47 | editor.init(config);
 48 | ```
 49 | 
 50 | The full list of localisation strings is:
 51 | 
 52 | ```javascript
 53 | const english = {
 54 |   // Common (Viewer & Editor)
 55 |   action_fullscreen_activate: "View Fullscreen",
 56 |   action_fullscreen_deactivate: "Exit Fullscreen",
 57 |   action_locate_activate: "Show me where I am",
 58 |   action_zoom_in: "Zoom in",
 59 |   action_zoom_out: "Zoom out",
 60 |   label_total_length: "Total Length: ",
 61 |   label_max_elevation: "Max. Elevation: ",
 62 |   label_min_elevation: "Min. Elevation: ",
 63 |   label_ascent: "Total Ascent: ",
 64 |   label_descent: "Total Descent: ",
 65 | 
 66 |   // Editor only
 67 |   add_line_title: "Draw a Line",
 68 |   add_photo_title: "Upload an Image",
 69 |   add_marker_title: "Place a Marker",
 70 |   add_rectangle_title: "Draw a Rectangle",
 71 |   add_polygon_title: "Draw a Polygon",
 72 |   add_circle_title: "Draw a Circle",
 73 |   upload_file_title:
 74 |     "Read Lines and Markers from file (GPX/KML/GeoJSON supported, which most apps should Export to)",
 75 |   action_duplicate: "Duplicate",
 76 |   action_delete: "Delete",
 77 |   action_edit: "Edit",
 78 |   action_edit_done: "Finish editing",
 79 |   action_upload_image: "Upload Image",
 80 |   object_title_placeholder: "Title",
 81 |   object_image_placeholder: "Image URL",
 82 |   object_description_placeholder: "Description",
 83 |   object_type_label: "Type",
 84 |   marker_latlng_label: "Lat,Lng",
 85 |   action_delete_confirm: "Are you sure you want to delete this",
 86 |   action_search_placeholder: "Search...",
 87 |   object_label_marker: "Marker",
 88 |   object_label_line: "Line",
 89 |   object_label_shape: "Shape",
 90 |   object_label_marker_plural: "Markers",
 91 |   object_label_line_plural: "Lines",
 92 |   object_label_shape_plural: "Shapes",
 93 |   error_message_prefix: "Waymark Error",
 94 |   info_message_prefix: "Waymark Info",
 95 |   debug_message_prefix: "Waymark Debug",
 96 |   error_file_type: "This file type is not supported.",
 97 |   error_file_conversion: "Could not convert this file to GeoJSON.",
 98 |   error_file_upload: "File upload error.",
 99 |   error_photo_meta: "Could not retrieve Image metadata.",
100 |   info_exif_yes: "Image location metadata (EXIF) detected!",
101 |   info_exif_no: "Image location metadata (EXIF) NOT detected.",
102 |   error_no_wpmedia: "WordPress Media Library not found",
103 |   no_direction: "No Direction",
104 |   show_direction: "Show Direction",
105 |   reverse_direction: "Reverse Direction",
106 |   sleep_wake_message: "Click or Hover to Wake",
107 | };
108 | ```
109 | 
110 | > [!TIP]
111 | > If a translation is not provided, the default English string will be used.
112 | 
113 | ## Styling
114 | 
115 | Most elements can be styled using CSS and have sensibly named `waymark-` classes.
116 | 
117 | For example, the HTML for a "Pub" Marker looks like this:
118 | 
119 | ```html
120 | <div
121 |   class="waymark-marker waymark-marker-pub waymark-marker-marker waymark-marker-medium"
122 | >
123 |   <div class="waymark-marker-background" style="background:#70af00;"></div>
124 |   <div style="color:#ffffff;" class="waymark-marker-icon waymark-icon-text">
125 |     🍻
126 |   </div>
127 | </div>
128 | ```
129 | 
130 | We can use the `.waymark-marker-pub` class to target the Pub Marker, and the `.waymark-marker-background` and `.waymark-marker-icon` classes to style the Marker's content.
131 | 
132 | ```css
133 | /* Target by the "Pub" Type Key  */
134 | .waymark-marker.waymark-marker-pub .waymark-marker-background {
135 |   /* Marker Background Colour */
136 |   background-color: white !important;
137 | }
138 | .waymark-marker.waymark-marker-pub .waymark-icon-text {
139 |   /* Marker Icon Colour */
140 |   color: red !important;
141 | }
142 | ```
143 | 
144 | > [!TIP]
145 | > Use your browser’s inspector ([Firefox](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector) / [Chrome](https://developer.chrome.com/docs/devtools/open/)) to explore the Markup and Styling of Waymark JS elements.
146 | 
147 | ## Interaction
148 | 
149 | Once the Map is initialised using the `init` method, you can interact with it using JavaScript.
150 | 
151 | Because Waymark JS utilises [jQuery](https://api.jquery.com/) and [Leaflet](https://leafletjs.com/reference.html), you can also use these APIs to interact with the Map and its elements.
152 | 
153 | The Leaflet Map object is available through the `map` property on the `Waymark_Map` Instance. For example, to add an event handler to execute each time an Overlay popup is displayed:
154 | 
155 | ```javascript
156 | // Once the map is initialised, i.e. after
157 | // editor.init({ ... });
158 | 
159 | // Get the Leaflet Map object
160 | const map = editor.map;
161 | 
162 | // Leaflet Popup
163 | map.on("popupopen", function (e) {
164 |   // Get the layer from Leaflet
165 |   const layer = e.popup._source;
166 | 
167 |   // Remove all active classes
168 |   jQuery(".waymark-marker").removeClass("active");
169 | 
170 |   // Get the container with jQuery
171 |   const marker = jQuery(layer._icon);
172 | 
173 |   // Add active class
174 |   marker.addClass("active");
175 | });
176 | ```
177 | 
178 | Using jQuery, we can also interact with the Map and its elements. For example, to add a class to the Map container and create a toggle button:
179 | 
180 | ```javascript
181 | // Get the container with jQuery
182 | const map_container = jQuery("#waymark-map");
183 | 
184 | // Add a class to the container
185 | map_container.addClass("oh-canada");
186 | 
187 | // Create a toggle button
188 | const toggle_button = jQuery("<button />")
189 |   .addClass("canada-toggle")
190 |   .html("🇨🇦🇨🇦🇨🇦<small>Click Me!</small>")
191 |   .on("click", () => {
192 |     map_container.toggleClass("oh-canada");
193 |   });
194 | 
195 | // Append to the container
196 | map_container.append(toggle_button);
197 | ```
198 | 
199 | ## Callback Function
200 | 
201 | Waymark JS provides the _global_ callback function `waymark_loaded_callback` that is executed every time a Map is [initialised](viewer#initialisation). This accepts a single argument, which is the Waymark Map instance.
202 | 
203 | Once defined on your page (accessible in the global scope), we can use the instance object to perform additional actions. For example, we can add a custom class to the Map container:
204 | 
205 | ```javascript
206 | // Define the callback function
207 | function waymark_loaded_callback(instance) {
208 |   // Get the Map container
209 |   const map_container = instance.map.getContainer();
210 | 
211 |   // Add a custom class
212 |   map_container.classList.add("oh-canada");
213 | }
214 | ```
215 | 
216 | > [!TIP]
217 | > Check out the Waymark WordPress plugin [source code](https://github.com/OpenGIS/Waymark/tree/master/assets/js) and the [Map First](https://github.com/OpenGIS/Map-First) WordPress theme for an example of integrating Waymark JS with WordPress.
218 | 


--------------------------------------------------------------------------------
/docs/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: false },
 4 |   modules: ["@nuxt/content"],
 5 |   content: {
 6 |     documentDriven: true,
 7 |     highlight: {
 8 |       theme: "github-dark",
 9 |     },
10 |     // markdown: {
11 |     //   remarkPlugins: {
12 |     //     "remark-gfm": true,
13 |     //     // "remark-prism": true,
14 |     //   },
15 |     // },
16 |   },
17 | 
18 |   css: [
19 |     "~/assets/main.less",
20 |     "github-markdown-css/github-markdown-light.css",
21 |     // "prism-theme-github/themes/prism-theme-github-dark.css",
22 |     "~/assets/prism.css",
23 |   ],
24 | 
25 |   app: {
26 |     baseURL: "/js/",
27 |     head: {
28 |       link: [
29 |         { rel: "icon", type: "image/svg", href: "/js/assets/icon/waymark.svg" },
30 |       ],
31 |     },
32 |   },
33 | });
34 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "type": "module",
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview"
 9 |   },
10 |   "dependencies": {
11 |     "@nuxt/content": "2.9.0",
12 |     "github-markdown-css": "^5.5.0",
13 |     "nuxt": "3.8.2",
14 |     "prism-theme-github": "^1.0.1",
15 |     "remark-gfm": "3.0.1",
16 |     "remark-prism": "^1.3.6"
17 |   },
18 |   "devDependencies": {
19 |     "less": "^4.2.0",
20 |     "prettier": "^3.2.5"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/docs/public/assets/icon/github.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>


--------------------------------------------------------------------------------
/docs/public/assets/icon/waymark.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="368.000000pt" height="368.000000pt" viewBox="0 0 368.000000 368.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | 
 8 | <g transform="translate(0.000000,368.000000) scale(0.100000,-0.100000)"
 9 | fill="#000000" stroke="none">
10 | <path d="M343 3186 c-89 -29 -178 -108 -215 -194 -80 -181 21 -408 208 -468
11 | l51 -17 238 -781 c131 -430 241 -787 243 -793 3 -10 -21 -13 -99 -14 -57 0
12 | -126 -4 -152 -7 l-48 -7 298 -217 c163 -119 299 -216 300 -214 6 6 252 690
13 | 249 693 -1 2 -59 -33 -129 -77 -70 -43 -128 -76 -130 -72 -2 4 -111 359 -242
14 | 790 l-239 782 32 33 c17 17 43 59 59 92 23 50 27 74 28 140 0 71 -4 88 -33
15 | 147 -37 75 -96 133 -170 169 -58 28 -186 36 -249 15z"/>
16 | <path d="M1580 2987 l-294 -212 64 -6 c36 -4 105 -7 153 -8 87 -1 88 -1 81
17 | -23 -3 -13 -74 -236 -156 -496 l-150 -473 55 -199 c30 -110 62 -206 70 -215
18 | 19 -18 41 -19 54 -2 5 6 101 303 214 659 112 356 207 648 210 648 3 0 57 -33
19 | 120 -73 63 -40 120 -76 126 -81 7 -4 -17 78 -53 181 -36 103 -91 261 -122 351
20 | -31 89 -61 162 -67 161 -5 0 -143 -96 -305 -212z"/>
21 | <path d="M3040 2987 l-294 -212 64 -6 c36 -4 105 -7 153 -8 87 -1 88 -1 81
22 | -23 -3 -13 -74 -236 -156 -496 l-150 -473 55 -199 c30 -110 62 -206 70 -215
23 | 19 -18 41 -19 54 -2 5 6 101 303 214 659 112 356 207 648 210 648 3 0 57 -33
24 | 120 -73 63 -40 120 -76 126 -81 7 -4 -17 78 -53 181 -36 103 -91 261 -122 351
25 | -31 89 -61 162 -67 161 -5 0 -143 -96 -305 -212z"/>
26 | <path d="M2161 2342 c-14 -11 -40 -80 -81 -207 -33 -104 -60 -197 -60 -205 0
27 | -8 61 -235 135 -504 74 -270 135 -491 135 -493 0 -1 -68 -4 -152 -5 l-152 -3
28 | 284 -219 c157 -121 290 -223 295 -227 7 -5 58 113 144 332 73 187 131 342 129
29 | 344 -2 3 -61 -29 -130 -69 l-126 -73 -47 166 c-25 91 -108 390 -183 664 -94
30 | 338 -143 502 -154 508 -11 6 -23 3 -37 -9z"/>
31 | </g>
32 | </svg>
33 | 


--------------------------------------------------------------------------------
/docs/public/assets/icon/wordpress.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg"><g fill="#464342"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/ionicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/ionicons.eot


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/ionicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/ionicons.ttf


--------------------------------------------------------------------------------
/docs/public/dist/latest/fonts/ionicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/fonts/ionicons.woff


--------------------------------------------------------------------------------
/docs/public/dist/latest/images/fullscreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/images/fullscreen.png


--------------------------------------------------------------------------------
/docs/public/dist/latest/images/fullscreen@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/images/fullscreen@2x.png


--------------------------------------------------------------------------------
/docs/public/dist/latest/images/geocoder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/images/geocoder.png


--------------------------------------------------------------------------------
/docs/public/dist/latest/images/layers-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/images/layers-2x.png


--------------------------------------------------------------------------------
/docs/public/dist/latest/images/layers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/images/layers.png


--------------------------------------------------------------------------------
/docs/public/dist/latest/images/throbber.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/images/throbber.gif


--------------------------------------------------------------------------------
/docs/public/dist/latest/images/waymark-icon-red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OpenGIS/Waymark-JS/ad5e8a3bf2a4bc66af8daa5543e44f17a79b5ac8/docs/public/dist/latest/images/waymark-icon-red.png


--------------------------------------------------------------------------------
/docs/public/examples/assets/config/route.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "map_options": {
 3 |     "debug_mode": true,
 4 | 
 5 |     "tile_layers": [
 6 |       {
 7 |         "layer_name": "Thunderforest Outdoors",
 8 |         "layer_url": "https://tile.thunderforest.com/outdoors/{z}/{x}/{y}@2x.png?apikey=4550655437ba47fda736e7898339c95f",
 9 |         "layer_attribution": "Maps © <a href=\"http://www.thunderforest.com\">Thunderforest</a> | Data © <a href=\"http://www.openstreetmap.org/copyright\">OSM</a>",
10 |         "layer_max_zoom": "17"
11 |       },
12 |       {
13 |         "layer_name": "OpenStreetMap",
14 |         "layer_url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?r=1",
15 |         "layer_attribution": "@copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
16 |         "layer_max_zoom": "18"
17 |       }
18 |     ],
19 | 
20 |     "marker_types": [
21 |       {
22 |         "marker_title": "Photo",
23 |         "icon_type": "icon",
24 |         "marker_icon": "ion-camera",
25 |         "marker_colour": "#70af00",
26 |         "icon_colour": "#ffffff"
27 |       },
28 |       {
29 |         "marker_title": "Information",
30 |         "icon_type": "icon",
31 |         "marker_icon": "ion-information-circled",
32 |         "marker_colour": "#fbfbfb",
33 |         "icon_colour": "#0069a5"
34 |       },
35 |       {
36 |         "marker_title": "Alert",
37 |         "icon_type": "icon",
38 |         "marker_icon": "ion-android-alert",
39 |         "marker_colour": "#da3d20",
40 |         "icon_colour": "white"
41 |       },
42 |       {
43 |         "marker_title": "Food",
44 |         "icon_type": "icon",
45 |         "marker_icon": "ion-pizza",
46 |         "marker_colour": "#da3d20",
47 |         "icon_colour": "#ffba00"
48 |       },
49 |       {
50 |         "marker_title": "Beer",
51 |         "icon_type": "icon",
52 |         "marker_icon": "ion-beer",
53 |         "marker_colour": "#fbfbfb",
54 |         "icon_colour": "#754423"
55 |       },
56 |       {
57 |         "marker_title": "Camp",
58 |         "icon_type": "icon",
59 |         "marker_icon": "ion-android-home",
60 |         "marker_colour": "#a43233",
61 |         "icon_colour": "#ffffff"
62 |       }
63 |     ],
64 |     "line_types": [
65 |       {
66 |         "line_title": "Route",
67 |         "line_colour": "green"
68 |       }
69 |     ]
70 |   },
71 |   "viewer_options": {
72 |     "show_elevation": 1,
73 |     "show_gallery": 1,
74 |     "elevation_initial": 0,
75 |     "sleep_delay_seconds": 5
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/docs/public/examples/assets/css/examples.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   overflow: hidden;
 6 |   height: 100%;
 7 | }
 8 | 
 9 | /* Overlay Filter on Left  */
10 | .leaflet-top.leaflet-right {
11 |   right: unset;
12 |   left: 10px;
13 |   top: 0;
14 | }
15 | 
16 | /* Elevation on Right */
17 | .waymark-map-container .waymark-elevation-container {
18 |   position: absolute;
19 |   top: 15px;
20 |   right: 15px;
21 |   left: unset;
22 | }
23 | 
24 | .waymark-map-container .leaflet-control-locate,
25 | .waymark-map-container .leaflet-control-fullscreen,
26 | .waymark-map-container .leaflet-control-zoom {
27 |   display: none !important;
28 | }
29 | 
30 | #waymark-data {
31 |   position: absolute;
32 |   top: 15px;
33 |   right: 15px;
34 |   z-index: 2000;
35 |   width: 320px;
36 |   height: 160px;
37 |   overflow: scroll;
38 |   pointer-events: auto !important;
39 | }
40 | 
41 | /* Hover  */
42 | #waymark-data:hover {
43 |   width: 92%;
44 |   height: 90%;
45 |   font-size: 120%;
46 | }
47 | 
48 | /* Mobile  */
49 | @media (max-width: 768px) {
50 |   #waymark-data {
51 |     display: none;
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/docs/public/examples/assets/geo/404.geojson:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"features": [
 3 | 		{
 4 | 			"geometry": {
 5 | 				"coordinates": [
 6 | 					[-125.2229404449463, 49.373366495877875],
 7 | 					[-125.22354125976564, 49.368392329143425],
 8 | 					[-125.21358489990236, 49.36856000588195]
 9 | 				],
10 | 				"type": "LineString"
11 | 			},
12 | 			"type": "Feature"
13 | 		},
14 | 		{
15 | 			"geometry": {
16 | 				"coordinates": [
17 | 					[-125.21882057189943, 49.37068386173706],
18 | 					[-125.21839141845705, 49.36503867427739]
19 | 				],
20 | 				"type": "LineString"
21 | 			},
22 | 			"type": "Feature"
23 | 		},
24 | 		{
25 | 			"geometry": {
26 | 				"coordinates": [
27 | 					[-125.2116107940674, 49.37241641302945],
28 | 					[-125.21178245544435, 49.36565352812769],
29 | 					[-125.20551681518556, 49.36548584147652],
30 | 					[-125.2050018310547, 49.3723046373694],
31 | 					[-125.2115249633789, 49.37241641302945]
32 | 				],
33 | 				"type": "LineString"
34 | 			},
35 | 			"type": "Feature"
36 | 		},
37 | 		{
38 | 			"geometry": {
39 | 				"coordinates": [
40 | 					[-125.20088195800783, 49.374428331448186],
41 | 					[-125.20131111145021, 49.36856000588195],
42 | 					[-125.19307136535646, 49.368671790056574]
43 | 				],
44 | 				"type": "LineString"
45 | 			},
46 | 			"type": "Feature"
47 | 		},
48 | 		{
49 | 			"geometry": {
50 | 				"coordinates": [
51 | 					[-125.19710540771486, 49.37191342055771],
52 | 					[-125.19744873046876, 49.36554173709045]
53 | 				],
54 | 				"type": "LineString"
55 | 			},
56 | 			"type": "Feature"
57 | 		}
58 | 	],
59 | 	"type": "FeatureCollection"
60 | }
61 | 


--------------------------------------------------------------------------------
/docs/public/examples/assets/img/canada.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9600 4800"><path fill="#d52b1e" d="M0 0h2400l99 99h4602l99-99h2400v4800H7200l-99-99H2499l-99 99H0z"/><path fill="#fff" d="M2400 0h4800v4800H2400zm2490 4430l-45-863a95 95 0 01111-98l859 151-116-320a65 65 0 0120-73l941-762-212-99a65 65 0 01-34-79l186-572-542 115a65 65 0 01-73-38l-105-247-423 454a65 65 0 01-111-57l204-1052-327 189a65 65 0 01-91-27l-332-652-332 652a65 65 0 01-91 27l-327-189 204 1052a65 65 0 01-111 57l-423-454-105 247a65 65 0 01-73 38l-542-115 186 572a65 65 0 01-34 79l-212 99 941 762a65 65 0 0120 73l-116 320 859-151a95 95 0 01111 98l-45 863z"/></svg>


--------------------------------------------------------------------------------
/docs/public/examples/editor-form.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 5 | 
 6 |     <title>Form Editor</title>
 7 | 
 8 |     <!-- Stylesheet -->
 9 |     <link rel="stylesheet" href="../dist/css/waymark-js.css" />
10 | 
11 |     <!-- JS -->
12 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
13 |     <script src="../dist/js/waymark-js.js"></script>
14 |   </head>
15 |   <body>
16 |     <form>
17 |       <!-- Map Container -->
18 |       <div id="waymark-map"></div>
19 | 
20 |       <!-- Map Container -->
21 |       <textarea id="waymark-data" name="map_data"></textarea>
22 | 
23 |       <!-- Submit Button -->
24 |       <button type="submit">Save</button>
25 |     </form>
26 | 
27 |     <script>
28 |       // Create the Editor
29 |       const editor = window.Waymark_Map_Factory.editor();
30 | 
31 |       // Initialise with our options
32 |       editor.init({
33 |         map_options: {
34 |           map_init_zoom: 18,
35 |           map_init_latlng: [51.5074, 0.1278],
36 |         },
37 |       });
38 |     </script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/docs/public/examples/editor/custom.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="fr">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 | 
  7 |     <title>Waymark JS | Editor | Custom</title>
  8 | 
  9 |     <!-- Stylesheet -->
 10 |     <link rel="stylesheet" href="../../dist/latest/css/waymark-js.css" />
 11 |     <link rel="stylesheet" href="../assets/css/examples.css" />
 12 | 
 13 |     <style>
 14 |       /* Toggle Button  */
 15 |       #waymark-map button.canada-toggle {
 16 |         position: absolute;
 17 |         bottom: 10px;
 18 |         right: 10px;
 19 |         padding: 5px 10px;
 20 |         z-index: 2000000;
 21 |         font-size: 42px;
 22 |         background: red;
 23 |         border: 3px solid #fff;
 24 |         border-radius: 5px;
 25 |       }
 26 |       #waymark-map button.canada-toggle {
 27 |         font-size: 24px;
 28 |         color: #fff;
 29 |       }
 30 |       #waymark-map button.canada-toggle small {
 31 |         display: block;
 32 |       }
 33 |       #waymark-map.oh-canada button.canada-toggle {
 34 |         /* Invert colours  */
 35 |         filter: invert(100%);
 36 |       }
 37 | 
 38 |       /* Canada Styles... */
 39 |       #waymark-map.oh-canada .leaflet-tile-pane {
 40 |         /* Grayscale Basemap */
 41 |         filter: grayscale(100%);
 42 |       }
 43 | 
 44 |       /* Target by the "Beer" Type Key  */
 45 |       #waymark-map.oh-canada
 46 |         .waymark-marker.waymark-marker-beer
 47 |         .waymark-marker-background {
 48 |         background-color: white !important;
 49 |       }
 50 |       #waymark-map.oh-canada
 51 |         .waymark-marker.waymark-marker-beer
 52 |         .waymark-icon-text {
 53 |         color: red !important;
 54 |       }
 55 | 
 56 |       /* Markers  */
 57 |       #waymark-map.oh-canada .waymark-marker .waymark-marker-background {
 58 |         background-color: #ff0000 !important;
 59 |       }
 60 |       #waymark-map.oh-canada .waymark-marker.active .waymark-marker-background {
 61 |         background-color: green !important;
 62 |       }
 63 |       #waymark-map.oh-canada .waymark-marker .waymark-icon-text {
 64 |         color: #fff !important;
 65 |       }
 66 | 
 67 |       /* Toolbar  */
 68 |       #waymark-map.oh-canada .waymark-edit-toolbar a:not(.waymark-icon) {
 69 |         color: #ffffff !important;
 70 |         background: #ff0000 !important;
 71 |       }
 72 | 
 73 |       /* Hide */
 74 |       .leaflet-bottom.leaflet-right,
 75 |       #waymark-data {
 76 |         display: none;
 77 |       }
 78 |     </style>
 79 | 
 80 |     <!-- JS -->
 81 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 82 |     <script src="../../dist/latest/js/waymark-js.js"></script>
 83 |   </head>
 84 |   <body>
 85 |     <div id="waymark-map"></div>
 86 | 
 87 |     <script>
 88 |       // Create Editor Instance
 89 |       const editor = window.Waymark_Map_Factory.editor();
 90 | 
 91 |       // Load Configuration from file
 92 |       fetch("../assets/config/route.json")
 93 |         .then((response) => response.json())
 94 |         .then((config) => {
 95 |           // Modify config...
 96 | 
 97 |           // Disable Save Confirmation
 98 |           config.editor_options = {
 99 |             confirm_delete: false,
100 |           };
101 | 
102 |           // Iterate over Marker Types
103 |           config.map_options.marker_types.forEach((marker_type) => {
104 |             // Change Marker Colour
105 |             marker_type.icon_type = "text";
106 |             marker_type.marker_icon = "🇨🇦" + marker_type.marker_title[0];
107 |           });
108 | 
109 |           // Iterate over Line Types
110 |           config.map_options.line_types.forEach((line_type) => {
111 |             // Change Line Colour
112 |             line_type.line_colour = "#ff0000";
113 |           });
114 | 
115 |           // French Translations
116 | 
117 |           config.language = {
118 |             action_fullscreen_activate: "Plein écran",
119 |             action_fullscreen_deactivate: "Sortir du plein écran",
120 |             action_locate_activate: "Montre-moi où je suis",
121 |             action_zoom_in: "Zoomer",
122 |             action_zoom_out: "Dézoomer",
123 |             label_total_length: "Longueur totale: ",
124 |             label_max_elevation: "Altitude max: ",
125 |             label_min_elevation: "Altitude min: ",
126 |             label_ascent: "Dénivelé positif: ",
127 |             label_descent: "Dénivelé négatif: ",
128 |             //Editor
129 |             add_line_title: "Dessiner une ligne",
130 |             add_photo_title: "Télécharger une image",
131 |             add_marker_title: "Placer un marqueur",
132 |             add_rectangle_title: "Dessiner un rectangle",
133 |             add_polygon_title: "Dessiner un polygone",
134 |             add_circle_title: "Dessiner un cercle",
135 |             upload_file_title:
136 |               "Lire des lignes et des marqueurs à partir d'un fichier (GPX/KML/GeoJSON pris en charge, que la plupart des applications devraient exporter)",
137 |             action_duplicate: "Dupliquer",
138 |             action_delete: "Supprimer",
139 |             action_edit: "Modifier",
140 |             action_edit_done: "Terminer l'édition",
141 |             action_upload_image: "Télécharger une image",
142 |             object_title_placeholder: "Titre",
143 |             object_image_placeholder: "URL de l'image",
144 |             object_description_placeholder: "Description",
145 |             object_type_label: "Type",
146 |             marker_latlng_label: "Lat,Lng",
147 |             action_delete_confirm: "Êtes-vous sûr de vouloir supprimer ceci",
148 |             action_search_placeholder: "Rechercher...",
149 |             object_label_marker: "Marqueur",
150 |             object_label_line: "Ligne",
151 |             object_label_shape: "Forme",
152 |             object_label_marker_plural: "Marqueurs",
153 |             object_label_line_plural: "Lignes",
154 |             object_label_shape_plural: "Formes",
155 |             error_message_prefix: "Erreur Waymark",
156 |             info_message_prefix: "Info Waymark",
157 |             debug_message_prefix: "Déboguer Waymark",
158 |             error_file_type: "Ce type de fichier n'est pas pris en charge.",
159 |             error_file_conversion:
160 |               "Impossible de convertir ce fichier en GeoJSON.",
161 |             error_file_upload: "Erreur de téléchargement de fichier.",
162 | 
163 |             error_photo_meta:
164 |               "Impossible de récupérer les métadonnées de l'image.",
165 |             info_exif_yes:
166 |               "Métadonnées de localisation de l'image (EXIF) détectées!",
167 |             info_exif_no:
168 |               "Métadonnées de localisation de l'image (EXIF) NON détectées.",
169 |             error_no_wpmedia: "Bibliothèque de médias WordPress introuvable",
170 |             no_direction: "Pas de direction",
171 |             show_direction: "Montrer la direction",
172 |             reverse_direction: "Inverser la direction",
173 |             sleep_wake_message: "Cliquez ou survolez pour réveiller",
174 |           };
175 | 
176 |           // Initialise with our options
177 |           editor.init(config);
178 | 
179 |           // The Map is ready after initialisation
180 | 
181 |           // The Leaflet Map
182 |           const map = editor.map;
183 | 
184 |           // Leaflet Popup
185 |           map.on("popupopen", function (e) {
186 |             // Remove all active classes
187 |             jQuery(".waymark-marker").removeClass("active");
188 | 
189 |             // Get the layer from Leaflet
190 |             const layer = e.popup._source;
191 | 
192 |             // Get the container with jQuery
193 |             const container = jQuery(layer._icon);
194 | 
195 |             // Add active class
196 |             container.addClass("active");
197 |           });
198 | 
199 |           // Get the container with jQuery
200 |           const map_container = jQuery("#waymark-map");
201 | 
202 |           // Add a class to the container
203 |           map_container.addClass("oh-canada");
204 | 
205 |           // Create a toggle button
206 |           const toggle_button = jQuery("<button />")
207 |             .addClass("canada-toggle")
208 |             .html("🇨🇦🇨🇦🇨🇦<small>Cliquez sur moi!</small>")
209 |             .on("click", () => {
210 |               map_container.toggleClass("oh-canada");
211 |             });
212 | 
213 |           // Append to the container
214 |           map_container.append(toggle_button);
215 | 
216 |           // Load GeoJSON
217 |           fetch("../assets/geo/route.geojson")
218 |             .then((response) => response.json())
219 |             .then((geojson) => {
220 |               // Modify geojson...
221 |               geojson.features.forEach((feature) => {
222 |                 // Not the pub
223 |                 if (feature.properties.type == "beer") {
224 |                   return;
225 |                 }
226 | 
227 |                 // Set all images to the Canadian Flag
228 |                 const flag_url = "../assets/img/canada.svg";
229 |                 feature.properties.image_large_url = flag_url;
230 |                 feature.properties.image_medium_url = flag_url;
231 |                 feature.properties.image_thumbnail_url = flag_url;
232 |               });
233 | 
234 |               // Add to Map
235 |               editor.load_json(geojson);
236 | 
237 |               // Once loaded...
238 |               // Iterate over the Leaflet data layer
239 |               editor.map_data.eachLayer((layer) => {
240 |                 if (
241 |                   layer.feature.properties.title &&
242 |                   layer.feature.properties.title.includes("Scarlet")
243 |                 ) {
244 |                   layer.openPopup();
245 |                 }
246 |               });
247 |             });
248 |         });
249 |     </script>
250 |   </body>
251 | </html>
252 | 


--------------------------------------------------------------------------------
/docs/public/examples/editor/pub.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |     <title>Waymark JS | Editor | Pub</title>
 8 | 
 9 |     <!-- Stylesheet -->
10 |     <link rel="stylesheet" href="../../dist/latest/css/waymark-js.min.css" />
11 |     <link rel="stylesheet" href="../assets/css/examples.css" />
12 | 
13 |     <!-- JS -->
14 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
15 |     <script src="../../dist/latest/js/waymark-js.min.js"></script>
16 |   </head>
17 |   <body>
18 |     <div id="waymark-map"></div>
19 | 
20 |     <script>
21 |       // Create viewer Instance
22 |       const viewer = window.Waymark_Map_Factory.editor();
23 | 
24 |       // Load Configuration from file
25 |       fetch("../assets/config/route.json")
26 |         .then((response) => response.json())
27 |         .then((config) => {
28 |           // Initialise with our options
29 |           viewer.init(config);
30 | 
31 |           // Load GeoJSON
32 |           viewer.load_json({
33 |             type: "FeatureCollection",
34 |             features: [
35 |               {
36 |                 type: "Feature",
37 |                 properties: {
38 |                   type: "beer",
39 |                   title: "The Scarlet Ibis",
40 |                   description:
41 |                     "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
42 |                   image_large_url:
43 |                     "https://www.waymark.dev/assets/geo/pub.jpeg",
44 |                 },
45 |                 geometry: {
46 |                   type: "Point",
47 |                   coordinates: [-128.0094, 50.6539],
48 |                 },
49 |               },
50 |             ],
51 |           });
52 | 
53 |           // After a slight delay, open the popup
54 |           setTimeout(() => {
55 |             // Iterate over the Leaflet data layer
56 |             viewer.map_data.eachLayer((layer) => {
57 |               // Open popop
58 |               layer.openPopup();
59 |             });
60 |           }, 1000);
61 |         });
62 |     </script>
63 |   </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/docs/public/examples/viewer/404.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |     <title>Waymark JS | Viewer | Pub</title>
 8 | 
 9 |     <!-- Stylesheet -->
10 |     <link rel="stylesheet" href="../../dist/latest/css/waymark-js.min.css" />
11 |     <link rel="stylesheet" href="../../examples/assets/css/examples.css" />
12 | 
13 |     <!-- JS -->
14 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
15 |     <script src="../../dist/latest/js/waymark-js.min.js"></script>
16 |   </head>
17 |   <body>
18 |     <div id="waymark-map"></div>
19 | 
20 |     <script>
21 |       // Create viewer Instance
22 |       const viewer = window.Waymark_Map_Factory.viewer();
23 | 
24 |       // Load Configuration from file
25 |       fetch("../assets/config/route.json")
26 |         .then((response) => response.json())
27 |         .then((config) => {
28 |           config.viewer_options.show_filter = "0";
29 | 
30 |           // Initialise with our options
31 |           viewer.init(config);
32 | 
33 |           // Load GeoJSON
34 |           fetch("../assets/geo/404.geojson")
35 |             .then((response) => response.json())
36 |             .then((geojson) => {
37 |               viewer.load_json(geojson);
38 |             });
39 |         });
40 |     </script>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/docs/public/examples/viewer/basemap.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |     <title>Waymark JS | Viewer | Basemap</title>
 8 | 
 9 |     <!-- Stylesheet -->
10 |     <link rel="stylesheet" href="../../dist/latest/css/waymark-js.min.css" />
11 |     <link rel="stylesheet" href="../assets/css/examples.css" />
12 | 
13 |     <!-- JS -->
14 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
15 |     <script src="../../dist/latest/js/waymark-js.min.js"></script>
16 |   </head>
17 |   <body>
18 |     <div id="waymark-map"></div>
19 | 
20 |     <script>
21 |       // Create viewer Instance
22 |       const viewer = window.Waymark_Map_Factory.viewer();
23 | 
24 |       // Initialise with our options
25 |       viewer.init({
26 |         map_options: {
27 |           // Initial Map Zoom
28 |           map_init_zoom: 18,
29 | 
30 |           // Initial Map Centre (Stonehenge)
31 |           map_init_latlng: [51.1788144, -1.8261632],
32 |         },
33 |       });
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/docs/public/examples/viewer/formats.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |     <title>Waymark JS | Viewer | Formats</title>
 8 | 
 9 |     <!-- Stylesheet -->
10 |     <link rel="stylesheet" href="../../dist/latest/css/waymark-js.css" />
11 |     <link rel="stylesheet" href="../assets/css/examples.css" />
12 | 
13 |     <!-- JS -->
14 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
15 |     <script src="../../dist/latest/js/waymark-js.js"></script>
16 |   </head>
17 |   <body>
18 |     <div id="waymark-map"></div>
19 | 
20 |     <script>
21 |       // Create Editor Instance
22 |       const viewer = window.Waymark_Map_Factory.viewer();
23 | 
24 |       // Load Configuration from file
25 |       fetch("../assets/config/route.json")
26 |         .then((response) => response.json())
27 |         .then((config) => {
28 |           // Initialise with our options
29 |           viewer.init(config);
30 | 
31 |           // Load GPX
32 |           fetch("../assets/geo/route.gpx")
33 |             .then((response) => response.text())
34 |             // As Text
35 |             .then((gpx) => {
36 |               // Parse GPX
37 |               const parsed = new DOMParser().parseFromString(gpx, "text/xml");
38 | 
39 |               // Ensure GPX is valid
40 |               if (parsed.getElementsByTagName("gpx").length === 0) {
41 |                 return;
42 |               }
43 | 
44 |               // Convert to GeoJSON
45 |               const geojson = toGeoJSON.gpx(parsed) || {};
46 | 
47 |               // Ensure is valid FeatureCollection
48 |               if (geojson.type !== "FeatureCollection") {
49 |                 return;
50 |               }
51 | 
52 |               // Filter features
53 |               geojson.features = geojson.features.filter((feature) => {
54 |                 // Only Lines
55 |                 return feature.geometry.type === "LineString";
56 |               });
57 | 
58 |               // Add to Map
59 |               viewer.load_json(geojson);
60 |             });
61 | 
62 |           // Load KML
63 |           fetch("../assets/geo/route.kml")
64 |             .then((response) => response.text())
65 |             // As Text
66 |             .then((kml) => {
67 |               // Parse KML
68 |               const parsed = new DOMParser().parseFromString(kml, "text/xml");
69 | 
70 |               // Ensure KML is valid
71 |               if (parsed.getElementsByTagName("kml").length === 0) {
72 |                 return;
73 |               }
74 | 
75 |               // Convert to GeoJSON
76 |               const geojson = toGeoJSON.kml(parsed) || {};
77 | 
78 |               // Ensure is valid FeatureCollection
79 |               if (geojson.type !== "FeatureCollection") {
80 |                 return;
81 |               }
82 | 
83 |               // Filter features
84 |               geojson.features = geojson.features.filter((feature) => {
85 |                 // Only Markers
86 |                 return feature.geometry.type === "Point";
87 |               });
88 | 
89 |               // Add to Map
90 |               viewer.load_json(geojson);
91 |             });
92 |         });
93 |     </script>
94 |   </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/docs/public/examples/viewer/pub.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |     <title>Waymark JS | Viewer | Pub</title>
 8 | 
 9 |     <!-- Stylesheet -->
10 |     <link rel="stylesheet" href="../../dist/latest/css/waymark-js.min.css" />
11 |     <link rel="stylesheet" href="../assets/css/examples.css" />
12 | 
13 |     <!-- JS -->
14 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
15 |     <script src="../../dist/latest/js/waymark-js.min.js"></script>
16 |   </head>
17 |   <body>
18 |     <div id="waymark-map"></div>
19 | 
20 |     <script>
21 |       // Create viewer Instance
22 |       const viewer = window.Waymark_Map_Factory.viewer();
23 | 
24 |       // Initialise with our options
25 |       viewer.init({
26 |         map_options: {
27 |           // Initial Map Zoom
28 |           map_init_zoom: 16,
29 | 
30 |           // Our Pub Icon
31 |           marker_types: [
32 |             {
33 |               marker_title: "Pub",
34 |               marker_icon: "ion-beer",
35 |               marker_colour: "brown",
36 |             },
37 |           ],
38 |         },
39 | 
40 |         viewer_options: {
41 |           show_filter: "0",
42 |         },
43 |       });
44 | 
45 |       // Load GeoJSON
46 |       viewer.load_json({
47 |         type: "FeatureCollection",
48 |         features: [
49 |           {
50 |             type: "Feature",
51 |             properties: {
52 |               type: "pub",
53 |               title: "The Scarlet Ibis",
54 |               description:
55 |                 "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
56 |               image_large_url: "https://www.waymark.dev/assets/geo/pub.jpeg",
57 |             },
58 |             geometry: {
59 |               type: "Point",
60 |               coordinates: [-128.0094, 50.6539],
61 |             },
62 |           },
63 |         ],
64 |       });
65 | 
66 |       // After a slight delay, open the popup
67 |       setTimeout(() => {
68 |         // Iterate over the Leaflet data layer
69 |         viewer.map_data.eachLayer((layer) => {
70 |           // Open popop
71 |           layer.openPopup();
72 |         });
73 |       }, 1000);
74 |     </script>
75 |   </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/docs/public/examples/viewer/route.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |     <title>Waymark JS | Viewer | Route</title>
 8 | 
 9 |     <!-- Stylesheet -->
10 |     <link rel="stylesheet" href="../../dist/latest/css/waymark-js.css" />
11 |     <link rel="stylesheet" href="../assets/css/examples.css" />
12 | 
13 |     <!-- JS -->
14 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
15 |     <script src="../../dist/latest/js/waymark-js.js"></script>
16 |   </head>
17 |   <body>
18 |     <div id="waymark-map"></div>
19 | 
20 |     <script>
21 |       // Create Editor Instance
22 |       const viewer = window.Waymark_Map_Factory.viewer();
23 | 
24 |       // Load Configuration from file
25 |       fetch("../assets/config/route.json")
26 |         .then((response) => response.json())
27 |         .then((config) => {
28 |           // Initialise with our options
29 |           viewer.init(config);
30 | 
31 |           // Load GeoJSON
32 |           fetch("../assets/geo/route.geojson")
33 |             .then((response) => response.json())
34 |             .then((geojson) => {
35 |               viewer.load_json(geojson);
36 |             });
37 |         });
38 |     </script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 |     <title>Waymark JS</title>
  7 | 
  8 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  9 | 
 10 |     <!-- Stylesheet -->
 11 |     <link rel="stylesheet" href="dist/css/waymark-js.css" />
 12 | 
 13 |     <!-- JS -->
 14 |     <script src="dist/js/waymark-js.js"></script>
 15 | 
 16 |     <style>
 17 |       body {
 18 |         margin: 0;
 19 |         padding: 0;
 20 |         height: 100%;
 21 |         display: flex;
 22 |       }
 23 |       #waymark-data,
 24 |       #waymark-map {
 25 |       }
 26 |       #waymark-map {
 27 |         flex: 2;
 28 |       }
 29 |       #waymark-data {
 30 |         flex: 1;
 31 |       }
 32 |     </style>
 33 |   </head>
 34 |   <body>
 35 |     <div id="waymark-map" class="waymark-map"></div>
 36 |     <textarea id="waymark-data">
 37 | {"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[-85.038,49.4595]},"type":"Feature","properties":{"type":"food"}},{"type":"Feature","properties":{"type":"red"},"geometry":{"type":"LineString","coordinates":[[-85.039556,49.460306],[-85.039556,49.459566],[-85.038247,49.459538],[-85.03844,49.458492],[-85.037131,49.45866]]}},{"type":"Feature","properties":{"type":"green"},"geometry":{"type":"Polygon","coordinates":[[[-85.035393,49.458785],[-85.035393,49.458492],[-85.03608,49.458437],[-85.036723,49.458213],[-85.036723,49.457809],[-85.035629,49.458004],[-85.034771,49.458409],[-85.034878,49.458743],[-85.035071,49.458855],[-85.035393,49.458785]]]}}]}</textarea
 38 |     >
 39 | 
 40 |     <script>
 41 |       // Set body height to be 100% of the viewport
 42 |       jQuery("body").height($(window).height());
 43 | 
 44 |       let waymark_instance = window.Waymark_Map_Factory.viewer();
 45 | 
 46 |       waymark_instance.init({
 47 |         map_options: {
 48 |           // tile_layers: [
 49 |           //   {
 50 |           //     layer_name: "Open Street Map",
 51 |           //     layer_url:
 52 |           //       "https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png?r=1",
 53 |           //     layer_attribution:
 54 |           //       '\u00a9 <a href="https:\/\/www.openstreetmap.org\/copyright">OpenStreetMap<\/a> contributors',
 55 |           //     layer_max_zoom: "18",
 56 |           //   },
 57 |           //   {
 58 |           //     layer_name: "Cycle",
 59 |           //     layer_url:
 60 |           //       "https:\/\/tile.thunderforest.com\/cycle\/{z}\/{x}\/{y}.png?apikey=4550655437ba47fda736e7898339c95f",
 61 |           //     layer_attribution:
 62 |           //       'Data \u00a9 <a href="https:\/\/www.openstreetmap.org\/copyright">OSM<\/a>',
 63 |           //     layer_max_zoom: "18",
 64 |           //   },
 65 |           // ],
 66 |           // marker_types: [
 67 |           //   {
 68 |           //     marker_title: "Photo",
 69 |           //     marker_shape: "marker",
 70 |           //     marker_size: "large",
 71 |           //     icon_type: "text",
 72 |           //     marker_icon: "\ud83d\uddbc",
 73 |           //     marker_colour: "#fbfbfb",
 74 |           //     icon_colour: "#475260",
 75 |           //     marker_display: "1",
 76 |           //     marker_submission: "1",
 77 |           //   },
 78 |           //   {
 79 |           //     marker_title: "Information",
 80 |           //     marker_shape: "marker",
 81 |           //     marker_size: "large",
 82 |           //     icon_type: "icon",
 83 |           //     marker_icon: "ion-information-circled",
 84 |           //     marker_colour: "#fbfbfb",
 85 |           //     icon_colour: "#0069a5",
 86 |           //     marker_display: "1",
 87 |           //     marker_submission: "1",
 88 |           //   },
 89 |           //   {
 90 |           //     marker_title: "Alert",
 91 |           //     marker_shape: "marker",
 92 |           //     marker_size: "large",
 93 |           //     icon_type: "icon",
 94 |           //     marker_icon: "ion-android-alert",
 95 |           //     marker_colour: "#da3d20",
 96 |           //     icon_colour: "white",
 97 |           //     marker_display: "1",
 98 |           //     marker_submission: "1",
 99 |           //   },
100 |           //   {
101 |           //     marker_title: "Trail Access",
102 |           //     marker_shape: "marker",
103 |           //     marker_size: "large",
104 |           //     icon_type: "icon",
105 |           //     marker_icon: "ion-android-bicycle",
106 |           //     marker_colour: "#70af00",
107 |           //     icon_colour: "white",
108 |           //     marker_display: "1",
109 |           //     marker_submission: "1",
110 |           //   },
111 |           //   {
112 |           //     marker_title: "Food",
113 |           //     marker_shape: "marker",
114 |           //     marker_size: "large",
115 |           //     icon_type: "icon",
116 |           //     marker_icon: "ion-pizza",
117 |           //     marker_colour: "#da3d20",
118 |           //     icon_colour: "#ffba00",
119 |           //     marker_display: "1",
120 |           //     marker_submission: "1",
121 |           //   },
122 |           //   {
123 |           //     marker_title: "Water",
124 |           //     marker_shape: "marker",
125 |           //     marker_size: "large",
126 |           //     icon_type: "icon",
127 |           //     marker_icon: "ion-waterdrop",
128 |           //     marker_colour: "#2aabe1",
129 |           //     icon_colour: "#fff",
130 |           //     marker_display: "1",
131 |           //     marker_submission: "1",
132 |           //   },
133 |           //   {
134 |           //     marker_title: "Shelter",
135 |           //     marker_shape: "marker",
136 |           //     marker_size: "large",
137 |           //     icon_type: "icon",
138 |           //     marker_icon: "ion-home",
139 |           //     marker_colour: "#72820d",
140 |           //     icon_colour: "white",
141 |           //     marker_display: "1",
142 |           //     marker_submission: "1",
143 |           //   },
144 |           //   {
145 |           //     marker_title: "Beer",
146 |           //     marker_shape: "marker",
147 |           //     marker_size: "large",
148 |           //     icon_type: "icon",
149 |           //     marker_icon: "ion-beer",
150 |           //     marker_colour: "#fbfbfb",
151 |           //     icon_colour: "#754423",
152 |           //     marker_display: "1",
153 |           //     marker_submission: "1",
154 |           //   },
155 |           //   {
156 |           //     marker_title: "Start",
157 |           //     marker_shape: "marker",
158 |           //     marker_size: "large",
159 |           //     icon_type: "icon",
160 |           //     marker_icon: "ion-power",
161 |           //     marker_colour: "#70af00",
162 |           //     icon_colour: "white",
163 |           //     marker_display: "1",
164 |           //     marker_submission: "1",
165 |           //   },
166 |           //   {
167 |           //     marker_title: "Finish",
168 |           //     marker_shape: "marker",
169 |           //     marker_size: "large",
170 |           //     icon_type: "icon",
171 |           //     marker_icon: "ion-power",
172 |           //     marker_colour: "#a43233",
173 |           //     icon_colour: "white",
174 |           //     marker_display: "1",
175 |           //     marker_submission: "1",
176 |           //   },
177 |           // ],
178 |           // line_types: [
179 |           //   {
180 |           //     line_title: "Red",
181 |           //     line_colour: "#d84848",
182 |           //     line_weight: "3",
183 |           //     line_opacity: "0.7",
184 |           //     line_display: "1",
185 |           //     line_submission: "1",
186 |           //   },
187 |           //   {
188 |           //     line_title: "Green",
189 |           //     line_colour: "#3cbc47",
190 |           //     line_weight: "3",
191 |           //     line_opacity: "0.7",
192 |           //     line_display: "1",
193 |           //     line_submission: "1",
194 |           //   },
195 |           //   {
196 |           //     line_title: "Blue",
197 |           //     line_colour: "#487bd9",
198 |           //     line_weight: "3",
199 |           //     line_opacity: "0.7",
200 |           //     line_display: "1",
201 |           //     line_submission: "1",
202 |           //   },
203 |           // ],
204 |           // shape_types: [
205 |           //   {
206 |           //     shape_title: "Red",
207 |           //     shape_colour: "green",
208 |           //     fill_opacity: "0.5",
209 |           //     shape_display: "1",
210 |           //     shape_submission: "1",
211 |           //   },
212 |           //   {
213 |           //     shape_title: "Green",
214 |           //     shape_colour: "#3cbc47",
215 |           //     fill_opacity: "0.5",
216 |           //     shape_display: "1",
217 |           //     shape_submission: "1",
218 |           //   },
219 |           //   {
220 |           //     shape_title: "Blue",
221 |           //     shape_colour: "#487bd9",
222 |           //     fill_opacity: "0.5",
223 |           //     shape_display: "1",
224 |           //     shape_submission: "1",
225 |           //   },
226 |           // ],
227 |           show_scale: "1",
228 |           debug_mode: true,
229 |         },
230 |         language: {
231 |           sleep_wake_message: "Fart to wake!",
232 |         },
233 |         viewer_options: {
234 |           show_gallery: "0",
235 |           show_filter: "1",
236 |           show_cluster: "0",
237 |           show_elevation: false,
238 |           cluster_radius: "40",
239 |           cluster_threshold: "10",
240 |           elevation_units: "metric",
241 |           elevation_initial: "1",
242 |           sleep_delay_seconds: "3600",
243 |           sleep_do_message: "1",
244 |           // sleep_wake_message: "Click to Interact with Map",
245 |         },
246 |         editor_options: { confirm_delete: "0" },
247 |       });
248 | 
249 |       waymark_instance.load_json(JSON.parse(jQuery("#waymark-data").val()));
250 |     </script>
251 |   </body>
252 | </html>
253 | 


--------------------------------------------------------------------------------
/libs/css/Control.Geocoder.css:
--------------------------------------------------------------------------------
  1 | .leaflet-control-geocoder {
  2 |   border-radius: 4px;
  3 |   background: white;
  4 |   min-width: 26px;
  5 |   min-height: 26px;
  6 | }
  7 | 
  8 | .leaflet-touch .leaflet-control-geocoder {
  9 |   min-width: 30px;
 10 |   min-height: 30px;
 11 | }
 12 | 
 13 | .leaflet-control-geocoder a,
 14 | .leaflet-control-geocoder .leaflet-control-geocoder-icon {
 15 |   border-bottom: none;
 16 |   display: inline-block;
 17 | }
 18 | 
 19 | .leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
 20 |   width: inherit;
 21 |   height: inherit;
 22 |   line-height: inherit;
 23 | }
 24 | 
 25 | .leaflet-control-geocoder a:hover,
 26 | .leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
 27 |   border-bottom: none;
 28 |   display: inline-block;
 29 | }
 30 | 
 31 | .leaflet-control-geocoder-form {
 32 |   display: none;
 33 |   vertical-align: middle;
 34 | }
 35 | .leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
 36 |   display: inline-block;
 37 | }
 38 | .leaflet-control-geocoder-form input {
 39 |   font-size: 120%;
 40 |   border: 0;
 41 |   background-color: transparent;
 42 |   width: 246px;
 43 | }
 44 | 
 45 | .leaflet-control-geocoder-icon {
 46 |   border-radius: 4px;
 47 |   width: 26px;
 48 |   height: 26px;
 49 |   border: none;
 50 |   background-color: white;
 51 |   background-image: url('../images/geocoder.png');
 52 |   background-repeat: no-repeat;
 53 |   background-position: center;
 54 |   cursor: pointer;
 55 | }
 56 | 
 57 | .leaflet-touch .leaflet-control-geocoder-icon {
 58 |   width: 30px;
 59 |   height: 30px;
 60 | }
 61 | 
 62 | .leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
 63 |   background-image: url('../images/throbber.gif');
 64 | }
 65 | 
 66 | .leaflet-control-geocoder-form-no-error {
 67 |   display: none;
 68 | }
 69 | 
 70 | .leaflet-control-geocoder-form input:focus {
 71 |   outline: none;
 72 | }
 73 | 
 74 | .leaflet-control-geocoder-form button {
 75 |   display: none;
 76 | }
 77 | .leaflet-control-geocoder-error {
 78 |   margin-top: 8px;
 79 |   margin-left: 8px;
 80 |   display: block;
 81 |   color: #444;
 82 | }
 83 | .leaflet-control-geocoder-alternatives {
 84 |   display: block;
 85 |   width: 272px;
 86 |   list-style: none;
 87 |   padding: 0;
 88 |   margin: 0;
 89 | }
 90 | 
 91 | .leaflet-control-geocoder-alternatives-minimized {
 92 |   display: none;
 93 |   height: 0;
 94 | }
 95 | .leaflet-control-geocoder-alternatives li {
 96 |   white-space: nowrap;
 97 |   display: block;
 98 |   overflow: hidden;
 99 |   padding: 5px 8px;
100 |   text-overflow: ellipsis;
101 |   border-bottom: 1px solid #ccc;
102 |   cursor: pointer;
103 | }
104 | 
105 | .leaflet-control-geocoder-alternatives li a,
106 | .leaflet-control-geocoder-alternatives li a:hover {
107 |   width: inherit;
108 |   height: inherit;
109 |   line-height: inherit;
110 |   background: inherit;
111 |   border-radius: inherit;
112 |   text-align: left;
113 | }
114 | 
115 | .leaflet-control-geocoder-alternatives li:last-child {
116 |   border-bottom: none;
117 | }
118 | .leaflet-control-geocoder-alternatives li:hover,
119 | .leaflet-control-geocoder-selected {
120 |   background-color: #f5f5f5;
121 | }
122 | .leaflet-control-geocoder-address-detail {
123 | }
124 | .leaflet-control-geocoder-address-context {
125 |   color: #666;
126 | }
127 | 


--------------------------------------------------------------------------------
/libs/css/L.Control.Locate.min.css:
--------------------------------------------------------------------------------
1 | .leaflet-control-locate a{font-size:1.4em;color:#444;cursor:pointer}.leaflet-control-locate.active a{color:#2074b6}.leaflet-control-locate.active.following a{color:#fc8428}.leaflet-control-locate-location circle{animation:leaflet-control-locate-throb 4s ease infinite}
2 | 


--------------------------------------------------------------------------------
/libs/css/leaflet-elevation.css:
--------------------------------------------------------------------------------
  1 | .leaflet-container {
  2 |   z-index: 0;
  3 |   /* prevent overlapping the .elevation-detached chart */
  4 | }
  5 | 
  6 | .elevation-detached {
  7 |   font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  8 |   height: auto;
  9 |   width: 100%;
 10 |   position: relative;
 11 |   z-index: 0;
 12 | }
 13 | 
 14 | .elevation-detached .elevation {
 15 |   width: 100%;
 16 | }
 17 | 
 18 | .elevation-detached .background {
 19 |   max-width: 100%;
 20 | }
 21 | 
 22 | .elevation-control.elevation .background {
 23 |   background-color: rgba(70, 130, 180, 0.2);
 24 |   border-radius: 5px;
 25 |   -moz-border-radius: 5px;
 26 |   -ms-border-radius: 5px;
 27 |   -o-border-radius: 5px;
 28 |   -webkit-border-radius: 5px;
 29 |   overflow: visible;
 30 |   display: block;
 31 | }
 32 | 
 33 | .elevation-control.elevation .axis line,
 34 | .elevation-control.elevation .axis path {
 35 |   stroke: #2D1130;
 36 |   stroke-width: 2;
 37 |   fill: none;
 38 | }
 39 | 
 40 | .elevation-control.elevation .grid .tick line {
 41 |   stroke: #EEE;
 42 |   stroke-width: 1px;
 43 |   shape-rendering: crispEdges;
 44 | }
 45 | 
 46 | .elevation-control.elevation .grid path {
 47 |   stroke-width: 0;
 48 |   pointer-events: none;
 49 | }
 50 | 
 51 | .elevation-control.elevation .axis text {
 52 |   text-anchor: end;
 53 |   fill: #000;
 54 |   font-weight: 700;
 55 | }
 56 | 
 57 | .elevation-control.elevation .area {
 58 |   fill: #4682B4;
 59 |   stroke: #000;
 60 |   stroke-width: 1.8;
 61 |   paint-order: stroke fill;
 62 | }
 63 | 
 64 | .elevation-control.elevation .mouse-focus-line {
 65 |   stroke: #0D1821;
 66 |   stroke-width: 1;
 67 |   pointer-events: none;
 68 | }
 69 | 
 70 | .elevation-control.elevation .mouse-focus-label {
 71 |   fill: #000;
 72 |   fill-opacity: 0.75;
 73 |   pointer-events: none;
 74 | }
 75 | 
 76 | .elevation-control.elevation .mouse-focus-label-text {
 77 |   fill: #FFF;
 78 |   pointer-events: none;
 79 | }
 80 | 
 81 | .elevation-control.elevation .mouse-drag {
 82 |   fill: rgba(23, 74, 117, 0.4);
 83 | }
 84 | 
 85 | .elevation-control.elevation .elevation-toggle {
 86 |   cursor: pointer;
 87 |   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
 88 |   -webkit-border-radius: 5px;
 89 |   border-radius: 5px;
 90 |   width: 36px;
 91 |   height: 36px;
 92 |   background-color: #F8F8F9;
 93 | }
 94 | 
 95 | .elevation-summary {
 96 |   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
 97 |   font-size: 12px;
 98 |   margin-left: 45px;
 99 | }
100 | 
101 | .leaflet-control-container .elevation-summary {
102 |   text-shadow:
103 |     1.5px 0 0 #FFF,
104 |     -1.5px 0 0 #FFF,
105 |     0 1.5px 0 #FFF,
106 |     0 -1.5px 0 #FFF,
107 |     1px 1px #FFF,
108 |     -1px -1px 0 #FFF,
109 |     1px -1px 0 #FFF,
110 |     -1px 1px 0 #FFF;
111 | }
112 | 
113 | .elevation-summary.multiline-summary {
114 |   margin-right: 30px;
115 | }
116 | 
117 | .elevation-detached .elevation-summary.multiline-summary {
118 |   margin-bottom: 12px;
119 |   margin-top: 12px;
120 |   line-height: 2;
121 | }
122 | 
123 | .elevation-summary.inline-summary>span:not(:last-child):after {
124 |   content: "\0020\2014\0020";
125 | }
126 | 
127 | .elevation-summary.multiline-summary>span {
128 |   display: block;
129 | }
130 | 
131 | .elevation-summary.multiline-summary .download {
132 |   float: right;
133 |   margin-top: -2.5em;
134 |   font-weight: bold;
135 |   font-size: 1.2em;
136 | }
137 | 
138 | .elevation-detached .elevation-summary.multiline-summary .download {
139 |   margin-top: -3.5em;
140 | }
141 | 
142 | .elevation-summary .summaryvalue {
143 |   font-weight: bold;
144 | }
145 | 
146 | .elevation-control.elevation-collapsed .background,
147 | .elevation-control.elevation-collapsed .elevation-summary {
148 |   display: none;
149 | }
150 | 
151 | .elevation-control.elevation-collapsed .elevation-toggle {
152 |   display: block;
153 | }
154 | 
155 | .elevation-control.elevation .elevation-toggle-icon {
156 |   background: url(../images/elevation.png) no-repeat center center;
157 | }
158 | 
159 | .elevation-control.elevation.elevation-expanded .elevation-toggle-icon.close-button {
160 |   background: transparent url(../images/remove.svg) no-repeat center center;
161 |   background-size: 14px 14px;
162 |   position: absolute;
163 |   right: 5px;
164 |   top: 5px;
165 |   height: 20px;
166 |   width: 20px;
167 | }
168 | 
169 | .leaflet-elevation-pane .height-focus,
170 | .leaflet-overlay-pane .height-focus {
171 |   stroke: #000;
172 |   fill: #FFF;
173 | }
174 | 
175 | .leaflet-elevation-pane .height-focus.line,
176 | .leaflet-overlay-pane .height-focus.line {
177 |   pointer-events: none;
178 |   stroke-width: 2;
179 | }
180 | 
181 | .leaflet-elevation-pane .height-focus-label,
182 | .leaflet-overlay-pane .height-focus-label {
183 |   font-size: 14px;
184 |   font-weight: 600;
185 |   fill: #000;
186 |   paint-order: stroke;
187 |   stroke: #FFF;
188 |   stroke-width: 2px;
189 | }
190 | 
191 | .elevation-waypoint-icon:before {
192 |   background: url(../images/elevation-pushpin.png) no-repeat center center / contain;
193 |   content: "";
194 |   width: 100%;
195 |   height: 100%;
196 |   display: inline-block;
197 | }
198 | 
199 | .elevation-position-icon:before {
200 |   background: url(../images/elevation-position.png) no-repeat center center / contain;
201 |   content: "";
202 |   width: 100%;
203 |   height: 100%;
204 |   display: inline-block;
205 | }
206 | 
207 | .elevation-polyline {
208 |   filter: drop-shadow(1px 1px 0 #FFF) drop-shadow(-1px -1px 0 #FFF) drop-shadow(1px -1px 0 #FFF) drop-shadow(-1px 1px 0 #FFF);
209 | }
210 | 
211 | .elevation-placeholder {
212 |   margin: auto;
213 |   height: auto;
214 |   width: 100%;
215 | }
216 | 
217 | .elevation-placeholder~* {
218 |   display: none !important;
219 | }
220 | 
221 | /* LIME THEME //////////////////////////////////////////////// */
222 | 
223 | .lime-theme.elevation-control.elevation .background {
224 |   background-color: rgba(156, 194, 34, 0.2);
225 | }
226 | 
227 | .lime-theme.elevation-control.elevation .axis line,
228 | .lime-theme.elevation-control.elevation .axis path {
229 |   stroke: #566B13;
230 | }
231 | 
232 | .lime-theme.elevation-control.elevation .grid .tick line {
233 |   stroke: #CCC;
234 | }
235 | 
236 | .lime-theme.elevation-control.elevation .mouse-drag {
237 |   fill: rgba(99, 126, 11, 0.4);
238 | }
239 | 
240 | .lime-theme.elevation-control.elevation .elevation-toggle-icon {
241 |   background: url(../images/elevation-lime.png) no-repeat center center;
242 | }
243 | 
244 | .lime-theme.elevation-control.elevation .area {
245 |   fill: #9CC222;
246 | }
247 | 
248 | .lime-theme.elevation-control.elevation .mouse-focus-line {
249 |   stroke: #101404;
250 | }
251 | 
252 | .lime-theme.height-focus {
253 |   stroke: #000;
254 |   fill: #9CC222;
255 | }
256 | 
257 | .lime-theme.elevation-polyline {
258 |   stroke: #566B13;
259 | }
260 | 
261 | /* STEELBLUE THEME //////////////////////////////////////////////// */
262 | 
263 | .steelblue-theme.elevation-control.elevation .background {
264 |   background-color: rgba(70, 130, 180, 0.2);
265 | }
266 | 
267 | .steelblue-theme.elevation-control.elevation .axis line,
268 | .steelblue-theme.elevation-control.elevation .axis path {
269 |   stroke: #0D1821;
270 | }
271 | 
272 | .steelblue-theme.elevation-control.elevation .mouse-drag {
273 |   fill: rgba(23, 74, 117, 0.4);
274 | }
275 | 
276 | .steelblue-theme.elevation-control.elevation .elevation-toggle-icon {
277 |   background: url(../images/elevation-steelblue.png) no-repeat center center;
278 | }
279 | 
280 | .steelblue-theme.elevation-control.elevation .area {
281 |   fill: #4682B4;
282 | }
283 | 
284 | .steelblue-theme.elevation-control.elevation .mouse-focus-line {
285 |   stroke: #0D1821;
286 | }
287 | 
288 | .steelblue-theme.height-focus {
289 |   stroke: #000;
290 |   fill: #4682B4;
291 | }
292 | 
293 | .steelblue-theme.elevation-polyline {
294 |   stroke: #4682B4;
295 | }
296 | 
297 | /* PURPLE THEME //////////////////////////////////////////////// */
298 | 
299 | .purple-theme.elevation-control.elevation .background {
300 |   background-color: rgba(115, 44, 123, 0.2);
301 | }
302 | 
303 | .purple-theme.elevation-control.elevation .axis line,
304 | .purple-theme.elevation-control.elevation .axis path {
305 |   stroke: #2D1130;
306 | }
307 | 
308 | .purple-theme.elevation-control.elevation .mouse-drag {
309 |   fill: rgba(74, 14, 80, 0.4);
310 | }
311 | 
312 | .purple-theme.elevation-control.elevation .elevation-toggle-icon {
313 |   background: url(../images/elevation-purple.png) no-repeat center center;
314 | }
315 | 
316 | .purple-theme.elevation-control.elevation .area {
317 |   fill: #732C7B;
318 | }
319 | 
320 | .purple-theme.elevation-control.elevation .mouse-focus-line {
321 |   stroke: #000;
322 | }
323 | 
324 | .purple-theme.height-focus {
325 |   stroke: #000;
326 |   fill: #732C7B;
327 | }
328 | 
329 | .purple-theme.elevation-polyline {
330 |   stroke: #732C7B;
331 | }
332 | 
333 | /* YELLOW THEME //////////////////////////////////////////////// */
334 | 
335 | .yellow-theme.elevation-control.elevation .area {
336 |   fill: #FF0;
337 | }
338 | 
339 | .yellow-theme.elevation-polyline {
340 |   stroke: #FF0;
341 | }
342 | 
343 | /* RED THEME //////////////////////////////////////////////// */
344 | 
345 | .red-theme.elevation-control.elevation .area {
346 |   fill: #F00;
347 |   stroke: #000;
348 | }
349 | 
350 | .red-theme.elevation-polyline {
351 |   stroke: #F00;
352 | }
353 | 
354 | /* MAGENTA THEME //////////////////////////////////////////////// */
355 | 
356 | .magenta-theme.elevation-control.elevation .background {
357 |   background-color: rgba(255, 255, 255, 0.47);
358 | }
359 | 
360 | .magenta-theme.elevation-control.elevation .area {
361 |   fill: #FF005E;
362 |   stroke: #000;
363 | }
364 | 
365 | .magenta-theme.elevation-polyline {
366 |   stroke: #FF005E;
367 | }
368 | 
369 | /* LIGHTBLUE THEME //////////////////////////////////////////////// */
370 | 
371 | .lightblue-theme.elevation-control.elevation .area {
372 |   fill: #3366CC;
373 |   stroke: #000;
374 |   stroke-width: 1.25;
375 | }
376 | 
377 | .elevation-detached .lightblue-theme.elevation-control.elevation .area {
378 |   stroke: #3366CC;
379 |   fill-opacity: 0.45;
380 | }
381 | 
382 | .lightblue-theme.height-focus {
383 |   stroke: #000;
384 |   fill: #FFFFFF;
385 | }
386 | 
387 | .lightblue-theme.elevation-polyline {
388 |   stroke: #3366CC;
389 | }
390 | 


--------------------------------------------------------------------------------
/libs/css/leaflet.fullscreen.min.css:
--------------------------------------------------------------------------------
1 | .leaflet-control-fullscreen a{background:#fff url('../images/fullscreen.png') no-repeat 0 0;background-size:26px 52px}.leaflet-touch .leaflet-control-fullscreen a{background-position:2px 2px}.leaflet-fullscreen-on .leaflet-control-fullscreen a{background-position:0 -26px}.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a{background-position:2px -24px}.leaflet-container:-webkit-full-screen{width:100%!important;height:100%!important}.leaflet-container.leaflet-fullscreen-on{width:100%!important;height:100%!important}.leaflet-pseudo-fullscreen{position:fixed!important;width:100%!important;height:100%!important;top:0!important;left:0!important;z-index:99999}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.leaflet-control-fullscreen a{background-image:url('../images/fullscreen@2x.png')}}
2 | 


--------------------------------------------------------------------------------
/libs/css/leaflet.min.css:
--------------------------------------------------------------------------------
1 | .leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg,.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none!important;max-height:none!important}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile{will-change:opacity}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.leaflet-zoom-anim .leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,0.25,1);transition:transform .25s cubic-bezier(0,0,0.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078a8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:0}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url('../images/layers.png');width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url('../images/layers-2x.png');background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,0.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:0;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255,255,255,0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:0;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;border:0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:bold;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-clickable{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:""}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}


--------------------------------------------------------------------------------
/libs/js/L.Control.Locate.min.js:
--------------------------------------------------------------------------------
1 | /*! Version: 0.67.0
2 | Copyright (c) 2016 Dominik Moritz */
3 | 
4 | !function(t,i){"function"==typeof define&&define.amd?define(["leaflet"],t):"object"==typeof exports&&(void 0!==i&&i.L?module.exports=t(L):module.exports=t(require("leaflet"))),void 0!==i&&i.L&&(i.Waymark_L.Control.Locate=t(L))}(function(h){var o=function(i,o,t){(t=t.split(" ")).forEach(function(t){h.DomUtil[i].call(this,o,t)})},i=function(t,i){o("addClass",t,i)},s=function(t,i){o("removeClass",t,i)},t=h.Marker.extend({initialize:function(t,i){h.Util.setOptions(this,i),this._latlng=t,this.createIcon()},createIcon:function(){var t=this.options,i="";void 0!==t.color&&(i+="stroke:"+t.color+";"),void 0!==t.weight&&(i+="stroke-width:"+t.weight+";"),void 0!==t.fillColor&&(i+="fill:"+t.fillColor+";"),void 0!==t.fillOpacity&&(i+="fill-opacity:"+t.fillOpacity+";"),void 0!==t.opacity&&(i+="opacity:"+t.opacity+";");var o=this._getIconSVG(t,i);this._locationIcon=h.divIcon({className:o.className,html:o.svg,iconSize:[o.w,o.h]}),this.setIcon(this._locationIcon)},_getIconSVG:function(t,i){var o=t.radius,s=o+t.weight,e=2*s;return{className:"leaflet-control-locate-location",svg:'<svg xmlns="http://www.w3.org/2000/svg" width="'+e+'" height="'+e+'" version="1.1" viewBox="-'+s+" -"+s+" "+e+" "+e+'"><circle r="'+o+'" style="'+i+'" /></svg>',w:e,h:e}},setStyle:function(t){h.Util.setOptions(this,t),this.createIcon()}}),e=t.extend({initialize:function(t,i,o){h.Util.setOptions(this,o),this._latlng=t,this._heading=i,this.createIcon()},setHeading:function(t){this._heading=t},_getIconSVG:function(t,i){var o=t.radius,s=t.width+t.weight,e=2*(o+t.depth+t.weight),n="M0,0 l"+t.width/2+","+t.depth+" l-"+s+",0 z";return{className:"leaflet-control-locate-heading",svg:'<svg xmlns="http://www.w3.org/2000/svg" width="'+s+'" height="'+e+'" version="1.1" viewBox="-'+s/2+" 0 "+s+" "+e+'" style="'+("transform: rotate("+this._heading+"deg)")+'"><path d="'+n+'" style="'+i+'" /></svg>',w:s,h:e}}}),n=h.Control.extend({options:{position:"topleft",layer:void 0,setView:"untilPanOrZoom",keepCurrentZoomLevel:!1,getLocationBounds:function(t){return t.bounds},flyTo:!1,clickBehavior:{inView:"stop",outOfView:"setView",inViewNotFollowing:"inView"},returnToPrevBounds:!1,cacheLocation:!0,drawCircle:!0,drawMarker:!0,showCompass:!0,markerClass:t,compassClass:e,circleStyle:{className:"leaflet-control-locate-circle",color:"#136AEC",fillColor:"#136AEC",fillOpacity:.15,weight:0},markerStyle:{className:"leaflet-control-locate-marker",color:"#fff",fillColor:"#2A93EE",fillOpacity:1,weight:3,opacity:1,radius:9},compassStyle:{fillColor:"#2A93EE",fillOpacity:1,weight:0,color:"#fff",opacity:1,radius:9,width:9,depth:6},followCircleStyle:{},followMarkerStyle:{},followCompassStyle:{},icon:"fa fa-map-marker",iconLoading:"fa fa-spinner fa-spin",iconElementTag:"span",circlePadding:[0,0],metric:!0,createButtonCallback:function(t,i){var o=h.DomUtil.create("a","leaflet-bar-part leaflet-bar-part-single",t);return o.title=i.strings.title,{link:o,icon:h.DomUtil.create(i.iconElementTag,i.icon,o)}},onLocationError:function(t,i){alert(t.message)},onLocationOutsideMapBounds:function(t){t.stop(),alert(t.options.strings.outsideMapBoundsMsg)},showPopup:!0,strings:{title:"Show me where I am",metersUnit:"meters",feetUnit:"feet",popup:"You are within {distance} {unit} from this point",outsideMapBoundsMsg:"You seem located outside the boundaries of the map"},locateOptions:{maxZoom:1/0,watch:!0,setView:!1}},initialize:function(t){for(var i in t)"object"==typeof this.options[i]?h.extend(this.options[i],t[i]):this.options[i]=t[i];this.options.followMarkerStyle=h.extend({},this.options.markerStyle,this.options.followMarkerStyle),this.options.followCircleStyle=h.extend({},this.options.circleStyle,this.options.followCircleStyle),this.options.followCompassStyle=h.extend({},this.options.compassStyle,this.options.followCompassStyle)},onAdd:function(t){var i=h.DomUtil.create("div","leaflet-control-locate leaflet-bar leaflet-control");this._layer=this.options.layer||new h.LayerGroup,this._layer.addTo(t),this._event=void 0,this._compassHeading=null,this._prevBounds=null;var o=this.options.createButtonCallback(i,this.options);return this._link=o.link,this._icon=o.icon,h.DomEvent.on(this._link,"click",h.DomEvent.stopPropagation).on(this._link,"click",h.DomEvent.preventDefault).on(this._link,"click",this._onClick,this).on(this._link,"dblclick",h.DomEvent.stopPropagation),this._resetVariables(),this._map.on("unload",this._unload,this),i},_onClick:function(){this._justClicked=!0;var t=this._isFollowing();if(this._userPanned=!1,this._userZoomed=!1,this._active&&!this._event)this.stop();else if(this._active&&void 0!==this._event){var i=this.options.clickBehavior,o=i.outOfView;switch(this._map.getBounds().contains(this._event.latlng)&&(o=t?i.inView:i.inViewNotFollowing),i[o]&&(o=i[o]),o){case"setView":this.setView();break;case"stop":if(this.stop(),this.options.returnToPrevBounds)(this.options.flyTo?this._map.flyToBounds:this._map.fitBounds).bind(this._map)(this._prevBounds)}}else this.options.returnToPrevBounds&&(this._prevBounds=this._map.getBounds()),this.start();this._updateContainerStyle()},start:function(){this._activate(),this._event&&(this._drawMarker(this._map),this.options.setView&&this.setView()),this._updateContainerStyle()},stop:function(){this._deactivate(),this._cleanClasses(),this._resetVariables(),this._removeMarker()},stopFollowing:function(){this._userPanned=!0,this._updateContainerStyle(),this._drawMarker()},_activate:function(){this._active||(this._map.locate(this.options.locateOptions),this._active=!0,this._map.on("locationfound",this._onLocationFound,this),this._map.on("locationerror",this._onLocationError,this),this._map.on("dragstart",this._onDrag,this),this._map.on("zoomstart",this._onZoom,this),this._map.on("zoomend",this._onZoomEnd,this),this.options.showCompass&&("ondeviceorientationabsolute"in window?h.DomEvent.on(window,"deviceorientationabsolute",this._onDeviceOrientation,this):"ondeviceorientation"in window&&h.DomEvent.on(window,"deviceorientation",this._onDeviceOrientation,this)))},_deactivate:function(){this._map.stopLocate(),this._active=!1,this.options.cacheLocation||(this._event=void 0),this._map.off("locationfound",this._onLocationFound,this),this._map.off("locationerror",this._onLocationError,this),this._map.off("dragstart",this._onDrag,this),this._map.off("zoomstart",this._onZoom,this),this._map.off("zoomend",this._onZoomEnd,this),this.options.showCompass&&(this._compassHeading=null,"ondeviceorientationabsolute"in window?h.DomEvent.off(window,"deviceorientationabsolute",this._onDeviceOrientation,this):"ondeviceorientation"in window&&h.DomEvent.off(window,"deviceorientation",this._onDeviceOrientation,this))},setView:function(){if(this._drawMarker(),this._isOutsideMapBounds())this._event=void 0,this.options.onLocationOutsideMapBounds(this);else if(this.options.keepCurrentZoomLevel){(t=this.options.flyTo?this._map.flyTo:this._map.panTo).bind(this._map)([this._event.latitude,this._event.longitude])}else{var t=this.options.flyTo?this._map.flyToBounds:this._map.fitBounds;this._ignoreEvent=!0,t.bind(this._map)(this.options.getLocationBounds(this._event),{padding:this.options.circlePadding,maxZoom:this.options.locateOptions.maxZoom}),h.Util.requestAnimFrame(function(){this._ignoreEvent=!1},this)}},_drawCompass:function(){if(this._event){var t=this._event.latlng;if(this.options.showCompass&&t&&null!==this._compassHeading){var i=this._isFollowing()?this.options.followCompassStyle:this.options.compassStyle;this._compass?(this._compass.setLatLng(t),this._compass.setHeading(this._compassHeading),this._compass.setStyle&&this._compass.setStyle(i)):this._compass=new this.options.compassClass(t,this._compassHeading,i).addTo(this._layer)}!this._compass||this.options.showCompass&&null!==this._compassHeading||(this._compass.removeFrom(this._layer),this._compass=null)}},_drawMarker:function(){void 0===this._event.accuracy&&(this._event.accuracy=0);var t,i,o=this._event.accuracy,s=this._event.latlng;if(this.options.drawCircle){var e=this._isFollowing()?this.options.followCircleStyle:this.options.circleStyle;this._circle?this._circle.setLatLng(s).setRadius(o).setStyle(e):this._circle=h.circle(s,o,e).addTo(this._layer)}if(i=this.options.metric?(t=o.toFixed(0),this.options.strings.metersUnit):(t=(3.2808399*o).toFixed(0),this.options.strings.feetUnit),this.options.drawMarker){var n=this._isFollowing()?this.options.followMarkerStyle:this.options.markerStyle;this._marker?(this._marker.setLatLng(s),this._marker.setStyle&&this._marker.setStyle(n)):this._marker=new this.options.markerClass(s,n).addTo(this._layer)}this._drawCompass();var a=this.options.strings.popup;this.options.showPopup&&a&&this._marker&&this._marker.bindPopup(h.Util.template(a,{distance:t,unit:i}))._popup.setLatLng(s),this.options.showPopup&&a&&this._compass&&this._compass.bindPopup(h.Util.template(a,{distance:t,unit:i}))._popup.setLatLng(s)},_removeMarker:function(){this._layer.clearLayers(),this._marker=void 0,this._circle=void 0},_unload:function(){this.stop(),this._map.off("unload",this._unload,this)},_setCompassHeading:function(t){!isNaN(parseFloat(t))&&isFinite(t)?(t=Math.round(t),this._compassHeading=t,h.Util.requestAnimFrame(this._drawCompass,this)):this._compassHeading=null},_onCompassNeedsCalibration:function(){this._setCompassHeading()},_onDeviceOrientation:function(t){this._active&&(t.webkitCompassHeading?this._setCompassHeading(t.webkitCompassHeading):t.absolute&&t.alpha&&this._setCompassHeading(360-t.alpha))},_onLocationError:function(t){3==t.code&&this.options.locateOptions.watch||(this.stop(),this.options.onLocationError(t,this))},_onLocationFound:function(t){if((!this._event||this._event.latlng.lat!==t.latlng.lat||this._event.latlng.lng!==t.latlng.lng||this._event.accuracy!==t.accuracy)&&this._active){switch(this._event=t,this._drawMarker(),this._updateContainerStyle(),this.options.setView){case"once":this._justClicked&&this.setView();break;case"untilPan":this._userPanned||this.setView();break;case"untilPanOrZoom":this._userPanned||this._userZoomed||this.setView();break;case"always":this.setView()}this._justClicked=!1}},_onDrag:function(){this._event&&!this._ignoreEvent&&(this._userPanned=!0,this._updateContainerStyle(),this._drawMarker())},_onZoom:function(){this._event&&!this._ignoreEvent&&(this._userZoomed=!0,this._updateContainerStyle(),this._drawMarker())},_onZoomEnd:function(){this._event&&this._drawCompass(),this._event&&!this._ignoreEvent&&this._marker&&!this._map.getBounds().pad(-.3).contains(this._marker.getLatLng())&&(this._userPanned=!0,this._updateContainerStyle(),this._drawMarker())},_isFollowing:function(){return!!this._active&&("always"===this.options.setView||("untilPan"===this.options.setView?!this._userPanned:"untilPanOrZoom"===this.options.setView?!this._userPanned&&!this._userZoomed:void 0))},_isOutsideMapBounds:function(){return void 0!==this._event&&(this._map.options.maxBounds&&!this._map.options.maxBounds.contains(this._event.latlng))},_updateContainerStyle:function(){this._container&&(this._active&&!this._event?this._setClasses("requesting"):this._isFollowing()?this._setClasses("following"):this._active?this._setClasses("active"):this._cleanClasses())},_setClasses:function(t){"requesting"==t?(s(this._container,"active following"),i(this._container,"requesting"),s(this._icon,this.options.icon),i(this._icon,this.options.iconLoading)):"active"==t?(s(this._container,"requesting following"),i(this._container,"active"),s(this._icon,this.options.iconLoading),i(this._icon,this.options.icon)):"following"==t&&(s(this._container,"requesting"),i(this._container,"active following"),s(this._icon,this.options.iconLoading),i(this._icon,this.options.icon))},_cleanClasses:function(){h.DomUtil.removeClass(this._container,"requesting"),h.DomUtil.removeClass(this._container,"active"),h.DomUtil.removeClass(this._container,"following"),s(this._icon,this.options.iconLoading),i(this._icon,this.options.icon)},_resetVariables:function(){this._active=!1,this._justClicked=!1,this._userPanned=!1,this._userZoomed=!1}});return h.control.locate=function(t){return new h.Control.Locate(t)},n},window);
5 | //# sourceMappingURL=Waymark_L.Control.Locate.min.js.map


--------------------------------------------------------------------------------
/libs/js/Leaflet.FeatureGroup.SubGroup.js:
--------------------------------------------------------------------------------
  1 | Waymark_L.FeatureGroup.SubGroup = Waymark_L.FeatureGroup.extend({
  2 | 
  3 |     /**
  4 |      * Instantiates a SubGroup.
  5 |      * @param parentGroup (Waymark_L.LayerGroup) (optional)
  6 |      * @param layersArray (Waymark_L.Layer[]) (optional)
  7 |      */
  8 |     initialize: function (parentGroup, layersArray) {
  9 |         Waymark_L.FeatureGroup.prototype.initialize.call(this, layersArray);
 10 | 
 11 |         this.setParentGroup(parentGroup);
 12 |     },
 13 | 
 14 |     /**
 15 |      * Changes the parent group into which child markers are added to /
 16 |      * removed from.
 17 |      * @param parentGroup (Waymark_L.LayerGroup)
 18 |      * @returns {SubGroup} this
 19 |      */
 20 |     setParentGroup: function (parentGroup) {
 21 |         var pgInstanceOfLG = parentGroup instanceof Waymark_L.LayerGroup;
 22 | 
 23 |         this._parentGroup = parentGroup;
 24 | 
 25 |         // onAdd
 26 |         this.onAdd =
 27 |             pgInstanceOfLG ?
 28 |                 (
 29 |                     typeof parentGroup.addLayers === "function" ?
 30 |                         this._onAddToGroupBatch :
 31 |                         this._onAddToGroup
 32 |                 ) :
 33 |                 this._onAddToMap;
 34 | 
 35 |         // onRemove
 36 |         this.onRemove =
 37 |             pgInstanceOfLG ?
 38 |                 (
 39 |                     typeof parentGroup.removeLayers === "function" ?
 40 |                         this._onRemoveFromGroupBatch :
 41 |                         this._onRemoveFromGroup
 42 |                 ) :
 43 |                 this._onRemoveFromMap;
 44 | 
 45 |         // addLayer
 46 |         this.addLayer = pgInstanceOfLG ?
 47 |             this._addLayerToGroup :
 48 |             this._addLayerToMap;
 49 | 
 50 |         // removeLayer
 51 |         this.removeLayer = pgInstanceOfLG ?
 52 |             this._removeLayerFromGroup :
 53 |             this._removeLayerFromMap;
 54 | 
 55 |         return this;
 56 |     },
 57 | 
 58 |     /**
 59 |      * Removes the current sub-group from map before changing the parent
 60 |      * group. Re-adds the sub-group to map if it was before changing.
 61 |      * @param parentGroup (Waymark_L.LayerGroup)
 62 |      * @returns {SubGroup} this
 63 |      */
 64 |     setParentGroupSafe: function (parentGroup) {
 65 |         var map = this._map;
 66 | 
 67 |         if (map) {
 68 |             map.removeLayer(this);
 69 |         }
 70 | 
 71 |         this.setParentGroup(parentGroup);
 72 | 
 73 |         if (map) {
 74 |             map.addLayer(this);
 75 |         }
 76 | 
 77 |         return this;
 78 |     },
 79 | 
 80 |     /**
 81 |      * Returns the current parent group.
 82 |      * @returns {*}
 83 |      */
 84 |     getParentGroup: function () {
 85 |         return this._parentGroup;
 86 |     },
 87 | 
 88 | 
 89 |     // For parent groups with batch methods (addLayers and removeLayers)
 90 |     // like MarkerCluster.
 91 |     _onAddToGroupBatch: function (map) {
 92 |         var layersArray = this.getLayers();
 93 | 
 94 |         this._map = map;
 95 |         this._parentGroup.addLayers(layersArray);
 96 |     },
 97 | 
 98 |     _onRemoveFromGroupBatch: function () {
 99 |         var layersArray = this.getLayers();
100 | 
101 |         this._parentGroup.removeLayers(layersArray);
102 |         this._map = null;
103 |     },
104 | 
105 | 
106 |     // For other parent layer groups.
107 |     _onAddToGroup: function (map) {
108 |         var parentGroup = this._parentGroup;
109 | 
110 |         this._map = map;
111 |         this.eachLayer(parentGroup.addLayer, parentGroup);
112 |     },
113 | 
114 |     _onRemoveFromGroup: function () {
115 |         var parentGroup = this._parentGroup;
116 | 
117 |         this.eachLayer(parentGroup.removeLayer, parentGroup);
118 |         this._map = null;
119 |     },
120 | 
121 | 
122 |     // Defaults to standard FeatureGroup behaviour when parent group is not
123 |     // specified or is not a type of LayerGroup.
124 |     _onAddToMap: Waymark_L.FeatureGroup.prototype.onAdd,
125 |     _onRemoveFromMap: Waymark_L.FeatureGroup.prototype.onRemove,
126 | 
127 | 
128 |     _addLayerToGroup: function (layer) {
129 |         if (this.hasLayer(layer)) {
130 |             return this;
131 |         }
132 | 
133 |         layer.addEventParent(this);
134 | 
135 |         var id = this.getLayerId(layer);
136 | 
137 |         this._layers[id] = layer;
138 | 
139 |         if (this._map) {
140 |             // Add to parent group instead of directly to map.
141 |             this._parentGroup.addLayer(layer);
142 |         }
143 | 
144 |         return this.fire("layeradd", {layer: layer});
145 |     },
146 | 
147 |     _removeLayerFromGroup: function (layer) {
148 |         // If unknown layer, skip.
149 |         if (!this.hasLayer(layer)) {
150 |             return this;
151 |         }
152 | 
153 |         // Retrieve the layer id.
154 |         var id = layer in this._layers ? layer : this.getLayerId(layer);
155 | 
156 |         // Retrieve the layer from this._layer.
157 |         layer = this._layers[id];
158 | 
159 |         // Unregister from events parent.
160 |         layer.removeEventParent(this);
161 | 
162 |         if (this._map && layer) {
163 |             // Remove from parent group instead of directly from map.
164 |             this._parentGroup.removeLayer(layer);
165 |         }
166 | 
167 |         delete this._layers[id];
168 | 
169 |         return this.fire("layerremove", {layer: layer});
170 |     },
171 | 
172 |     // Defaults to standard FeatureGroup behaviour when parent group is not
173 |     // specified or is not a type of LayerGroup.
174 |     _addLayerToMap: Waymark_L.FeatureGroup.prototype.addLayer,
175 |     _removeLayerFromMap: Waymark_L.FeatureGroup.prototype.removeLayer
176 | 
177 | });
178 | 
179 | 
180 | 
181 | // Supply with a factory for consistency with Leaflet.
182 | Waymark_L.featureGroup.subGroup = function (parentGroup, options) {
183 |     return new Waymark_L.FeatureGroup.SubGroup(parentGroup, options);
184 | };
185 | 


--------------------------------------------------------------------------------
/libs/js/Leaflet.Sleep.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Leaflet.Sleep
  3 |  */
  4 | 
  5 | /*
  6 |  * Default Button (touch devices only)
  7 |  */
  8 | 
  9 | Waymark_L.Control.SleepMapControl = Waymark_L.Control.extend({
 10 | 
 11 |   initialize: function(opts){
 12 |     Waymark_L.setOptions(this,opts);
 13 |   },
 14 | 
 15 |   options: {
 16 |     position: 'topright',
 17 |     prompt: 'disable map',
 18 |     styles: {
 19 |       'backgroundColor': 'white',
 20 |       'padding': '5px',
 21 |       'border': '2px solid gray'
 22 |     }
 23 |   },
 24 | 
 25 |   buildContainer: function(){
 26 |     var self = this;
 27 |     var container = Waymark_L.DomUtil.create('p', 'sleep-button');
 28 |     var boundEvent = this._nonBoundEvent.bind(this);
 29 |     container.appendChild( document.createTextNode( this.options.prompt ));
 30 |     Waymark_L.DomEvent.addListener(container, 'click', boundEvent);
 31 |     Waymark_L.DomEvent.addListener(container, 'touchstart', boundEvent);
 32 | 
 33 |     Object.keys(this.options.styles).map(function(key) {
 34 |       container.style[key] = self.options.styles[key];
 35 |     });
 36 | 
 37 |     return (this._container = container);
 38 |   },
 39 | 
 40 |   onAdd: function () {
 41 |     return this._container || this.buildContainer();
 42 |   },
 43 | 
 44 |   _nonBoundEvent: function(e) {
 45 |     Waymark_L.DomEvent.stop(e);
 46 |     if (this._map) this._map.sleep._sleepMap();
 47 |     return false;
 48 |   }
 49 | 
 50 | });
 51 | 
 52 | Waymark_L.Control.sleepMapControl = function(){
 53 |   return new Waymark_L.Control.SleepMapControl();
 54 | };
 55 | 
 56 | 
 57 | /*
 58 |  * The Sleep Handler
 59 |  */
 60 | 
 61 | Waymark_L.Map.mergeOptions({
 62 |   sleep: true,
 63 |   sleepTime: 750,
 64 |   wakeTime: 750,
 65 |   wakeMessageTouch: 'Touch to Wake',
 66 |   sleepNote: true,
 67 |   hoverToWake: true,
 68 |   sleepOpacity:.7,
 69 |   sleepButton: Waymark_L.Control.sleepMapControl
 70 | });
 71 | 
 72 | Waymark_L.Map.Sleep = Waymark_L.Handler.extend({
 73 | 
 74 |   addHooks: function () {
 75 |     var self = this;
 76 |     this.sleepNote = Waymark_L.DomUtil.create('p', 'sleep-note', this._map._container);
 77 |     this._enterTimeout = null;
 78 |     this._exitTimeout = null;
 79 | 
 80 |     /*
 81 |      * If the device has only a touchscreen we will never get
 82 |      * a mouseout event, so we add an extra button to put the map
 83 |      * back to sleep manually.
 84 |      *
 85 |      * a custom control/button can be provided by the user
 86 |      * with the map's `sleepButton` option
 87 |      */
 88 |     this._sleepButton = this._map.options.sleepButton();
 89 | 
 90 |     if (this._map.tap) {
 91 |       this._map.addControl(this._sleepButton);
 92 |     }
 93 | 
 94 |     var mapStyle = this._map._container.style;
 95 |     mapStyle.WebkitTransition += 'opacity .5s';
 96 |     mapStyle.MozTransition += 'opacity .5s';
 97 | 
 98 |     this._setSleepNoteStyle();
 99 |     this._sleepMap();
100 |   },
101 | 
102 |   removeHooks: function () {
103 |     if (!this._map.scrollWheelZoom.enabled()){
104 |       this._map.scrollWheelZoom.enable();
105 |     }
106 |     if (this._map.tap && !this._map.tap.enabled()) {
107 |       this._map.touchZoom.enable();
108 |       this._map.dragging.enable();
109 |       this._map.tap.enable();
110 |     }
111 |     Waymark_L.DomUtil.setOpacity( this._map._container, 1);
112 |     Waymark_L.DomUtil.setOpacity( this.sleepNote, 0);
113 |     this._removeSleepingListeners();
114 |     this._removeAwakeListeners();
115 |   },
116 | 
117 |   _setSleepNoteStyle: function() {
118 |     var noteString = '';
119 |     var style = this.sleepNote.style;
120 | 
121 |     if(this._map.tap) {
122 |       noteString = this._map.options.wakeMessageTouch;
123 |     } else if (this._map.options.wakeMessage) {
124 |       noteString = this._map.options.wakeMessage;
125 |     } else if (this._map.options.hoverToWake) {
126 |       noteString = 'click or hover to wake';
127 |     } else {
128 |       noteString = 'click to wake';
129 |     }
130 | 
131 |     if( this._map.options.sleepNote ){
132 |       this.sleepNote.appendChild(document.createTextNode( noteString ));
133 |       style.pointerEvents = 'none';
134 |       style.maxWidth = '150px';
135 |       style.transitionDuration = '.2s';
136 |       style.zIndex = 5000;
137 |       style.opacity = '.6';
138 |       style.margin = 'auto';
139 |       style.textAlign = 'center';
140 |       style.borderRadius = '4px';
141 |       style.top = '50%';
142 |       style.position = 'relative';
143 |       style.padding = '5px';
144 |       style.border = 'solid 2px black';
145 |       style.background = 'white';
146 | 
147 |       if(this._map.options.sleepNoteStyle) {
148 |         var noteStyleOverrides = this._map.options.sleepNoteStyle;
149 |         Object.keys(noteStyleOverrides).map(function(key) {
150 |           style[key] = noteStyleOverrides[key];
151 |         });
152 |       }
153 |     }
154 |   },
155 | 
156 |   _wakeMap: function (e) {
157 |     this._stopWaiting();
158 |     this._map.scrollWheelZoom.enable();
159 | 		
160 | 		//Joe enable dragging (disabled by default)
161 |     this._map.dragging.enable();
162 | 
163 |     if (this._map.tap) {
164 |       this._map.touchZoom.enable();
165 | //       this._map.dragging.enable();
166 |       this._map.tap.enable();
167 |       this._map.addControl(this._sleepButton);
168 |     }
169 |     Waymark_L.DomUtil.setOpacity( this._map._container, 1);
170 |     this.sleepNote.style.opacity = 0;
171 |     this._addAwakeListeners();
172 |   },
173 | 
174 |   _sleepMap: function () {
175 |     this._stopWaiting();
176 |     this._map.scrollWheelZoom.disable();
177 | 
178 |     if (this._map.tap) {
179 |       this._map.touchZoom.disable();
180 |       this._map.dragging.disable();
181 |       this._map.tap.disable();
182 |       this._map.removeControl(this._sleepButton);
183 |     }
184 | 
185 |     Waymark_L.DomUtil.setOpacity( this._map._container, this._map.options.sleepOpacity);
186 |     this.sleepNote.style.opacity = .4;
187 |     this._addSleepingListeners();
188 |   },
189 | 
190 |   _wakePending: function () {
191 |     this._map.once('mousedown', this._wakeMap, this);
192 |     if (this._map.options.hoverToWake){
193 |       var self = this;
194 |       this._map.once('mouseout', this._sleepMap, this);
195 |       self._enterTimeout = setTimeout(function(){
196 |           self._map.off('mouseout', self._sleepMap, self);
197 |           self._wakeMap();
198 |       } , self._map.options.wakeTime);
199 |     }
200 |   },
201 | 
202 |   _sleepPending: function () {
203 |     var self = this;
204 |     self._map.once('mouseover', self._wakeMap, self);
205 |     self._exitTimeout = setTimeout(function(){
206 |         self._map.off('mouseover', self._wakeMap, self);
207 |         self._sleepMap();
208 |     } , self._map.options.sleepTime);
209 |   },
210 | 
211 |   _addSleepingListeners: function(){
212 |     this._map.once('mouseover', this._wakePending, this);
213 |     this._map.tap &&
214 |       this._map.once('click', this._wakeMap, this);
215 |   },
216 | 
217 |   _addAwakeListeners: function(){
218 |     this._map.once('mouseout', this._sleepPending, this);
219 |   },
220 | 
221 |   _removeSleepingListeners: function(){
222 |     this._map.options.hoverToWake &&
223 |       this._map.off('mouseover', this._wakePending, this);
224 |     this._map.off('mousedown', this._wakeMap, this);
225 |     this._map.tap &&
226 |       this._map.off('click', this._wakeMap, this);
227 |   },
228 | 
229 |   _removeAwakeListeners: function(){
230 |     this._map.off('mouseout', this._sleepPending, this);
231 |   },
232 | 
233 |   _stopWaiting: function () {
234 |     this._removeSleepingListeners();
235 |     this._removeAwakeListeners();
236 |     var self = this;
237 |     if(this._enterTimeout) clearTimeout(self._enterTimeout);
238 |     if(this._exitTimeout) clearTimeout(self._exitTimeout);
239 |     this._enterTimeout = null;
240 |     this._exitTimeout = null;
241 |   }
242 | });
243 | 
244 | Waymark_L.Map.addInitHook('addHandler', 'sleep', Waymark_L.Map.Sleep);
245 | 


--------------------------------------------------------------------------------
/libs/js/leaflet.fullscreen.min.js:
--------------------------------------------------------------------------------
1 | (function(factory){var L;if(typeof define==="function"&&define.amd){define(["leaflet"],factory)}else if(typeof module!=="undefined"){L=require("leaflet");module.exports=factory(L)}else{if(typeof window.L==="undefined"){throw new Error("Leaflet must be loaded first")}factory(window.L)}})(function(L){Waymark_L.Control.Fullscreen=Waymark_L.Control.extend({options:{position:"topleft",title:{"false":"View Fullscreen","true":"Exit Fullscreen"}},onAdd:function(map){var container=Waymark_L.DomUtil.create("div","leaflet-control-fullscreen leaflet-bar leaflet-control");this.link=Waymark_L.DomUtil.create("a","leaflet-control-fullscreen-button leaflet-bar-part",container);this.link.href="#";this._map=map;this._map.on("fullscreenchange",this._toggleTitle,this);this._toggleTitle();Waymark_L.DomEvent.on(this.link,"click",this._click,this);return container},_click:function(e){Waymark_L.DomEvent.stopPropagation(e);Waymark_L.DomEvent.preventDefault(e);this._map.toggleFullscreen(this.options)},_toggleTitle:function(){this.link.title=this.options.title[this._map.isFullscreen()]}});Waymark_L.Map.include({isFullscreen:function(){return this._isFullscreen||false},toggleFullscreen:function(options){var container=this.getContainer();if(this.isFullscreen()){if(options&&options.pseudoFullscreen){this._disablePseudoFullscreen(container)}else if(document.exitFullscreen){document.exitFullscreen()}else if(document.mozCancelFullScreen){document.mozCancelFullScreen()}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}else if(document.msExitFullscreen){document.msExitFullscreen()}else{this._disablePseudoFullscreen(container)}}else{if(options&&options.pseudoFullscreen){this._enablePseudoFullscreen(container)}else if(container.requestFullscreen){container.requestFullscreen()}else if(container.mozRequestFullScreen){container.mozRequestFullScreen()}else if(container.webkitRequestFullscreen){container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}else if(container.msRequestFullscreen){container.msRequestFullscreen()}else{this._enablePseudoFullscreen(container)}}},_enablePseudoFullscreen:function(container){Waymark_L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(true);this.fire("fullscreenchange")},_disablePseudoFullscreen:function(container){Waymark_L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(false);this.fire("fullscreenchange")},_setFullscreen:function(fullscreen){this._isFullscreen=fullscreen;var container=this.getContainer();if(fullscreen){Waymark_L.DomUtil.addClass(container,"leaflet-fullscreen-on")}else{Waymark_L.DomUtil.removeClass(container,"leaflet-fullscreen-on")}this.invalidateSize()},_onFullscreenChange:function(e){var fullscreenElement=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;if(fullscreenElement===this.getContainer()&&!this._isFullscreen){this._setFullscreen(true);this.fire("fullscreenchange")}else if(fullscreenElement!==this.getContainer()&&this._isFullscreen){this._setFullscreen(false);this.fire("fullscreenchange")}}});Waymark_L.Map.mergeOptions({fullscreenControl:false});Waymark_L.Map.addInitHook(function(){if(this.options.fullscreenControl){this.fullscreenControl=new Waymark_L.Control.Fullscreen(this.options.fullscreenControl);this.addControl(this.fullscreenControl)}var fullscreenchange;if("onfullscreenchange"in document){fullscreenchange="fullscreenchange"}else if("onmozfullscreenchange"in document){fullscreenchange="mozfullscreenchange"}else if("onwebkitfullscreenchange"in document){fullscreenchange="webkitfullscreenchange"}else if("onmsfullscreenchange"in document){fullscreenchange="MSFullscreenChange"}if(fullscreenchange){var onFullscreenChange=Waymark_L.bind(this._onFullscreenChange,this);this.whenReady(function(){Waymark_L.DomEvent.on(document,fullscreenchange,onFullscreenChange)});this.on("unload",function(){Waymark_L.DomEvent.off(document,fullscreenchange,onFullscreenChange)})}});Waymark_L.control.fullscreen=function(options){return new Waymark_L.Control.Fullscreen(options)}});


--------------------------------------------------------------------------------
/libs/js/togeojson.min.js:
--------------------------------------------------------------------------------
1 | var toGeoJSON=(function(){var s=/\s*/g,g=/^\s*|\s*$/g,h=/\s+/;function o(t){if(!t||!t.length){return 0}for(var y=0,z=0;y<t.length;y++){z=((z<<5)-z)+t.charCodeAt(y)|0}return z}function u(t,z){return t.getElementsByTagName(z)}function m(t,z){return t.getAttribute(z)}function v(t,z){return parseFloat(m(t,z))}function k(t,A){var z=u(t,A);return z.length?z[0]:null}function e(t){if(t.normalize){t.normalize()}return t}function a(t){for(var y=0,z=[];y<t.length;y++){z[y]=parseFloat(t[y])}return z}function b(t){if(t){e(t)}return(t&&t.textContent)||""}function c(t,z){var A={},B,y;for(y=0;y<z.length;y++){B=k(t,z[y]);if(B){A[z[y]]=b(B)}}return A}function q(t,A){for(var z in A){t[z]=A[z]}}function d(t){return a(t.replace(s,"").split(","))}function n(t){var y=t.replace(g,"").split(h),z=[];for(var x=0;x<y.length;x++){z.push(d(y[x]))}return z}function w(t){var C=[v(t,"lon"),v(t,"lat")],z=k(t,"ele"),y=k(t,"gpxtpx:hr")||k(t,"hr"),B=k(t,"time"),A;if(z){A=parseFloat(b(z));if(!isNaN(A)){C.push(A)}}return{coordinates:C,time:B?b(B):null,heartRate:y?parseFloat(b(y)):null}}function j(){return{type:"FeatureCollection",features:[]}}var p;if(typeof XMLSerializer!=="undefined"){p=new XMLSerializer()}else{var r=(typeof process==="object"&&!process.browser);var l=(typeof Titanium==="object");if(typeof exports==="object"&&(r||l)){p=new (require("xmldom").XMLSerializer)()}else{throw new Error("Unable to initialize serializer")}}function f(t){if(t.xml!==undefined){return t.xml}return p.serializeToString(t)}var i={kml:function(P){var N=j(),A={},O={},G={},t=["Polygon","LineString","Point","Track","gx:Track"],E=u(P,"Placemark"),D=u(P,"Style"),M=u(P,"StyleMap");for(var K=0;K<D.length;K++){var x=o(f(D[K])).toString(16);A["#"+m(D[K],"id")]=x;O[x]=D[K]}for(var I=0;I<M.length;I++){A["#"+m(M[I],"id")]=o(f(M[I])).toString(16);var Q=u(M[I],"Pair");var J={};for(var H=0;H<Q.length;H++){J[b(k(Q[H],"key"))]=b(k(Q[H],"styleUrl"))}G["#"+m(M[I],"id")]=J}for(var L=0;L<E.length;L++){N.features=N.features.concat(z(E[L]))}function y(S){var R,T;S=S||"";if(S.substr(0,1)==="#"){S=S.substr(1)}if(S.length===6||S.length===3){R=S}if(S.length===8){T=parseInt(S.substr(0,2),16)/255;R="#"+S.substr(6,2)+S.substr(4,2)+S.substr(2,2)}return[R,isNaN(T)?undefined:T]}function F(R){return a(R.split(" "))}function C(S){var T=u(S,"coord","gx"),W=[],X=[];if(T.length===0){T=u(S,"gx:coord")}for(var V=0;V<T.length;V++){W.push(F(b(T[V])))}var R=u(S,"when");for(var U=0;U<R.length;U++){X.push(b(R[U]))}return{coords:W,times:X}}function B(X){var V,aa,W,U,T,ab=[],S=[];if(k(X,"MultiGeometry")){return B(k(X,"MultiGeometry"))}if(k(X,"MultiTrack")){return B(k(X,"MultiTrack"))}if(k(X,"gx:MultiTrack")){return B(k(X,"gx:MultiTrack"))}for(W=0;W<t.length;W++){aa=u(X,t[W]);if(aa){for(U=0;U<aa.length;U++){V=aa[U];if(t[W]==="Point"){ab.push({type:"Point",coordinates:d(b(k(V,"coordinates")))})}else{if(t[W]==="LineString"){ab.push({type:"LineString",coordinates:n(b(k(V,"coordinates")))})}else{if(t[W]==="Polygon"){var Z=u(V,"LinearRing"),Y=[];for(T=0;T<Z.length;T++){Y.push(n(b(k(Z[T],"coordinates"))))}ab.push({type:"Polygon",coordinates:Y})}else{if(t[W]==="Track"||t[W]==="gx:Track"){var R=C(V);ab.push({type:"LineString",coordinates:R.coords});if(R.times.length){S.push(R.times)}}}}}}}}return{geoms:ab,coordTimes:S}}function z(aj){var S=B(aj),ao,ac={},ax=b(k(aj,"name")),W=b(k(aj,"address")),R=b(k(aj,"styleUrl")),am=b(k(aj,"description")),ar=k(aj,"TimeSpan"),ad=k(aj,"TimeStamp"),ag=k(aj,"ExtendedData"),T=k(aj,"LineStyle"),Y=k(aj,"PolyStyle"),ap=k(aj,"visibility");if(!S.geoms.length){return[]}if(ax){ac.name=ax}if(W){ac.address=W}if(R){if(R[0]!=="#"){R="#"+R}ac.styleUrl=R;if(A[R]){ac.styleHash=A[R]}if(G[R]){ac.styleMapHash=G[R];ac.styleHash=A[G[R].normal]}var aq=O[ac.styleHash];if(aq){if(!T){T=k(aq,"LineStyle")}if(!Y){Y=k(aq,"PolyStyle")}var ab=k(aq,"IconStyle");if(ab){var au=k(ab,"Icon");if(au){var an=b(k(au,"href"));if(an){ac.icon=an}}}}}if(am){ac.description=am}if(ar){var aw=b(k(ar,"begin"));var V=b(k(ar,"end"));ac.timespan={begin:aw,end:V}}if(ad){ac.timestamp=b(k(ad,"when"))}if(T){var af=y(b(k(T,"color"))),ak=af[0],U=af[1],ai=parseFloat(b(k(T,"width")));if(ak){ac.stroke=ak}if(!isNaN(U)){ac["stroke-opacity"]=U}if(!isNaN(ai)){ac["stroke-width"]=ai}}if(Y){var X=y(b(k(Y,"color"))),ae=X[0],ah=X[1],al=b(k(Y,"fill")),Z=b(k(Y,"outline"));if(ae){ac.fill=ae}if(!isNaN(ah)){ac["fill-opacity"]=ah}if(al){ac["fill-opacity"]=al==="1"?ac["fill-opacity"]||1:0}if(Z){ac["stroke-opacity"]=Z==="1"?ac["stroke-opacity"]||1:0}}if(ag){var av=u(ag,"Data"),at=u(ag,"SimpleData");for(ao=0;ao<av.length;ao++){ac[av[ao].getAttribute("name")]=b(k(av[ao],"value"))}for(ao=0;ao<at.length;ao++){ac[at[ao].getAttribute("name")]=b(at[ao])}}if(ap){ac.visibility=b(ap)}if(S.coordTimes.length){ac.coordTimes=(S.coordTimes.length===1)?S.coordTimes[0]:S.coordTimes}var aa={type:"Feature",geometry:(S.geoms.length===1)?S.geoms[0]:{type:"GeometryCollection",geometries:S.geoms},properties:ac};if(m(aj,"id")){aa.id=m(aj,"id")}return[aa]}return N},gpx:function(H){var B,D=u(H,"trk"),I=u(H,"rte"),E=u(H,"wpt"),C=j(),J;for(B=0;B<D.length;B++){J=G(D[B]);if(J){C.features.push(J)}}for(B=0;B<I.length;B++){J=z(I[B]);if(J){C.features.push(J)}}for(B=0;B<E.length;B++){C.features.push(y(E[B]))}function F(K,L){for(var M=0;M<L;M++){K.push(null)}return K}function A(M,L){var R=u(M,L),S=[],K=[],Q=[],N=R.length;if(N<2){return{}}for(var O=0;O<N;O++){var P=w(R[O]);S.push(P.coordinates);if(P.time){K.push(P.time)}if(P.heartRate||Q.length){if(!Q.length){F(Q,O)}Q.push(P.heartRate||null)}}return{line:S,times:K,heartRates:Q}}function G(M){var O=u(M,"trkseg"),L=[],K=[],Q=[],S;for(var N=0;N<O.length;N++){S=A(O[N],"trkpt");if(S){if(S.line){L.push(S.line)}if(S.times&&S.times.length){K.push(S.times)}if(Q.length||(S.heartRates&&S.heartRates.length)){if(!Q.length){for(var R=0;R<N;R++){Q.push(F([],L[R].length))}}if(S.heartRates&&S.heartRates.length){Q.push(S.heartRates)}else{Q.push(F([],S.line.length||0))}}}}if(L.length===0){return}var P=x(M);q(P,t(k(M,"extensions")));if(K.length){P.coordTimes=L.length===1?K[0]:K}if(Q.length){P.heartRates=L.length===1?Q[0]:Q}return{type:"Feature",properties:P,geometry:{type:L.length===1?"LineString":"MultiLineString",coordinates:L.length===1?L[0]:L}}}function z(M){var K=A(M,"rtept");if(!K.line){return}var N=x(M);q(N,t(k(M,"extensions")));var L={type:"Feature",properties:N,geometry:{type:"LineString",coordinates:K.line}};return L}function y(K){var L=x(K);q(L,c(K,["sym"]));return{type:"Feature",properties:L,geometry:{type:"Point",coordinates:w(K).coordinates}}}function t(P){var O={};if(P){var K=k(P,"line");if(K){var L=b(k(K,"color")),M=parseFloat(b(k(K,"opacity"))),N=parseFloat(b(k(K,"width")));if(L){O.stroke=L}if(!isNaN(M)){O["stroke-opacity"]=M}if(!isNaN(N)){O["stroke-width"]=N*96/25.4}}}return O}function x(N){var O=c(N,["name","cmt","desc","type","time","keywords"]),K=u(N,"link");if(K.length){O.links=[]}for(var L=0,M;L<K.length;L++){M={href:m(K[L],"href")};q(M,c(K[L],["text","type"]));O.links.push(M)}return O}return C}};return i})();if(typeof module!=="undefined"){module.exports=toGeoJSON};


--------------------------------------------------------------------------------
/libs/js/tokml.js:
--------------------------------------------------------------------------------
  1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.tokml = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
  2 | var esc = require('xml-escape');
  3 | var strxml = require('strxml'),
  4 |     tag = strxml.tag;
  5 | 
  6 | module.exports = function tokml(geojson, options) {
  7 | 
  8 |     options = options || {
  9 |         documentName: undefined,
 10 |         documentDescription: undefined,
 11 |         name: 'name',
 12 |         description: 'description',
 13 |         simplestyle: false,
 14 |         timestamp: 'timestamp'
 15 |     };
 16 | 
 17 |     return '<?xml version="1.0" encoding="UTF-8"?>' +
 18 |         tag('kml', {'xmlns': 'http://www.opengis.net/kml/2.2'},
 19 |             tag('Document',
 20 |                 documentName(options) +
 21 |                 documentDescription(options) +
 22 |                 root(geojson, options)
 23 |                ));
 24 | };
 25 | 
 26 | function feature(options, styleHashesArray) {
 27 |     return function(_) {
 28 |         if (!_.properties || !geometry.valid(_.geometry)) return '';
 29 |         var geometryString = geometry.any(_.geometry);
 30 |         if (!geometryString) return '';
 31 |         
 32 |         var styleDefinition = '',
 33 |             styleReference = '';
 34 |         if (options.simplestyle) {
 35 |             var styleHash = hashStyle(_.properties);
 36 |             if (styleHash) {
 37 |                 if (geometry.isPoint(_.geometry) && hasMarkerStyle(_.properties)) {
 38 |                     if (styleHashesArray.indexOf(styleHash) === -1) {
 39 |                         styleDefinition = markerStyle(_.properties, styleHash);
 40 |                         styleHashesArray.push(styleHash);
 41 |                     }
 42 |                     styleReference = tag('styleUrl', '#' + styleHash);
 43 |                 } else if ((geometry.isPolygon(_.geometry) || geometry.isLine(_.geometry)) && 
 44 |                     hasPolygonAndLineStyle(_.properties)) {
 45 |                     if (styleHashesArray.indexOf(styleHash) === -1) {
 46 |                         styleDefinition = polygonAndLineStyle(_.properties, styleHash);
 47 |                         styleHashesArray.push(styleHash);
 48 |                     }
 49 |                     styleReference = tag('styleUrl', '#' + styleHash);
 50 |                 }
 51 |                 // Note that style of GeometryCollection / MultiGeometry is not supported
 52 |             }
 53 |         }
 54 |   
 55 |         var attributes = {}
 56 |         if (_.id) attributes.id = _.id
 57 |         return styleDefinition + tag('Placemark',
 58 |             attributes,
 59 |             name(_.properties, options) +
 60 |             description(_.properties, options) +
 61 |             extendeddata(_.properties) +
 62 |             timestamp(_.properties, options) +
 63 |             geometryString +
 64 |             styleReference);
 65 |     };
 66 | }
 67 | 
 68 | function root(_, options) {
 69 |     if (!_.type) return '';
 70 |     var styleHashesArray = [];
 71 |             
 72 |     switch (_.type) {
 73 |         case 'FeatureCollection':
 74 |             if (!_.features) return '';
 75 |             return _.features.map(feature(options, styleHashesArray)).join('');
 76 |         case 'Feature':
 77 |             return feature(options, styleHashesArray)(_);
 78 |         default:
 79 |             return feature(options, styleHashesArray)({
 80 |                 type: 'Feature',
 81 |                 geometry: _,
 82 |                 properties: {}
 83 |             });
 84 |     }
 85 | }
 86 | 
 87 | function documentName(options) {
 88 |     return (options.documentName !== undefined) ? tag('name', options.documentName) : '';
 89 | }
 90 | 
 91 | function documentDescription(options) {
 92 |     return (options.documentDescription !== undefined) ? tag('description', options.documentDescription) : '';
 93 | }
 94 | 
 95 | function name(_, options) {
 96 |     return _[options.name] ? tag('name', esc(_[options.name])) : '';
 97 | }
 98 | 
 99 | function description(_, options) {
100 |     return _[options.description] ? tag('description', esc(_[options.description])) : '';
101 | }
102 | 
103 | function timestamp(_, options) {
104 |     return _[options.timestamp] ? tag('TimeStamp', tag('when', esc(_[options.timestamp]))) : '';
105 | }
106 | 
107 | // ## Geometry Types
108 | //
109 | // https://developers.google.com/kml/documentation/kmlreference#geometry
110 | var geometry = {
111 |     Point: function(_) {
112 |         return tag('Point', tag('coordinates', _.coordinates.join(',')));
113 |     },
114 |     LineString: function(_) {
115 |         return tag('LineString', tag('coordinates', linearring(_.coordinates)));
116 |     },
117 |     Polygon: function(_) {
118 |         if (!_.coordinates.length) return '';
119 |         var outer = _.coordinates[0],
120 |             inner = _.coordinates.slice(1),
121 |             outerRing = tag('outerBoundaryIs', 
122 |                 tag('LinearRing', tag('coordinates', linearring(outer)))),
123 |             innerRings = inner.map(function(i) {
124 |                 return tag('innerBoundaryIs', 
125 |                     tag('LinearRing', tag('coordinates', linearring(i))));
126 |             }).join('');
127 |         return tag('Polygon', outerRing + innerRings);
128 |     },
129 |     MultiPoint: function(_) {
130 |         if (!_.coordinates.length) return '';
131 |         return tag('MultiGeometry', _.coordinates.map(function(c) {
132 |             return geometry.Point({ coordinates: c });
133 |         }).join(''));
134 |     },
135 |     MultiPolygon: function(_) {
136 |         if (!_.coordinates.length) return '';
137 |         return tag('MultiGeometry', _.coordinates.map(function(c) {
138 |             return geometry.Polygon({ coordinates: c });
139 |         }).join(''));
140 |     },
141 |     MultiLineString: function(_) {
142 |         if (!_.coordinates.length) return '';
143 |         return tag('MultiGeometry', _.coordinates.map(function(c) {
144 |             return geometry.LineString({ coordinates: c });
145 |         }).join(''));
146 |     },
147 |     GeometryCollection: function(_) {
148 |         return tag('MultiGeometry',
149 |             _.geometries.map(geometry.any).join(''));
150 |     },
151 |     valid: function(_) {
152 |         return _ && _.type && (_.coordinates ||
153 |             _.type === 'GeometryCollection' && _.geometries && _.geometries.every(geometry.valid));
154 |     },
155 |     any: function(_) {
156 |         if (geometry[_.type]) {
157 |             return geometry[_.type](_);
158 |         } else {
159 |             return '';
160 |         }
161 |     },
162 |     isPoint: function(_) {
163 |         return _.type === 'Point' ||
164 |         _.type === 'MultiPoint';
165 |     },
166 |     isPolygon: function(_) {
167 |         return _.type === 'Polygon' ||
168 |         _.type === 'MultiPolygon';
169 |     },
170 |     isLine: function(_) {
171 |         return _.type === 'LineString' ||
172 |         _.type === 'MultiLineString';
173 |     }
174 | };
175 | 
176 | function linearring(_) {
177 |     return _.map(function(cds) { return cds.join(','); }).join(' ');
178 | }
179 | 
180 | // ## Data
181 | function extendeddata(_) {
182 |     return tag('ExtendedData', {}, pairs(_).map(data).join(''));
183 | }
184 | 
185 | function data(_) {
186 |     return tag('Data', {'name': _[0]}, tag('value', {}, esc(_[1] ? _[1].toString() : '')));
187 | }
188 | 
189 | // ## Marker style
190 | function hasMarkerStyle(_) {
191 |     return !!(_['marker-size'] || _['marker-symbol'] || _['marker-color']);
192 | }
193 | 
194 | function markerStyle(_, styleHash) {
195 |     return tag('Style', {'id': styleHash},
196 |             tag('IconStyle',
197 |                 tag('Icon',
198 |                     tag('href', iconUrl(_)))
199 |                 ) + iconSize(_)
200 |             );
201 | }
202 | 
203 | function iconUrl(_) {
204 |     var size = _['marker-size'] || 'medium',
205 |         symbol = _['marker-symbol'] ? '-' + _['marker-symbol'] : '',
206 |         color = (_['marker-color'] || '7e7e7e').replace('#', '');
207 | 
208 |     return 'https://api.tiles.mapbox.com/v3/marker/' + 'pin-' + size.charAt(0) +
209 |         symbol + '+' + color + '.png';
210 | }
211 | 
212 | function iconSize(_) {
213 |     return tag('hotSpot', {
214 |         'xunits': 'fraction',
215 |         'yunits': 'fraction',
216 |         'x': '0.5',
217 |         'y': '0.5'
218 |     }, '');
219 | }
220 | 
221 | // ## Polygon and Line style
222 | function hasPolygonAndLineStyle(_) {
223 |     for (var key in _) {
224 |         if ({
225 |             "stroke": true,
226 |             "stroke-opacity": true,
227 |             "stroke-width": true,
228 |             "fill": true,
229 |             "fill-opacity": true
230 |         }[key]) return true;
231 |     }
232 | }
233 | 
234 | function polygonAndLineStyle(_, styleHash) {
235 |     var lineStyle = tag('LineStyle', tag('color', hexToKmlColor(_['stroke'], _['stroke-opacity']) || 'ff555555') +
236 |         tag('width', {}, _['stroke-width'] === undefined ? 2 : _['stroke-width'])
237 |     );
238 |     
239 |     var polyStyle = '';
240 |     
241 |     if (_['fill'] || _['fill-opacity']) {
242 |         polyStyle = tag('PolyStyle', 
243 |             tag('color', {}, hexToKmlColor(_['fill'], _['fill-opacity']) || '88555555')
244 |         );
245 |     }
246 |     
247 |     return tag('Style', {'id': styleHash}, lineStyle + polyStyle);
248 | }
249 | 
250 | // ## Style helpers
251 | function hashStyle(_) {
252 |     var hash = '';
253 |     
254 |     if (_['marker-symbol']) hash = hash + 'ms' + _['marker-symbol'];
255 |     if (_['marker-color']) hash = hash + 'mc' + _['marker-color'].replace('#', '');
256 |     if (_['marker-size']) hash = hash + 'ms' + _['marker-size'];
257 |     if (_['stroke']) hash = hash + 's' + _['stroke'].replace('#', '');
258 |     if (_['stroke-width']) hash = hash + 'sw' + _['stroke-width'].toString().replace('.', '');
259 |     if (_['stroke-opacity']) hash = hash + 'mo' + _['stroke-opacity'].toString().replace('.', '');
260 |     if (_['fill']) hash = hash + 'f' + _['fill'].replace('#', '');
261 |     if (_['fill-opacity']) hash = hash + 'fo' + _['fill-opacity'].toString().replace('.', '');
262 |     
263 |     return hash;
264 | }
265 | 
266 | function hexToKmlColor(hexColor, opacity) {
267 |     if (typeof hexColor !== 'string') return '';
268 |     
269 |     hexColor = hexColor.replace('#', '').toLowerCase();
270 |     
271 |     if (hexColor.length === 3) {
272 |         hexColor = hexColor[0] + hexColor[0] + 
273 |         hexColor[1] + hexColor[1] + 
274 |         hexColor[2] + hexColor[2];
275 |     } else if (hexColor.length !== 6) {
276 |         return '';
277 |     }
278 |     
279 |     var r = hexColor[0] + hexColor[1];
280 |     var g = hexColor[2] + hexColor[3];
281 |     var b = hexColor[4] + hexColor[5];
282 |     
283 |     var o = 'ff';
284 |     if (typeof opacity === 'number' && opacity >= 0.0 && opacity <= 1.0) {
285 |         o = (opacity * 255).toString(16);
286 |         if (o.indexOf('.') > -1) o = o.substr(0, o.indexOf('.'));
287 |         if (o.length < 2) o = '0' + o;
288 |     }
289 |     
290 |     return o + b + g + r;
291 | }
292 | 
293 | // ## General helpers
294 | function pairs(_) {
295 |     var o = [];
296 |     for (var i in _){
297 |         if(_[i]){
298 |             o.push([i, _[i]]);
299 |         }else{
300 |             o.push([i, '']);
301 |         }
302 |     }
303 |     return o;
304 | }
305 | },{"strxml":2,"xml-escape":3}],2:[function(require,module,exports){
306 | var esc = require('xml-escape');
307 | 
308 | module.exports.attr = attr;
309 | module.exports.tagClose = tagClose;
310 | module.exports.tag = tag;
311 | 
312 | /**
313 |  * @param {array} _ an array of attributes
314 |  * @returns {string}
315 |  */
316 | function attr(attributes) {
317 |     if (!Object.keys(attributes).length) return '';
318 |     return ' ' + Object.keys(attributes).map(function(key) {
319 |         return key + '="' + esc(attributes[key]) + '"';
320 |     }).join(' ');
321 | }
322 | 
323 | /**
324 |  * @param {string} el element name
325 |  * @param {array} attributes array of pairs
326 |  * @returns {string}
327 |  */
328 | function tagClose(el, attributes) {
329 |     return '<' + el + attr(attributes) + '/>';
330 | }
331 | 
332 | /**
333 |  * @param {string} el element name
334 |  * @param {string} contents innerXML
335 |  * @param {array} attributes array of pairs
336 |  * @returns {string}
337 |  */
338 | function tag(el, attributes, contents) {
339 |     if (Array.isArray(attributes) || typeof attributes === 'string') {
340 |         contents = attributes;
341 |         attributes = {};
342 |     }
343 |     if (Array.isArray(contents)) contents = '\n' + contents.map(function(content) {
344 |         return '  ' + content;
345 |     }).join('\n') + '\n';
346 |     return '<' + el + attr(attributes) + '>' + contents + '</' + el + '>';
347 | }
348 | 
349 | },{"xml-escape":3}],3:[function(require,module,exports){
350 | 
351 | 
352 | var escape = module.exports = function escape(string, ignore) {
353 |   var pattern;
354 | 
355 |   if (string === null || string === undefined) return;
356 | 	
357 | 	//Might be Int... cast
358 | 	string = string.toString();
359 | 
360 |   ignore = (ignore || '').replace(/[^&"<>\']/g, '');
361 |   pattern = '([&"<>\'])'.replace(new RegExp('[' + ignore + ']', 'g'), '');
362 | 
363 |   return string.replace(new RegExp(pattern, 'g'), function(str, item) {
364 |             return escape.map[item];
365 |           })
366 | }
367 | 
368 | var map = escape.map = {
369 |     '>': '&gt;'
370 |   , '<': '&lt;'
371 |   , "'": '&apos;'
372 |   , '"': '&quot;'
373 |   , '&': '&amp;'
374 | }
375 | },{}]},{},[1])(1)
376 | });
377 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Waymark JS",
 3 |   "version": "1.1.6",
 4 |   "description": "An Interactive Geographical Information Editor for the Web.",
 5 |   "author": "Joe Hawes",
 6 |   "homepage": "https://www.waymark.dev/js/",
 7 |   "license": "GPL-2",
 8 |   "main": "Gruntfile.js",
 9 |   "devDependencies": {
10 |     "grunt": "^1.5.3",
11 |     "grunt-contrib-concat": "^1.0.1",
12 |     "grunt-contrib-copy": "^1.0.0",
13 |     "grunt-contrib-cssmin": "^3.0.0",
14 |     "grunt-contrib-less": "^2.1.0",
15 |     "grunt-contrib-uglify": "^4.0.1",
16 |     "grunt-contrib-watch": "^1.1.0",
17 |     "grunt-css-url-replace": "^0.2.7",
18 |     "grunt-terser": "^1.0.0",
19 |     "prettier": "^3.1.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Waymark JS
  2 | 
  3 | Create, share and edit _meaningful_ Maps.
  4 | 
  5 | Waymark JS is a JavaScript library for sharing geographical information. It is designed to be easy to use, intuitive and suitable for a wide range of applications.
  6 | 
  7 | Originally developed for the [Waymark WordPress plugin](https://wordpress.org/plugins/waymark/), Waymark JS is a standalone library that can be used to add interactive Maps to _any website_.
  8 | 
  9 | Powered by [Leaflet JS](https://leafletjs.com/) with [OpenStreetMap](https://www.openstreetmap.org/) as the default Basemap. Waymark JS stores data in GeoJSON format, with support for GPX and KML files.
 10 | 
 11 | > Waymark JS is completely free, [Open-Source](https://github.com/OpenGIS/Waymark-JS) and requires **no API keys**! ❤️
 12 | 
 13 | ## Documentation / Demo
 14 | 
 15 | Demo and and documentation [waymark.dev/js](https://www.waymark.dev/js)
 16 | 
 17 | ## Installation
 18 | 
 19 | To use Waymark JS, you will need to include the following assets in your page. Here we are adding them to the `<head>` of the document so they are immediately available to the `<body>`:
 20 | 
 21 | > [!IMPORTANT]
 22 | > The `dist/` [directory](https://github.com/OpenGIS/Waymark-JS/tree/master/dist) in the project root contains the assets ready for _production_ use. The `src/` directory contains the source files for development which can be modified and built using the instructions in the [Development](#development) section below.
 23 | 
 24 | ```html
 25 | <!-- jQuery (required) -->
 26 | <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 27 | 
 28 | <!-- Waymark CSS & JavaScript -->
 29 | <link rel="stylesheet" href="dist/css/waymark-js.min.css" />
 30 | <script src="dist/js/waymark-js.min.js"></script>
 31 | ```
 32 | 
 33 | > [!TIP]
 34 | > Waymark JS requires the `jQuery` global to be available before creating a Map. If you are not already using [jQuery](https://jquery.com/), you can include it from a CDN as shown above.
 35 | 
 36 | ## Quick Start
 37 | 
 38 | ### Viewer
 39 | 
 40 | The following example will display a Map on the page with a single Marker. Once the Marker is clicked, a popup will display with the Marker's title, image and description.
 41 | 
 42 | ```html
 43 | <!doctype html>
 44 | <html>
 45 |   <head>
 46 |     <meta charset="utf-8" />
 47 | 
 48 |     <!-- Stylesheet -->
 49 |     <link rel="stylesheet" href="dist/css/waymark-js.css" />
 50 | 
 51 |     <!-- JS -->
 52 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 53 |     <script src="dist/js/waymark-js.js"></script>
 54 |   </head>
 55 |   <body>
 56 |     <!-- Map Container -->
 57 |     <div id="waymark-map"></div>
 58 | 
 59 |     <script>
 60 |       // Create a Viewer Instance
 61 |       const viewer = window.Waymark_Map_Factory.viewer();
 62 | 
 63 |       viewer.init();
 64 |       viewer.load_json({
 65 |         type: "FeatureCollection",
 66 |         features: [
 67 |           {
 68 |             type: "Feature",
 69 |             properties: {
 70 |               title: "The Scarlet Ibis",
 71 |               description:
 72 |                 "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
 73 |               image_large_url: "https://www.waymark.dev/assets/geo/pub.jpeg",
 74 |             },
 75 |             geometry: {
 76 |               type: "Point",
 77 |               coordinates: [-128.0094, 50.6539],
 78 |             },
 79 |           },
 80 |         ],
 81 |       });
 82 |     </script>
 83 |   </body>
 84 | </html>
 85 | ```
 86 | 
 87 | ### Editor
 88 | 
 89 | The following example will display an empty Map Editor on the page, set to an initial location. Any edits made to the Map are converted to GeoJSON and output into the `<textarea id="waymark-data">` data container.
 90 | 
 91 | ```html
 92 | <!doctype html>
 93 | <html>
 94 |   <head>
 95 |     <meta charset="utf-8" />
 96 | 
 97 |     <!-- Stylesheet -->
 98 |     <link rel="stylesheet" href="dist/css/waymark-js.min.css" />
 99 | 
100 |     <!-- JS -->
101 |     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
102 |     <script src="dist/js/waymark-js.min.js"></script>
103 |   </head>
104 |   <body>
105 |     <!-- Map Container -->
106 |     <div id="waymark-map"></div>
107 | 
108 |     <!-- Map Data -->
109 |     <textarea id="waymark-data"></textarea>
110 | 
111 |     <script>
112 |       // Create the Editor
113 |       window.Waymark_Map_Factory.editor().init({
114 |         map_options: {
115 |           // Initial location
116 |           map_init_latlng: [50.6539, -128.0094],
117 |           map_init_zoom: 14,
118 |         },
119 |       });
120 |     </script>
121 |   </body>
122 | </html>
123 | ```
124 | 
125 | > [!TIP]
126 | > View the full documentation and examples at [waymark.dev/js](https://www.waymark.dev/js)
127 | 
128 | ## Development
129 | 
130 | > [!IMPORTANT]
131 | > To build Waymark JS from source, you will need [Node and NPM installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
132 | 
133 | ```bash
134 | # Install dependencies (or pnpm install)
135 | npm install
136 | 
137 | # Build
138 | grunt
139 | ```
140 | 
141 | This will run a watch task to rebuild the assets when changes are made to the source files.
142 | 
143 | Documentation and examples at [waymark.dev/js](https://www.waymark.dev/js)
144 | 


--------------------------------------------------------------------------------
/src/css/Waymark_Map.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	==================================
  3 | 	============= GLOBAL =============
  4 | 	==================================
  5 | */
  6 | .waymark-invisible {
  7 |   visibility: hidden;
  8 | }
  9 | .waymark-hidden {
 10 |   display: none !important;
 11 | }
 12 | .waymark-icon {
 13 |   background-image: url("../img/waymark-icon-primary.png");
 14 |   background-size: 20px 20px;
 15 |   background-position: left center;
 16 |   background-repeat: no-repeat;
 17 | }
 18 | .waymark-icon.waymark-icon-dark {
 19 |   background-image: url("../../img/waymark-icon-dark.png");
 20 | }
 21 | .waymark-icon.waymark-icon-blue {
 22 |   background-image: url("../../img/waymark-icon-blue.png");
 23 | }
 24 | .waymark-icon.waymark-icon-light {
 25 |   background-image: url("../../img/waymark-icon-light.png");
 26 | }
 27 | .waymark-icon.waymark-icon-white {
 28 |   background-image: url("../../img/waymark-icon-white.png");
 29 | }
 30 | .waymark-swatch.waymark-swatch-white {
 31 |   background-color: #fbfbfb;
 32 | }
 33 | .waymark-swatch.waymark-swatch-black {
 34 |   background-color: #303030;
 35 | }
 36 | .waymark-swatch.waymark-swatch-red {
 37 |   background-color: #d63e2a;
 38 | }
 39 | .waymark-swatch.waymark-swatch-darkred {
 40 |   background-color: #a23336;
 41 | }
 42 | .waymark-swatch.waymark-swatch-orange {
 43 |   background-color: #f69730;
 44 | }
 45 | .waymark-swatch.waymark-swatch-green {
 46 |   background-color: #72b026;
 47 | }
 48 | .waymark-swatch.waymark-swatch-darkgreen {
 49 |   background-color: #728224;
 50 | }
 51 | .waymark-swatch.waymark-swatch-blue {
 52 |   background-color: #38aadd;
 53 | }
 54 | .waymark-swatch.waymark-swatch-purple {
 55 |   background-color: #d252b9;
 56 | }
 57 | .waymark-swatch.waymark-swatch-darkpurple {
 58 |   background-color: #5b396b;
 59 | }
 60 | .waymark-swatch.waymark-swatch-cadetblue {
 61 |   background-color: #436978;
 62 | }
 63 | /*
 64 | 	==================================
 65 | 	============== MAP ===============
 66 | 	==================================
 67 | */
 68 | .waymark-map-container {
 69 |   min-height: 400px;
 70 |   /* Gallery */
 71 |   /* Controls */
 72 | }
 73 | .waymark-map-container .waymark-gallery-container {
 74 |   display: none;
 75 | }
 76 | .waymark-map-container.waymark-has-gallery .leaflet-bottom {
 77 |   bottom: 80px;
 78 | }
 79 | .waymark-map-container.waymark-has-gallery .waymark-gallery-container {
 80 |   display: block;
 81 | }
 82 | .waymark-map-container .leaflet-control {
 83 |   /* Layers */
 84 |   /* Attribution Links*/
 85 | }
 86 | .waymark-map-container .leaflet-control.leaflet-control-layers .leaflet-control-layers-list {
 87 |   min-width: 160px;
 88 |   max-height: 300px;
 89 |   overflow-y: auto;
 90 |   overflow-x: hidden;
 91 | }
 92 | .waymark-map-container .leaflet-control.leaflet-control-layers .leaflet-control-layers-list label {
 93 |   display: block;
 94 |   padding: 3px;
 95 |   font-size: 13px;
 96 |   border-bottom: 1px solid #ddd;
 97 | }
 98 | .waymark-map-container .leaflet-control.leaflet-control-layers .leaflet-control-layers-list label .waymark-type-text {
 99 |   margin-left: 10px;
100 | }
101 | .waymark-map-container .leaflet-control.leaflet-control-attribution a {
102 |   font-size: 11px;
103 |   border-bottom: none;
104 | }
105 | .waymark-map-container .leaflet-control.leaflet-control-zoom a {
106 |   text-decoration: none;
107 | }
108 | .waymark-map-container .leaflet-control.leaflet-control-locate {
109 |   text-align: center;
110 |   background-color: #fff;
111 |   cursor: pointer;
112 | }
113 | .waymark-map-container .leaflet-control.leaflet-control-locate.active.following a {
114 |   color: #b42714 !important;
115 | }
116 | .waymark-map-container .leaflet-control.leaflet-control-locate span {
117 |   margin-top: 6px;
118 |   font-size: 18px;
119 | }
120 | .waymark-map-container .leaflet-control.leaflet-control-geocoder ul.leaflet-control-geocoder-alternatives li a br {
121 |   display: none;
122 | }
123 | .waymark-map-container .waymark-type-text {
124 |   padding: 3px 5px;
125 |   border-radius: 3px;
126 | }
127 | .waymark-map-container .waymark-type-text.waymark-marker-type.waymark-swatch-white {
128 |   box-shadow: inset 0 0 0 1px #ddd;
129 | }
130 | .waymark-map-container .waymark-type-text.waymark-line-type,
131 | .waymark-map-container .waymark-type-text.waymark-shape-type {
132 |   color: #fff;
133 |   text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
134 |   box-shadow: inset 0 0 0 1px #ddd;
135 | }
136 | /*
137 | 	==================================
138 | 	============= MARKERS ============
139 | 	==================================
140 | */
141 | .waymark-marker {
142 |   display: table !important;
143 |   margin: 0 auto;
144 |   text-align: center;
145 |   /* ============= MARKER TYPES ============= */
146 |   /* ============= ICON TYPES ============= */
147 | }
148 | .waymark-marker .waymark-marker-background {
149 |   width: inherit;
150 |   height: inherit;
151 |   max-width: inherit;
152 |   max-height: inherit;
153 |   position: absolute;
154 |   filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
155 | }
156 | .waymark-marker.waymark-marker-circle .waymark-marker-background {
157 |   border-radius: 50%;
158 | }
159 | .waymark-marker.waymark-marker-marker .waymark-marker-background {
160 |   transform: rotate(-45deg);
161 |   border-radius: 50% 50% 50% 0;
162 | }
163 | .waymark-marker.waymark-marker-small .waymark-icon-icon::before {
164 |   font-size: 10px;
165 | }
166 | .waymark-marker.waymark-marker-small .waymark-icon-text {
167 |   font-size: 8px;
168 | }
169 | .waymark-marker.waymark-marker-medium .waymark-icon-icon::before {
170 |   font-size: 13px;
171 | }
172 | .waymark-marker.waymark-marker-medium .waymark-icon-text {
173 |   font-size: 11px;
174 | }
175 | .waymark-marker.waymark-marker-large .waymark-icon-icon::before {
176 |   font-size: 20px;
177 | }
178 | .waymark-marker.waymark-marker-large .waymark-icon-text {
179 |   font-size: 14px;
180 | }
181 | .waymark-marker .waymark-marker-icon {
182 |   width: inherit;
183 |   height: inherit;
184 |   max-width: inherit;
185 |   max-height: inherit;
186 |   position: relative;
187 |   display: table-cell !important;
188 |   vertical-align: middle;
189 |   padding: 0;
190 |   text-align: center;
191 | }
192 | .waymark-marker .waymark-marker-icon::before {
193 |   display: unset;
194 |   width: inherit;
195 |   height: inherit;
196 |   max-width: inherit;
197 |   max-height: inherit;
198 |   vertical-align: middle;
199 |   margin-left: 1px;
200 |   line-height: 0;
201 | }
202 | .waymark-marker .waymark-marker-icon.waymark-icon-icon {
203 |   line-height: 0;
204 | }
205 | .waymark-marker .waymark-marker-icon.waymark-icon-text {
206 |   font-weight: bold;
207 |   font-family: monaco,
208 | 				Consolas,
209 | 				Lucida Console,
210 | 				monospace;
211 | }
212 | /*
213 | 	==================================
214 | 	============ GALLERY =============
215 | 	==================================
216 | */
217 | .waymark-gallery-container {
218 |   position: absolute;
219 |   bottom: 0;
220 |   left: 0;
221 |   height: 60px;
222 |   max-height: 60px;
223 |   padding: 10px;
224 |   z-index: 1000;
225 |   background: rgba(255, 255, 255, 0.7);
226 |   overflow-y: scroll;
227 |   width: 100%;
228 |   box-sizing: content-box;
229 | }
230 | .waymark-gallery-container .waymark-control-label,
231 | .waymark-gallery-container .waymark-controls {
232 |   display: none;
233 | }
234 | .waymark-gallery-container .waymark-image {
235 |   float: left;
236 |   width: 60px;
237 |   max-width: 60px;
238 |   height: 60px;
239 |   max-height: 60px;
240 |   overflow: hidden;
241 |   margin: 0 7px 7px 0;
242 |   cursor: pointer;
243 | }
244 | .waymark-gallery-container .waymark-image img {
245 |   width: inherit;
246 |   height: inherit;
247 | }
248 | 


--------------------------------------------------------------------------------
/src/css/Waymark_Map_Editor.css:
--------------------------------------------------------------------------------
  1 | @-webkit-keyframes spin {
  2 |   0% {
  3 |     -webkit-transform: rotate(0deg);
  4 |   }
  5 |   100% {
  6 |     -webkit-transform: rotate(360deg);
  7 |   }
  8 | }
  9 | @keyframes spin {
 10 |   0% {
 11 |     transform: rotate(0deg);
 12 |   }
 13 |   100% {
 14 |     transform: rotate(360deg);
 15 |   }
 16 | }
 17 | /*
 18 | 	==================================
 19 | 	============= EDITOR =============
 20 | 	==================================
 21 | */
 22 | .waymark-map-container #waymark-loading {
 23 |   display: none;
 24 | }
 25 | .waymark-map-container.waymark-is-editor .leaflet-popup-content {
 26 |   margin: 10px !important;
 27 | }
 28 | .waymark-map-container.waymark-is-editor a.leaflet-popup-close-button {
 29 |   display: none;
 30 | }
 31 | .waymark-map-container.waymark-is-editor.waymark-loading {
 32 |   opacity: 0.6 !important;
 33 |   cursor: wait;
 34 | }
 35 | .waymark-map-container.waymark-is-editor.waymark-loading * {
 36 |   cursor: wait;
 37 | }
 38 | .waymark-map-container.waymark-is-editor.waymark-loading #waymark-loading {
 39 |   display: block;
 40 | }
 41 | .waymark-map-container.waymark-is-editor #waymark-loading {
 42 |   position: relative;
 43 |   width: 100%;
 44 |   height: 100%;
 45 |   z-index: 400;
 46 | }
 47 | .waymark-map-container.waymark-is-editor #waymark-loading .waymark-spinner {
 48 |   position: absolute;
 49 |   top: 50%;
 50 |   margin: -50px auto 0 auto;
 51 |   position: relative;
 52 |   border: 8px solid transparent;
 53 |   border-radius: 50%;
 54 |   border-top: 8px solid #b42714;
 55 |   border-bottom: 8px solid #b42714;
 56 |   width: 100px;
 57 |   height: 100px;
 58 |   -webkit-animation: spin 2s linear infinite;
 59 |   animation: spin 2s linear infinite;
 60 | }
 61 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar * {
 62 |   box-sizing: unset;
 63 | }
 64 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button {
 65 |   padding: 5px;
 66 |   color: #b42714;
 67 | }
 68 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-line.waymark-icon {
 69 |   background-size: 20px 20px;
 70 |   background-image: url("../images/waymark-icon-red.png");
 71 | }
 72 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-marker i {
 73 |   margin-top: 3px;
 74 |   font-size: 24px;
 75 | }
 76 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-polygon i {
 77 |   font-size: 19px;
 78 |   transform: skew(-36deg, 20deg);
 79 |   margin-top: 5px;
 80 | }
 81 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-rectangle i {
 82 |   margin-top: 6px;
 83 |   font-size: 18px;
 84 | }
 85 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-circle i {
 86 |   margin-top: 5px;
 87 |   font-size: 20px;
 88 | }
 89 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-image i {
 90 |   margin-top: 6px;
 91 |   font-size: 18px;
 92 | }
 93 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-upload {
 94 |   position: relative;
 95 | }
 96 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-upload i.ion-document {
 97 |   margin-top: 4px;
 98 |   font-size: 22px;
 99 | }
100 | .waymark-map-container.waymark-is-editor div.waymark-edit-toolbar a.waymark-edit-button.waymark-edit-upload i.ion-arrow-up-c {
101 |   position: absolute;
102 |   top: 40%;
103 |   left: 40%;
104 | }
105 | .waymark-map-container.waymark-is-editor ul.waymark-info {
106 |   height: 315px;
107 |   width: 225px;
108 |   position: relative;
109 |   list-style-type: none;
110 |   padding-left: 70px;
111 |   z-index: 1;
112 | }
113 | .waymark-map-container.waymark-is-editor ul.waymark-info li {
114 |   margin-bottom: 5px;
115 | }
116 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-description,
117 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-title,
118 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-type {
119 |   width: 100%;
120 |   max-width: inherit;
121 |   border-radius: 4px;
122 | }
123 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-description input,
124 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-title input,
125 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-type input,
126 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-description textarea,
127 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-title textarea,
128 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-type textarea,
129 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-description select,
130 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-title select,
131 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-type select {
132 |   width: 215px !important;
133 |   max-width: inherit !important;
134 | }
135 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-title input {
136 |   padding: 2px 5px !important;
137 |   font-size: 18px;
138 |   border-radius: 4px;
139 | }
140 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-description {
141 |   max-height: 170px;
142 |   margin-bottom: 8px;
143 |   overflow: hidden;
144 |   border: 1px solid #d2d2d2;
145 | }
146 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-description textarea {
147 |   padding: 5px;
148 |   height: 140px;
149 |   border: none;
150 | }
151 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-type.waymark-marker-type,
152 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-type.waymark-line-type,
153 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-type.waymark-shape-type {
154 |   display: none;
155 | }
156 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-marker-info-latlng {
157 |   text-align: right;
158 | }
159 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url {
160 |   min-height: 63px;
161 |   position: relative;
162 | }
163 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url a {
164 |   position: absolute;
165 |   top: 0;
166 |   left: 0;
167 |   width: 60px;
168 |   height: 60px;
169 |   border: 1px solid #d2d2d2;
170 |   background-color: #f9f9f9;
171 |   border-radius: 4px;
172 |   overflow: hidden;
173 | }
174 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url a.waymark-hover {
175 |   left: -2px;
176 |   width: 240px;
177 |   height: 240px;
178 |   z-index: 1000;
179 | }
180 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url a.waymark-hover img {
181 |   width: inherit;
182 |   height: inherit;
183 | }
184 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url a img {
185 |   width: inherit;
186 |   height: inherit;
187 |   border: none;
188 | }
189 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url input,
190 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url .button {
191 |   display: inline-block;
192 |   margin-left: 65px;
193 | }
194 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-image_large_url input {
195 |   border-radius: 4px;
196 |   padding: 5px;
197 |   margin-bottom: 6px;
198 |   max-width: 150px;
199 | }
200 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button {
201 |   margin: 0;
202 |   position: absolute;
203 |   bottom: 0;
204 |   left: 70px;
205 | }
206 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button.waymark-info-duplicate {
207 |   left: 101px;
208 | }
209 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button.waymark-info-edit {
210 |   left: 130px;
211 | }
212 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button button {
213 |   padding: 0 8px;
214 |   max-height: 30px;
215 | }
216 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button button i {
217 |   margin-top: 5px;
218 |   line-height: initial;
219 | }
220 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button button i.ion-android-done,
221 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button button i.ion-edit,
222 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button button i.ion-ios-copy,
223 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-button button i.ion-trash-a {
224 |   font-size: 16px;
225 | }
226 | .waymark-map-container.waymark-is-editor ul.waymark-info li select,
227 | .waymark-map-container.waymark-is-editor ul.waymark-info li textarea,
228 | .waymark-map-container.waymark-is-editor ul.waymark-info li input {
229 |   border: 1px solid #d2d2d2;
230 | }
231 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-direction {
232 |   position: absolute;
233 |   bottom: 0;
234 |   right: 0;
235 | }
236 | .waymark-map-container.waymark-is-editor ul.waymark-info li.waymark-info-direction select {
237 |   width: 120px;
238 | }
239 | .waymark-map-container.waymark-is-editor ul.waymark-info .waymark-overlay-preview {
240 |   position: absolute;
241 |   top: 0;
242 |   left: -5px;
243 |   margin-bottom: 10px;
244 |   width: 70px;
245 |   max-height: 100%;
246 |   overflow-y: scroll;
247 |   overflow-x: hidden;
248 |   background: #fff;
249 |   border: 1px solid #d2d2d2;
250 |   border-radius: 4px;
251 |   z-index: 1100;
252 | }
253 | .waymark-map-container.waymark-is-editor ul.waymark-info .waymark-overlay-preview .waymark-overlay-wrap {
254 |   padding: 10px;
255 |   border-bottom: 1px solid #d2d2d2;
256 |   cursor: pointer;
257 | }
258 | .waymark-map-container.waymark-is-editor ul.waymark-info .waymark-overlay-preview .waymark-overlay-wrap:hover,
259 | .waymark-map-container.waymark-is-editor ul.waymark-info .waymark-overlay-preview .waymark-overlay-wrap.waymark-active {
260 |   background: #f1f1f1;
261 | }
262 | .waymark-map-container.waymark-is-editor ul.waymark-info .waymark-overlay-preview .waymark-overlay-wrap .waymark-type-title {
263 |   margin-top: -10px;
264 |   margin-bottom: 3px;
265 |   text-align: center;
266 |   font-size: 10px;
267 |   word-break: break-all;
268 | }
269 | .waymark-map-container.waymark-is-editor ul.waymark-info .waymark-overlay-preview .waymark-overlay-wrap .waymark-type-title {
270 |   margin-top: -10px;
271 |   margin-bottom: 3px;
272 |   text-align: center;
273 |   font-size: 10px;
274 |   word-break: break-all;
275 | }
276 | .waymark-map-container.waymark-is-editor ul.waymark-info .waymark-overlay-preview .waymark-overlay-wrap.waymark-marker-wrap .waymark-marker {
277 |   position: relative;
278 |   cursor: pointer;
279 | }
280 | .waymark-map-container.waymark-is-editor.waymark-disable-draw .waymark-edit-line,
281 | .waymark-map-container.waymark-is-editor.waymark-disable-draw .waymark-edit-rectangle,
282 | .waymark-map-container.waymark-is-editor.waymark-disable-draw .waymark-edit-polygon,
283 | .waymark-map-container.waymark-is-editor.waymark-disable-draw .waymark-edit-circle,
284 | .waymark-map-container.waymark-is-editor.waymark-disable-draw .waymark-edit-marker {
285 |   display: none !important;
286 | }
287 | .waymark-map-container.waymark-is-editor.waymark-disable-photo .waymark-edit-image,
288 | .waymark-map-container.waymark-is-editor.waymark-disable-photo button#add_photo {
289 |   display: none !important;
290 | }
291 | .waymark-map-container.waymark-is-editor.waymark-disable-file .waymark-edit-upload {
292 |   display: none !important;
293 | }
294 | .waymark-map-container.waymark-submission .leaflet-popup-content {
295 |   width: 300px !important;
296 | }
297 | .waymark-map-container.waymark-submission .leaflet-popup-content ul.waymark-info {
298 |   margin: 0 !important;
299 |   padding-left: 70px;
300 | }
301 | .waymark-map-container.waymark-submission .leaflet-popup-content ul.waymark-info .waymark-info-title input {
302 |   padding: 5px;
303 |   width: 220px !important;
304 |   border-radius: 4px;
305 | }
306 | .waymark-map-container.waymark-submission .leaflet-popup-content ul.waymark-info .waymark-info-image_large_url {
307 |   height: 60px;
308 | }
309 | .waymark-map-container.waymark-submission .leaflet-popup-content ul.waymark-info .waymark-info-image_large_url input {
310 |   padding: 5px;
311 |   width: 155px !important;
312 |   border-radius: 4px;
313 | }
314 | .waymark-map-container.waymark-submission .leaflet-popup-content ul.waymark-info .waymark-info-image_large_url .button {
315 |   min-width: 85px;
316 |   padding: 3px 5px;
317 |   font-size: 11px;
318 | }
319 | .waymark-map-container.waymark-submission .leaflet-popup-content ul.waymark-info .waymark-info-description {
320 |   width: 230px;
321 | }
322 | 


--------------------------------------------------------------------------------
/src/css/Waymark_Map_Viewer.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	==================================
  3 | 	============ VIEWER ==============
  4 | 	==================================
  5 | */
  6 | .waymark-map-container.waymark-is-viewer {
  7 |   /* Info Window */
  8 | }
  9 | .waymark-map-container.waymark-is-viewer ul.waymark-info {
 10 |   padding: 0;
 11 |   margin: 0;
 12 |   position: relative;
 13 |   width: 260px;
 14 |   list-style-type: none;
 15 |   /* No Title */
 16 |   /* No Image*/
 17 | }
 18 | .waymark-map-container.waymark-is-viewer ul.waymark-info.waymark-no-title .waymark-info-title {
 19 |   display: none;
 20 | }
 21 | .waymark-map-container.waymark-is-viewer ul.waymark-info.waymark-no-image {
 22 |   width: 200px;
 23 |   min-height: 60px;
 24 | }
 25 | .waymark-map-container.waymark-is-viewer ul.waymark-info.waymark-no-image .waymark-info-title,
 26 | .waymark-map-container.waymark-is-viewer ul.waymark-info.waymark-no-image .waymark-info-description {
 27 |   position: relative;
 28 | }
 29 | .waymark-map-container.waymark-is-viewer ul.waymark-info.waymark-no-image .waymark-info-description {
 30 |   height: auto;
 31 |   float: none;
 32 |   width: 100%;
 33 | }
 34 | .waymark-map-container.waymark-is-viewer ul.waymark-info li {
 35 |   width: 100%;
 36 |   padding: 0;
 37 |   margin: 0;
 38 |   margin-bottom: 7px;
 39 |   list-style: none;
 40 | }
 41 | .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-type {
 42 |   margin-top: -8px;
 43 | }
 44 | .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-type small {
 45 |   border-radius: 3px;
 46 |   padding: 2px 5px;
 47 |   line-height: 0;
 48 |   color: #666;
 49 | }
 50 | .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-title {
 51 |   font-size: 14px;
 52 | }
 53 | .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-description {
 54 |   max-height: 72px;
 55 |   overflow: auto;
 56 | }
 57 | .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-description p {
 58 |   margin: 0;
 59 | }
 60 | .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-image_large_url {
 61 |   margin-right: 10px;
 62 |   width: 260px;
 63 |   height: 200px;
 64 | }
 65 | .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-image_large_url a {
 66 |   display: block;
 67 |   width: inherit;
 68 |   height: inherit;
 69 |   margin: 0;
 70 |   padding: 0;
 71 |   border-bottom: none;
 72 |   background-size: 260px;
 73 |   background-repeat: no-repeat;
 74 |   background-position: left center;
 75 | }
 76 | .waymark-map-container.waymark-is-viewer.waymark-has-cluster .waymark-cluster .waymark-marker {
 77 |   position: absolute;
 78 | }
 79 | .waymark-map-container.waymark-is-viewer.waymark-has-cluster .waymark-cluster .waymark-marker .waymark-cluster-count {
 80 |   position: absolute;
 81 |   top: -3px;
 82 |   right: -3px;
 83 |   padding: 1px 3px;
 84 |   font-size: 8px;
 85 |   color: black;
 86 |   border: 1px solid #333;
 87 |   border-radius: 3px;
 88 |   background: rgba(255, 255, 255, 0.7);
 89 | }
 90 | /*
 91 | 	==================================
 92 | 	=========== ELEVATION ============
 93 | 	==================================
 94 | */
 95 | .waymark-map-container .circle-lower {
 96 |   fill: white;
 97 | }
 98 | .waymark-map-container .elevation-polyline {
 99 |   stroke: #b42714;
100 |   stroke-opacity: 0.7;
101 | }
102 | .waymark-map-container .waymark-elevation-container {
103 |   position: absolute;
104 |   bottom: 10px;
105 |   left: 10px;
106 |   z-index: 2000;
107 |   width: 50%;
108 |   max-height: 33.33%;
109 | }
110 | .waymark-map-container .waymark-elevation-container .elevation-control {
111 |   background: rgba(255, 255, 255, 0.47);
112 | }
113 | .waymark-map-container .waymark-elevation-container .elevation-control .background {
114 |   background: none;
115 | }
116 | .waymark-map-container.waymark-has-gallery .waymark-elevation-container {
117 |   bottom: 90px;
118 | }
119 | .waymark-elevation-container .elevation-control.elevation * {
120 |   max-width: 100%;
121 | }
122 | .waymark-elevation-container .elevation-control.elevation .elevation-summary {
123 |   margin: 0;
124 |   text-align: center;
125 |   padding: 0 10px;
126 | }
127 | .waymark-elevation-container .elevation-control.elevation .legend-altitude {
128 |   display: none;
129 | }
130 | .waymark-elevation-container .elevation-control.elevation .area {
131 |   fill: #b42714;
132 |   stroke: hsla(0, 0%, 0%, 0.85);
133 |   stroke-width: 2.8;
134 | }
135 | .waymark-elevation-container .waymark-elevation-close {
136 |   position: absolute;
137 |   top: 5px;
138 |   right: 14px;
139 |   padding: 5px 10px;
140 |   font-weight: bold;
141 |   font-size: 14px;
142 |   background: #f1f1f1;
143 |   cursor: pointer;
144 |   color: #333;
145 | }
146 | 


--------------------------------------------------------------------------------
/src/js/Waymark_Map_Factory.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 	==================================
 3 | 	============= FACTORY ============
 4 | 	==================================
 5 | */
 6 | 
 7 | function Waymark_Map_Factory() {
 8 | 	this.instances = [];
 9 | 
10 | 	this.viewer = function () {
11 | 		var instance = Object.assign(new Waymark_Map(), new Waymark_Map_Viewer());
12 | 
13 | 		this.instances.push(instance);
14 | 
15 | 		return instance;
16 | 	};
17 | 
18 | 	this.editor = function () {
19 | 		var instance = Object.assign(new Waymark_Map(), new Waymark_Map_Editor());
20 | 
21 | 		this.instances.push(instance);
22 | 
23 | 		return instance;
24 | 	};
25 | }
26 | 
27 | window.Waymark_Map_Factory = new Waymark_Map_Factory();
28 | 


--------------------------------------------------------------------------------
/src/less/Waymark_Map.less:
--------------------------------------------------------------------------------
  1 | @waymark-primary: rgba(180, 39, 20, 1); //#b42714
  2 | @waymark-grey: rgba(241, 241, 241, 1); //#f1f1f1
  3 | 
  4 | /*
  5 | 	==================================
  6 | 	============= GLOBAL =============
  7 | 	==================================
  8 | */
  9 | .waymark-invisible {
 10 | 	visibility: hidden;
 11 | }
 12 | .waymark-hidden {
 13 | 	display: none !important;
 14 | }
 15 | 
 16 | .waymark-icon {
 17 | 	background-image: url("../img/waymark-icon-primary.png");
 18 | 	background-size: 20px 20px;
 19 | 	background-position: left center;
 20 | 	background-repeat: no-repeat;
 21 | 	&.waymark-icon-dark {
 22 | 		background-image: url("../../img/waymark-icon-dark.png");
 23 | 	}
 24 | 	&.waymark-icon-blue {
 25 | 		background-image: url("../../img/waymark-icon-blue.png");
 26 | 	}
 27 | 	&.waymark-icon-light {
 28 | 		background-image: url("../../img/waymark-icon-light.png");
 29 | 	}
 30 | 	&.waymark-icon-white {
 31 | 		background-image: url("../../img/waymark-icon-white.png");
 32 | 	}
 33 | }
 34 | 
 35 | .waymark-swatch {
 36 | 	&.waymark-swatch-white {
 37 | 		background-color: #fbfbfb;
 38 | 	}
 39 | 	&.waymark-swatch-black {
 40 | 		background-color: #303030;
 41 | 	}
 42 | 	&.waymark-swatch-red {
 43 | 		background-color: #d63e2a;
 44 | 	}
 45 | 	&.waymark-swatch-darkred {
 46 | 		background-color: #a23336;
 47 | 	}
 48 | 	&.waymark-swatch-orange {
 49 | 		background-color: #f69730;
 50 | 	}
 51 | 	&.waymark-swatch-green {
 52 | 		background-color: #72b026;
 53 | 	}
 54 | 	&.waymark-swatch-darkgreen {
 55 | 		background-color: #728224;
 56 | 	}
 57 | 	&.waymark-swatch-blue {
 58 | 		background-color: #38aadd;
 59 | 	}
 60 | 	&.waymark-swatch-purple {
 61 | 		background-color: #d252b9;
 62 | 	}
 63 | 	&.waymark-swatch-darkpurple {
 64 | 		background-color: #5b396b;
 65 | 	}
 66 | 	&.waymark-swatch-cadetblue {
 67 | 		background-color: #436978;
 68 | 	}
 69 | }
 70 | 
 71 | /*
 72 | 	==================================
 73 | 	============== MAP ===============
 74 | 	==================================
 75 | */
 76 | .waymark-map-container {
 77 | 	min-height: 400px;
 78 | 
 79 | 	//Sleep
 80 | 	.sleep-note {
 81 | 		// 		opacity: 0.8 !important;
 82 | 		// 		display: none;
 83 | 	}
 84 | 	/* Gallery */
 85 | 	.waymark-gallery-container {
 86 | 		display: none;
 87 | 	}
 88 | 	&.waymark-has-gallery {
 89 | 		.leaflet-bottom {
 90 | 			bottom: 80px;
 91 | 		}
 92 | 		.waymark-gallery-container {
 93 | 			display: block;
 94 | 		}
 95 | 	}
 96 | 
 97 | 	/* Controls */
 98 | 	.leaflet-control {
 99 | 		/* Layers */
100 | 		&.leaflet-control-layers {
101 | 			.leaflet-control-layers-list {
102 | 				min-width: 160px;
103 | 				max-height: 300px;
104 | 				overflow-y: auto;
105 | 				overflow-x: hidden;
106 | 				label {
107 | 					display: block;
108 | 					padding: 3px;
109 | 					font-size: 13px;
110 | 
111 | 					border-bottom: 1px solid #ddd;
112 | 
113 | 					.waymark-type-text {
114 | 						margin-left: 10px;
115 | 					}
116 | 				}
117 | 			}
118 | 		}
119 | 		/* Attribution Links*/
120 | 		&.leaflet-control-attribution a {
121 | 			font-size: 11px;
122 | 			border-bottom: none;
123 | 		}
124 | 		&.leaflet-control-zoom a {
125 | 			text-decoration: none;
126 | 		}
127 | 		&.leaflet-control-locate {
128 | 			text-align: center;
129 | 			background-color: #fff;
130 | 			cursor: pointer;
131 | 			&.active.following {
132 | 				a {
133 | 					color: @waymark-primary !important;
134 | 				}
135 | 			}
136 | 			span {
137 | 				margin-top: 6px;
138 | 				font-size: 18px;
139 | 			}
140 | 		}
141 | 		&.leaflet-control-geocoder {
142 | 			ul.leaflet-control-geocoder-alternatives {
143 | 				li {
144 | 					a {
145 | 						br {
146 | 							display: none;
147 | 						}
148 | 					}
149 | 				}
150 | 			}
151 | 		}
152 | 	}
153 | 
154 | 	//Types as text
155 | 	.waymark-type-text {
156 | 		padding: 3px 5px;
157 | 		border-radius: 3px;
158 | 		&.waymark-marker-type {
159 | 			&.waymark-swatch-white {
160 | 				box-shadow: inset 0 0 0 1px #ddd;
161 | 			}
162 | 		}
163 | 		&.waymark-line-type,
164 | 		&.waymark-shape-type {
165 | 			color: #fff;
166 | 			text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
167 | 			box-shadow: inset 0 0 0 1px #ddd;
168 | 		}
169 | 	}
170 | }
171 | 
172 | /*
173 | 	==================================
174 | 	============= MARKERS ============
175 | 	==================================
176 | */
177 | .waymark-marker {
178 | 	display: table !important;
179 | 	margin: 0 auto;
180 | 	// 		overflow: hidden;
181 | 	text-align: center;
182 | 
183 | 	.waymark-marker-background {
184 | 		width: inherit;
185 | 		height: inherit;
186 | 		max-width: inherit;
187 | 		max-height: inherit;
188 | 		position: absolute;
189 | 		// 			z-index: 0;
190 | 		// 			border: 1px solid rgba(0, 0, 0, 0.3);
191 | 		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
192 | 	}
193 | 
194 | 	/* ============= MARKER TYPES ============= */
195 | 
196 | 	//Circle
197 | 	&.waymark-marker-circle {
198 | 		.waymark-marker-background {
199 | 			border-radius: 50%;
200 | 		}
201 | 	}
202 | 
203 | 	//Marker
204 | 	&.waymark-marker-marker {
205 | 		.waymark-marker-background {
206 | 			transform: rotate(-45deg);
207 | 			border-radius: 50% 50% 50% 0;
208 | 		}
209 | 	}
210 | 
211 | 	//Small
212 | 	&.waymark-marker-small {
213 | 		//Icon
214 | 		.waymark-icon-icon {
215 | 			&::before {
216 | 				font-size: 10px;
217 | 			}
218 | 		}
219 | 		//Text
220 | 		.waymark-icon-text {
221 | 			font-size: 8px;
222 | 		}
223 | 	}
224 | 
225 | 	//Medium
226 | 	&.waymark-marker-medium {
227 | 		//Icon
228 | 		.waymark-icon-icon {
229 | 			&::before {
230 | 				font-size: 13px;
231 | 			}
232 | 		}
233 | 		//Text
234 | 		.waymark-icon-text {
235 | 			font-size: 11px;
236 | 		}
237 | 	}
238 | 
239 | 	//Large
240 | 	&.waymark-marker-large {
241 | 		//Icon
242 | 		.waymark-icon-icon {
243 | 			&::before {
244 | 				font-size: 20px;
245 | 			}
246 | 		}
247 | 		//Text
248 | 		.waymark-icon-text {
249 | 			font-size: 14px;
250 | 		}
251 | 	}
252 | 
253 | 	/* ============= ICON TYPES ============= */
254 | 
255 | 	//Text & Icon
256 | 	.waymark-marker-icon {
257 | 		width: inherit;
258 | 		height: inherit;
259 | 		max-width: inherit;
260 | 		max-height: inherit;
261 | 		position: relative;
262 | 		display: table-cell !important;
263 | 		vertical-align: middle;
264 | 		padding: 0;
265 | 		text-align: center;
266 | 		&::before {
267 | 			display: unset;
268 | 			width: inherit;
269 | 			height: inherit;
270 | 			max-width: inherit;
271 | 			max-height: inherit;
272 | 			vertical-align: middle;
273 | 			margin-left: 1px;
274 | 			line-height: 0;
275 | 		}
276 | 
277 | 		//Icon Only
278 | 		&.waymark-icon-icon {
279 | 			line-height: 0;
280 | 		}
281 | 
282 | 		//Text Only
283 | 		&.waymark-icon-text {
284 | 			font-weight: bold;
285 | 			font-family:
286 | 				monaco,
287 | 				Consolas,
288 | 				Lucida Console,
289 | 				monospace;
290 | 		}
291 | 	}
292 | }
293 | 
294 | /*
295 | 	==================================
296 | 	============ GALLERY =============
297 | 	==================================
298 | */
299 | .waymark-gallery-container {
300 | 	position: absolute;
301 | 	bottom: 0;
302 | 	left: 0;
303 | 	height: 60px;
304 | 	max-height: 60px;
305 | 	padding: 10px;
306 | 	z-index: +1000;
307 | 	background: rgba(255, 255, 255, 0.7);
308 | 	overflow-y: scroll;
309 | 	width: 100%;
310 | 	box-sizing: content-box;
311 | 	.waymark-control-label,
312 | 	.waymark-controls {
313 | 		display: none;
314 | 	}
315 | 	.waymark-image {
316 | 		float: left;
317 | 		width: 60px;
318 | 		max-width: 60px;
319 | 		height: 60px;
320 | 		max-height: 60px;
321 | 		overflow: hidden;
322 | 		margin: 0 7px 7px 0;
323 | 		cursor: pointer;
324 | 	}
325 | 	.waymark-image img {
326 | 		width: inherit;
327 | 		height: inherit;
328 | 	}
329 | }
330 | 


--------------------------------------------------------------------------------
/src/less/Waymark_Map_Editor.less:
--------------------------------------------------------------------------------
  1 | @import (reference) "Waymark_Map.less";
  2 | 
  3 | @-webkit-keyframes spin {
  4 | 	0% {
  5 | 		-webkit-transform: rotate(0deg);
  6 | 	}
  7 | 	100% {
  8 | 		-webkit-transform: rotate(360deg);
  9 | 	}
 10 | }
 11 | 
 12 | @keyframes spin {
 13 | 	0% {
 14 | 		transform: rotate(0deg);
 15 | 	}
 16 | 	100% {
 17 | 		transform: rotate(360deg);
 18 | 	}
 19 | }
 20 | 
 21 | /*
 22 | 	==================================
 23 | 	============= EDITOR =============
 24 | 	==================================
 25 | */
 26 | .waymark-map-container {
 27 | 	#waymark-loading {
 28 | 		display: none;
 29 | 	}
 30 | 
 31 | 	&.waymark-is-editor {
 32 | 		//Leaflet UI
 33 | 		.leaflet-popup-content {
 34 | 			margin: 10px !important;
 35 | 		}
 36 | 
 37 | 		a.leaflet-popup-close-button {
 38 | 			display: none;
 39 | 		}
 40 | 
 41 | 		&.waymark-loading {
 42 | 			opacity: 0.6 !important;
 43 | 			cursor: wait;
 44 | 			* {
 45 | 				cursor: wait;
 46 | 			}
 47 | 			#waymark-loading {
 48 | 				display: block;
 49 | 			}
 50 | 		}
 51 | 
 52 | 		//Loading
 53 | 		//Thanks! https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader2
 54 | 		//And https://css-tricks.com/centering-css-complete-guide/
 55 | 		#waymark-loading {
 56 | 			position: relative;
 57 | 			width: 100%;
 58 | 			height: 100%;
 59 | 			z-index: 400;
 60 | 			.waymark-spinner {
 61 | 				position: absolute;
 62 | 				top: 50%;
 63 | 				height: 100px;
 64 | 				margin: -50px auto 0 auto;
 65 | 				position: relative;
 66 | 				border: 8px solid transparent;
 67 | 				border-radius: 50%;
 68 | 				border-top: 8px solid @waymark-primary;
 69 | 				border-bottom: 8px solid @waymark-primary;
 70 | 				width: 100px;
 71 | 				height: 100px;
 72 | 				-webkit-animation: spin 2s linear infinite;
 73 | 				animation: spin 2s linear infinite;
 74 | 			}
 75 | 		}
 76 | 
 77 | 		//Toolbar
 78 | 		div.waymark-edit-toolbar {
 79 | 			* {
 80 | 				box-sizing: unset;
 81 | 			}
 82 | 			a.waymark-edit-button {
 83 | 				padding: 5px;
 84 | 				color: @waymark-primary;
 85 | 				&.waymark-edit-line {
 86 | 					&.waymark-icon {
 87 | 						background-size: 20px 20px;
 88 | 						background-image: url("../images/waymark-icon-red.png");
 89 | 					}
 90 | 				}
 91 | 				&.waymark-edit-marker {
 92 | 					i {
 93 | 						margin-top: 3px;
 94 | 						font-size: 24px;
 95 | 					}
 96 | 				}
 97 | 				&.waymark-edit-polygon {
 98 | 					i {
 99 | 						font-size: 19px;
100 | 						transform: skew(-36deg, 20deg);
101 | 						margin-top: 5px;
102 | 					}
103 | 				}
104 | 				&.waymark-edit-rectangle {
105 | 					i {
106 | 						margin-top: 6px;
107 | 						font-size: 18px;
108 | 					}
109 | 				}
110 | 				&.waymark-edit-circle {
111 | 					i {
112 | 						margin-top: 5px;
113 | 						font-size: 20px;
114 | 					}
115 | 				}
116 | 				&.waymark-edit-image {
117 | 					i {
118 | 						margin-top: 6px;
119 | 						font-size: 18px;
120 | 					}
121 | 				}
122 | 				&.waymark-edit-upload {
123 | 					position: relative;
124 | 					i {
125 | 						&.ion-document {
126 | 							margin-top: 4px;
127 | 							font-size: 22px;
128 | 						}
129 | 						&.ion-arrow-up-c {
130 | 							position: absolute;
131 | 							top: 40%;
132 | 							left: 40%;
133 | 						}
134 | 					}
135 | 				}
136 | 			}
137 | 		}
138 | 
139 | 		//Popups
140 | 		ul.waymark-info {
141 | 			height: 315px;
142 | 			width: 225px;
143 | 
144 | 			position: relative;
145 | 			list-style-type: none;
146 | 			padding-left: 70px;
147 | 			z-index: 1;
148 | 
149 | 			// background: red;
150 | 
151 | 			li {
152 | 				margin-bottom: 5px;
153 | 
154 | 				&.waymark-info-description,
155 | 				&.waymark-info-title,
156 | 				&.waymark-info-type {
157 | 					width: 100%;
158 | 					max-width: inherit;
159 | 					border-radius: 4px;
160 | 					input,
161 | 					textarea,
162 | 					select {
163 | 						width: 215px !important;
164 | 						max-width: inherit !important;
165 | 					}
166 | 				}
167 | 				&.waymark-info-title {
168 | 					input {
169 | 						padding: 2px 5px !important;
170 | 						font-size: 18px;
171 | 						border-radius: 4px;
172 | 					}
173 | 				}
174 | 				&.waymark-info-description {
175 | 					max-height: 170px;
176 | 					margin-bottom: 8px;
177 | 					overflow: hidden;
178 | 					textarea {
179 | 						padding: 5px;
180 | 						height: 140px;
181 | 						border: none;
182 | 					}
183 | 					border: 1px solid #d2d2d2;
184 | 				}
185 | 
186 | 				//Type Select
187 | 				&.waymark-info-type {
188 | 					&.waymark-marker-type,
189 | 					&.waymark-line-type,
190 | 					&.waymark-shape-type {
191 | 						display: none;
192 | 					}
193 | 					select {
194 | 					}
195 | 				}
196 | 
197 | 				&.waymark-marker-info-latlng {
198 | 					text-align: right;
199 | 				}
200 | 				&.waymark-info-image_large_url {
201 | 					min-height: 63px;
202 | 
203 | 					position: relative;
204 | 					a {
205 | 						position: absolute;
206 | 						top: 0;
207 | 						left: 0;
208 | 						width: 60px;
209 | 						height: 60px;
210 | 						border: 1px solid #d2d2d2;
211 | 						background-color: #f9f9f9;
212 | 						border-radius: 4px;
213 | 						overflow: hidden;
214 | 						&.waymark-hover {
215 | 							left: -2px;
216 | 							width: 240px;
217 | 							height: 240px;
218 | 							z-index: +1000;
219 | 							img {
220 | 								width: inherit;
221 | 								height: inherit;
222 | 							}
223 | 						}
224 | 						img {
225 | 							width: inherit;
226 | 							height: inherit;
227 | 							border: none;
228 | 						}
229 | 					}
230 | 					input,
231 | 					.button {
232 | 						display: inline-block;
233 | 						margin-left: 65px;
234 | 					}
235 | 					input {
236 | 						border-radius: 4px;
237 | 						padding: 5px;
238 | 						margin-bottom: 6px;
239 | 						max-width: 150px;
240 | 					}
241 | 				}
242 | 				&.waymark-info-button {
243 | 					margin: 0;
244 | 					position: absolute;
245 | 					bottom: 0;
246 | 					left: 70px;
247 | 					&.waymark-info-duplicate {
248 | 						left: 101px;
249 | 					}
250 | 					&.waymark-info-edit {
251 | 						left: 130px;
252 | 					}
253 | 
254 | 					button {
255 | 						padding: 0 8px;
256 | 						max-height: 30px;
257 | 						i {
258 | 							margin-top: 5px;
259 | 							line-height: initial;
260 | 							&.ion-android-done,
261 | 							&.ion-edit,
262 | 							&.ion-ios-copy,
263 | 							&.ion-trash-a {
264 | 								font-size: 16px;
265 | 							}
266 | 						}
267 | 					}
268 | 				}
269 | 				select,
270 | 				textarea,
271 | 				input {
272 | 					// 					width: 100%;
273 | 					// 					max-width: 180px;
274 | 					border: 1px solid #d2d2d2;
275 | 				}
276 | 
277 | 				&.waymark-info-direction {
278 | 					position: absolute;
279 | 					bottom: 0;
280 | 					right: 0;
281 | 
282 | 					select {
283 | 						width: 120px;
284 | 					}
285 | 				}
286 | 			}
287 | 
288 | 			//Preview
289 | 			.waymark-overlay-preview {
290 | 				position: absolute;
291 | 				top: 0;
292 | 				left: -5px;
293 | 				margin-bottom: 10px;
294 | 				width: 70px;
295 | 				max-height: 100%;
296 | 				overflow-y: scroll;
297 | 				overflow-x: hidden;
298 | 				background: #fff;
299 | 				border: 1px solid #d2d2d2;
300 | 				border-radius: 4px;
301 | 				z-index: 1100;
302 | 				// 				&:hover {
303 | 				// 					position: absolute;
304 | 				// 					height: 340px;
305 | 				// 				}
306 | 				.waymark-overlay-wrap {
307 | 					padding: 10px;
308 | 					border-bottom: 1px solid #d2d2d2;
309 | 					cursor: pointer;
310 | 					&:hover,
311 | 					&.waymark-active {
312 | 						background: @waymark-grey;
313 | 					}
314 | 					.waymark-type-title {
315 | 						margin-top: -10px;
316 | 						margin-bottom: 3px;
317 | 						text-align: center;
318 | 						font-size: 10px;
319 | 						word-break: break-all;
320 | 					}
321 | 					.waymark-type-title {
322 | 						margin-top: -10px;
323 | 						margin-bottom: 3px;
324 | 						text-align: center;
325 | 						font-size: 10px;
326 | 						word-break: break-all;
327 | 					}
328 | 					//Markers
329 | 					&.waymark-marker-wrap {
330 | 						.waymark-marker {
331 | 							position: relative;
332 | 							cursor: pointer;
333 | 						}
334 | 					}
335 | 					//Lines
336 | 					&.waymark-line-wrap {
337 | 						.waymark-line {
338 | 						}
339 | 					}
340 | 					//Shapes
341 | 					&.waymark-marker-wrap {
342 | 						.waymark-shape {
343 | 						}
344 | 					}
345 | 				}
346 | 			}
347 | 		}
348 | 
349 | 		//Disable features
350 | 		&.waymark-disable-draw {
351 | 			.waymark-edit-line,
352 | 			.waymark-edit-rectangle,
353 | 			.waymark-edit-polygon,
354 | 			.waymark-edit-circle,
355 | 			.waymark-edit-marker {
356 | 				display: none !important;
357 | 			}
358 | 		}
359 | 		&.waymark-disable-photo {
360 | 			.waymark-edit-image,
361 | 			button#add_photo {
362 | 				display: none !important;
363 | 			}
364 | 		}
365 | 		&.waymark-disable-file {
366 | 			.waymark-edit-upload {
367 | 				display: none !important;
368 | 			}
369 | 		}
370 | 	}
371 | 
372 | 	//Submissions
373 | 	&.waymark-submission {
374 | 		//Popups
375 | 		.leaflet-popup-content {
376 | 			width: 300px !important;
377 | 			ul.waymark-info {
378 | 				margin: 0 !important;
379 | 				padding-left: 70px;
380 | 
381 | 				.waymark-info-title {
382 | 					input {
383 | 						padding: 5px;
384 | 						width: 220px !important;
385 | 						border-radius: 4px;
386 | 					}
387 | 				}
388 | 				.waymark-info-image_large_url {
389 | 					height: 60px;
390 | 					input {
391 | 						padding: 5px;
392 | 						width: 155px !important;
393 | 						border-radius: 4px;
394 | 					}
395 | 					.button {
396 | 						min-width: 85px;
397 | 						padding: 3px 5px;
398 | 						font-size: 11px;
399 | 					}
400 | 				}
401 | 				.waymark-info-description {
402 | 					width: 230px;
403 | 				}
404 | 			}
405 | 		}
406 | 	}
407 | }
408 | 


--------------------------------------------------------------------------------
/src/less/Waymark_Map_Viewer.less:
--------------------------------------------------------------------------------
  1 | @import (reference) "Waymark_Map.less";
  2 | 
  3 | /*
  4 | 	==================================
  5 | 	============ VIEWER ==============
  6 | 	==================================
  7 | */
  8 | 
  9 | .waymark-map-container {
 10 | 	&.waymark-is-viewer {
 11 | 		/* Info Window */
 12 | 		ul.waymark-info {
 13 | 			padding: 0;
 14 | 			margin: 0;
 15 | 			position: relative;
 16 | 			width: 260px;
 17 | 			list-style-type: none;
 18 | 			/* No Title */
 19 | 			&.waymark-no-title {
 20 | 				.waymark-info-title {
 21 | 					display: none;
 22 | 				}
 23 | 			}
 24 | 
 25 | 			/* No Image*/
 26 | 			&.waymark-no-image {
 27 | 				width: 200px;
 28 | 				min-height: 60px;
 29 | 				.waymark-info-title,
 30 | 				.waymark-info-description {
 31 | 					position: relative;
 32 | 				}
 33 | 				.waymark-info-description {
 34 | 					height: auto;
 35 | 					float: none;
 36 | 					width: 100%;
 37 | 				}
 38 | 			}
 39 | 			li {
 40 | 				width: 100%;
 41 | 				padding: 0;
 42 | 				margin: 0;
 43 | 				margin-bottom: 7px;
 44 | 				list-style: none;
 45 | 				&.waymark-info-type {
 46 | 					margin-top: -8px;
 47 | 					small {
 48 | 						border-radius: 3px;
 49 | 						padding: 2px 5px;
 50 | 						line-height: 0;
 51 | 						color: #666;
 52 | 						// 						background: #ccc;
 53 | 					}
 54 | 				}
 55 | 				&.waymark-info-title {
 56 | 					font-size: 14px;
 57 | 				}
 58 | 				&.waymark-info-description {
 59 | 					max-height: 72px;
 60 | 					overflow: auto;
 61 | 					p {
 62 | 						margin: 0;
 63 | 					}
 64 | 				}
 65 | 				&.waymark-info-image_large_url {
 66 | 					margin-right: 10px;
 67 | 					width: 260px;
 68 | 					height: 200px;
 69 | 					a {
 70 | 						display: block;
 71 | 						width: inherit;
 72 | 						height: inherit;
 73 | 						margin: 0;
 74 | 						padding: 0;
 75 | 						border-bottom: none;
 76 | 						background-size: 260px;
 77 | 						background-repeat: no-repeat;
 78 | 						background-position: left center;
 79 | 					}
 80 | 				}
 81 | 			}
 82 | 		}
 83 | 
 84 | 		&.waymark-has-cluster {
 85 | 			.waymark-cluster {
 86 | 				.waymark-marker {
 87 | 					position: absolute;
 88 | 
 89 | 					.waymark-cluster-count {
 90 | 						position: absolute;
 91 | 						top: -3px;
 92 | 						right: -3px;
 93 | 						padding: 1px 3px;
 94 | 						font-size: 8px;
 95 | 						color: black;
 96 | 						border: 1px solid #333;
 97 | 						border-radius: 3px;
 98 | 						background: rgba(255, 255, 255, 0.7);
 99 | 					}
100 | 				}
101 | 			}
102 | 		}
103 | 	}
104 | }
105 | 
106 | /*
107 | 	==================================
108 | 	=========== ELEVATION ============
109 | 	==================================
110 | */
111 | 
112 | .waymark-map-container {
113 | 	.circle-lower {
114 | 		fill: white;
115 | 	}
116 | 
117 | 	.elevation-polyline {
118 | 		stroke: @waymark-primary;
119 | 		stroke-opacity: 0.7;
120 | 	}
121 | 
122 | 	// Nested Elevation
123 | 	.waymark-elevation-container {
124 | 		position: absolute;
125 | 		bottom: 10px;
126 | 		left: 10px;
127 | 		z-index: 2000;
128 | 		width: 50%;
129 | 		max-height: 33.33%;
130 | 
131 | 		.elevation-control {
132 | 			background: rgba(255, 255, 255, 0.47);
133 | 
134 | 			.background {
135 | 				background: none;
136 | 			}
137 | 		}
138 | 	}
139 | 
140 | 	&.waymark-has-gallery {
141 | 		.waymark-elevation-container {
142 | 			bottom: 90px;
143 | 		}
144 | 	}
145 | }
146 | 
147 | .waymark-elevation-container {
148 | 	.elevation-control.elevation {
149 | 		* {
150 | 			max-width: 100%;
151 | 		}
152 | 		.elevation-summary {
153 | 			margin: 0;
154 | 			text-align: center;
155 | 			padding: 0 10px;
156 | 		}
157 | 		.legend-altitude {
158 | 			display: none;
159 | 		}
160 | 		.area {
161 | 			fill: @waymark-primary;
162 | 			stroke: hsla(60, 0%, 0%, 0.85);
163 | 			stroke-width: 2.8;
164 | 		}
165 | 	}
166 | 	.waymark-elevation-close {
167 | 		position: absolute;
168 | 		top: 5px;
169 | 		right: 14px;
170 | 		padding: 5px 10px;
171 | 		font-weight: bold;
172 | 		font-size: 14px;
173 | 		background: @waymark-grey;
174 | 		cursor: pointer;
175 | 		color: #333;
176 | 	}
177 | }
178 | 


--------------------------------------------------------------------------------