Markus Koch
657867309e
6284c9d8b4
introduced a feature to
center coordinate data on blocks by shifting the actual waypoints.
The problem with that approach is that it actually changes the
coordinates returned by any subsequent query to that geojson entry,
leading to coordinates like [0.5, 0.5] instead of [0, 0].
This commit removes the old translation code and instead shifts the
entire map. This means waypoints are still correct, and only the
visuals are affected. The correctness of new coordinate mapping has
been verified in-game and using the origin marker.
189 lines
5.7 KiB
JavaScript
189 lines
5.7 KiB
JavaScript
var mymap;
|
|
var streetLabelsRenderer = new L.StreetLabels({
|
|
collisionFlg: true,
|
|
propertyName: 'name',
|
|
showLabelIf: function (layer) {
|
|
return layer.geometry.type == "LineString";
|
|
},
|
|
fontStyle: {
|
|
dynamicFontSize: false,
|
|
fontSize: 10,
|
|
fontSizeUnit: "px",
|
|
lineWidth: 4.0,
|
|
fillStyle: "black",
|
|
strokeStyle: "white",
|
|
},
|
|
});
|
|
|
|
// Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale
|
|
var factorx = 1 / 256 * 4;
|
|
var factory = factorx;
|
|
var originx = 7000 + 8 + 0.5;
|
|
var originy = 7000 + 8 - 0.5;
|
|
var zoom_level_real = 6;
|
|
|
|
L.CRS.pr = L.extend({}, L.CRS.Simple, {
|
|
projection: L.Projection.LonLat,
|
|
transformation: new L.Transformation(factorx,factorx * originx,-factory,factory * originy),
|
|
|
|
scale: function(zoom) {
|
|
return Math.pow(2, zoom);
|
|
},
|
|
|
|
zoom: function(scale) {
|
|
return Math.log(scale) / Math.LN2;
|
|
},
|
|
|
|
distance: function(latlng1, latlng2) {
|
|
var dx = latlng2.lng - latlng1.lng
|
|
, dy = latlng2.lat - latlng1.lat;
|
|
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
},
|
|
infinite: true
|
|
});
|
|
|
|
// Init map
|
|
mymap = L.map('mapid', {
|
|
renderer: streetLabelsRenderer,
|
|
editable: true,
|
|
crs: L.CRS.pr
|
|
}).setView([0, 0], 6);
|
|
|
|
var mapheight = 16384;
|
|
var mapwidth = mapheight;
|
|
var sw = mymap.unproject([0, 0], zoom_level_real);
|
|
var ne = mymap.unproject([mapwidth, mapheight], zoom_level_real);
|
|
var layerbounds = new L.LatLngBounds(sw,ne);
|
|
|
|
var layers = L.control.layers({}, {}).addTo(mymap);
|
|
|
|
function load_svg(name, url, active=1) {
|
|
var xhttp_ps = new XMLHttpRequest();
|
|
xhttp_ps.onreadystatechange = function() {
|
|
if (this.readyState == 4) {
|
|
if (this.status == 200) {
|
|
var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
|
|
svgElement.setAttribute('viewBox', "0 0 16384 16384");
|
|
svgElement.innerHTML = xhttp_ps.responseText;
|
|
var svgElementBounds = [[0, 0], [1000, 1000]];
|
|
var overlay = L.svgOverlay(svgElement, svgElementBounds);
|
|
layers.addOverlay(overlay, name);
|
|
if (active)
|
|
overlay.addTo(mymap);
|
|
return overlay;
|
|
} else {
|
|
alert("Error: Could not load SVG map layer (" + name + ")");
|
|
}
|
|
}
|
|
}
|
|
;
|
|
xhttp_ps.open("GET", url, true);
|
|
xhttp_ps.send();
|
|
}
|
|
|
|
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}', {
|
|
maxZoom: 14 /*8*/,
|
|
maxNativeZoom: 6,
|
|
minNativeZoom: 0,
|
|
minZoom: 0,
|
|
noWrap: true,
|
|
attribution: 'Map data © <a href="https://wiki.linux-forks.de/mediawiki/index.php/Maps">Linux-Forks</a>, ' + 'All rights reserved, ',
|
|
id: id,
|
|
tileSize: 256,
|
|
zoomOffset: 0,
|
|
opacity: 1.0,
|
|
bounds: layerbounds
|
|
});
|
|
layers.addBaseLayer(satellite, name);
|
|
return satellite;
|
|
}
|
|
|
|
function load_geojson(name, url, iconname, iconcolor, active=1, style={}) {
|
|
var xhttp_ps = new XMLHttpRequest();
|
|
xhttp_ps.onreadystatechange = function() {
|
|
if (this.readyState == 4) {
|
|
if (this.status == 200) {
|
|
switch (iconname) {
|
|
case "street":
|
|
onEachFeature = null;
|
|
pointToLayer = null;
|
|
break;
|
|
default: /* else it is a marker with the specified icon */
|
|
onEachFeature = function(feature, layer) {
|
|
label = String(feature.properties.name)
|
|
layer.bindPopup('<h1><a href="https://wiki.linux-forks.de/mediawiki/index.php/' + feature.properties.name + '">' + feature.properties.name + '</a> (' + feature.geometry.coordinates + ')</h1>' + '<p><img style="width:100%" src="' + feature.properties.image + '"></p>' + '<p>' + feature.properties.description + '</p>');
|
|
layer.bindTooltip(label, {
|
|
permanent: true,
|
|
direction: "center",
|
|
className: "city-names"
|
|
}).openTooltip();
|
|
};
|
|
pointToLayer = function(feature, latlng) {
|
|
label = String(feature.properties.name)
|
|
return new L.marker(latlng,{
|
|
icon: L.AwesomeMarkers.icon({
|
|
icon: iconname,
|
|
markerColor: iconcolor
|
|
})
|
|
}).bindTooltip(label, {
|
|
permanent: false,
|
|
direction: "center",
|
|
opacity: 0.7
|
|
}).openTooltip();
|
|
};
|
|
break;
|
|
}
|
|
var json = JSON.parse(xhttp_ps.responseText);
|
|
var geojson = L.geoJSON(json, {
|
|
style: style,
|
|
onEachFeature: onEachFeature,
|
|
pointToLayer: pointToLayer
|
|
});
|
|
layers.addOverlay(geojson, name);
|
|
if (active)
|
|
geojson.addTo(mymap);
|
|
return geojson;
|
|
} else {
|
|
console.log("Error: Could not load geojson map layer (" + name + ").");
|
|
}
|
|
}
|
|
}
|
|
;
|
|
xhttp_ps.open("GET", url, true);
|
|
xhttp_ps.send();
|
|
}
|
|
|
|
load_tiles("Satellite (2020-04-09)", 'world-2020-04-09').addTo(mymap);
|
|
load_tiles("Satellite (2019-05-04, wrong coords)", 'world-2019-05-04');
|
|
|
|
//load_svg("Test", "./overlay.svg", 0);
|
|
load_geojson("Cities", "./geojson/cities.json", "city", "red");
|
|
load_geojson("Stations", "./geojson/stations.json", "train", "blue");
|
|
load_geojson("Shops", "./geojson/shops.json", "shopping-cart", "green");
|
|
load_geojson("Parks", "./geojson/parks.json", "tree", "darkgreen");
|
|
load_geojson("Libraries", "./geojson/libraries.json", "book-open", "darkblue");
|
|
load_geojson("CW Complexes", "./geojson/cw_complexes.json", "border-all", "black");
|
|
load_geojson("Courts", "./geojson/courts.json", "balance-scale", "black");
|
|
load_geojson("Waterway", "./geojson/waterway.json", "water", "darkblue");
|
|
load_geojson("Train Depots", "./geojson/depots.json", "wrench", "violet");
|
|
load_geojson("Streets", "./geojson/streets.json", "street", "blue", 0);
|
|
|
|
L.control.scale().addTo(mymap);
|
|
|
|
var popup = L.popup();
|
|
|
|
L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
|
|
var baseballIcon = L.AwesomeMarkers.icon({
|
|
icon: 'coffee',
|
|
markerColor: 'red'
|
|
});
|
|
|
|
function onMapClick(e) {
|
|
popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);
|
|
}
|
|
|
|
mymap.on('click', onMapClick);
|