m4xx1m/dv-community-map
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement main Points of Interest system

Browse Source
This commit is contained in:
Pyro Nicampt committed 2024-12-28 22:01:42 -06:00
1 parent c713ba2a77
commit 62a1072a65
5 files changed
+330 -114
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+59 -40
View File
@@ -18,10 +18,10 @@
<div id="mapNavigator">
<svg id="map" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 10000 10000">
<style>
.sign{
transform: scale(var(--signScale));
.fixedScale{
transform: scale(var(--markerScale));
}
.sign, .rail, .signText{
.sign, .rail, .signText, .poi{
cursor: default;
}
.signText{
@@ -105,84 +105,103 @@
.gradeSign.grade_9{
fill: var(--grade_9);
}
.cullThreshold_0{
display: var(--cullThreshold_state_0);
}
.cullThreshold_1{
display: var(--cullThreshold_state_1);
}
.cullThreshold_2{
display: var(--cullThreshold_state_2);
}
.cullThreshold_3{
display: var(--cullThreshold_state_3);
}
.cullThreshold_4{
display: var(--cullThreshold_state_4);
}
.cullThreshold_5{
display: var(--cullThreshold_state_5);
}
.cullThreshold_6{
display: var(--cullThreshold_state_6);
}
</style>
<style id="zoomStyle"></style>
<defs>
<g id="gradeArrow" transform="scale(10)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="gradeArrow" transform="scale(30)" viewBox="0 0 10 10" >
<path d="M 0 -7 L 3.8 4 L -3.8 4 z" fill="black"/>
<path d="M 0 -5 L 3 4 L 0 5 L -3 4 z"/>
</g>
<g id="speedSign" transform="scale(15)" viewBox="0 0 10 10" refX="5" refY="5" style="fill:#fff; stroke:#e73819">
<g id="speedSign" transform="scale(15)" viewBox="0 0 10 10" style="fill:#fff; stroke:#e73819">
<circle cx="0" cy="0" r="3"/>
</g>
<g id="speedSignWarning" transform="scale(15)" viewBox="0 0 10 10" refX="5" refY="5" style="fill:#702012; stroke:#e73819">
<g id="speedSignWarning" transform="scale(15)" viewBox="0 0 10 10" style="fill:#702012; stroke:#e73819">
<circle cx="0" cy="0" r="3"/>
</g>
<g id="speedSign_1" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_1" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSignWarning"></use>
<text class="signText" style="fill:#fff;transform:translate(-15px, 20px)">1</text>
</g>
<g id="speedSign_2" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_2" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSignWarning"></use>
<text class="signText" style="fill:#fff;transform:translate(-15px, 20px)">2</text>
</g>
<g id="speedSign_3" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_3" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSignWarning"></use>
<text class="signText" style="fill:#fff;transform:translate(-15px, 20px)">3</text>
</g>
<g id="speedSign_4" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_4" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-15px, 20px)">4</text>
</g>
<g id="speedSign_5" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_5" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-16px, 20px)">5</text>
</g>
<g id="speedSign_6" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_6" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-15px, 20px)">6</text>
</g>
<g id="speedSign_7" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_7" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-15px, 20px)">7</text>
</g>
<g id="speedSign_8" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_8" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-16px, 20px)">8</text>
</g>
<g id="speedSign_9" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_9" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-15px, 20px)">9</text>
</g>
<g id="speedSign_10" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_10" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-35px, 20px)">10</text>
</g>
<g id="speedSign_12" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
<g id="speedSign_12" transform="scale(3)" viewBox="0 0 10 10">
<use href="#speedSign"></use>
<text class="signText" style="transform:translate(-35px, 20px)">12</text>
</g>
<g id="mrk_office" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="M10 3.8l5.56 6.03h-1.66v5.2h-2.51v-3.93h-2.78v3.93h-2.51v-5.2h-1.66z" fill="#fff"></path>
</g>
<g id="mrk_water" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="M10 2c-1.02 2.01-7.08 14.38 0 14.38 7.08 0 1.02-12.46 0-14.38z" fill="#fff"></path>
</g>
<g id="mrk_coal" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="M10.75 2.98 7.85 4.02 5.64 7.39 5.74 7.54 7.08 7.06 10.14 9.03 10.47 8.6 13.67 7.4 14.65 8.03 14.94 7.21 13.65 4.97ZM7.07 7.6 4.18 8.64 1.96 12.01 3.49 15.33h6.78l.99-3.5-1.3-2.25zm6.61.47-2.9 1.04-.27.4.17.13 1.22 2.21-.91 3.48h5.88l.99-3.02-1.3-2.25z" fill="#fff"></path>
</g>
<g id="mrk_landmark" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="m11.39 1.43c-.2-.09-.42 0-.51.2L4.22 16.88c-.09.2 0 .42.2.5.2.09.42 0 .51-.2L11.59 1.93c.09-.2 0-.42-.2-.51zm.53.93-2.39 5.48c.21 0 .42 0 .62.01.2.01.41.02.61.03.2.01.4.03.6.05.2.02.39.04.59.06.19.02.39.05.58.08.19.03.38.06.57.1.09.02.18.04.28.05l2.12-2.56c-.01-.01-.02-.03-.04-.05C15.31 5.46 15.18 5.3 15.05 5.14 14.91 4.99 14.78 4.83 14.64 4.68 14.5 4.53 14.36 4.39 14.22 4.24 14.08 4.1 13.93 3.96 13.79 3.82 13.64 3.68 13.49 3.55 13.34 3.42 13.27 3.35 13.19 3.29 13.12 3.23 13.04 3.16 12.96 3.1 12.88 3.04 12.81 2.98 12.73 2.92 12.65 2.86 12.57 2.8 12.49 2.74 12.41 2.69 12.33 2.63 12.25 2.57 12.16 2.52 12.08 2.47 12 2.41 11.92 2.36Zm3.37 4.06-2.12 2.56c.1.02.19.04.29.06.19.04.37.08.55.13.18.04.37.09.55.14.18.05.36.1.54.15.18.05.36.1.53.16.18.05.35.11.53.17.18.06.35.12.53.17.17.06.35.12.52.18.35.12.69.25 1.04.37C18 10.15 17.76 9.79 17.51 9.44 17.27 9.09 17.02 8.74 16.78 8.39 16.65 8.22 16.53 8.05 16.4 7.88 16.28 7.7 16.15 7.53 16.02 7.36 15.9 7.2 15.77 7.03 15.64 6.86 15.53 6.71 15.41 6.57 15.29 6.42Z" fill="#fff"></path>
</g>
<g id="mrk_shop" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="M9.25 17.9V16.35C8.29 16.26 7.75 15.91 7.12 15.31 6.49 14.71 6.14 13.86 6.06 12.75l2.2-.49c.03.65.21 1.14.54 1.49.33.35.75.52 1.24.52.47 0 .81-.13 1.03-.4.23-.27.34-.55.34-.85 0-.39-.11-.71-.34-.94-.23-.24-.52-.46-.88-.65L8.66 10.62C7.91 10.23 7.33 9.75 6.9 9.2 6.48 8.65 6.27 7.92 6.27 7.02 6.27 6.37 6.41 5.8 6.68 5.31 6.97 4.8 7.35 4.4 7.83 4.1 8.32 3.8 8.63 3.61 9.25 3.54V2.1h1.65v1.48c.91.12 1.41.49 1.94 1.1.53.6.82 1.39.88 2.36L11.65 7.47C11.62 6.87 11.45 6.41 11.15 6.08 10.86 5.75 10.5 5.58 10.07 5.58 9.66 5.58 9.33 5.7 9.08 5.94 8.84 6.17 8.72 6.48 8.72 6.88c0 .36.11.65.32.86.21.21.51.42.88.63l1.63.86c.83.45 1.43.95 1.82 1.51.39.55.58 1.23.58 2.02 0 .6-.13 1.16-.4 1.67-.25.51-.63.95-1.12 1.3-.48.33-.84.54-1.53.63v1.4z" fill="#fff"></path>
</g>
<g id="mrk_garage" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="M10 2.88 2.98 6.42 2.98 15.1 5.53 15.1 5.53 8.91 14.47 8.91 14.47 15.1 17.02 15.1 17.02 6.42 10 2.88z" fill="#fff"></path>
</g>
<g id="mrk_service" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="m8.92 1.99q3.29 0 4.68 1.13 1.39 1.1 1.39 2.74 0 2.06-1.78 3.36-.67.5-1.63.91l-.38.17q-.17.07-.34 1.01-.14.91-.14 1.32-.12.12-.7.29-.55.14-.94.14-.36 0-.55-.05-.26-.43-.26-1.87 0-1.44.12-1.85 3.79-.91 3.79-3.07 0-1.87-3.46-1.87-1.22 0-1.78.24-.14-.24-.14-1.01 0-.77.22-1.3.65-.29 1.9-.29zm-.7 15.5q-.46-.48-.46-1.15 0-.67.46-1.13.48-.48 1.15-.48.67 0 1.13.48.48.46.48 1.13 0 .67-.48 1.15-.46.46-1.13.46-.67 0-1.15-.46z" fill="#fff"></path>
</g>
<g id="mrk_service_repair" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="m12.88 2.82c-.1.01-.2.05-.28.13l-2.19 2.19c-.15.16-.17.39-.03.53l1.12 1.12c.29-.29.37.07.57.58l-1.61 1.6 1.77 1.72 1.7-1.7c.44.03.82-.06.99.11.22.22.19.59-.06.85l-.02.02c1.48 1.26 3.85-1.11 2.59-2.59l-.02.02c-.25.25-.63.28-.85.06-.3-.3.23-1.31-.61-2.15l-.1-.1c-.73-.74-2.07-.7-1.6-1.18l-1.12-1.12c-.06-.06-.16-.09-.25-.09zM5.63 3.68c-.28 0-.55.05-.83.14l2.02 2.02-1.85 1.86-2.02-2.02c-.72 2.23 1.45 4.34 3.67 3.55l7.27 7.27c.46.47 1.22.47 1.71-.02.49-.49.5-1.25.03-1.72L8.36 7.49c.69-1.94-.84-3.84-2.73-3.81zm2.41 7.72-3.36 3.35c-.47.47-.47 1.23.02 1.72.49.49 1.25.49 1.72.02l3.38-3.38z" fill="#fff"></path>
</g>
<g id="mrk_service_diesel" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="m12.67 2.93c-.5-.01-1 .09-1.46.31L9.86 3.88 9.76 3.66 7.64 4.67 7.18 4.02C7.09 3.89 6.92 3.86 6.79 3.95L5.55 4.8C5.43 4.89 5.4 5.07 5.48 5.2L5.87 5.75 5.51 6.22 2.7 10.29c-.2.3-.18.7.06.97-.4.74-.49 1.54-.3 2.26.22.86.77 1.6 1.5 2.16 1.46 1.12 3.68 1.56 5.63.5 1.07-.59 2.19-.79 2.99-.64.8.14 1.26.52 1.39 1.32.05.33.36.55.69.5.33-.05.55-.36.5-.69-.2-1.27-1.2-2.1-2.36-2.31-1.16-.21-2.51.08-3.78.77C7.53 15.95 5.8 15.6 4.69 14.74 4.14 14.32 3.76 13.77 3.62 13.23 3.52 12.83 3.53 12.42 3.73 11.99l1.39.96c.81.56 1.93.36 2.49-.46L10.41 8.46 9.88 5.6 10.53 5.29 10.42 5.05 11.76 4.42C12.2 4.21 12.7 4.17 13.17 4.32L16.71 5.44 17.1 4.2 13.56 3.08C13.27 2.99 12.97 2.94 12.67 2.93Zm4.24 3.31c-.39.63-2.7 4.48 0 4.48 2.7 0 .39-3.88 0-4.48zM6.91 7.47 8.22 7.92 7.2 8.58c-.04.03-.08.06-.11.11l-1.55 2.46c-.1.16-.05.38.11.48.16.1.38.05.48-.11L7.64 9.12 8.94 8.29c.24.29.25.71.02 1.03L7.44 11.52C6.92 12.27 5.93 12.48 5.22 11.99L4.36 11.4Z" fill="#fff"></path>
</g>
<g id="mrk_service_charger" transform="scale(20)" viewBox="0 0 20 20">
<circle r="10"></circle>
<path transform="translate(-10 -10)" d="m7.96 2.6h4.56l-1.97 5.8h3.02L8.61 18.36 9.6 10.25H7.26Z" fill="#fff"></path>
</g>
</defs>
</svg>
<svg id="mapMarkers" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 10000 10000">
@@ -196,13 +215,13 @@
</div>
</div>
<div id="legend" style="display: flex;">
<div style="display:flex; flex-direction:column; width: 400px;">
<div id="legendContents" style="display:flex; flex-direction:column; width: 400px;">
<div class="panel">
Welcome to the WIP community map of <a href="https://www.derailvalley.com/" style="white-space:nowrap;">Derail Valley</a>, a resource for documenting and displaying all tracks and points of interest.
<hr>
Hover over tracks and objects for detailed information.
</div>
<div class="panel">
<div class="panel" style="width:330px">
<h3>Key</h3>
<hr>
<div id="legendKey"></div>
index.js
+211 -38
View File
@@ -58,6 +58,14 @@ map.appendChild(map_rails);
//map_markers.setAttribute('id', 'map_markers');
//map.appendChild(map_markers);
const map_markers = document.getElementById('mapMarkers');
const poiLayers = {
container: document.createElementNS(svgns, 'g'),
stations: document.createElementNS(svgns, 'g'),
service: document.createElementNS(svgns, 'g'),
features: document.createElementNS(svgns, 'g'),
landmarks: document.createElementNS(svgns, 'g')
};
let mapData = [];
let trackNameCounting = {};
@@ -68,8 +76,17 @@ let markers = [];
let currentMapNav = {};
let previousMapScale = -1;
let MapMatrix = {};
document.addEventListener('DOMContentLoaded', async () => {
let dynamicStyles = [];
for(let i=0; i<scaleCullThresholds.length; i++){
dynamicStyles.push(`.maxZoomCull_${i}{display:var(--maxZoomCull_state_${i});}`);
dynamicStyles.push(`.minZoomCull_${i}{display:var(--minZoomCull_state_${i});}`);
}
document.getElementById('zoomStyle').innerHTML = dynamicStyles.join('\n');
await loadTrackData('trackdata_dv.json');
await loadPoiData('poi_dv.json');
mapScrollSetup();
});
@@ -79,6 +96,21 @@ async function loadTrackData(file){
fillSvg();
}
async function loadPoiData(file){
poiData = await (await fetch(new Request(file))).json();
for(let layerIdx in poiLayers){
poiLayers[layerIdx].setAttribute('id', 'poi_'+layerIdx);
if(layerIdx == 'container') continue;
poiLayers.container.appendChild(poiLayers[layerIdx]);
}
map_markers.appendChild(poiLayers.container);
for(let poi of poiData){
addPoi(poi);
}
}
/** Handling for the map scrolling and zooming */
function mapScrollSetup(){
let mapNav = {x:currentMapNav.x, y:currentMapNav.y, scale:currentMapNav.scale};
@@ -150,10 +182,11 @@ function updateMapview(navData = {x:0, y:0, scale:1}){
}
}
map_rails.setAttribute('stroke-width', Utils.clamp(trackWidth.base/navData.scale, trackWidth.min, trackWidth.max));
styleRoot.style.setProperty('--signScale', Utils.clamp(signSize.base/navData.scale, signSize.min, signSize.max));
styleRoot.style.setProperty('--markerScale', 1/navData.scale);
if(dirtyScale){
for(let i=0; i<scaleCullThresholds.length; i++){
styleRoot.style.setProperty(`--cullThreshold_state_${i}`, navData.scale >= scaleCullThresholds[i].scale ? 'initial' : 'none')
styleRoot.style.setProperty(`--minZoomCull_state_${i}`, navData.scale >= scaleCullThresholds[i].scale ? 'initial' : 'none');
styleRoot.style.setProperty(`--maxZoomCull_state_${i}`, navData.scale <= scaleCullThresholds[i].scale ? 'initial' : 'none');
}
}
previousMapScale = navData.scale;
@@ -182,6 +215,17 @@ function establishDimensions(){
}
let width = maxX-minX;
let height = maxY-minY;
MapMatrix = {
x1: minX,
x2: maxX,
y1: minY,
y2: maxY,
width: width,
height: height,
fixY: yIn => {
return minY+maxY-yIn;
}
}
map.setAttribute('viewBox', `${minX-padding} ${minY-padding} ${width+2*padding} ${height+2*padding}`);
map_markers.setAttribute('viewBox', map.getAttribute('viewBox'));
updateMapview({
@@ -211,7 +255,7 @@ function fillSvg(){
}
}
sortTracks();
setTrackColorMode();
setTrackColorMode('Grade');
drawMarkers();
}
@@ -241,11 +285,11 @@ function drawTracks(bezierData){
bezierData.isPoint = true;
}
for(let i=0; i+1<bezierData.points.length; i++){
let newBezier = document.createElementNS(svgns, 'path');
const bezStart = bezierData.points[i].position;
const bezHandle1 = bezierData.points[i].h2;
const bezHandle2 = bezierData.points[i+1].h1;
const bezEnd = bezierData.points[i+1].position;
bezierData.points[i].element = document.createElementNS(svgns, 'path');
let genPath = 'M ';
genPath += `${bezStart.x} ${bezStart.z} `;
genPath += `C ${bezHandle1.x} ${bezHandle1.z} ${bezHandle2.x} ${bezHandle2.z} ${bezEnd.x} ${bezEnd.z} `;
@@ -254,20 +298,20 @@ function drawTracks(bezierData){
bezierData.points[i].bezLength = Bezier.estimateLength(bezStart, bezHandle1, bezHandle2, bezEnd, bezierLengthResolution);
bezierData.points[i].curvature = Bezier.estimateCurvature(bezStart, bezHandle1, bezHandle2, bezEnd, bezierCurvatureResolution);
bezierData.points[i].postedSpeed = Utils.radiusToSpeed(1/bezierData.points[i].curvature);
newBezier.setAttribute('d', genPath);
if(bezierData.isYard || bezierData.isTurntable) bezierData.points[i].postedSpeed = Math.min(bezierData.points[i].postedSpeed, 50);
bezierData.points[i].element.setAttribute('d', genPath);
bezierData.points[i].element.classList.add('rail');
//bezierData.points[i].element.setAttribute('stroke', Config.gradeColors[bezierData.points[i].gradeClass ? 'grade_'+bezierData.points[i].gradeClass : 'grade_flat']);
//bezierData.points[i].element.classList.add(bezierData.points[i].gradeClass != null ? 'grade_'+bezierData.points[i].gradeClass : 'grade_flat');
//newBezier.setAttribute('stroke', Utils.rgba2hex(bezierData.points[i].grade*50*0,(bezStart.y-113)/(252-113),bezierData.points[i].bezLength*0.01*0,1.0));
//newBezier.setAttribute('stroke', Utils.rgba2hex((1/bezierData.points[i].curvature) * 100,0,0,1.0));
//newBezier.setAttribute('stroke', trackCol);
//newBezier.setAttribute('data-grade', bezierData.points[i].grade);
//newBezier.setAttribute('data-length', bezierData.points[i].bezLength);
//newBezier.setAttribute('data-maxradius', 1/bezierData.points[i].curvature);
tracks.push([(bezStart.y+bezEnd.y)*0.5, newBezier]);
//bezierData.points[i].element.setAttribute('stroke', Utils.rgba2hex(bezierData.points[i].grade*50*0,(bezStart.y-113)/(252-113),bezierData.points[i].bezLength*0.01*0,1.0));
//bezierData.points[i].element.setAttribute('stroke', Utils.rgba2hex((1/bezierData.points[i].curvature) * 100,0,0,1.0));
//bezierData.points[i].element.setAttribute('stroke', trackCol);
//bezierData.points[i].element.setAttribute('data-grade', bezierData.points[i].grade);
//bezierData.points[i].element.setAttribute('data-length', bezierData.points[i].bezLength);
//bezierData.points[i].element.setAttribute('data-maxradius', 1/bezierData.points[i].curvature);
tracks.push([(bezStart.y+bezEnd.y)*0.5, bezierData.points[i].element]);
// Curve tooltip
let title = document.createElementNS(svgns, 'title');
@@ -279,7 +323,7 @@ function drawTracks(bezierData){
`Length: ${Math.round(bezierData.points[i].bezLength*10)/10} meters`,
`Altitude: ${Math.round((bezStart.y+bezEnd.y)*0.5)} meters`,
].join('\n');
newBezier.appendChild(title);
bezierData.points[i].element.appendChild(title);
}
// Add Signage
@@ -351,7 +395,7 @@ function drawTracks(bezierData){
value: trackZoneData.speed,
position: Bezier.evaluatePoint(b1, b2, b3, b4, center),
sectionLength: trackZoneData.speedSectionLength,
cullLevel: cullLevel,
cullLevel: cullLevel == 1 ? 2 : cullLevel,
tangent: Bezier.evaluateVelocity(b1, b2, b3, b4, center)
});
resetTzdSpeed();
@@ -377,18 +421,33 @@ function sortTracks(){
function setTrackColorMode(mode){
let modeFunction = null;
switch(mode){
case 'Track Type':
modeFunction = (section, curve) => {
let finalColor = '#aaa';
if(curve.isYard && curve.yardDesignation) finalColor = '#4bf';
else if(curve.isYard) finalColor = '#4fb';
else if(curve.isPoint) finalColor = '#fb4';
else if(curve.isTurntable) finalColor = '#b4f';
default:
section.element.setAttribute('stroke', finalColor);
}
break;
case 'Grade':
modeFunction = section => {
if(!section.element) return;
section.element.setAttribute('stroke', Config.gradeColors['grade_'+section.gradeClass]);
};
break;
default:
modeFunction = section => {
section.element.setAttribute('stroke', '#fff');
}
break;
}
if(modeFunction !== null){
for(let curve of mapData){
for(let section of curve.points){
modeFunction(section);
if(!section.element) continue;
modeFunction(section, curve);
}
}
}
@@ -396,43 +455,157 @@ function setTrackColorMode(mode){
/** Create the signage */
function drawMarkers(){
const signage_container = document.createElementNS(svgns, 'g');
const gradeSigns = document.createElementNS(svgns, 'g');
gradeSigns.setAttribute('id', 'grade_signs');
map_markers.appendChild(gradeSigns);
const speedSigns = document.createElementNS(svgns, 'g');
speedSigns.setAttribute('id', 'speed_signs');
map_markers.appendChild(speedSigns);
signage_container.setAttribute('id', 'signage_container');
gradeSigns.setAttribute('id', 'signage_grade');
speedSigns.setAttribute('id', 'signage_speed');
map_markers.appendChild(signage_container);
signage_container.appendChild(gradeSigns);
signage_container.appendChild(speedSigns);
for(const markerData of markers){
//if(markerData.skip) continue;
let marker = document.createElementNS(svgns, 'g');
let markerElement = document.createElementNS(svgns, 'g');
let markerImg = document.createElementNS(svgns, 'use');
let title = document.createElementNS(svgns, 'title');
marker.appendChild(markerImg);
marker.appendChild(title);
marker.setAttribute('transform', `translate(${markerData.position.x} ${markerData.position.z})`);
let markerTooltip = document.createElementNS(svgns, 'title');
markerElement.appendChild(markerImg);
markerElement.appendChild(markerTooltip);
markerElement.setAttribute('transform', `translate(${markerData.position.x} ${markerData.position.z})`);
markerImg.classList.add('fixedScale');
// Grade signs
if(markerData.type == 'grade'){
markerImg.setAttribute('href', '#gradeArrow');
markerImg.classList.add('sign', 'gradeSign');
markerImg.setAttribute('fill', Config.gradeColors['grade_'+markerData.gradeClass])
markerImg.setAttribute('fill', Config.gradeColors['grade_'+markerData.gradeClass]);
const tanLen = Math.sqrt(markerData.tangent.x*markerData.tangent.x + markerData.tangent.z*markerData.tangent.z) * Math.sign(markerData.tangent.y);
const rot = Math.atan2(markerData.tangent.x/tanLen, -markerData.tangent.z/tanLen) * (180/Math.PI);
marker.setAttribute('transform', `translate(${markerData.position.x} ${markerData.position.z}) rotate(${rot})`);
title.innerHTML = `${Math.round(markerData.value*1000)/10}% Grade\nSection Length: ${markerData.sectionLength.toFixed(1)} meters`;
gradeSigns.appendChild(marker);
markerElement.setAttribute('transform', `translate(${markerData.position.x} ${markerData.position.z}) rotate(${rot})`);
markerTooltip.innerHTML = `${Math.round(markerData.value*1000)/10}% Grade\nSection Length: ${markerData.sectionLength.toFixed(1)} meters`;
gradeSigns.appendChild(markerElement);
// Speed Signs
}else if(markerData.type == 'speed'){
markerImg.setAttribute('href', `#speedSign_${Math.round(markerData.value/10)}`);
markerImg.classList.add('sign', 'speedSign');
title.innerHTML = `${Math.round(markerData.value)} km/h\nSection Length: ${markerData.sectionLength.toFixed(1)} meters`;
/*let offset = Vector.normalize({x:markerData.tangent.z, y:0, z:-markerData.tangent.x});
marker.setAttribute('transform', `translate(${markerData.position.x + offset.x*100} ${markerData.position.z + offset.z*50})`);*/
marker.setAttribute('transform', `translate(${markerData.position.x} ${markerData.position.z})`);
speedSigns.appendChild(marker);
markerTooltip.innerHTML = `${Math.round(markerData.value)} km/h\nSection Length: ${markerData.sectionLength.toFixed(1)} meters`;
markerElement.setAttribute('transform', `translate(${markerData.position.x} ${markerData.position.z})`);
speedSigns.appendChild(markerElement);
}
if(markerData.cullLevel){
marker.classList.add(`cullThreshold_${Math.min(scaleCullThresholds.length-1, markerData.cullLevel)}`);
markerElement.classList.add(`minZoomCull_${Math.min(scaleCullThresholds.length-1, markerData.cullLevel)}`);
}
}
}
function addPoi(poi, level = 0){
let poiElement = document.createElementNS(svgns, 'g');
let poiDisplay = document.createElementNS(svgns, 'g');
let poiIcon = document.createElementNS(svgns, poi.type == 'station' ? 'text' : 'use');
let poiTooltip = document.createElementNS(svgns, 'title');
poiElement.appendChild(poiDisplay);
poiDisplay.appendChild(poiIcon);
poiElement.appendChild(poiTooltip);
poiElement.setAttribute('transform', `translate(${poi.position.x} ${MapMatrix.fixY(poi.position.z)})`);
poiElement.classList.add('poi');
poiDisplay.classList.add('fixedScale');
if(level > 0) poiElement.classList.add('minZoomCull_2');
switch(poi.type){
case 'station':
poiDisplay.classList.remove('fixedScale');
poiElement.setAttribute('fill', poi.color ?? '#fff');
poiTooltip.innerHTML = poi.name;
poiIcon.innerHTML = poi.shorthand;
poiIcon.setAttribute('style', `font-size:400px; stroke:${poi.stroke ?? '#000'}; stroke-width:40px; paint-order:stroke; text-anchor:middle;`);
poiLayers.stations.prepend(poiElement);
break;
case 'office':
poiIcon.setAttribute('href', '#mrk_office');
if(poi.military){
poiDisplay.setAttribute('fill', '#978e47');
poiTooltip.innerHTML = 'Military Office';
}else if(poi.museum){
poiDisplay.setAttribute('fill', '#b44');
poiTooltip.innerHTML = 'Museum Office';
}else{
poiDisplay.setAttribute('fill', '#c4693e');
poiTooltip.innerHTML = 'Station Office';
}
poiLayers.service.prepend(poiElement);
break;
case 'coal':
poiIcon.setAttribute('href', '#mrk_coal');
poiDisplay.setAttribute('fill', '#202020');
poiTooltip.innerHTML = 'Coal Tower';
poiLayers.service.prepend(poiElement);
break;
case 'water':
poiIcon.setAttribute('href', '#mrk_water');
poiDisplay.setAttribute('fill', '#3fa5ff');
poiTooltip.innerHTML = 'Water Tower';
poiLayers.service.prepend(poiElement);
break;
case 'garage':
poiIcon.setAttribute('href', '#mrk_garage');
poiDisplay.setAttribute('fill', '#8b5dd7');
poiTooltip.innerHTML = poi.name ?? 'Unknown Garage';
poiLayers.service.prepend(poiElement);
poiElement.classList.add('minZoomCull_1');
break;
case 'landmark':
poiIcon.setAttribute('href', '#mrk_landmark');
poiDisplay.setAttribute('fill', '#af5757');
poiTooltip.innerHTML = poi.name ?? 'Unknown Landmark';
poiLayers.service.prepend(poiElement);
poiElement.classList.add('minZoomCull_1');
break;
case 'shop':
poiIcon.setAttribute('href', '#mrk_shop');
poiDisplay.setAttribute('fill', '#4f54e9');
poiTooltip.innerHTML = 'Shop';
poiLayers.service.prepend(poiElement);
poiElement.classList.add('minZoomCull_1');
break;
case 'service':
let serviceTypes = [];
if(poi.repair) serviceTypes.push('Repair');
if(poi.diesel) serviceTypes.push('Diesel');
if(poi.charger) serviceTypes.push('Charger');
if(serviceTypes.length == 0){
poiIcon.setAttribute('href', '#mrk_service');
poiDisplay.setAttribute('fill', '#239a96');
poiTooltip.innerHTML = 'Unknown Service';
}else{
poiIcon.setAttribute('href', '#mrk_service_'+serviceTypes[0].toLowerCase());
poiDisplay.setAttribute('fill', '#239a96');
let bumpOffset = -200*(serviceTypes.length-1);
poiIcon.setAttribute('transform', `translate(${bumpOffset} 0)`);
poiTooltip.innerHTML = serviceTypes[0];
for(let i=1; i<serviceTypes.length; i++){
let subIcon = document.createElementNS(svgns, 'use');
subIcon.setAttribute('href', '#mrk_service_'+serviceTypes[i].toLowerCase());
subIcon.setAttribute('transform', `translate(${i*400+bumpOffset} 0)`);
poiDisplay.appendChild(subIcon);
poiTooltip.innerHTML += (i == serviceTypes.length-1 ? (serviceTypes.length == 2 ? ' & ' : ', & ') : ', ')+serviceTypes[i];
}
poiTooltip.innerHTML += ' Service';
if(serviceTypes.length > 1){
let bgrect = document.createElementNS(svgns, 'rect');
bgrect.setAttribute('width', 400*(serviceTypes.length-1));
bgrect.setAttribute('height', 400);
bgrect.setAttribute('transform', `translate(${-200*(serviceTypes.length-1)} -200)`);
poiDisplay.prepend(bgrect);
}
}
poiLayers.service.prepend(poiElement);
break;
}
if(poi.children){
for(let child of poi.children){
addPoi(child, level+1);
}
}
}
legend.js
+23 -16
View File
@@ -9,7 +9,7 @@ let settingEntries = [
id: 'toggle_signage',
state: true,
func: state =>{
document.getElementById('mapMarkers').style.display = state ? 'unset' : 'none';
document.getElementById('signage_container').style.display = state ? 'unset' : 'none';
},
children: [
{
@@ -17,7 +17,7 @@ let settingEntries = [
id: 'toggle_speedSigns',
state: true,
func: state =>{
document.getElementById('speed_signs').style.display = state ? 'unset' : 'none';
document.getElementById('signage_speed').style.display = state ? 'unset' : 'none';
},
},
{
@@ -25,7 +25,7 @@ let settingEntries = [
id: 'toggle_gradeSigns',
state: true,
func: state =>{
document.getElementById('grade_signs').style.display = state ? 'unset' : 'none';
document.getElementById('signage_grade').style.display = state ? 'unset' : 'none';
},
}
],
@@ -117,27 +117,34 @@ function populateKey(){
}else if(i >= 0){
gradeValue += ` - ${getGradeValue(i+1)}%`;
}
let gradeIcon = document.createElement('svg');
gradeIcon.classList.add('inlineSvg');
gradeIcon.setAttribute('viewBox', '-50 -50 100 100');
gradeIcon.innerHTML = `<use class="gradeSign" fill="${Config.gradeColors['grade_'+gradeIndex]}" href="#gradeArrow" transform="rotate(90)"/>`;
addKeyEntry(gradeIcon, ` ${gradeValue} Grade`);
addKeyEntry(`<use fill="${Config.gradeColors['grade_'+gradeIndex]}" href="#gradeArrow" transform="rotate(90)"/>`, ` ${gradeValue} Grade`);
}
let speedSignIcon = document.createElement('svg');
speedSignIcon.classList.add('inlineSvg');
speedSignIcon.setAttribute('viewBox', '-50 -50 100 100');
speedSignIcon.innerHTML = `<use class="speedSign" href="#speedSign_5"/>`;
addKeyEntry(speedSignIcon, ' Speed Limit');
addKeyEntry('<use href="#speedSign_5"/>', ' Speed Limit');
addKeyEntry('<use href="#mrk_office" fill="#c4693e" transform="scale(0.75)"/>', ' Station Office');
addKeyEntry('<use href="#mrk_shop" fill="#4f54e9" transform="scale(0.75)"/>', ' Shop');
addKeyEntry('<use href="#mrk_coal" fill="#202020" transform="scale(0.75)"/>', ' Coal Tower');
addKeyEntry('<use href="#mrk_water" fill="#3fa5ff" transform="scale(0.75)"/>', ' Water Tower');
addKeyEntry('<use href="#mrk_landmark" fill="#af5757" transform="scale(0.75)"/>', ' Landmark');
addKeyEntry('<use href="#mrk_garage" fill="#8b5dd7" transform="scale(0.75)"/>', ' Garage');
addKeyEntry('<use href="#mrk_service_repair" fill="#239a96" transform="scale(0.75)"/>', ' Repair Service');
addKeyEntry('<use href="#mrk_service_diesel" fill="#239a96" transform="scale(0.75)"/>', ' Diesel Refuel');
addKeyEntry('<use href="#mrk_service_charger" fill="#239a96" transform="scale(0.75)"/>', ' Electric Charger');
}
/**
* Add an entry to the map key.
* @param {Element} keyImage
* @param {string} keyImageHTML
* @param {string} keyLabel
*/
function addKeyEntry(keyImage, keyLabel){
function addKeyEntry(keyImageHTML, keyLabel){
let keyDiv = document.createElement('div');
if(keyImage) keyDiv.appendChild(keyImage);
if(keyImageHTML){
let keyImage = document.createElement('svg');
keyImage.innerHTML = keyImageHTML;
keyImage.classList.add('inlineSvg');
keyImage.setAttribute('viewBox', '-150 -150 300 300');
keyDiv.appendChild(keyImage);
}
keyDiv.innerHTML += keyLabel;
legendKey.appendChild(keyDiv);
}
poi_dv.json
+28 -20
View File
@@ -4,7 +4,7 @@
"type":"station",
"shorthand":"CME",
"color":"#958177",
"position":{"x":15622.98,"y":204.2502,"z":11220.5},
"position":{"x":15622.98,"y":204.2502,"z":10620.5},
"children":[
{
"type":"office",
@@ -31,7 +31,7 @@
"type":"station",
"shorthand":"CMS",
"color":"#6f6a58",
"position":{"x":8531.313,"y":156.2595,"z":3448.419},
"position":{"x":9251.313,"y":156.2595,"z":3408.419},
"children":[
{
"type":"office",
@@ -53,7 +53,7 @@
"type":"station",
"shorthand":"CP",
"color":"#824e4a",
"position":{"x":2064.521,"y":145.1,"z":9031.848},
"position":{"x":2064.521,"y":145.1,"z":8231.848},
"children":[
{
"type":"office",
@@ -74,7 +74,7 @@
"type":"station",
"shorthand":"CS",
"color":"#dfd7dc",
"position":{"x":9985.819,"y":134.6823,"z":1388.548},
"position":{"x":9785.819,"y":134.6823,"z":1488.548},
"children":[
{
"type":"office",
@@ -100,6 +100,10 @@
"type":"water",
"position":{"x":10249.08,"y":134.7365,"z":1468.002}
},
{
"type":"water",
"position":{"x":10050.59,"y":134.7859,"z":1370.713}
},
{
"name":"Olaf's Garage",
"type":"garage",
@@ -112,7 +116,7 @@
"type":"station",
"shorthand":"CW",
"color":"#f1cdbb",
"position": {"x":1956,"y":122,"z":5692},
"position": {"x":1456,"y":122,"z":5692},
"children":[
{
"type":"office",
@@ -141,7 +145,7 @@
"type":"station",
"shorthand":"FF",
"color":"#b2d1ff",
"position":{"x":9435.343,"y":119.1784,"z":13504.95},
"position":{"x":9035.343,"y":119.1784,"z":13504.95},
"children":[
{
"type":"office",
@@ -169,7 +173,7 @@
"type":"station",
"shorthand":"FM",
"color":"#ffda62",
"position":{"x":6027.609,"y":123.8593,"z":6704.711},
"position":{"x":6027.609,"y":123.8593,"z":7074.711},
"children":[
{
"type":"office",
@@ -186,7 +190,7 @@
"type":"station",
"shorthand":"FRC",
"color":"#d3e075",
"position":{"x":5727.74,"y":144.9063,"z":8757.236},
"position":{"x":6427.74,"y":144.9063,"z":8757.236},
"children":[
{
"type":"office",
@@ -203,7 +207,7 @@
"type":"station",
"shorthand":"FRS",
"color":"#8db16c",
"position":{"x":5340.794,"y":175.1235,"z":3787.574},
"position":{"x":5890.794,"y":175.1235,"z":3787.574},
"children":[
{
"type":"office",
@@ -221,7 +225,7 @@
"type":"station",
"shorthand":"GF",
"color":"#ff9db9",
"position":{"x":13002.78,"y":140.2193,"z":10995.55},
"position":{"x":13202.78,"y":140.2193,"z":10495.55},
"children":[
{
"type":"office",
@@ -254,7 +258,7 @@
"type":"station",
"shorthand":"HB",
"color":"#ff9db9",
"position":{"x":13066.07,"y":113.082,"z":3596.37},
"position":{"x":13066.07,"y":113.082,"z":3876.37},
"children":[
{
"type":"office",
@@ -292,7 +296,7 @@
"type":"station",
"shorthand":"IME",
"color":"#ff836f",
"position":{"x":15041.38,"y":248.062,"z":15341.35},
"position":{"x":15041.38,"y":248.062,"z":15741.35},
"children":[
{
"type":"office",
@@ -319,7 +323,7 @@
"type":"station",
"shorthand":"IMW",
"color":"#dc6f54",
"position":{"x":2103.091,"y":133.5531,"z":13359.38},
"position":{"x":2163.091,"y":133.5531,"z":13759.38},
"children":[
{
"type":"office",
@@ -345,7 +349,7 @@
"type":"station",
"shorthand":"MB",
"color":"#d6ac71",
"position":{"x":12524,"y":215.3452,"z":14749.98},
"position":{"x":12524,"y":215.3452,"z":14349.98},
"children":[
{
"type":"office",
@@ -364,7 +368,7 @@
"type":"station",
"shorthand":"MF",
"color":"#ffad6d",
"position":{"x":2348.254,"y":159.2693,"z":10823.74},
"position":{"x":2848.254,"y":159.2693,"z":10523.74},
"children":[
{
"type":"office",
@@ -401,7 +405,7 @@
"type":"station",
"shorthand":"OR",
"color":"#cf6884",
"position":{"x":6404.917,"y":143.8076,"z":11133.96},
"position":{"x":6934.917,"y":143.8076,"z":11133.96},
"children":[
{
"type":"office",
@@ -423,7 +427,7 @@
"type":"station",
"shorthand":"OWC",
"color":"#7b6f6e",
"position":{"x":4866.821,"y":122.9323,"z":6291.179},
"position":{"x":4466.821,"y":122.9323,"z":6651.179},
"children":[
{
"type":"office",
@@ -446,7 +450,7 @@
"type":"station",
"shorthand":"OWN",
"color":"#8b715e",
"position":{"x":11570.04,"y":122.3343,"z":11554.65},
"position":{"x":11570.04,"y":122.3343,"z":11954.65},
"children":[
{
"type":"office",
@@ -465,7 +469,7 @@
"type":"station",
"shorthand":"SM",
"color":"#ac9da2",
"position": {"x":7821,"y":131,"z":7277},
"position": {"x":8321,"y":131,"z":6707},
"children":[
{
"type":"office",
@@ -485,6 +489,10 @@
{
"type":"water",
"position":{"x":7981.461,"y":131.77,"z":7392.4}
},
{
"type":"water",
"position":{"x":7998.145,"y":131.7769,"z":7477.136}
}
]
},
@@ -493,7 +501,7 @@
"type":"station",
"shorthand":"SW",
"color":"#ffce98",
"position":{"x":1364.217,"y":147.2043,"z":2194.633},
"position":{"x":964.217,"y":147.2043,"z":1794.633},
"children":[
{
"type":"office",
style.css
+9
View File
@@ -9,6 +9,8 @@
--cullThreshold_state_4: none;
--cullThreshold_state_5: none;
--cullThreshold_state_6: none;
--absScale: 1;
}
html, body, #map, #mapContainer, h1, h2, h3, h4, h5{
@@ -77,6 +79,9 @@ a:visited{
#legendKey{
font-size: 15px;
display: flex;
flex-flow: column wrap;
max-height: 350px;
}
#footer{
@@ -116,3 +121,7 @@ a:visited{
height: 1em;
vertical-align: -0.1em;
}
.poi{
font-variation-settings: "wght" 700;
}