276 lines
17 KiB
HTML
276 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="favicon.png" rel="icon">
|
|
<link href="style.css" rel="stylesheet" type="text/css" media="all">
|
|
<title>Derail Valley Community Map</title>
|
|
<meta property="og:title" content="Derail Valley Community Map">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://pyronicampt.github.io/DV-Community-Map/">
|
|
<meta property="og:image" content="https://pyronicampt.github.io/DV-Community-Map/opengraph.png">
|
|
<meta property="og:description" content="Web-based map of Derail Valley">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
|
<script type="module" src="index.js"></script>
|
|
<script type="module" src="legend.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="mapContainer">
|
|
<div id="mapNavigator">
|
|
<svg id="map" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 10000 10000">
|
|
<style>
|
|
.fixedScale{
|
|
transform: scale(var(--markerScale));
|
|
}
|
|
.sign, .rail, .signText, .poi{
|
|
cursor: default;
|
|
}
|
|
.signText{
|
|
fill:#000;
|
|
font: 60px Arial;
|
|
font-weight: bold;
|
|
}
|
|
.signText.gradeSign{
|
|
font-size: 30px;
|
|
stroke:#fff;
|
|
stroke-width: 6px;
|
|
paint-order: stroke fill;
|
|
}
|
|
.yardSignage{
|
|
font: 200px "Noto Sans Mono";
|
|
text-anchor: middle;
|
|
}
|
|
.rail{
|
|
fill: none;
|
|
}
|
|
.rail.grade_flat{
|
|
stroke: var(--grade_flat);
|
|
}
|
|
.rail.grade_0{
|
|
stroke: var(--grade_0);
|
|
}
|
|
.rail.grade_1{
|
|
stroke: var(--grade_1);
|
|
}
|
|
.rail.grade_2{
|
|
stroke: var(--grade_2);
|
|
}
|
|
.rail.grade_3{
|
|
stroke: var(--grade_3);
|
|
}
|
|
.rail.grade_4{
|
|
stroke: var(--grade_4);
|
|
}
|
|
.rail.grade_5{
|
|
stroke: var(--grade_5);
|
|
}
|
|
.rail.grade_6{
|
|
stroke: var(--grade_6);
|
|
}
|
|
.rail.grade_7{
|
|
stroke: var(--grade_7);
|
|
}
|
|
.rail.grade_8{
|
|
stroke: var(--grade_8);
|
|
}
|
|
.rail.grade_9{
|
|
stroke: var(--grade_9);
|
|
}
|
|
|
|
.gradeSign.grade_flat{
|
|
fill: var(--grade_flat);
|
|
}
|
|
.gradeSign.grade_0{
|
|
fill: var(--grade_0);
|
|
}
|
|
.gradeSign.grade_1{
|
|
fill: var(--grade_1);
|
|
}
|
|
.gradeSign.grade_2{
|
|
fill: var(--grade_2);
|
|
}
|
|
.gradeSign.grade_3{
|
|
fill: var(--grade_3);
|
|
}
|
|
.gradeSign.grade_4{
|
|
fill: var(--grade_4);
|
|
}
|
|
.gradeSign.grade_5{
|
|
fill: var(--grade_5);
|
|
}
|
|
.gradeSign.grade_6{
|
|
fill: var(--grade_6);
|
|
}
|
|
.gradeSign.grade_7{
|
|
fill: var(--grade_7);
|
|
}
|
|
.gradeSign.grade_8{
|
|
fill: var(--grade_8);
|
|
}
|
|
.gradeSign.grade_9{
|
|
fill: var(--grade_9);
|
|
}
|
|
</style>
|
|
<style id="zoomStyle"></style>
|
|
<defs>
|
|
<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="gradeArrowDownhill" transform="rotate(180) 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"/>
|
|
<path d="M 0 -1.9 1.91 3.83 H -1.9 z" fill="black"/>
|
|
<path d="M 0 -0.3 1.5 4.3 h -3 z"/>
|
|
</g>
|
|
<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" style="fill:#702012; stroke:#e73819">
|
|
<circle cx="0" cy="0" r="3"/>
|
|
</g>
|
|
<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(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(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(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(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(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(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(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(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(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(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">
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="stats" class="orange">
|
|
<div id="navigationControls">
|
|
<button id="navZoomIn" class="panel orange">+</button>
|
|
<button id="navZoomOut" class="panel orange">-</button>
|
|
</div>
|
|
<div id="zoomLevelDisplay"></div>
|
|
Map v0.5 alpha
|
|
<br>
|
|
Updated for Game Build 99.3
|
|
<br>
|
|
This tool is a fan work, Derail Valley owned by Altfuture
|
|
</div>
|
|
<div id="topleft">
|
|
<div id="headerbar" class="panel orange">
|
|
<div>
|
|
<span id="redrawTrigger"></span>DV Community Map
|
|
</div>
|
|
</div>
|
|
<div id="legend">
|
|
<div id="legendContents">
|
|
<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.
|
|
<p>
|
|
Problems? Suggestions? Head over to <a href="https://github.com/PyroNicampt/DV-Community-Map/issues">the issue tracker</a> and see if it's already there, or submit if not. Or contribute a fix yourself if you really want!
|
|
</p>
|
|
<hr style="margin: 5px 0;">
|
|
Hover over tracks and objects for detailed information.
|
|
<hr style="margin: 5px 0;">
|
|
Last Updated: <span id="lastUpdate"></span>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Key</h3>
|
|
<hr>
|
|
<div id="legendKey"></div>
|
|
<hr>
|
|
Track Colors:
|
|
<div id="legendKeyColors"></div>
|
|
</div>
|
|
<div id="settingsPanel" class="panel">
|
|
<h3>Map Settings</h3>
|
|
<hr>
|
|
</div>
|
|
<div class="panel">
|
|
<a href="https://github.com/PyroNicampt/DV-Community-Map">Source</a> •
|
|
<a href="https://github.com/PyroNicampt/DV-Community-Map/issues">Issue Tracker</a> •
|
|
<a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a>
|
|
</div>
|
|
</div>
|
|
<button id="legendButton" class="panel orange"><svg style="transform:rotate(180deg) translateY(0px)" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|