6284c9d8b45b4df112326c23037a5c7c2e0b89d0 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);
|