aboutsummaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Link.mjs11
-rw-r--r--src/MenuItem.mjs25
-rw-r--r--src/marker.mjs133
3 files changed, 160 insertions, 9 deletions
diff --git a/src/Link.mjs b/src/Link.mjs
index 61aa5f8..2ff1123 100644
--- a/src/Link.mjs
+++ b/src/Link.mjs
@@ -1,5 +1,6 @@
1import LeaderLine from 'leader-line' 1import LeaderLine from 'leader-line'
2import { insideWindow, insideParent } from './utils' 2import { insideWindow, insideParent } from './utils'
3import * as markers from './marker.mjs'
3 4
4/** VAR: pattern for coodinates */ 5/** VAR: pattern for coodinates */
5export const coordPattern = /^geo:([-]?[0-9.]+),([-]?[0-9.]+)/ 6export const coordPattern = /^geo:([-]?[0-9.]+),([-]?[0-9.]+)/
@@ -106,11 +107,19 @@ export class GeoLink extends window.HTMLAnchorElement {
106 .map(map => { 107 .map(map => {
107 const renderer = map.renderer 108 const renderer = map.renderer
108 const lonLat = [Number(this.dataset.lon), Number(this.dataset.lat)] 109 const lonLat = [Number(this.dataset.lon), Number(this.dataset.lat)]
110 const type = params.get('type') ?? 'pin'
111 const svg = markers[type]
112 const element = document.createElement('div')
113 element.style.cssText = `width: ${svg.size[0]}px; height: ${svg.size[1]}px;`
114 element.innerHTML = svg.html
109 115
110 const marker = map.querySelector(`.marker[data-xy="${lonLat}"]`) ?? 116 const marker = map.querySelector(`.marker[data-xy="${lonLat}"]`) ??
111 renderer.addMarker({ 117 renderer.addMarker({
112 xy: lonLat, 118 xy: lonLat,
113 type: params.get('type') ?? null, 119 element,
120 type,
121 anchor: svg.anchor,
122 size: svg.size,
114 }) 123 })
115 marker.dataset.xy = lonLat 124 marker.dataset.xy = lonLat
116 marker.title = new URLSearchParams(this.search).get('xy') ?? lonLat 125 marker.title = new URLSearchParams(this.search).get('xy') ?? lonLat
diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 912080b..64e82d1 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,5 +1,6 @@
1import { shiftByWindow } from './utils.mjs' 1import { shiftByWindow } from './utils.mjs'
2import { GeoLink, removeLeaderLines } from './Link.mjs' 2import { GeoLink, removeLeaderLines } from './Link.mjs'
3import * as markers from './marker.mjs'
3 4
4/** 5/**
5 * @typedef {Object} RefLink 6 * @typedef {Object} RefLink
@@ -59,7 +60,7 @@ export class Folder extends window.HTMLDivElement {
59 * @param {string} [options.innerHTML] - The HTML content of the folder 60 * @param {string} [options.innerHTML] - The HTML content of the folder
60 * @param {Item[]} options.items - The submenu items 61 * @param {Item[]} options.items - The submenu items
61 */ 62 */
62 constructor ({ text, innerHTML, items }) { 63 constructor ({ text, innerHTML, items, style }) {
63 super() 64 super()
64 this.innerHTML = innerHTML ?? text 65 this.innerHTML = innerHTML ?? text
65 this.classList.add('folder', 'menu-item') 66 this.classList.add('folder', 'menu-item')
@@ -70,7 +71,7 @@ export class Folder extends window.HTMLDivElement {
70 const submenu = document.createElement('div') 71 const submenu = document.createElement('div')
71 submenu.className = 'sub-menu' 72 submenu.className = 'sub-menu'
72 const offset = this.items.length > 1 ? '-20px' : '0px' 73 const offset = this.items.length > 1 ? '-20px' : '0px'
73 submenu.style.cssText = `position: absolute; left: 105%; top: ${offset};` 74 submenu.style.cssText = `${style ?? ''}position: absolute; left: 105%; top: ${offset};`
74 this.items.forEach(item => submenu.appendChild(item)) 75 this.items.forEach(item => submenu.appendChild(item))
75 submenu.onmouseleave = () => submenu.remove() 76 submenu.onmouseleave = () => submenu.remove()
76 77
@@ -435,10 +436,10 @@ export const addRefLink = (cm, refLinks) =>
435 * @param {String} text 436 * @param {String} text
436 * @param {String} type 437 * @param {String} type
437 */ 438 */
438export const setGeoLinkTypeItem = ({ link, text, type }) => { 439export const setGeoLinkTypeItem = ({ link, type, ...others }) => {
439 const params = new URLSearchParams(link.search) 440 const params = new URLSearchParams(link.search)
440 return new Item({ 441 return new Item({
441 text, 442 ...others,
442 className: ['keep-menu'], 443 className: ['keep-menu'],
443 onclick: () => { 444 onclick: () => {
444 params.set('type', type) 445 params.set('type', type)
@@ -458,8 +459,16 @@ export const setGeoLinkTypeItem = ({ link, text, type }) => {
458 */ 459 */
459export const setGeoLinkType = (link) => new Folder({ 460export const setGeoLinkType = (link) => new Folder({
460 text: 'Marker Type', 461 text: 'Marker Type',
461 items: [ 462 style: 'min-width: unset; display: grid; grid-template-columns: repeat(5, 1fr);',
462 setGeoLinkTypeItem({ link, text: 'Pin', type: 'pin' }), 463 items: Object.entries(markers)
463 setGeoLinkTypeItem({ link, text: 'Circle', type: 'circle' }), 464 .sort(([, a], [, b]) => (a.order ?? 9999) > (b.order ?? 9999))
464 ], 465 .map(([key, value]) => {
466 return setGeoLinkTypeItem({
467 link,
468 title: key.at(0).toUpperCase() + key.slice(1),
469 innerHTML: value.html,
470 type: key,
471 style: 'min-width: unset; width: fit-content; padding: 10px; margin: auto auto;',
472 })
473 }),
465}) 474})
diff --git a/src/marker.mjs b/src/marker.mjs
new file mode 100644
index 0000000..7eb5148
--- /dev/null
+++ b/src/marker.mjs
@@ -0,0 +1,133 @@
1export const pin = {
2 order: 1,
3 html: '<svg display="block" height="41px" width="27px" viewBox="0 0 27 41"><g fill-rule="nonzero"><g transform="translate(3.0, 29.0)" fill="#000000"><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="9.5" ry="4.77275007"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="8.5" ry="4.29549936"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="7.5" ry="3.81822308"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="6.5" ry="3.34094679"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="5.5" ry="2.86367051"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="4.5" ry="2.38636864"></ellipse></g><g fill="#3FB1CE"><path d="M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z"></path></g><g opacity="0.25" fill="#000000"><path d="M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z"></path></g><g transform="translate(6.0, 7.0)" fill="#FFFFFF"></g><g transform="translate(8.0, 8.0)"><circle fill="#000000" opacity="0.25" cx="5.5" cy="5.5" r="5.4999962"></circle><circle fill="#FFFFFF" cx="5.5" cy="5.5" r="5.4999962"></circle></g></g></svg>',
4 size: [27, 41],
5 anchor: [13.5, 35.25],
6}
7
8export const circle = {
9 order: 2,
10 html: '<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg"> <circle r="8" cx="10" cy="10" fill="red" stroke="white" stroke-width="2" /> </svg>',
11 size: [20, 20],
12 anchor: [10, 10],
13}
14
15export const water = {
16 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7.49,15C4.5288,14.827,2.1676,12.4615,2,9.5C2,6.6,6.25,1.66,7.49,0c1.24,1.66,5,6.59,5,9.49S10.17,15,7.49,15z"></path></svg>',
17 size: [27, 27],
18 anchor: [13.5, 13.5],
19}
20
21export const campsite = {
22 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7,1.5 l-5.5,9H1c-1,0-1,1-1,1v1c0,0,0,1,1,1h13c1,0,1-1,1-1v-1c0,0,0-1-1-1h-0.5L8,1.5C7.8,1.1,7.2,1.1,7,1.5z M7.5,5l3.2,5.5H4.2L7.5,5z"></path></svg>',
23 size: [27, 27],
24 anchor: [13.5, 13.5],
25}
26
27export const caution = {
28 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M14.9,13.4L8.5,0.6c-0.4-0.8-1.5-0.8-1.9,0L0.1,13.4c-0.4,0.7,0.2,1.6,1,1.6h12.8C14.7,15,15.2,14.1,14.9,13.4z M7.5,13 C6.7,13,6,12.3,6,11.5S6.6,10,7.5,10S9,10.7,9,11.5C9,12.4,8.3,13,7.5,13z M8.5,9h-2L6,5.5C6,5.2,6.2,5,6.5,5h2C8.8,5,9,5.2,9,5.5 L8.5,9z"></path></svg>',
29 size: [27, 27],
30 anchor: [13.5, 13.5],
31}
32
33export const communication = {
34 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M11.8545,6.4336l-.4131-.2813a4.7623,4.7623,0,0,0,.2813-4.8779l-.0835-.1533L12.0747.875l.0908.167a5.2619,5.2619,0,0,1-.311,5.3916Zm1.1521,7.1316V14h-11v-.4348H4.4952L6.0439,6.4a.5.5,0,0,1,.4888-.3945h.7255V4.6014A1.14,1.14,0,0,1,6.3756,3.5a1.1568,1.1568,0,1,1,2.3136,0,1.14,1.14,0,0,1-.931,1.1112V6.0059h.7223A.5.5,0,0,1,8.9692,6.4l1.5478,7.1648ZM8.4543,8.751H6.5588L6.236,10.2441H8.777ZM6.1279,10.7441l-.3233,1.4952H9.2082l-.3231-1.4952ZM6.936,7.0059,6.6669,8.251H8.3463L8.0771,7.0059ZM5.5179,13.5652H9.4948l-.1786-.8259h-3.62ZM5.21,5.0137a2.7523,2.7523,0,0,1,.0161-3.0518L4.812,1.6826a3.25,3.25,0,0,0-.019,3.6065ZM10.7568,3.5a3.2433,3.2433,0,0,0-.5341-1.7861l-.418.2754a2.7517,2.7517,0,0,1-.0176,3.0488l.4141.2793A3.2341,3.2341,0,0,0,10.7568,3.5ZM3.5342,6.1182A4.7637,4.7637,0,0,1,3.3813,1.13L2.9478.88a5.2643,5.2643,0,0,0,.1694,5.5137Z"></path></svg>',
35 size: [27, 27],
36 anchor: [13.5, 13.5],
37}
38
39export const cross = {
40 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M2.64,1.27L7.5,6.13l4.84-4.84C12.5114,1.1076,12.7497,1.0029,13,1c0.5523,0,1,0.4477,1,1 c0.0047,0.2478-0.093,0.4866-0.27,0.66L8.84,7.5l4.89,4.89c0.1648,0.1612,0.2615,0.3796,0.27,0.61c0,0.5523-0.4477,1-1,1 c-0.2577,0.0107-0.508-0.0873-0.69-0.27L7.5,8.87l-4.85,4.85C2.4793,13.8963,2.2453,13.9971,2,14c-0.5523,0-1-0.4477-1-1 c-0.0047-0.2478,0.093-0.4866,0.27-0.66L6.16,7.5L1.27,2.61C1.1052,2.4488,1.0085,2.2304,1,2c0-0.5523,0.4477-1,1-1 C2.2404,1.0029,2.4701,1.0998,2.64,1.27z"></path></svg>',
41 size: [27, 27],
42 anchor: [13.5, 13.5],
43}
44
45export const construction = {
46 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M13.5,12h-1.8L8.2,1.5C8,0.8,7,0.8,6.8,1.5L3.3,12H1.5C1.2,12,1,12.2,1,12.5v1C1,13.8,1.2,14,1.5,14h12 c0.3,0,0.5-0.2,0.5-0.5v-1C14,12.2,13.8,12,13.5,12z M7,4H8l0.7,2H6.4L7,4z M5.7,8h3.6l0.7,2H5L5.7,8z"></path></svg>',
47 size: [27, 27],
48 anchor: [13.5, 13.5],
49}
50
51export const danger = {
52 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M13.94,14.68c-0.0749,0.194-0.262,0.3215-0.47,0.32c-0.0595,0.0107-0.1205,0.0107-0.18,0L7.5,12.56L1.7,15 c-0.2572,0.1005-0.5472-0.0266-0.6476-0.2838C1.0516,14.7141,1.0508,14.7121,1.05,14.71c-0.1291-0.2441-0.0358-0.5467,0.2084-0.6757 C1.2845,14.0205,1.3118,14.009,1.34,14l4.85-2l-4.85-2C1.0758,9.9197,0.9267,9.6404,1.007,9.3762s0.3596-0.4133,0.6238-0.333 C1.6545,9.0504,1.6776,9.0594,1.7,9.07l5.8,2.41l5.8-2.41c0.2494-0.1185,0.5477-0.0124,0.6662,0.237 c0.1185,0.2494,0.0124,0.5477-0.237,0.6662C13.7068,9.9839,13.6837,9.9928,13.66,10L8.8,12l4.85,2 c0.2607,0.091,0.3983,0.3761,0.3074,0.6368C13.9523,14.6515,13.9465,14.6659,13.94,14.68z M12,4.23v0.45 c-0.0021,0.2129-0.0722,0.4196-0.2,0.59C11.2414,5.8883,10.6399,6.4664,10,7v1.16c0.0015,0.208-0.126,0.3951-0.32,0.47L7.52,9.5 H7.45L5.28,8.63C5.1016,8.5428,4.9917,8.3584,5,8.16V7C4.3528,6.4675,3.7446,5.8893,3.18,5.27C3.0593,5.0972,2.9963,4.8907,3,4.68 V4.23C3.1669,2.0117,4.8974,0.2307,7.11,0h0.36l0,0h0.39C10.0862,0.2131,11.8348,1.9997,12,4.23z M6,4c0-0.5523-0.4477-1-1-1 S4,3.4477,4,4s0.4477,1,1,1S6,4.5523,6,4z M7,7c0-0.2761-0.2239-0.5-0.5-0.5S6,6.7239,6,7v0.5C6,7.7761,6.2239,8,6.5,8 S7,7.7761,7,7.5V7z M9,7c0-0.2761-0.2239-0.5-0.5-0.5S8,6.7239,8,7v0.5C8,7.7761,8.2239,8,8.5,8S9,7.7761,9,7.5V7z M11,4 c0-0.5523-0.4477-1-1-1S9,3.4477,9,4s0.4477,1,1,1S11,4.5523,11,4z"></path></svg> ',
53 size: [27, 27],
54 anchor: [13.5, 13.5],
55}
56
57export const fence = {
58 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M13.5,10H13V7h.5a.5.5,0,0,0,0-1H13V4l-.286-.573a.249.249,0,0,0-.424-.006L12,4V6H11V4l-.286-.573a.249.249,0,0,0-.424-.006L10,4V6H9V4l-.286-.573a.249.249,0,0,0-.424-.006L8,4V6H7V4l-.286-.573a.249.249,0,0,0-.424-.006L6,4V6H5V4l-.286-.573a.249.249,0,0,0-.424-.006L4,4V6H3V4l-.286-.573a.249.249,0,0,0-.424-.006L2,4V6H1.5a.5.5,0,0,0,0,1H2v3H1.5a.5.5,0,0,0,0,1H2v1.5a.5.5,0,0,0,1,0V11H4v1.5a.5.5,0,0,0,1,0V11H6v1.5a.5.5,0,0,0,1,0V11H8v1.5a.5.5,0,0,0,1,0V11h1v1.5a.5.5,0,0,0,1,0V11h1v1.5a.5.5,0,0,0,1,0V11h.5a.5.5,0,0,0,0-1ZM3,10V7H4v3Zm2,0V7H6v3Zm2,0V7H8v3Zm2,0V7h1v3Zm2,0V7h1v3Z"></path></svg>',
59 size: [27, 27],
60 anchor: [13.5, 13.5],
61}
62
63export const heliport = {
64 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M4,2C3,2,3,3,4,3h4v1C7.723,4,7.5,4.223,7.5,4.5V5H5H3.9707H3.9316 C3.7041,4.1201,2.9122,3.5011,2,3.5c-1.1046,0-2,0.8954-2,2s0.8954,2,2,2c0.3722-0.001,0.7368-0.1058,1.0527-0.3027L5.5,10.5 C6.5074,11.9505,8.3182,12,9,12h5c0,0,1,0,1-1v-0.9941C15,9.2734,14.874,8.874,14.5,8.5l-3-3c0,0-0.5916-0.5-1.2734-0.5H9.5V4.5 C9.5,4.223,9.277,4,9,4V3h4c1,0,1-1,0-1C13,2,4,2,4,2z M2,4.5c0.5523,0,1,0.4477,1,1s-0.4477,1-1,1s-1-0.4477-1-1 C1,4.9477,1.4477,4.5,2,4.5z M10,6c0.5,0,0.7896,0.3231,1,0.5L13.5,9H10c0,0-1,0-1-1V7C9,7,9,6,10,6z"></path></svg>',
65 size: [27, 27],
66 anchor: [13.5, 13.5],
67}
68
69export const hot_spring = {
70 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M13.536,12.008h0a1.584,1.584,0,0,0-1.105.416l-.437.407a.662.662,0,0,1-.928,0c-.139-.119-.269-.258-.409-.387a1.679,1.679,0,0,0-2.275,0c-.148.129-.288.278-.436.407a.663.663,0,0,1-.929,0c-.148-.129-.288-.278-.436-.407a1.68,1.68,0,0,0-2.266,0c-.139.129-.269.268-.408.387a.86.86,0,0,1-.279.159.748.748,0,0,1-.743-.248,5.9,5.9,0,0,0-.733-.576,1.089,1.089,0,0,0-.632-.158H1.464a.5.5,0,0,0,0,.992h0a.847.847,0,0,1,.6.307l.334.258a1.676,1.676,0,0,0,2.164.06c.176-.139.334-.317.51-.466a.663.663,0,0,1,.929,0l.362.347a1.687,1.687,0,0,0,2.284.07c.14-.11.251-.248.39-.367A.683.683,0,0,1,10,13.15c.017.015.422.406.422.406a1.667,1.667,0,0,0,1.634.367,1.961,1.961,0,0,0,.928-.6A.923.923,0,0,1,13.536,13h0a.5.5,0,0,0,0-.992ZM7.464,2.047A2.871,2.871,0,0,0,6.87,6.583a1.785,1.785,0,0,1,.562,1.694C7.119,9.17,6.342,10,6.774,11c.286-.971,1.367-1.291,1.861-2.124.99-1.565-.155-3-1.03-4.245C7.144,3.323,8.824,2.32,8.225,1A2.2,2.2,0,0,1,7.464,2.047Zm2.946,1.5a2.262,2.262,0,0,0,.525,3.106,1.059,1.059,0,0,1,.52,1.067c-.319.741-1.088,1.408-.686,2.28.374-.87,1.016-.644,1.817-1.546a2.261,2.261,0,0,0-.519-3.109,1.059,1.059,0,0,1-.527-1.067c.318-.741,1.088-1.406.687-2.278C11.855,2.87,11.211,2.645,10.41,3.547Zm-8,0a2.262,2.262,0,0,0,.525,3.106,1.059,1.059,0,0,1,.52,1.067c-.319.741-1.088,1.408-.686,2.28.374-.87,1.016-.644,1.817-1.546a2.261,2.261,0,0,0-.519-3.109A1.059,1.059,0,0,1,3.54,4.278C3.858,3.537,4.628,2.872,4.227,2,3.855,2.87,3.211,2.645,2.41,3.547Z"></path></svg>',
71 size: [27, 27],
72 anchor: [13.5, 13.5],
73}
74
75export const mountain = {
76 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7.5,2C7.2,2,7.1,2.2,6.9,2.4 l-5.8,9.5C1,12,1,12.2,1,12.3C1,12.8,1.4,13,1.7,13h11.6c0.4,0,0.7-0.2,0.7-0.7c0-0.2,0-0.2-0.1-0.4L8.2,2.4C8,2.2,7.8,2,7.5,2z M7.5,3.5L10.8,9H10L8.5,7.5L7.5,9l-1-1.5L5,9H4.1L7.5,3.5z"></path></svg> ',
77 size: [27, 27],
78 anchor: [13.5, 13.5],
79}
80
81export const parking = {
82 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M11.85,8.37c-0.9532,0.7086-2.1239,1.0623-3.31,1H5.79V14H3V1h5.72c1.1305-0.0605,2.244,0.2952,3.13,1 c0.8321,0.8147,1.2543,1.9601,1.15,3.12C13.1271,6.3214,12.7045,7.5159,11.85,8.37z M9.75,3.7C9.3254,3.3892,8.8052,3.237,8.28,3.27 H5.79v3.82h2.49c0.5315,0.0326,1.056-0.1351,1.47-0.47c0.3795-0.3947,0.5693-0.9346,0.52-1.48C10.324,4.606,10.1327,4.0763,9.75,3.7 z"></path></svg>',
83 size: [27, 27],
84 anchor: [13.5, 13.5],
85}
86
87export const rail = {
88 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M 3 1 C 2.4477 1 2 1.4477 2 2 L 2 10 C 2 10.5523 2.4477 11 3 11 L 12 11 C 12.5523 11 13 10.5523 13 10 L 13 2 C 13 1.4477 12.5523 1 12 1 L 3 1 z M 5.75 1.5 L 5.7597656 1.5 L 9.2597656 1.5 C 9.3978656 1.5 9.5097656 1.6119 9.5097656 1.75 C 9.5097656 1.8881 9.3978656 2 9.2597656 2 L 5.75 2 C 5.6119 2 5.5 1.8881 5.5 1.75 C 5.5 1.6119 5.6119 1.5 5.75 1.5 z M 3.5 3 L 7 3 L 7 7 L 3.5 7 C 3.2239 7 3 6.7761 3 6.5 L 3 3.5 C 3 3.2239 3.2239 3 3.5 3 z M 8 3 L 11.5 3 C 11.7761 3 12 3.2239 12 3.5 L 12 6.5 C 12 6.7761 11.7761 7 11.5 7 L 8 7 L 8 3 z M 5 8 C 5.5523 8 6 8.4477 6 9 C 6 9.5523 5.5523 10 5 10 C 4.4477 10 4 9.5523 4 9 C 4 8.4477 4.4477 8 5 8 z M 10 8 C 10.5523 8 11 8.4477 11 9 C 11 9.5523 10.5523 10 10 10 C 9.4477 10 9 9.5523 9 9 C 9 8.4477 9.4477 8 10 8 z M 10.445312 11.994141 C 10.380597 11.999652 10.314981 12.018581 10.253906 12.050781 C 10.030606 12.168381 9.9302313 12.433922 10.019531 12.669922 L 10.189453 13 L 4.8105469 13 L 4.9394531 12.730469 C 5.0371531 12.472169 4.9067375 12.183637 4.6484375 12.085938 C 4.4124375 11.996738 4.1468969 12.097113 4.0292969 12.320312 L 3.0292969 14.320312 C 3.0080969 14.377912 2.9986 14.4387 3 14.5 C 3 14.7761 3.2239 15 3.5 15 C 3.6802 14.999 3.8450875 14.899434 3.9296875 14.740234 L 3.9296875 14.689453 L 4 14.689453 L 4.3105469 14 L 10.689453 14 L 11 14.689453 L 11 14.740234 C 11.0846 14.899434 11.249488 14.999 11.429688 15 C 11.705787 15 11.929688 14.7761 11.929688 14.5 C 11.949587 14.4212 11.949587 14.338566 11.929688 14.259766 L 10.929688 12.259766 C 10.833163 12.076541 10.639459 11.977608 10.445312 11.994141 z "></path></svg>',
89 size: [27, 27],
90 anchor: [13.5, 13.5],
91}
92
93export const racetrack = {
94 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M4.99321 1.58228C5.03861 1.30989 4.8546 1.05228 4.58222 1.00688C4.30983 0.961484 4.05222 1.14549 4.00682 1.41788L2.00682 13.4179C1.96142 13.6903 2.14543 13.9479 2.41782 13.9933C2.6902 14.0387 2.94782 13.8547 2.99321 13.5823L3.6632 9.56238C4.46947 9.67976 5.3398 9.7187 6.026 10.2C6.45057 10.505 6.94151 10.7047 7.45839 10.7828C8.424 10.9286 9.28807 10.3976 10.242 10.549L11.531 10.743C11.7908 10.7822 12.0609 10.5828 12.1 10.323L12.984 4.38899L12.988 4.38499C13.0241 4.12469 12.8213 3.85686 12.561 3.82099L11.272 3.62699C10.3092 3.48421 9.44342 3.9997 8.48942 3.85618C8.06155 3.79181 7.65443 3.62915 7.3 3.38099C6.56128 2.86385 5.68119 2.77814 4.81426 2.656L4.99321 1.58228ZM4.40351 5.12049L4.73218 3.14849C5.33161 3.22962 5.96556 3.27693 6.521 3.51699L6.22626 5.48223C5.65576 5.24949 5.01279 5.2037 4.40351 5.12049ZM3.74549 9.0686L4.07436 7.09542C4.69451 7.18147 5.35159 7.22405 5.933 7.46299L6.23273 5.48673C6.89067 5.75614 7.3918 6.21952 8.126 6.32799L8.426 4.34799C9.16402 4.45947 9.77459 4.17131 10.484 4.11399L10.184 6.07999C9.47389 6.1406 8.85956 6.44062 8.124 6.32999L7.83802 8.30784C7.10186 8.19874 6.59996 7.73286 5.939 7.46399L5.639 9.43999C5.04421 9.20148 4.3764 9.15882 3.74549 9.0686ZM7.83898 8.30813C8.57282 8.41936 9.19002 8.11708 9.9 8.05799L10.184 6.07999C10.8385 6.01968 11.5087 6.19133 12.152 6.28899L11.872 8.26499C11.2277 8.16793 10.5563 7.99624 9.901 8.05799L9.601 10.034C8.89229 10.0817 8.26589 10.3943 7.539 10.284L7.83898 8.30813Z"></path></svg>',
95 size: [27, 27],
96 anchor: [13.5, 13.5],
97}
98
99export const roladblock = {
100 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7.5,0C3.3579,0,0,3.3579,0,7.5S3.3579,15,7.5,15S15,11.6421,15,7.5S11.6421,0,7.5,0z M3,6h9v3H3V6z"></path></svg>',
101 size: [27, 27],
102 anchor: [13.5, 13.5],
103}
104
105export const star = {
106 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7.5,0l-2,5h-5l4,3.5l-2,6l5-3.5 l5,3.5l-2-6l4-3.5h-5L7.5,0z"></path></svg>',
107 size: [27, 27],
108 anchor: [13.5, 13.5],
109}
110
111export const animal = {
112 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7.5,6c-2.5,0-3,2.28-3,3.47h0a6.149,6.149,0,0,0-1.7.89,2,2,0,0,0-.4,2.78,2.06,2.06,0,0,0,2.8.4,4,4,0,0,1,2.3-.69,4,4,0,0,1,2.3.69,2,2,0,0,0,2.8-.3,1.929,1.929,0,0,0-.226-2.72c-.024-.021-.049-.041-.074-.06l-.1-.1a8.992,8.992,0,0,0-1.7-.89h0C10.5,8.29,10,6,7.5,6ZM2.08,4.3a1.58,1.58,0,0,0-.76,2A1.52,1.52,0,0,0,2.93,7.7a1.58,1.58,0,0,0,.76-2A1.52,1.52,0,0,0,2.08,4.3Zm10.85,0a1.58,1.58,0,0,1,.76,2,1.52,1.52,0,0,1-1.61,1.4,1.58,1.58,0,0,1-.76-2A1.52,1.52,0,0,1,12.93,4.3Zm-7.85-3c-.68.09-1,.94-.76,1.87A1.77,1.77,0,0,0,5.93,4.7c.68-.09,1-.94.76-1.87A1.77,1.77,0,0,0,5.08,1.3Zm4.85,0c.68.09,1,.94.76,1.87A1.77,1.77,0,0,1,9.07,4.7c-.68-.08-1-.94-.76-1.87A1.769,1.769,0,0,1,9.93,1.3Z"></path></svg>',
113 size: [27, 27],
114 anchor: [13.5, 13.5],
115}
116
117export const waterfall = {
118 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M12.9,3H15V1H5c0,0-4,0-4,4v5.5h0c-1.1,0.8-1.3,2.4-0.5,3.5s2.4,1.3,3.5,0.5c1,0.8,2.5,0.6,3.4-0.4C8,14.7,8.9,15,9.8,15 c2.1,0,3.7-1.6,3.8-3.7c0-1.6-1-3-2.5-3.5V5C11,3.9,11.8,3,12.9,3z M10,8v0.5c1.5,0.1,2.6,1.5,2.5,3c-0.1,1.4-1.3,2.5-2.7,2.5 c-1.1,0.1-1.8-0.6-2.1-1H6.9c-0.1,0.2-0.4,1-1.4,1s-1.3-0.6-1.4-1H3.9c-0.2,0.4-0.5,0.8-0.9,0.9c-0.9,0.3-1.7-0.2-1.9-1 c-0.2-0.8,0.2-1.6,0.9-1.8V6c0-0.5,0.4-1,1-1c0,0,0,0,0,0h0c0.5,0,1,0.4,1,1c0,0,0,0,0,0c0,0,0,0,0,0v4.5C4,10.8,4.2,11,4.5,11 S5,10.8,5,10.5V7c0-0.6,0.4-1,1-1s1,0.4,1,1v3.5C7,10.8,7.2,11,7.5,11S8,10.8,8,10.5V6c0-0.6,0.4-1,1-1s1,0.4,1,1V8z"></path></svg>',
119 size: [27, 27],
120 anchor: [13.5, 13.5],
121}
122
123export const triangle = {
124 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7.5385,2 C7.2437,2,7.0502,2.1772,6.9231,2.3846l-5.8462,9.5385C1,12,1,12.1538,1,12.3077C1,12.8462,1.3846,13,1.6923,13h11.6154 C13.6923,13,14,12.8462,14,12.3077c0-0.1538,0-0.2308-0.0769-0.3846L8.1538,2.3846C8.028,2.1765,7.7882,2,7.5385,2z"></path></svg>',
125 size: [27, 27],
126 anchor: [13.5, 13.5],
127}
128
129export const triangle_white = {
130 html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" height="27" width="27"><rect fill="none" x="0" y="0" width="27" height="27"></rect><rect x="2" y="2" rx="11.5" ry="11.5" width="23" height="23" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="4"></rect><rect x="2" y="2" width="23" height="23" rx="11.5" ry="11.5" fill="#ffc7c7"></rect><path fill="#000" transform="translate(6 6)" d="M7.5243,1.5004 C7.2429,1.4913,6.9787,1.6423,6.8336,1.8952l-5.5,9.8692C1.0218,12.3078,1.395,12.9999,2,13h11 c0.605-0.0001,0.9782-0.6922,0.6664-1.2355l-5.5-9.8692C8.0302,1.6579,7.7884,1.5092,7.5243,1.5004z M7.5,3.8993l4.1267,7.4704 H3.3733L7.5,3.8993z"></path></svg>',
131 size: [27, 27],
132 anchor: [13.5, 13.5],
133}