-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (134 loc) · 7.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
<style>
body {
background-color: rgb(30, 29, 32);
text-align: center;
}
h1 {
color: whitesmoke;
}
h2 {
color: whitesmoke;
text-align: left;
}
.h {
font-family: "Lucida Console", "Courier New", monospace;
}
p {
text-align: left;
}
.p {
font-family: "Lucida Console", "Courier New", monospace;
color: whitesmoke
}
/* Linkfarver */
/* Ikke esøgt (Jeg endrede den, og nu ved jeg ikke hvad den startede på) */
a:link {
color: rgb(86, 179, 255);
}
/* Hover (Skal være det salle som link) */
a:hover {
color: rgb(86, 179, 255);
}
/* I gang med at klikke på (Jeg aner bare ikke hvorfor den er rød??) */
a:active {
color: rgb(86, 179, 255);
}
/* Besøgt (Jeg endre den da den basis lilla er for mørk) */
a:visited {
color: rgb(100, 85, 185);
}
/* Den store div der holder alt ind i midten */
div.stor {
width: 60%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 100px;
margin-bottom: 100px;
}
/* Den lille div der holder billederne og deres kilde */
div.lille {
max-width: 600px;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 70px;
}
/* Alle billederne */
img.billede {
width: 100%;
margin-left: auto;
margin-right: auto;
height: auto;
object-fit: fill;
border-radius: 1vw;
}
/*LEAFLET*/
#map {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 1vw;
}
</style>
<title>Grenen til Gedser Odde</title>
<!-----------LEAFTLET----------------->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
<div class="stor">
<h1 class="h">Grenen til Gedser Odde</h1>
<br>
<h2 class="h" id="inspiration">Inspiration</h2>
<hr>
<p class="p">Jeg gik i sommers <a href="https://www.kyst-kyststien.dk" target="_blank" rel="noopener noreferrer">Kyst til Kyst stien</a> med min far, det er en rute der går fra Blåvand til Vejle, ca. tværs over Jylland.</p>
<p class="p">Jeg blev inspireret af turen til at lave min egen rute der starter ved det nordligste sted i <b>Danmark</b>, <b>Nordstrand</b>, går forbi <b>Grenen</b> ved enden af <b>Jylland</b>, og slutter ved det sydligste punkt nemlig <b>Gedser odde</b>.</p>
<p class="p">Jeg ville have ruten til at være en flot varieret cykelrute, og helst gerne med lange stækninger der er markeret af andre ruter, så man kan følge deres skilte, men jeg ville stadig have ruten til at være relativt direkte så man føler at man kommer tættere på målet for hver dag.</p>
<h2 class="h" id="ruten">Rutens sammensætning</h2>
<hr>
<p class="p"><b>Danmark</b> har et stort netværk af nationale cykelruter der strækker sig over hele landet.</p>
<p class="p">Alle ruterne er også afmærkeret med skilte med røde firkanter, og firkanterne er nummereret alt efter hvilken rute det er.</p>
<div class="lille">
<img class="billede" src="https://www.visitvejle.dk/sites/visitvejle.com/files/styles/hero/public/2019-10/ostkystruten-cyklist.jpg" alt="">
<p class="p"><strong>Foto:</strong> Kenneth Stjernegaard</p>
</div>
<div class="lille">
<img class="billede" src="https://via.ritzau.dk/data/images/00193/fa3085e9-2e7b-498a-99ae-2eb9340feaf1-w_960.jpg" alt="">
<p class="p"><strong>Grafik:</strong> Vejdirektoratet</p>
</div>
<p class="p">Hvis man vil helt ud til <b>Nordstrand</b> og <b>Grenen</b>, så kan man stille cyklen ved <b>Grenens parkeringsplads</b> og gå derud.</p>
<p class="p">Ellers starter ruten ved <b>parkeringspladsen ved Grenen</b> og derfra går den ad den aller nordligste del af <a href="https://ruter.dk/route/vestkystruten" target="_blank" rel="noopener noreferrer">Vestkystruten,</a> før man kommer til <b>Hulsig</b> hvor man cykler ad <a href="https://ruter.dk/route/oestkystruten" target="_blank" rel="noopener noreferrer">Østkystruten,</a> der tager en et langt stykke af vejen ned langs <b>Jyllands</b> østlige kyst.</p>
<p class="p">Ved <b>Fredericia</b> drejer ruten over på <b>Fyn</b> på <a href="https://ruter.dk/route/oestersoeruten" target="_blank" rel="noopener noreferrer">Østersøruten,</a> der går igennem <b>Svendborg</b> til <b>Langeland</b>, og så med færge til <b>Lolland</b>, hvorfra ruten så går til <b>Nykøbing Falster</b>.<br>
<em>(Østersøruten går igennem <b>Svendborg</b> på to forskellige leder, så man skal i <b>Svendborg</b>, på en måde skifte fra en del af ruten, til en anden del af den samme rute)</em></p>
<p class="p">Fra <b>Nykøbing Falster</b> går det af den orange nummer 9, den rute der hedder <a href="https://ruter.dk/route/gedser-helsingoer/" target="_blank" rel="noopener noreferrer">Gedser-Helsingør,</a> og den slutter i <b>Gedser</b> <em>sjovt nok</em> hvorfra der kun ca. 4 km. til målet ved <b>Gedser Odde</b>, som bare bliver kørt på landevej.</p>
<h2 class="h" id="kort">Kort</h2>
<hr>
<!-----------LEAFTLET----------------->
<div class="lille">
<div id="map"></div>
</div>
<script>var map = L.map('map').setView([56.2, 10.6], 7);</script>
<script>L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {maxZoom: 19, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map);</script>
<!------GPX------->
<script>
var url = 'https://raw.githubusercontent.com/Aggaar/grenentilgedserodde.github.com/main/Grenen%20til%20Gedser%20Odde(1).gpx'; // URL to your GPX file or the GPX itself
new L.GPX(url, {async: true}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
</script>
<h2 class="h" id="tillæg">Tillæg</h2>
<hr>
<h2 class="h" id="Downloads">Download</h2>
<hr>
<p class="p">Ruter downloaded fra <a href="https://ruter.dk/" target="_blank" rel="noopener noreferrer">ruter.dk</a> og <a href="https://waymarkedtrails.org/" target="_blank" rel="noopener noreferrer">waymarked trails</a></p>
<p class="p">Programmet jeg har brugt til at redigere ruterne hedder <a href="https://gpx.studio/gpx.studio/" target="_blank" rel="noopener noreferrer">gpx.studio</a></p>
<p class="p"><a href="https://www.kyst-kyststien.dk/" target="_blank" rel="noopener noreferrer">Kyst til Kyst stien</a></p>
<p class="p"><a href="https://github.com/mpetazzoni/leaflet-gpx" target="_blank" rel="noopener noreferrer">Leaflet</a></p>
</div>
</body>