Skip to content

Commit cb06919

Browse files
arichnadarichnad
committed
major redesign.
1 parent 8cecf95 commit cb06919

File tree

9 files changed

+674
-519
lines changed

9 files changed

+674
-519
lines changed

‎buttons.json‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
{
2+
"buttons": [
3+
{ "id": "unpaved road", "class": "layerIds", "group": "style", "layerIds": {
4+
"road-unpaved": [{"propertyType": "paint", "property": "line-width", "value": {"base": 1.1, "stops": [[5, 0.75], [20, 5]]}}],
5+
"cycleway-unpaved": [{"propertyType": "layout", "property": "visibility", "value": "none"}],
6+
"cycleway-unknown": [{"propertyType": "layout", "property": "visibility", "value": "none"}],
7+
"cycleway-paved": [{"propertyType": "layout", "property": "visibility", "value": "none"}],
8+
"cyclefriendly-paved": [{"propertyType": "layout", "property": "visibility", "value": "none"}]
9+
}},
10+
{ "id": "unpaved?", "class": "layerIds", "group": "style", "layerIds": {
11+
"road-unpaved": [{"propertyType": "layout", "property": "visibility", "value": "none"}],
12+
"cycleway-paved": [{"propertyType": "layout", "property": "visibility", "value": "none"}],
13+
"cyclefriendly-paved": [{"propertyType": "layout", "property": "visibility", "value": "none"}]
14+
}},
15+
{ "id": "paved", "class": "layerIds", "group": "style", "layerIds": {
16+
"road-unpaved": [{"propertyType": "layout", "property": "visibility", "value": "none"}],
17+
"cycleway-unpaved": [{"propertyType": "layout", "property": "visibility", "value": "none"}],
18+
"cycleway-unknown": [{"propertyType": "layout", "property": "visibility", "value": "none"}]
19+
}},
20+
{
21+
"id": "satellite",
22+
"class": "layer",
23+
"name": "sat",
24+
"active": false,
25+
"type": "raster",
26+
"source": {"type": "raster", "tiles": ["https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY3ljbGVtYXB1cyIsImEiOiJjanNhbHRlaGMwMGp2NDNqeG80Mzk2cmExIn0.0OBPtvf3KANeaA6QOCk1yw"]},
27+
"beforeId": "satellite-anchor"
28+
},
29+
{ "id": "weather", "class": "directory", "source": [
30+
{
31+
"id": "past-rain-1d",
32+
"class": "rain",
33+
"name": "past rain 1d",
34+
"active": false,
35+
"type": "raster",
36+
"paint": {"raster-opacity": 0.5},
37+
"beforeId": "rain-anchor",
38+
"group": "weather",
39+
"source": {
40+
"type": "raster",
41+
"tileSize": 2048,
42+
"tiles" : [
43+
"https://mapservices.weather.noaa.gov/raster/rest/services/obs/rfc_qpe/MapServer/export?bbox={bbox-epsg-3857}&size=512,512&dpi=96&format=png8&transparent=true&bboxSR=3857&imageSR=3857&layers=show:28&f=image"
44+
]
45+
}
46+
},
47+
{
48+
"id": "past-rain-3d",
49+
"class": "rain",
50+
"name": "past rain 3d",
51+
"active": false,
52+
"type": "raster",
53+
"paint": {"raster-opacity": 0.5},
54+
"beforeId": "rain-anchor",
55+
"group": "weather",
56+
"source": {
57+
"type": "raster",
58+
"tileSize": 2048,
59+
"tiles" : [
60+
"https://mapservices.weather.noaa.gov/raster/rest/services/obs/rfc_qpe/MapServer/export?bbox={bbox-epsg-3857}&size=512,512&dpi=96&format=png8&transparent=true&bboxSR=3857&imageSR=3857&layers=show:40&f=image"
61+
]
62+
}
63+
},
64+
{
65+
"id": "past-rain-5d",
66+
"class": "rain",
67+
"name": "past rain 5d",
68+
"active": false,
69+
"type": "raster",
70+
"paint": {"raster-opacity": 0.5},
71+
"beforeId": "rain-anchor",
72+
"group": "weather",
73+
"source": {
74+
"type": "raster",
75+
"tileSize": 2048,
76+
"tiles" : [
77+
"https://mapservices.weather.noaa.gov/raster/rest/services/obs/rfc_qpe/MapServer/export?bbox={bbox-epsg-3857}&size=512,512&dpi=96&format=png8&transparent=true&bboxSR=3857&imageSR=3857&layers=show:48&f=image"
78+
]
79+
}
80+
}
81+
]},
82+
{ "id": "settings", "class": "directory", "source": [
83+
{ "id": "reset", "class": "reset" },
84+
{ "id": "heat" },
85+
{ "id": "osm" },
86+
{ "id": "g" },
87+
{ "id": "about-menu", "name": "about", "class": "about" }
88+
]}
89+
]
90+
}

