Route tools

Route tools is a bookmarklet that can be used to create or edit boat or FRS routes on the map.

Installation

1. Create a new bookmark in your bookmarks toolbar
2. Set 'location' to the following URI:

javascript:(function(){var e,t,o,l=[].indexOf;o=(e=>(null==this._required&&(this._required=[]),l.call(this._required,e)>=0?Promise.resolve(e):new Promise((t,o)=>{var l;(l=document.createElement("script")).src=`//unpkg.com/${e}`,l.onload=(()=>{this._required.push(e),t(e)}),l.onerror=o,document.body.appendChild(l)}))),t=(e=>e.on("click",L.DomEvent.stop).on("click",()=>{e.editor?(e.disableEdit(),alert(JSON.stringify(e.encodePath()))):e.enableEdit()}).on("editable:vertex:ctrlclick editable:vertex:metakeyclick",e=>{e.vertex.continue()})),e=L.Control.extend({options:{position:"topleft"},onAdd:e=>{var o,l;return o=L.DomUtil.create("div","leaflet-control leaflet-bar"),(l=L.DomUtil.create("a","",o)).href="#",l.title="Create new route",l.textContent="/\\/",L.DomEvent.on(l,"click",L.DomEvent.stop).on(l,"click",()=>{var o;o=e.editTools.startPolyline(null,{color:prompt("Route colour","")}),t(o)}),o}}),Promise.all([o("polyline-encoded"),o("leaflet-editable")]).then(()=>{var o;(o=overviewer.map).editTools=new L.Editable(o),o.addControl(new e),o.eachLayer(e=>{e instanceof L.Polyline&&!e.options.dashArray&&t(e)})})}).call(this);

Usage

TODO

Code

require = (pkg) =>
    @_required ?= []
    if pkg in @_required
        Promise.resolve pkg
    else
        new Promise (resolve, reject) =>
            script = document.createElement 'script'
            script.src = "//unpkg.com/#{pkg}"
            script.onload = =>
                @_required.push pkg
                resolve pkg
                return
            script.onerror = reject
            document.body.appendChild script
            return

addEvents = (line) =>
    line
        .on 'click', L.DomEvent.stop
        .on 'click', =>
            if line.editor
                line.disableEdit()
                alert JSON.stringify line.encodePath()
            else
                line.enableEdit()
            return
        .on 'editable:vertex:ctrlclick editable:vertex:metakeyclick', (e) =>
            e.vertex.continue()
            return

NewRoute = L.Control.extend
    options:
        position: 'topleft'

    onAdd: (map) =>
        container = L.DomUtil.create 'div', 'leaflet-control leaflet-bar'
        link = L.DomUtil.create 'a', , container
        
        link.href = '#'
        link.title = 'Create new route'
        link.textContent = '/\\/'

        L.DomEvent
            .on link, 'click', L.DomEvent.stop
            .on link, 'click', =>
                line = map.editTools.startPolyline null,
                        color: prompt "Route colour", ""
                addEvents line
                return

        container


Promise.all [require("polyline-encoded"), require("leaflet-editable")]
    .then =>
        map = overviewer.map
        map.editTools = new L.Editable map
        map.addControl new NewRoute()
        map.eachLayer (layer) =>
            if layer instanceof L.Polyline and not layer.options.dashArray
                addEvents layer
            return
        return