[{"data":1,"prerenderedAt":267},["ShallowReactive",2],{"docs-page-\u002Ftutorials\u002Fdrawing-a-route":3,"docs-navigation":162,"docs-surroundings-\u002Ftutorials\u002Fdrawing-a-route":264},{"id":4,"title":5,"body":6,"description":154,"extension":155,"meta":156,"navigation":157,"path":158,"seo":159,"stem":160,"__hash__":161},"docs\u002Ftutorials\u002Fdrawing-a-route.md","Drawing a Route",{"type":7,"value":8,"toc":145},"minimark",[9,13,22,27,30,35,38,41,51,56,61,65,68,74,79,83,86,91,96,101,105,108,113,118,123,127,130,135,140],[10,11,12],"p",{},"You will be guided through navigating to the Map Editor, drawing a Route on the Map and adding a Description for that Route.",[10,14,15,16,21],{},"This tutorial assumes you have a WordPress site (self-hosted) and have created your first Map. Follow the ",[17,18,20],"a",{"href":19},"\u002Ftutorials\u002Fcreating-your-first-map\u002F","Creating Your First Map"," tutorial to learn how to create a Map.",[23,24],"map-demo",{"demo":25,"height":26},"drawing-a-route",300,[10,28,29],{},"This Map illustrates the end result. Try clicking on the Line to view the Description.",[31,32,34],"h2",{"id":33},"_1-open-the-map-editor","1. Open the Map Editor",[10,36,37],{},"In this step we are going to open the Map Editor.",[10,39,40],{},"When logged in to WordPress admin, you can either open the Map Editor whilst viewing a Map on the front-end, or by selecting it from the Waymark > Maps admin screen.",[42,43],"docs-figure",{":height":44,":width":45,"alt":46,"caption":47,"sizes":48,"src":49,"srcSet":50},"658","1024","","If you are viewing your published Map, click “Edit Map” to open the Editor.","(max-width: 1024px) 100vw, 1024px","\u002Fassets\u002Fimg\u002Ffirst-map-step-16-1024x658.jpg","\u002Fassets\u002Fimg\u002Ffirst-map-step-16-1024x658.jpg 1024w, \u002Fassets\u002Fimg\u002Ffirst-map-step-16-700x450.jpg 700w, \u002Fassets\u002Fimg\u002Ffirst-map-step-16-768x494.jpg 768w, \u002Fassets\u002Fimg\u002Ffirst-map-step-16-1536x988.jpg 1536w, \u002Fassets\u002Fimg\u002Ffirst-map-step-16.jpg 2000w",[42,52],{":height":44,":width":45,"alt":46,"caption":53,"sizes":48,"src":54,"srcSet":55},"From admin, click the “Waymark > Maps” admin menu link to view a list of all of your Maps.","\u002Fassets\u002Fimg\u002Ffirst-map-step-17-1024x658.jpg","\u002Fassets\u002Fimg\u002Ffirst-map-step-17-1024x658.jpg 1024w, \u002Fassets\u002Fimg\u002Ffirst-map-step-17-700x450.jpg 700w, \u002Fassets\u002Fimg\u002Ffirst-map-step-17-768x494.jpg 768w, \u002Fassets\u002Fimg\u002Ffirst-map-step-17-1536x988.jpg 1536w, \u002Fassets\u002Fimg\u002Ffirst-map-step-17.jpg 2000w",[42,57],{":height":44,":width":45,"alt":46,"caption":58,"sizes":48,"src":59,"srcSet":60},"Click the Map title to open the Editor.","\u002Fassets\u002Fimg\u002Fdraw-route-3-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-3-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-3-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-3-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-3-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-3.png 2000w",[31,62,64],{"id":63},"_2-select-the-line-tool","2. Select the Line tool",[10,66,67],{},"Now we are going to select the Line tool from the toolbar.",[42,69],{":height":44,":width":45,"alt":46,"caption":70,"sizes":71,"src":72,"srcSet":73},"Scroll down to view the Map. Click on the top-left minus symbol “-” to zoom out. Do this until you can view both sides of the river.","auto, (max-width: 1024px) 100vw, 1024px","\u002Fassets\u002Fimg\u002Fdraw-route-5-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-5-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-5-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-5-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-5-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-5.png 2000w",[42,75],{":height":44,":width":45,"alt":46,"caption":76,"sizes":71,"src":77,"srcSet":78},"Next, click on the Line tool, which is the first button on the Editor toolbar. With the Line tool activated, the cursor should now look like cross-hairs.","\u002Fassets\u002Fimg\u002Fdraw-route-5-1-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-5-1-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-5-1-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-5-1-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-5-1-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-5-1.png 2000w",[31,80,82],{"id":81},"_3-creating-a-line","3. Creating a Line",[10,84,85],{},"Now we can draw a Line by clicking on the Map.",[42,87],{":height":44,":width":45,"alt":46,"caption":88,"sizes":71,"src":89,"srcSet":90},"Each click on the Map will add to the current Line, with each point appearing as a small white box. First, click on the South side of the river to start the Line. Next, click on the road going over the bridge, then to the North side of the river.","\u002Fassets\u002Fimg\u002Fdraw-route-6-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-6-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-6-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-6-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-6-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-6.png 2000w",[42,92],{":height":44,":width":45,"alt":46,"caption":93,"sizes":71,"src":94,"srcSet":95},"Finally, extend the Line to the East. Now, click the last point added (white box) to complete the Line.","\u002Fassets\u002Fimg\u002Fdraw-route-7-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-7-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-7-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-7-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-7-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-7.png 2000w",[42,97],{":height":44,":width":45,"alt":46,"caption":98,"sizes":71,"src":99,"srcSet":100},"Once the Line has been completed, the small white boxes will be removed and the cursor will return to a hand – indicating that the Line tool is no longer active.","\u002Fassets\u002Fimg\u002Fdraw-route-8-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-8-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-8-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-8-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-8-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-8.png 2000w",[31,102,104],{"id":103},"_4-adding-a-description","4. Adding a Description",[10,106,107],{},"We can add information about the Line in the Overlay editor popup.",[42,109],{":height":44,":width":45,"alt":46,"caption":110,"sizes":71,"src":111,"srcSet":112},"Hover over the Line you just created, your cursor will turn from a hand into a pointing hand. Click the Line to open the Overlay editor popup.","\u002Fassets\u002Fimg\u002Fdraw-route-9-1-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-9-1-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-9-1-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-9-1-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-9-1-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-9-1.png 2000w",[42,114],{":height":44,":width":45,"alt":46,"caption":115,"sizes":71,"src":116,"srcSet":117},"Provide a title and description for the Line by entering them into the appropriate text fields.","\u002Fassets\u002Fimg\u002Fdraw-route-9-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-9-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-9-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-9-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-9-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-9.png 2000w",[42,119],{":height":44,":width":45,"alt":46,"caption":120,"sizes":71,"src":121,"srcSet":122},"Click on the green line to the left of the popup to change the Line colour to green.","\u002Fassets\u002Fimg\u002Fdraw-route-10-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-10-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-10-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-10-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-10-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-10.png 2000w",[31,124,126],{"id":125},"_5-updating-and-viewing-the-map","5. Updating and Viewing the Map",[10,128,129],{},"It’s time to view our changes on the front-end.",[42,131],{":height":44,":width":45,"alt":46,"caption":132,"sizes":71,"src":133,"srcSet":134},"Click on the “Update” button to the right of the screen to save the Map. Next, click on the permalink to view the Map.","\u002Fassets\u002Fimg\u002Fdraw-route-12-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-12-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-12-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-12-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-12-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-12.png 2000w",[42,136],{":height":44,":width":45,"alt":46,"caption":137,"sizes":71,"src":138,"srcSet":139},"From the front-end of your site, hover over the Line to see it’s Title.","\u002Fassets\u002Fimg\u002Fdraw-route-13-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-13-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-13-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-13-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-13-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-13.png 2000w",[42,141],{":height":44,":width":45,"alt":46,"caption":142,"sizes":71,"src":143,"srcSet":144},"Whilst still hovering over the Line, click it to view the Line title and description in a popup.","\u002Fassets\u002Fimg\u002Fdraw-route-14-1024x658.png","\u002Fassets\u002Fimg\u002Fdraw-route-14-1024x658.png 1024w, \u002Fassets\u002Fimg\u002Fdraw-route-14-700x450.png 700w, \u002Fassets\u002Fimg\u002Fdraw-route-14-768x494.png 768w, \u002Fassets\u002Fimg\u002Fdraw-route-14-1536x988.png 1536w, \u002Fassets\u002Fimg\u002Fdraw-route-14.png 2000w",{"title":46,"searchDepth":146,"depth":147,"links":148},2,3,[149,150,151,152,153],{"id":33,"depth":146,"text":34},{"id":63,"depth":146,"text":64},{"id":81,"depth":146,"text":82},{"id":103,"depth":146,"text":104},{"id":125,"depth":146,"text":126},"In this tutorial we will use Waymark to create a Route.","md",{},true,"\u002Ftutorials\u002Fdrawing-a-route",{"title":5,"description":154},"tutorials\u002Fdrawing-a-route","2aGv_UyUpcfvLxTNQDuFJwhXrvipqKgmwWmyCoLWBcs",[163,182,200,239,249,253],{"title":164,"path":165,"stem":166,"children":167},"Advanced","\u002Fadvanced","advanced",[168,170,174,178],{"title":164,"path":165,"stem":169},"advanced\u002Findex",{"title":171,"path":172,"stem":173},"Debug Mode","\u002Fadvanced\u002Fdebug-mode","advanced\u002Fdebug-mode",{"title":175,"path":176,"stem":177},"Import\u002FExport\u002FMove Waymark Data","\u002Fadvanced\u002Fimport-export-move-waymark-data","advanced\u002Fimport-export-move-waymark-data",{"title":179,"path":180,"stem":181},"Using the Global Callback Function","\u002Fadvanced\u002Fusing-the-global-callback-function","advanced\u002Fusing-the-global-callback-function",{"title":183,"path":184,"stem":185,"children":186},"Customising","\u002Fcustomising","customising\u002Findex",[187,188,192,196],{"title":183,"path":184,"stem":185},{"title":189,"path":190,"stem":191},"Markers","\u002Fcustomising\u002Fmarkers","customising\u002Fmarkers",{"title":193,"path":194,"stem":195},"Settings","\u002Fcustomising\u002Fsettings","customising\u002Fsettings",{"title":197,"path":198,"stem":199},"Styling With CSS Selectors","\u002Fcustomising\u002Fstyling-with-css-selectors","customising\u002Fstyling-with-css-selectors",{"title":201,"path":202,"stem":203,"children":204},"Examples","\u002Fexamples","examples",[205,207,211,215,219,223,227,231,235],{"title":201,"path":202,"stem":206},"examples\u002Findex",{"title":208,"path":209,"stem":210},"Elevation Profile Colours","\u002Fexamples\u002Felevation-profile-colours","examples\u002Felevation-profile-colours",{"title":212,"path":213,"stem":214},"Hide Locate Button","\u002Fexamples\u002Fhide-locate-button","examples\u002Fhide-locate-button",{"title":216,"path":217,"stem":218},"Hide Tooltip Type Labels","\u002Fexamples\u002Fhide-tooltip-type-labels","examples\u002Fhide-tooltip-type-labels",{"title":220,"path":221,"stem":222},"Hiding Map Controls","\u002Fexamples\u002Fhiding-map-controls","examples\u002Fhiding-map-controls",{"title":224,"path":225,"stem":226},"Marker Without Background","\u002Fexamples\u002Fmarker-without-background","examples\u002Fmarker-without-background",{"title":228,"path":229,"stem":230},"Move the Locate Button","\u002Fexamples\u002Fmove-the-locate-button","examples\u002Fmove-the-locate-button",{"title":232,"path":233,"stem":234},"Show\u002FHide Types Initially","\u002Fexamples\u002Fshow-hide-types-initially","examples\u002Fshow-hide-types-initially",{"title":236,"path":237,"stem":238},"Text Markers","\u002Fexamples\u002Ftext-markers","examples\u002Ftext-markers",{"title":240,"path":241,"stem":242,"children":243},"Features","\u002Ffeatures","features\u002Findex",[244,245],{"title":240,"path":241,"stem":242},{"title":246,"path":247,"stem":248},"Submissions","\u002Ffeatures\u002Fsubmissions","features\u002Fsubmissions",{"title":250,"path":251,"stem":252},"Help","\u002F","index",{"title":254,"path":255,"stem":256,"children":257},"Tutorials","\u002Ftutorials","tutorials",[258,260,263],{"title":254,"path":255,"stem":259},"tutorials\u002Findex",{"title":20,"path":261,"stem":262},"\u002Ftutorials\u002Fcreating-your-first-map","tutorials\u002Fcreating-your-first-map",{"title":5,"path":158,"stem":160},[265,266],{"title":20,"path":261,"stem":262,"children":-1},null,1793659144647]