[{"data":1,"prerenderedAt":839},["ShallowReactive",2],{"docs-page-\u002Fcustomising\u002Fmarkers":3,"docs-navigation":735,"docs-surroundings-\u002Fcustomising\u002Fmarkers":836},{"id":4,"title":5,"body":6,"description":728,"extension":729,"meta":730,"navigation":275,"path":731,"seo":732,"stem":733,"__hash__":734},"docs\u002Fcustomising\u002Fmarkers.md","Markers",{"type":7,"value":8,"toc":722},"minimark",[9,16,19,24,29,31,35,39,88,142,150,154,485,487,491,494,710,718],[10,11],"video-figure",{"captions":12,"label":13,"poster":14,"src":15},"\u002Fassets\u002Fvideo\u002Fcaptions\u002Fmarkers.en.vtt","Waymark - Markers","\u002Fassets\u002Fvideo\u002Fposters\u002Fmarkers.jpg","\u002Fassets\u002Fvideo\u002Fmarkers.mp4",[17,18],"hr",{},[20,21,23],"h2",{"id":22},"example","Example",[25,26],"map-demo",{"demo":27,"height":28},"markers",640,[17,30],{},[20,32,34],{"id":33},"icons","Icons",[36,37,38],"p",{},"Every Marker Type can have a unique Icon associated with it, specified as either:",[40,41,42,50,70],"ul",{},[43,44,45,49],"li",{},[46,47,48],"strong",{},"Text"," – plain alpha-numeric characters. Remember space is very limited! Text will be displayed in the chosen colour.",[43,51,52,55,56,63,64,69],{},[46,53,54],{},"Font"," – Choose from a list of ",[57,58,62],"a",{"href":59,"rel":60},"https:\u002F\u002Fionic.io\u002Fionicons\u002Fv2\u002Fcheatsheet.html",[61],"nofollow","Ion Icons"," or ",[57,65,68],{"href":66,"rel":67},"https:\u002F\u002Ffontawesome.com\u002Fv4.7\u002Fcheatsheet\u002F",[61],"Font Awesome"," icons by providing the relevant class name, such as “ion-alert” or “fa-bolt”. The icon will be displayed in the chosen colour.",[43,71,72,75,76,81,82,87],{},[46,73,74],{},"HTML"," – Supports custom HTML content, these can be simple ",[57,77,80],{"href":78,"rel":79},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fnamed-characters.html",[61],"HTML characters"," (e.g. “★”), ",[57,83,86],{"href":84,"rel":85},"https:\u002F\u002Fsymbl.cc\u002Fen\u002F",[61],"Unicode symbols"," (e.g. “⚡”) or more complicated structures. For example you can use this option to specify custom images like so:",[89,90,95],"pre",{"className":91,"code":92,"language":93,"meta":94,"style":94},"language-html shiki shiki-themes github-light github-dark","\u003Cimg\n  src=\"https:\u002F\u002Fexample.com\u002Fwaymark-icon.png\"\n  style=\"width:24px;height:24px;margin-top:5px\"\n\u002F>\n","html","",[96,97,98,111,125,136],"code",{"__ignoreMap":94},[99,100,103,107],"span",{"class":101,"line":102},"line",1,[99,104,106],{"class":105},"sVt8B","\u003C",[99,108,110],{"class":109},"s9eBZ","img\n",[99,112,114,118,121],{"class":101,"line":113},2,[99,115,117],{"class":116},"sScJk","  src",[99,119,120],{"class":105},"=",[99,122,124],{"class":123},"sZZnC","\"https:\u002F\u002Fexample.com\u002Fwaymark-icon.png\"\n",[99,126,128,131,133],{"class":101,"line":127},3,[99,129,130],{"class":116},"  style",[99,132,120],{"class":105},[99,134,135],{"class":123},"\"width:24px;height:24px;margin-top:5px\"\n",[99,137,139],{"class":101,"line":138},4,[99,140,141],{"class":105},"\u002F>\n",[36,143,144,145,149],{},"Where the URL points to your desired image. You can adjust the width, height and vertical offset by modifying the style properties as desired. You can see an example of this in the ",[57,146,148],{"href":147},"\u002Fexamples\u002Ftext-markers\u002F","Text Markers"," guide.",[20,151,153],{"id":152},"markup","Markup",[89,155,157],{"className":91,"code":156,"language":93,"meta":94,"style":94},"\u003C!-- \"Photo\" Marker with Font Icon -->\n\u003Cdiv\n  class=\"waymark-marker waymark-marker-photo waymark-marker-circle waymark-marker-small\"\n>\n  \u003Cdiv class=\"waymark-marker-background\" style=\"background:#70af00;\">\u003C\u002Fdiv>\n  \u003Ci\n    style=\"color:#ffffff;\"\n    class=\"waymark-marker-icon waymark-icon-icon ion ion-camera\"\n  >\u003C\u002Fi>\n\u003C\u002Fdiv>\n\n\u003C!-- \"Bank\" Marker with Text Icon -->\n\u003Cdiv\n  class=\"waymark-marker waymark-marker-bank waymark-marker-rectangle waymark-marker-large\"\n>\n  \u003Cdiv class=\"waymark-marker-background\" style=\"background:#000;\">\u003C\u002Fdiv>\n  \u003Cdiv style=\"color:#ffffff;\" class=\"waymark-marker-icon waymark-icon-text\">\n    $\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- \"Beer\" Marker with HTML Icon -->\n\u003Cdiv\n  class=\"waymark-marker waymark-marker-beer waymark-marker-marker waymark-marker-medium\"\n>\n  \u003Cdiv class=\"waymark-marker-background\" style=\"background:#fbfbfb;\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"waymark-marker-icon waymark-icon-html\">\n    \u003C!-- HTML Input goes here -->\n    🍺\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[96,158,159,165,172,182,187,219,227,238,249,260,270,277,283,290,300,305,331,354,361,371,380,385,391,398,408,413,439,455,461,467,476],{"__ignoreMap":94},[99,160,161],{"class":101,"line":102},[99,162,164],{"class":163},"sJ8bj","\u003C!-- \"Photo\" Marker with Font Icon -->\n",[99,166,167,169],{"class":101,"line":113},[99,168,106],{"class":105},[99,170,171],{"class":109},"div\n",[99,173,174,177,179],{"class":101,"line":127},[99,175,176],{"class":116},"  class",[99,178,120],{"class":105},[99,180,181],{"class":123},"\"waymark-marker waymark-marker-photo waymark-marker-circle waymark-marker-small\"\n",[99,183,184],{"class":101,"line":138},[99,185,186],{"class":105},">\n",[99,188,190,193,196,199,201,204,207,209,212,215,217],{"class":101,"line":189},5,[99,191,192],{"class":105},"  \u003C",[99,194,195],{"class":109},"div",[99,197,198],{"class":116}," class",[99,200,120],{"class":105},[99,202,203],{"class":123},"\"waymark-marker-background\"",[99,205,206],{"class":116}," style",[99,208,120],{"class":105},[99,210,211],{"class":123},"\"background:#70af00;\"",[99,213,214],{"class":105},">\u003C\u002F",[99,216,195],{"class":109},[99,218,186],{"class":105},[99,220,222,224],{"class":101,"line":221},6,[99,223,192],{"class":105},[99,225,226],{"class":109},"i\n",[99,228,230,233,235],{"class":101,"line":229},7,[99,231,232],{"class":116},"    style",[99,234,120],{"class":105},[99,236,237],{"class":123},"\"color:#ffffff;\"\n",[99,239,241,244,246],{"class":101,"line":240},8,[99,242,243],{"class":116},"    class",[99,245,120],{"class":105},[99,247,248],{"class":123},"\"waymark-marker-icon waymark-icon-icon ion ion-camera\"\n",[99,250,252,255,258],{"class":101,"line":251},9,[99,253,254],{"class":105},"  >\u003C\u002F",[99,256,257],{"class":109},"i",[99,259,186],{"class":105},[99,261,263,266,268],{"class":101,"line":262},10,[99,264,265],{"class":105},"\u003C\u002F",[99,267,195],{"class":109},[99,269,186],{"class":105},[99,271,273],{"class":101,"line":272},11,[99,274,276],{"emptyLinePlaceholder":275},true,"\n",[99,278,280],{"class":101,"line":279},12,[99,281,282],{"class":163},"\u003C!-- \"Bank\" Marker with Text Icon -->\n",[99,284,286,288],{"class":101,"line":285},13,[99,287,106],{"class":105},[99,289,171],{"class":109},[99,291,293,295,297],{"class":101,"line":292},14,[99,294,176],{"class":116},[99,296,120],{"class":105},[99,298,299],{"class":123},"\"waymark-marker waymark-marker-bank waymark-marker-rectangle waymark-marker-large\"\n",[99,301,303],{"class":101,"line":302},15,[99,304,186],{"class":105},[99,306,308,310,312,314,316,318,320,322,325,327,329],{"class":101,"line":307},16,[99,309,192],{"class":105},[99,311,195],{"class":109},[99,313,198],{"class":116},[99,315,120],{"class":105},[99,317,203],{"class":123},[99,319,206],{"class":116},[99,321,120],{"class":105},[99,323,324],{"class":123},"\"background:#000;\"",[99,326,214],{"class":105},[99,328,195],{"class":109},[99,330,186],{"class":105},[99,332,334,336,338,340,342,345,347,349,352],{"class":101,"line":333},17,[99,335,192],{"class":105},[99,337,195],{"class":109},[99,339,206],{"class":116},[99,341,120],{"class":105},[99,343,344],{"class":123},"\"color:#ffffff;\"",[99,346,198],{"class":116},[99,348,120],{"class":105},[99,350,351],{"class":123},"\"waymark-marker-icon waymark-icon-text\"",[99,353,186],{"class":105},[99,355,357],{"class":101,"line":356},18,[99,358,360],{"class":359},"sj4cs","    $\n",[99,362,364,367,369],{"class":101,"line":363},19,[99,365,366],{"class":105},"  \u003C\u002F",[99,368,195],{"class":109},[99,370,186],{"class":105},[99,372,374,376,378],{"class":101,"line":373},20,[99,375,265],{"class":105},[99,377,195],{"class":109},[99,379,186],{"class":105},[99,381,383],{"class":101,"line":382},21,[99,384,276],{"emptyLinePlaceholder":275},[99,386,388],{"class":101,"line":387},22,[99,389,390],{"class":163},"\u003C!-- \"Beer\" Marker with HTML Icon -->\n",[99,392,394,396],{"class":101,"line":393},23,[99,395,106],{"class":105},[99,397,171],{"class":109},[99,399,401,403,405],{"class":101,"line":400},24,[99,402,176],{"class":116},[99,404,120],{"class":105},[99,406,407],{"class":123},"\"waymark-marker waymark-marker-beer waymark-marker-marker waymark-marker-medium\"\n",[99,409,411],{"class":101,"line":410},25,[99,412,186],{"class":105},[99,414,416,418,420,422,424,426,428,430,433,435,437],{"class":101,"line":415},26,[99,417,192],{"class":105},[99,419,195],{"class":109},[99,421,198],{"class":116},[99,423,120],{"class":105},[99,425,203],{"class":123},[99,427,206],{"class":116},[99,429,120],{"class":105},[99,431,432],{"class":123},"\"background:#fbfbfb;\"",[99,434,214],{"class":105},[99,436,195],{"class":109},[99,438,186],{"class":105},[99,440,442,444,446,448,450,453],{"class":101,"line":441},27,[99,443,192],{"class":105},[99,445,195],{"class":109},[99,447,198],{"class":116},[99,449,120],{"class":105},[99,451,452],{"class":123},"\"waymark-marker-icon waymark-icon-html\"",[99,454,186],{"class":105},[99,456,458],{"class":101,"line":457},28,[99,459,460],{"class":163},"    \u003C!-- HTML Input goes here -->\n",[99,462,464],{"class":101,"line":463},29,[99,465,466],{"class":359},"    🍺\n",[99,468,470,472,474],{"class":101,"line":469},30,[99,471,366],{"class":105},[99,473,195],{"class":109},[99,475,186],{"class":105},[99,477,479,481,483],{"class":101,"line":478},31,[99,480,265],{"class":105},[99,482,195],{"class":109},[99,484,186],{"class":105},[17,486],{},[20,488,490],{"id":489},"css","CSS",[36,492,493],{},"All Icon content can be modified using CSS.",[89,495,498],{"className":496,"code":497,"language":489,"meta":94,"style":94},"language-css shiki shiki-themes github-light github-dark","\u002F* Adjust Ionic Icon size *\u002F\n.waymark-marker .waymark-icon-icon.ion::before {\n  font-size: 18px !important;\n}\n\u002F* Adjust Font Awesome Icon size *\u002F\n.waymark-marker .waymark-icon-icon.fa::before {\n  font-size: 18px !important;\n}\n\u002F* Adjust \"Photo\" Marker Icon size *\u002F\n.waymark-marker-photo .waymark-icon-icon.ion::before {\n  font-size: 18px !important;\n}\n\u002F* Add a border to all Circle Markers *\u002F\n.waymark-marker-circle .waymark-marker-background {\n  border: 1px solid #000 !important;\n}\n\u002F* Adjust Text Icon size *\u002F\n.waymark-marker .waymark-icon-text {\n  font-size: 18px !important;\n}\n\u002F* Adjust only \"Photo\" Marker Text Icon size *\u002F\n.waymark-marker-photo .waymark-icon-text {\n  font-size: 18px !important;\n}\n",[96,499,500,505,516,537,542,547,556,570,574,579,588,602,606,611,621,643,647,652,661,675,679,684,692,706],{"__ignoreMap":94},[99,501,502],{"class":101,"line":102},[99,503,504],{"class":163},"\u002F* Adjust Ionic Icon size *\u002F\n",[99,506,507,510,513],{"class":101,"line":113},[99,508,509],{"class":116},".waymark-marker",[99,511,512],{"class":116}," .waymark-icon-icon.ion::before",[99,514,515],{"class":105}," {\n",[99,517,518,521,524,527,531,534],{"class":101,"line":127},[99,519,520],{"class":359},"  font-size",[99,522,523],{"class":105},": ",[99,525,526],{"class":359},"18",[99,528,530],{"class":529},"szBVR","px",[99,532,533],{"class":529}," !important",[99,535,536],{"class":105},";\n",[99,538,539],{"class":101,"line":138},[99,540,541],{"class":105},"}\n",[99,543,544],{"class":101,"line":189},[99,545,546],{"class":163},"\u002F* Adjust Font Awesome Icon size *\u002F\n",[99,548,549,551,554],{"class":101,"line":221},[99,550,509],{"class":116},[99,552,553],{"class":116}," .waymark-icon-icon.fa::before",[99,555,515],{"class":105},[99,557,558,560,562,564,566,568],{"class":101,"line":229},[99,559,520],{"class":359},[99,561,523],{"class":105},[99,563,526],{"class":359},[99,565,530],{"class":529},[99,567,533],{"class":529},[99,569,536],{"class":105},[99,571,572],{"class":101,"line":240},[99,573,541],{"class":105},[99,575,576],{"class":101,"line":251},[99,577,578],{"class":163},"\u002F* Adjust \"Photo\" Marker Icon size *\u002F\n",[99,580,581,584,586],{"class":101,"line":262},[99,582,583],{"class":116},".waymark-marker-photo",[99,585,512],{"class":116},[99,587,515],{"class":105},[99,589,590,592,594,596,598,600],{"class":101,"line":272},[99,591,520],{"class":359},[99,593,523],{"class":105},[99,595,526],{"class":359},[99,597,530],{"class":529},[99,599,533],{"class":529},[99,601,536],{"class":105},[99,603,604],{"class":101,"line":279},[99,605,541],{"class":105},[99,607,608],{"class":101,"line":285},[99,609,610],{"class":163},"\u002F* Add a border to all Circle Markers *\u002F\n",[99,612,613,616,619],{"class":101,"line":292},[99,614,615],{"class":116},".waymark-marker-circle",[99,617,618],{"class":116}," .waymark-marker-background",[99,620,515],{"class":105},[99,622,623,626,628,631,633,636,639,641],{"class":101,"line":302},[99,624,625],{"class":359},"  border",[99,627,523],{"class":105},[99,629,630],{"class":359},"1",[99,632,530],{"class":529},[99,634,635],{"class":359}," solid",[99,637,638],{"class":359}," #000",[99,640,533],{"class":529},[99,642,536],{"class":105},[99,644,645],{"class":101,"line":307},[99,646,541],{"class":105},[99,648,649],{"class":101,"line":333},[99,650,651],{"class":163},"\u002F* Adjust Text Icon size *\u002F\n",[99,653,654,656,659],{"class":101,"line":356},[99,655,509],{"class":116},[99,657,658],{"class":116}," .waymark-icon-text",[99,660,515],{"class":105},[99,662,663,665,667,669,671,673],{"class":101,"line":363},[99,664,520],{"class":359},[99,666,523],{"class":105},[99,668,526],{"class":359},[99,670,530],{"class":529},[99,672,533],{"class":529},[99,674,536],{"class":105},[99,676,677],{"class":101,"line":373},[99,678,541],{"class":105},[99,680,681],{"class":101,"line":382},[99,682,683],{"class":163},"\u002F* Adjust only \"Photo\" Marker Text Icon size *\u002F\n",[99,685,686,688,690],{"class":101,"line":387},[99,687,583],{"class":116},[99,689,658],{"class":116},[99,691,515],{"class":105},[99,693,694,696,698,700,702,704],{"class":101,"line":393},[99,695,520],{"class":359},[99,697,523],{"class":105},[99,699,526],{"class":359},[99,701,530],{"class":529},[99,703,533],{"class":529},[99,705,536],{"class":105},[99,707,708],{"class":101,"line":400},[99,709,541],{"class":105},[36,711,712,713,717],{},"Use your browser’s inspector to inspect the Type class names; see ",[57,714,716],{"href":715},"\u002Fcustomising\u002Fstyling-with-css-selectors\u002F","Styling With CSS Selectors"," for a full example.",[719,720,721],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":94,"searchDepth":113,"depth":127,"links":723},[724,725,726,727],{"id":22,"depth":113,"text":23},{"id":33,"depth":113,"text":34},{"id":152,"depth":113,"text":153},{"id":489,"depth":113,"text":490},"Learn how Waymark Markers are displayed, including icons, markup and CSS customisation.","md",{},"\u002Fcustomising\u002Fmarkers",{"title":5,"description":728},"customising\u002Fmarkers","vRX6mF0F69JcxWP2Hq8dN8T5BLFUOkIyPrlBYb1cal0",[736,755,769,807,817,821],{"title":737,"path":738,"stem":739,"children":740},"Advanced","\u002Fadvanced","advanced",[741,743,747,751],{"title":737,"path":738,"stem":742},"advanced\u002Findex",{"title":744,"path":745,"stem":746},"Debug Mode","\u002Fadvanced\u002Fdebug-mode","advanced\u002Fdebug-mode",{"title":748,"path":749,"stem":750},"Import\u002FExport\u002FMove Waymark Data","\u002Fadvanced\u002Fimport-export-move-waymark-data","advanced\u002Fimport-export-move-waymark-data",{"title":752,"path":753,"stem":754},"Using the Global Callback Function","\u002Fadvanced\u002Fusing-the-global-callback-function","advanced\u002Fusing-the-global-callback-function",{"title":756,"path":757,"stem":758,"children":759},"Customising","\u002Fcustomising","customising\u002Findex",[760,761,762,766],{"title":756,"path":757,"stem":758},{"title":5,"path":731,"stem":733},{"title":763,"path":764,"stem":765},"Settings","\u002Fcustomising\u002Fsettings","customising\u002Fsettings",{"title":716,"path":767,"stem":768},"\u002Fcustomising\u002Fstyling-with-css-selectors","customising\u002Fstyling-with-css-selectors",{"title":770,"path":771,"stem":772,"children":773},"Examples","\u002Fexamples","examples",[774,776,780,784,788,792,796,800,804],{"title":770,"path":771,"stem":775},"examples\u002Findex",{"title":777,"path":778,"stem":779},"Elevation Profile Colours","\u002Fexamples\u002Felevation-profile-colours","examples\u002Felevation-profile-colours",{"title":781,"path":782,"stem":783},"Hide Locate Button","\u002Fexamples\u002Fhide-locate-button","examples\u002Fhide-locate-button",{"title":785,"path":786,"stem":787},"Hide Tooltip Type Labels","\u002Fexamples\u002Fhide-tooltip-type-labels","examples\u002Fhide-tooltip-type-labels",{"title":789,"path":790,"stem":791},"Hiding Map Controls","\u002Fexamples\u002Fhiding-map-controls","examples\u002Fhiding-map-controls",{"title":793,"path":794,"stem":795},"Marker Without Background","\u002Fexamples\u002Fmarker-without-background","examples\u002Fmarker-without-background",{"title":797,"path":798,"stem":799},"Move the Locate Button","\u002Fexamples\u002Fmove-the-locate-button","examples\u002Fmove-the-locate-button",{"title":801,"path":802,"stem":803},"Show\u002FHide Types Initially","\u002Fexamples\u002Fshow-hide-types-initially","examples\u002Fshow-hide-types-initially",{"title":148,"path":805,"stem":806},"\u002Fexamples\u002Ftext-markers","examples\u002Ftext-markers",{"title":808,"path":809,"stem":810,"children":811},"Features","\u002Ffeatures","features\u002Findex",[812,813],{"title":808,"path":809,"stem":810},{"title":814,"path":815,"stem":816},"Submissions","\u002Ffeatures\u002Fsubmissions","features\u002Fsubmissions",{"title":818,"path":819,"stem":820},"Help","\u002F","index",{"title":822,"path":823,"stem":824,"children":825},"Tutorials","\u002Ftutorials","tutorials",[826,828,832],{"title":822,"path":823,"stem":827},"tutorials\u002Findex",{"title":829,"path":830,"stem":831},"Creating Your First Map","\u002Ftutorials\u002Fcreating-your-first-map","tutorials\u002Fcreating-your-first-map",{"title":833,"path":834,"stem":835},"Drawing a Route","\u002Ftutorials\u002Fdrawing-a-route","tutorials\u002Fdrawing-a-route",[837,838],{"title":756,"path":757,"stem":758,"children":-1},{"title":763,"path":764,"stem":765,"children":-1},1793659144647]