Add street editor
Accessible by setting ?editor
This commit is contained in:
parent
2f36f266bf
commit
de3a4fc757
@ -13,6 +13,8 @@
|
|||||||
<script src='https://rawcdn.githack.com/Viglino/Canvas-TextPath/9a757d745071e0eaf2440a1d02117dad38f5b6dd/ctxtextpath.js'></script>
|
<script src='https://rawcdn.githack.com/Viglino/Canvas-TextPath/9a757d745071e0eaf2440a1d02117dad38f5b6dd/ctxtextpath.js'></script>
|
||||||
<script src='https://rawcdn.githack.com/yakitoritabetai/Leaflet.LabelTextCollision/90fe755cc7ec5d97b71e2e953464fa5369d6e655/dist/L.LabelTextCollision.js'></script>
|
<script src='https://rawcdn.githack.com/yakitoritabetai/Leaflet.LabelTextCollision/90fe755cc7ec5d97b71e2e953464fa5369d6e655/dist/L.LabelTextCollision.js'></script>
|
||||||
<script src='https://raw.githack.com/triedeti/Leaflet.streetlabels/master/src/Leaflet.streetlabels.js'></script>
|
<script src='https://raw.githack.com/triedeti/Leaflet.streetlabels/master/src/Leaflet.streetlabels.js'></script>
|
||||||
|
<!-- Map Editor -->
|
||||||
|
<script src='leafletjs/Leaflet.Editable.js'></script>
|
||||||
</head>
|
</head>
|
||||||
<body style="position: absolute; padding: 0px; margin: 0px; width:100%; height:100%;">
|
<body style="position: absolute; padding: 0px; margin: 0px; width:100%; height:100%;">
|
||||||
<div id="mapid" style="width: 100%; height: 100%;"></div>
|
<div id="mapid" style="width: 100%; height: 100%;"></div>
|
||||||
@ -31,7 +33,18 @@
|
|||||||
a.new {
|
a.new {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-aa img[role=presentation] {
|
||||||
|
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
|
||||||
|
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||||
|
image-rendering: -o-crisp-edges; /* Opera */
|
||||||
|
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
|
||||||
|
image-rendering: pixelated; /* Chrome */
|
||||||
|
image-rendering: optimize-contrast; /* CSS3 Proposed */
|
||||||
|
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="mapscript.js"></script>
|
<script src="mapscript.js"></script>
|
||||||
|
<script src="streeteditor.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
1946
htdocs/leafletjs/Leaflet.Editable.js
Normal file
1946
htdocs/leafletjs/Leaflet.Editable.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,4 @@
|
|||||||
|
var mymap;
|
||||||
var streetLabelsRenderer = new L.StreetLabels({
|
var streetLabelsRenderer = new L.StreetLabels({
|
||||||
collisionFlg: true,
|
collisionFlg: true,
|
||||||
propertyName: 'name',
|
propertyName: 'name',
|
||||||
@ -43,8 +44,9 @@ L.CRS.pr = L.extend({}, L.CRS.Simple, {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Init map
|
// Init map
|
||||||
var mymap = L.map('mapid', {
|
mymap = L.map('mapid', {
|
||||||
renderer: streetLabelsRenderer,
|
renderer: streetLabelsRenderer,
|
||||||
|
editable: true,
|
||||||
crs: L.CRS.pr
|
crs: L.CRS.pr
|
||||||
}).setView([0, 0], 6);
|
}).setView([0, 0], 6);
|
||||||
|
|
||||||
@ -83,7 +85,7 @@ function load_svg(name, url, active=1) {
|
|||||||
|
|
||||||
function load_tiles(name, id) {
|
function load_tiles(name, id) {
|
||||||
var satellite = L.tileLayer('https://notsyncing.net/maps.linux-forks.de/tiles/?id={id}&z={z}&x={x}&y={y}', {
|
var satellite = L.tileLayer('https://notsyncing.net/maps.linux-forks.de/tiles/?id={id}&z={z}&x={x}&y={y}', {
|
||||||
maxZoom: 8,
|
maxZoom: 14 /*8*/,
|
||||||
maxNativeZoom: 6,
|
maxNativeZoom: 6,
|
||||||
minNativeZoom: 0,
|
minNativeZoom: 0,
|
||||||
minZoom: 0,
|
minZoom: 0,
|
||||||
|
|||||||
147
htdocs/streeteditor.js
Normal file
147
htdocs/streeteditor.js
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
const queryString = window.location.search;
|
||||||
|
const urlParams = new URLSearchParams(queryString);
|
||||||
|
if (urlParams.has('editor')) {
|
||||||
|
var draw_layer;
|
||||||
|
var polyline;
|
||||||
|
|
||||||
|
var edit_active = 0;
|
||||||
|
|
||||||
|
function resolve_latlng(latlng, recenter = 0) {
|
||||||
|
var corr;
|
||||||
|
if (recenter)
|
||||||
|
corr = 0.5;
|
||||||
|
else
|
||||||
|
corr = 0;
|
||||||
|
latlng.lng = Math.round(latlng.lng - 0.5) + corr;
|
||||||
|
latlng.lat = Math.round(latlng.lat - 0.5) + corr;
|
||||||
|
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
|
||||||
|
console.log(temp);
|
||||||
|
return temp;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDragEnd(e) {
|
||||||
|
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 onHashChange() {
|
||||||
|
if (("#" + get_location_string()) != window.location.hash) {
|
||||||
|
polyline.remove(mymap);
|
||||||
|
onLoad(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("hashchange", 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);
|
||||||
|
//mymap.setOpacity(0.7);
|
||||||
|
|
||||||
|
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 - 0.5) + "," + (latlng.lat - 0.5) + "]";
|
||||||
|
}
|
||||||
|
|
||||||
|
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());
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user