const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); editor_mode = urlParams.has('editor'); if (editor_mode) { var draw_layer; var polyline; var edit_active = 0; function resolve_latlng(latlng, recenter = 0) { latlng.lng = Math.round(latlng.lng); latlng.lat = Math.round(latlng.lat); return latlng; } function start_editing(e) { // TODO: Check whether we already are in edit mode // TODO: Detect whether we are cloner to the tail or the head, and issue Fwd or Bwd accordingly if (polyline) polyline.editor.continueForward(); else polyline = mymap.editTools.startPolyline(); } function strToPoints(str) { var temp = JSON.parse("[" + str + "]"); // TODO: add .5 everwhere return temp; } function onDragEnd(e) { if (!polyline) return; var latlngs = polyline.getLatLngs(); for (var i = 0; i < latlngs.length; i++) { latlngs[i] = resolve_latlng(latlngs[i], 1); } polyline.editor.refresh(); polyline.editor.refreshVertexMarkers(); location.hash = get_location_string(); } function onLoad(interactive = 1) { if (interactive) { str = prompt("Instructions: \n" + "* Click the scribble-icon in the top left to start or continue drawing.\n" + "* Double click last waypoint to stop.\n" + "* Double click a waypoint to delete it.\n" + "* Click save in the top right to get the new string.\n\n" + "Enter existing waypoints in the following format: [x,y],[x,y]:", window.location.hash.slice(1)); } else { str = window.location.hash.slice(1); } if (str) { coords = strToPoints(str); for (var i = 0; i < coords.length; i++) { coords[i] = [coords[i][1], coords[i][0]]; } polyline = L.polyline(coords).addTo(mymap); // polyline.on('dragend', onDragEnd); // TODO: Doesn't work, see "workaround" below polyline.enableEdit(); } } function editor_onHashChange() { if (("#" + get_location_string()) != window.location.hash) { polyline.remove(mymap); onLoad(0); } } window.removeEventListener("hashchange", onHashChange, false); window.addEventListener("hashchange", editor_onHashChange, false); window.addEventListener("mouseup", onDragEnd, false); // Workaround as polyline.on(dragend, ) doesn't seem to work // Configure map for better editing document.getElementById('mapid').classList.add("no-aa"); mymap.setMaxZoom(14); mymap.off('click', onMapClick); onLoad(); function get_location_string() { var latlngs = polyline.getLatLngs(); var str = ""; for (var i = 0; i < latlngs.length; i++) { latlng = resolve_latlng(latlngs[i], 1); if (i != 0) str += ","; str += "[" + (latlng.lng) + "," + (latlng.lat) + "]"; } return str; } function show_location_string(e) { prompt("Copy this string back into the Wiki and wait for a few hours:", get_location_string()); } L.EditControl = L.Control.extend({ options: { position: 'topleft', callback: null, kind: '', html: '' }, onAdd: function (map) { var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'), link = L.DomUtil.create('a', '', container); link.href = '#'; link.title = this.options.title; link.innerHTML = this.options.html; L.DomEvent.on(link, 'click', L.DomEvent.stop) .on(link, 'click', function () { window.LAYER = this.options.callback.call(map.editTools); }, this); return container; } }); L.StartEditControl = L.EditControl.extend({ options: { position: 'topleft', callback: start_editing, title: 'Start editing', html: '\\/\\' } }); L.NewLineControl = L.EditControl.extend({ options: { position: 'topleft', callback: show_location_string, title: 'Get location string', html: '💾' } }); mymap.addControl(new L.NewLineControl()); mymap.addControl(new L.StartEditControl()); }