[{"data":1,"prerenderedAt":392},["ShallowReactive",2],{"docs-page-\u002Fadvanced\u002Fusing-the-global-callback-function":3,"docs-navigation":286,"docs-surroundings-\u002Fadvanced\u002Fusing-the-global-callback-function":389},{"id":4,"title":5,"body":6,"description":279,"extension":280,"meta":281,"navigation":131,"path":282,"seo":283,"stem":284,"__hash__":285},"docs\u002Fadvanced\u002Fusing-the-global-callback-function.md","Using the Global Callback Function",{"type":7,"value":8,"toc":277},"minimark",[9,13,18,21,32,39,42,273],[10,11,12],"p",{},"Clicking on the “Refresh” icon located bottom right of the Map will reset the Map’s view so all Overlays on the Map are visible.",[14,15],"map-demo",{"demo":16,"height":17},"using-the-global-callback-function",640,[10,19,20],{},"To achieve this, we add the Waymark Shortcode to our page:",[22,23,28],"pre",{"className":24,"code":26,"language":27},[25],"language-text","Waymark map_id=\"1647\"\n","text",[29,30,26],"code",{"__ignoreMap":31},"",[10,33,34,35,38],{},"We then need to define the callback function, ",[29,36,37],{},"waymark_loaded_callback",". This accepts a single argument, which is the Waymark Map instance. It will be called once the Map has loaded.",[10,40,41],{},"Once defined on your page (accessible in the global scope), we can use the instance object to perform additional actions. In this case, we are adding a button with a click event listener:",[22,43,47],{"className":44,"code":45,"language":46,"meta":31,"style":31},"language-js shiki shiki-themes github-light github-dark","\u002F\u002FOur callback function\nfunction waymark_loaded_callback(Waymark) {\n  \u002F\u002FGet the container\n  let container = jQuery(\n    \".leaflet-bottom.leaflet-right\",\n    Waymark.jq_map_container,\n  );\n\n  \u002F\u002FCreate a button\n  let button = jQuery(\"\u003Cdiv \u002F>\")\n    .addClass(\"waymark-refresh leaflet-bar leaflet-control\")\n    .html(\n      '\u003Ca title=\"Reset Map\">\u003Cspan class=\"ion ion-android-refresh\" style=\"cursor:pointer;margin-top:5px;font-size:20px\">\u003C\u002Fspan>\u003C\u002Fa>',\n    )\n    .on(\"click\", function () {\n      \u002F\u002FReset view when clicked\n      Waymark.reset_map_view();\n    });\n\n  \u002F\u002FAdd to page\n  container.prepend(button);\n}\n","js",[29,48,49,58,80,86,104,114,120,126,133,139,159,175,185,193,199,220,226,238,244,249,255,267],{"__ignoreMap":31},[50,51,54],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sJ8bj","\u002F\u002FOur callback function\n",[50,59,61,65,69,73,77],{"class":52,"line":60},2,[50,62,64],{"class":63},"szBVR","function",[50,66,68],{"class":67},"sScJk"," waymark_loaded_callback",[50,70,72],{"class":71},"sVt8B","(",[50,74,76],{"class":75},"s4XuR","Waymark",[50,78,79],{"class":71},") {\n",[50,81,83],{"class":52,"line":82},3,[50,84,85],{"class":56},"  \u002F\u002FGet the container\n",[50,87,89,92,95,98,101],{"class":52,"line":88},4,[50,90,91],{"class":63},"  let",[50,93,94],{"class":71}," container ",[50,96,97],{"class":63},"=",[50,99,100],{"class":67}," jQuery",[50,102,103],{"class":71},"(\n",[50,105,107,111],{"class":52,"line":106},5,[50,108,110],{"class":109},"sZZnC","    \".leaflet-bottom.leaflet-right\"",[50,112,113],{"class":71},",\n",[50,115,117],{"class":52,"line":116},6,[50,118,119],{"class":71},"    Waymark.jq_map_container,\n",[50,121,123],{"class":52,"line":122},7,[50,124,125],{"class":71},"  );\n",[50,127,129],{"class":52,"line":128},8,[50,130,132],{"emptyLinePlaceholder":131},true,"\n",[50,134,136],{"class":52,"line":135},9,[50,137,138],{"class":56},"  \u002F\u002FCreate a button\n",[50,140,142,144,147,149,151,153,156],{"class":52,"line":141},10,[50,143,91],{"class":63},[50,145,146],{"class":71}," button ",[50,148,97],{"class":63},[50,150,100],{"class":67},[50,152,72],{"class":71},[50,154,155],{"class":109},"\"\u003Cdiv \u002F>\"",[50,157,158],{"class":71},")\n",[50,160,162,165,168,170,173],{"class":52,"line":161},11,[50,163,164],{"class":71},"    .",[50,166,167],{"class":67},"addClass",[50,169,72],{"class":71},[50,171,172],{"class":109},"\"waymark-refresh leaflet-bar leaflet-control\"",[50,174,158],{"class":71},[50,176,178,180,183],{"class":52,"line":177},12,[50,179,164],{"class":71},[50,181,182],{"class":67},"html",[50,184,103],{"class":71},[50,186,188,191],{"class":52,"line":187},13,[50,189,190],{"class":109},"      '\u003Ca title=\"Reset Map\">\u003Cspan class=\"ion ion-android-refresh\" style=\"cursor:pointer;margin-top:5px;font-size:20px\">\u003C\u002Fspan>\u003C\u002Fa>'",[50,192,113],{"class":71},[50,194,196],{"class":52,"line":195},14,[50,197,198],{"class":71},"    )\n",[50,200,202,204,207,209,212,215,217],{"class":52,"line":201},15,[50,203,164],{"class":71},[50,205,206],{"class":67},"on",[50,208,72],{"class":71},[50,210,211],{"class":109},"\"click\"",[50,213,214],{"class":71},", ",[50,216,64],{"class":63},[50,218,219],{"class":71}," () {\n",[50,221,223],{"class":52,"line":222},16,[50,224,225],{"class":56},"      \u002F\u002FReset view when clicked\n",[50,227,229,232,235],{"class":52,"line":228},17,[50,230,231],{"class":71},"      Waymark.",[50,233,234],{"class":67},"reset_map_view",[50,236,237],{"class":71},"();\n",[50,239,241],{"class":52,"line":240},18,[50,242,243],{"class":71},"    });\n",[50,245,247],{"class":52,"line":246},19,[50,248,132],{"emptyLinePlaceholder":131},[50,250,252],{"class":52,"line":251},20,[50,253,254],{"class":56},"  \u002F\u002FAdd to page\n",[50,256,258,261,264],{"class":52,"line":257},21,[50,259,260],{"class":71},"  container.",[50,262,263],{"class":67},"prepend",[50,265,266],{"class":71},"(button);\n",[50,268,270],{"class":52,"line":269},22,[50,271,272],{"class":71},"}\n",[274,275,276],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":31,"searchDepth":60,"depth":82,"links":278},[],"Adding a “Refresh” button to the Map.","md",{},"\u002Fadvanced\u002Fusing-the-global-callback-function",{"title":5,"description":279},"advanced\u002Fusing-the-global-callback-function","NC7E9pnCBsaK3WTQagv7nf1Sd2HRKB4Chvstu_a_i0M",[287,303,321,360,370,374],{"title":288,"path":289,"stem":290,"children":291},"Advanced","\u002Fadvanced","advanced",[292,294,298,302],{"title":288,"path":289,"stem":293},"advanced\u002Findex",{"title":295,"path":296,"stem":297},"Debug Mode","\u002Fadvanced\u002Fdebug-mode","advanced\u002Fdebug-mode",{"title":299,"path":300,"stem":301},"Import\u002FExport\u002FMove Waymark Data","\u002Fadvanced\u002Fimport-export-move-waymark-data","advanced\u002Fimport-export-move-waymark-data",{"title":5,"path":282,"stem":284},{"title":304,"path":305,"stem":306,"children":307},"Customising","\u002Fcustomising","customising\u002Findex",[308,309,313,317],{"title":304,"path":305,"stem":306},{"title":310,"path":311,"stem":312},"Markers","\u002Fcustomising\u002Fmarkers","customising\u002Fmarkers",{"title":314,"path":315,"stem":316},"Settings","\u002Fcustomising\u002Fsettings","customising\u002Fsettings",{"title":318,"path":319,"stem":320},"Styling With CSS Selectors","\u002Fcustomising\u002Fstyling-with-css-selectors","customising\u002Fstyling-with-css-selectors",{"title":322,"path":323,"stem":324,"children":325},"Examples","\u002Fexamples","examples",[326,328,332,336,340,344,348,352,356],{"title":322,"path":323,"stem":327},"examples\u002Findex",{"title":329,"path":330,"stem":331},"Elevation Profile Colours","\u002Fexamples\u002Felevation-profile-colours","examples\u002Felevation-profile-colours",{"title":333,"path":334,"stem":335},"Hide Locate Button","\u002Fexamples\u002Fhide-locate-button","examples\u002Fhide-locate-button",{"title":337,"path":338,"stem":339},"Hide Tooltip Type Labels","\u002Fexamples\u002Fhide-tooltip-type-labels","examples\u002Fhide-tooltip-type-labels",{"title":341,"path":342,"stem":343},"Hiding Map Controls","\u002Fexamples\u002Fhiding-map-controls","examples\u002Fhiding-map-controls",{"title":345,"path":346,"stem":347},"Marker Without Background","\u002Fexamples\u002Fmarker-without-background","examples\u002Fmarker-without-background",{"title":349,"path":350,"stem":351},"Move the Locate Button","\u002Fexamples\u002Fmove-the-locate-button","examples\u002Fmove-the-locate-button",{"title":353,"path":354,"stem":355},"Show\u002FHide Types Initially","\u002Fexamples\u002Fshow-hide-types-initially","examples\u002Fshow-hide-types-initially",{"title":357,"path":358,"stem":359},"Text Markers","\u002Fexamples\u002Ftext-markers","examples\u002Ftext-markers",{"title":361,"path":362,"stem":363,"children":364},"Features","\u002Ffeatures","features\u002Findex",[365,366],{"title":361,"path":362,"stem":363},{"title":367,"path":368,"stem":369},"Submissions","\u002Ffeatures\u002Fsubmissions","features\u002Fsubmissions",{"title":371,"path":372,"stem":373},"Help","\u002F","index",{"title":375,"path":376,"stem":377,"children":378},"Tutorials","\u002Ftutorials","tutorials",[379,381,385],{"title":375,"path":376,"stem":380},"tutorials\u002Findex",{"title":382,"path":383,"stem":384},"Creating Your First Map","\u002Ftutorials\u002Fcreating-your-first-map","tutorials\u002Fcreating-your-first-map",{"title":386,"path":387,"stem":388},"Drawing a Route","\u002Ftutorials\u002Fdrawing-a-route","tutorials\u002Fdrawing-a-route",[390,391],{"title":299,"path":300,"stem":301,"children":-1},{"title":304,"path":305,"stem":306,"children":-1},1793659144817]