rename route -> navigation.

add cycle routes.

display more text at weird angles and lower zoom levels.

remove "style-normal" and support "default" in the code.

Author: arichnad

buttons.json

@@ -6,6 +6,9 @@
 			"active": true,
 			"name": "◉",
 			"source": [
+				{ "id": "routes", "class": "layerIds", "active": false, "layerIds": {
+					"cycle-route": [{"propertyType": "layout", "property": "visibility", "value": "visible"}]
+				}},
 				{ "id": "gravel-road", "class": "layerIds", "active": false, "layerIds": {
 					"road-unpaved": [{"propertyType": "layout", "property": "visibility", "value": "visible"}]
 				}},
@@ -17,7 +20,7 @@
 					"cycleway-paved": [{"propertyType": "layout", "property": "visibility", "value": "visible"}],
 					"cyclefriendly-paved": [{"propertyType": "layout", "property": "visibility", "value": "visible"}]
 				}},
-				{ "id": "route", "class": "route" },
+				{ "id": "navigation", "class": "navigation" },
 				{
 					"id": "satellite",
 					"class": "layer",

dist/cyclemaps.js

@@ -135,6 +135,12 @@
 		.guage {
 			display: inline-block;
 		}
+		#routes {
+			background-color: hsl(0, 20%, 60%);
+		}
+		#routes.active {
+			background-color: hsl(0, 100%, 50%);
+		}
 		#gravel-road {
 			background-color: hsl(0, 0%, 75%);
 		}

index.html

@@ -1,6 +1,6 @@
 
 import { MainControl } from './main.js';
-import { RouteControl } from './route.js';
+import { NavigationControl } from './navigation.js';
 import * as util from './util.js';
 
 import { IControl, Popup, LayerSpecification, SourceSpecification, Map, MapMouseEvent, MapLayerMouseEvent, MapGeoJSONFeature } from 'maplibre-gl';
@@ -280,18 +280,18 @@ class RainButton extends LayerButton {
 	}
 }
 
-class RouteButton extends Button {
-	routeControl: RouteControl;
+class NavigationButton extends Button {
+	navigationControl: NavigationControl;
 	constructor(layer: CyclemapLayerSpecification, buttonControl: ButtonControl) {
 		super(layer, buttonControl);
-		this.routeControl = new RouteControl();
+		this.navigationControl = new NavigationControl();
 	}
 	select() {
 		super.select();
-		this.buttonControl.map!.addControl(this.routeControl);
+		this.buttonControl.map!.addControl(this.navigationControl);
 	}
 	deselect() {
-		this.buttonControl.map!.removeControl(this.routeControl);
+		this.buttonControl.map!.removeControl(this.navigationControl);
 		super.deselect();
 	}
 }
@@ -487,7 +487,7 @@ export class ButtonControl implements IControl {
 		about: layer => new AboutButton(layer, this),
 		layerIds: layer => new LayerIdsButton(layer, this),
 		externalLink: layer => new ExternalLinkButton(layer, this),
-		route: layer => new RouteButton(layer, this),
+		navigation: layer => new NavigationButton(layer, this),
 	};
 
 	generateButton(layer: CyclemapLayerSpecification) {

src/button.ts

@@ -115,7 +115,7 @@ export class MainControl implements IControl {
 			Cookies.set('style', style, cookieAttributes);
 		}
 
-		return styleRoot + (style != null ? style : 'style.json');
+		return styleRoot + (style != null && style != 'default' ? style : 'style.json');
 	}
 
 	getButtonsQuery() {

src/main.ts

@@ -7,7 +7,7 @@ import { IControl, Map } from 'maplibre-gl';
 const DURATION_RATIO = 0.7; //discount the duration, mapbox cycling speed is crazy-slow
 const CYCLEMAPS_MAPBOX_PUBLIC_ACCESS_TOKEN = process.env.CYCLEMAPS_MAPBOX_PUBLIC_ACCESS_TOKEN;
 
-export class RouteControl implements IControl {
+export class NavigationControl implements IControl {
 	map: Map | undefined;
 	directions: MapLibreGlDirections | undefined;
 	dummyContainer: HTMLElement | undefined;

src/route.ts src/navigation.tssrc/route.ts renamed to src/navigation.ts

@@ -298,7 +298,6 @@
 						]
 					]
 				},
-				"line-opacity": 1,
 				"line-width": {
 					"base": 1.4,
 					"stops": [
@@ -343,7 +342,6 @@
 			},
 			"paint": {
 				"line-color": "hsl(205, 56%, 73%)",
-				"line-opacity": 1,
 				"line-width": {
 					"base": 1.4,
 					"stops": [
@@ -392,7 +390,6 @@
 					2,
 					1
 				],
-				"line-opacity": 1,
 				"line-width": {
 					"base": 1.4,
 					"stops": [
@@ -896,7 +893,6 @@
 			},
 			"paint": {
 				"line-color": "hsl(0, 0%, 100%)",
-				"line-opacity": 1,
 				"line-width": {
 					"base": 1.5,
 					"stops": [
@@ -939,7 +935,6 @@
 			},
 			"paint": {
 				"line-color": "hsl(0, 0%, 100%)",
-				"line-opacity": 1,
 				"line-width": {
 					"base": 1.5,
 					"stops": [
@@ -1762,6 +1757,41 @@
 			"source-layer": "transportation",
 			"type": "line"
 		},
+		{
+			"id": "cycle-route",
+			"type": "line",
+			"source": "openmaptiles",
+			"source-layer": "cycleroute",
+			"filter": [
+				"all",
+				[
+					"==",
+					"$type",
+					"LineString"
+				]
+			],
+			"layout": {
+				"line-cap": "round",
+				"line-join": "round",
+				"visibility": "none"
+			},
+			"paint": {
+				"line-color": "hsl(0, 100%, 50%, 75%)",
+				"line-width": {
+					"base": 1.1,
+					"stops": [
+						[
+							5,
+							1
+						],
+						[
+							20,
+							6
+						]
+					]
+				}
+			}
+		},
 		{
 			"id": "admin_sub",
 			"type": "line",
@@ -2029,7 +2059,7 @@
 			"type": "symbol",
 			"source": "openmaptiles",
 			"source-layer": "transportation_name",
-			"minzoom": 13,
+			"minzoom": 9,
 			"filter": [
 				"==",
 				"$type",
@@ -2056,6 +2086,7 @@
 					"Noto Sans Regular"
 				],
 				"text-letter-spacing": 0.1,
+				"text-max-angle": 360,
 				"text-rotation-alignment": "map",
 				"text-size": {
 					"base": 1.4,