‎dist/cyclemaps.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 54 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
user-select: none;
2727
}
2828
.about {
29+
display: none;
2930
z-index: 2;
3031
width: 100%;
3132
height: 100%;
3233
position: absolute;
33-
visibility: hidden;
3434
backdrop-filter: blur(3px);
3535
}
3636
.border {
@@ -92,18 +92,44 @@
9292
vertical-align: middle;
9393
transform: scale(.75);
9494
}
95-
.picker {
96-
font-size: 10px;
97-
}
98-
.picker button {
99-
font-size: 10px;
95+
@media (orientation: portrait) {
96+
.pickerHolder {
97+
flex-direction: column;
98+
}
99+
.pickerHolder nav {
100+
flex-direction: row;
101+
}
102+
}
103+
@media (orientation: landscape) {
104+
.pickerHolder {
105+
flex-direction: row;
106+
}
107+
.pickerHolder nav {
108+
flex-direction: column;
109+
}
110+
}
111+
.pickerHolder {
112+
display: inline-flex;
113+
padding-top: .5rem;
114+
padding-left: .5rem;
115+
}
116+
.pickerHolder nav {
117+
display: inline-flex;
118+
}
119+
.pickerHolder button {
120+
margin: .3rem !important;
121+
padding: 0;
122+
width: 5.5rem;
123+
height: 1.8rem;
124+
font-size: .8rem;
125+
font-weight: 700;
100126
}
101-
.picker button.active {
127+
.pickerHolder button.active {
102128
background-color: #48b;
103129
color: #fff;
104130
}
105131
.rainLegend {
106-
visibility: hidden;
132+
display: none;
107133
padding: 5px;
108134
}
109135
.guage {
@@ -112,14 +138,7 @@
112138
</style>
113139
</head>
114140
<body>
115-
<div class="links maplibregl-ctrl-top-left">
116-
<button class="maplibregl-ctrl maplibregl-ctrl-group" onclick="document.getElementById('about').style.visibility = 'visible';">cyclemaps</button>
117-
<button class="maplibregl-ctrl maplibregl-ctrl-group" onclick="window.open(`https://www.strava.com/heatmap#${window.mainControl.getHeatmapPoint()}/hot/ride`);">heat</button>
118-
<button class="maplibregl-ctrl maplibregl-ctrl-group" onclick="window.open(`https://www.openstreetmap.org/edit#map=${window.mainControl.getOsmPoint()}`);">osm</button>
119-
<button class="maplibregl-ctrl maplibregl-ctrl-group" onclick="window.open(`https://www.google.com/maps/@${window.mainControl.getGPoint()}z`);">g</button>
120-
</div>
121-
<button id="clearLayers" class="maplibregl-ctrl maplibregl-ctrl-group picker" style="visibility: hidden;">clear</button>
122-
<nav id="layerPicker" class="picker">
141+
<nav id="picker" class="pickerHolder">
123142
</nav>
124143
<div id="map" class="map">
125144
</div>
@@ -143,10 +162,7 @@
143162
<div class="legendItem"><div class="icon" style="background-position: -204px -112px;"></div> water</div>
144163
</div>
145164
</div>
146-
<div id="about" class="about"><div class="border">
147-
<p><a href="#" onclick="
148-
document.getElementById('about').style.visibility = 'hidden';
149-
">⇐</a></p>
165+
<div id="about" class="about" onClick="document.getElementById('about').style.display = 'none';"><div class="border">
150166
<ul>
151167
<li>if you notice a problem, please
152168
<a class="osm-link" href="#" onclick="
@@ -159,25 +175,25 @@
159175
<p>thanks to the many projects that this site depends on.</p>
160176

161177
<ul>
162-
<li><a href="https://www.openstreetmap.org/copyright">openstreetmap contributors</a></li>
163-
<li><a href="https://github.com/cyclemap/cyclemaps">github pages</a></li>
164-
<li><a href="https://openmaptiles.org/">openmaptiles</a> (<a href="https://github.com/cyclemap/openmaptiles-cycle/">our edits</a>)</li>
165-
<li><a href="https://github.com/openmaptiles/maptiler-basic-gl-style">maptiler styles</a> (<a href="https://github.com/cyclemap/openmaptiles-cycle/">our edits</a>)</li>
166-
<li><a href="https://github.com/maptiler/tileserver-gl/">maptiler tile server</a></li>
167-
<li><a href="https://www.postgresql.org/">postgresql</a> &amp; <a href="https://postgis.net/">postgis</a></li>
168-
<li><a href="https://www.wikidata.org/">wikidata</a></li>
169-
<li><a href="https://openrouteservice.org/">openrouteservice</a></li>
170-
<li><a href="https://openaddresses.io/">openaddresses</a></li>
171-
<li><a href="https://www.geonames.org/">geonames</a></li>
172-
<li><a href="https://www.whosonfirst.org/">who's on first</a></li>
178+
<li><a href="https://www.openstreetmap.org/copyright" target="_blank">openstreetmap contributors</a></li>
179+
<li><a href="https://github.com/cyclemap/cyclemaps" target="_blank">github pages</a></li>
180+
<li><a href="https://openmaptiles.org/" target="_blank">openmaptiles</a> (<a href="https://github.com/cyclemap/openmaptiles-cycle/" target="_blank">our edits</a>)</li>
181+
<li><a href="https://github.com/openmaptiles/maptiler-basic-gl-style" target="_blank">maptiler styles</a> (<a href="https://github.com/cyclemap/openmaptiles-cycle/" target="_blank">our edits</a>)</li>
182+
<li><a href="https://github.com/maptiler/tileserver-gl/" target="_blank">maptiler tile server</a></li>
183+
<li><a href="https://www.postgresql.org/" target="_blank">postgresql</a> &amp; <a href="https://postgis.net/" target="_blank">postgis</a></li>
184+
<li><a href="https://www.wikidata.org/" target="_blank">wikidata</a></li>
185+
<li><a href="https://openrouteservice.org/" target="_blank">openrouteservice</a></li>
186+
<li><a href="https://openaddresses.io/" target="_blank">openaddresses</a></li>
187+
<li><a href="https://www.geonames.org/" target="_blank">geonames</a></li>
188+
<li><a href="https://www.whosonfirst.org/" target="_blank">who's on first</a></li>
173189
<!-- openmaptiles-tools -->
174-
<li><a href="https://www.naturalearthdata.com/">natural earth</a></li>
175-
<li><a href="https://github.com/pnorman/osmborder">osmborder</a></li>
176-
<li><a href="https://omniscale.com/">omniscale</a></li>
177-
<li><a href="https://github.com/maplibre/maplibre-gl-js">maplibre</a></li>
178-
<li><a href="https://water.weather.gov/precip/about.php">national weather service advanced hydrologic prediction service</a></li>
179-
<li><a href="https://maputnik.github.io/">maputnik</a></li>
180-
<li><a href="https://www.docker.com/">docker</a> / <a href="https://ubuntu.com/">ubuntu</a> / <a href="https://www.gnu.org/">gnu</a> / <a href="https://www.kernel.org/">linux</a></li>
190+
<li><a href="https://www.naturalearthdata.com/" target="_blank">natural earth</a></li>
191+
<li><a href="https://github.com/pnorman/osmborder" target="_blank">osmborder</a></li>
192+
<li><a href="https://omniscale.com/" target="_blank">omniscale</a></li>
193+
<li><a href="https://github.com/maplibre/maplibre-gl-js" target="_blank">maplibre</a></li>
194+
<li><a href="https://water.weather.gov/precip/about.php" target="_blank">national weather service advanced hydrologic prediction service</a></li>
195+
<li><a href="https://maputnik.github.io/" target="_blank">maputnik</a></li>
196+
<li><a href="https://www.docker.com/" target="_blank">docker</a> / <a href="https://ubuntu.com/" target="_blank">ubuntu</a> / <a href="https://www.gnu.org/" target="_blank">gnu</a> / <a href="https://www.kernel.org/" target="_blank">linux</a></li>
181197
</ul>
182198

183199
<p>if you notice an issue that can't be fixed by

0 commit comments

Comments
 (0)