258 lines
16 KiB
HTML
258 lines
16 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;
|
|
}
|
|
.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="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="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>
|
|
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>
|
|
</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>
|
|
<div 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></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|