252 lines
15 KiB
HTML
252 lines
15 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">
|
|
<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="topleft">
|
|
<div id="headerbar" class="panel orange">
|
|
<div>
|
|
DV Community Map
|
|
</div>
|
|
</div>
|
|
<div id="legend" style="display: flex;">
|
|
<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" style="width:330px">
|
|
<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" style="height: fit-content;"><svg style="transform:rotate(180deg) translateY(-3px)" height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
<div id="footer" class="orange">
|
|
<div id="zoomLevelDisplay"></div>
|
|
Map v0.4 alpha
|
|
<br>
|
|
Updated for Game Build 99.3
|
|
<br>
|
|
This tool is a fan work, Derail Valley owned by Altfuture
|
|
</div>
|
|
</body>
|
|
</html>
|