Skip to content

Commit

Permalink
Font and framework updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@42A7C5
42A7C5 committed Jan 17, 2024
1 parent 01a6118 commit 76f9bd2
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 71 deletions.
76 changes: 27 additions & 49 deletions src/components/addLayers/addLiveDots.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
'circle-stroke-opacity': ['interpolate', ['linear'], ['zoom'], 7.9, 0, 9, 0.9],
'circle-stroke-width': 0.8,
'circle-emissive-strength': 1,
'circle-opacity':
darkMode == true ? ['interpolate', ['linear'], ['zoom'], 7.9, 0, 8.2, 0.7] : 0.5
'circle-opacity': 0.3
},
minzoom: 7
});
Expand All @@ -33,24 +32,22 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
'text-font': [
'step',
['zoom'],
['literal', ['Open Sans Regular', 'Arial Unicode MS Regular']],
12,
['literal', ['Open Sans Medium', 'Arial Unicode MS Medium']],
15,
['literal', ['Open Sans Bold', 'Arial Unicode MS Bold']]
['literal', ['DIN Pro Regular', 'Arial Unicode MS Regular']],
9,
['literal', ['DIN Pro Bold', 'Arial Unicode MS Medium']],
],

'text-size': ['interpolate', ['linear'], ['zoom'], 9, 12, 11, 13, 13, 15],
'text-size': 15,

'text-ignore-placement': ['step', ['zoom'], false, 9.5, true]
// 'text-ignore-placement': ['step', ['zoom'], false, 9.5, true]
},
paint: {
'text-color': textColorOfMapLabels(darkMode),
//'text-color': ['get', 'color'],
//'text-halo-color': '#eaeaea',
'text-halo-color': darkMode == true ? '#1d1d1d' : '#eaeaea',
'text-halo-width': 1,
'text-halo-blur': 100,
'text-halo-width': 2.4,
'text-halo-blur': 1,
'text-opacity': ['interpolate', ['linear'], ['zoom'], 7.9, 0, 8, 1]
}
});
Expand All @@ -68,7 +65,7 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
'circle-stroke-color': '#fff',
'circle-emissive-strength': 1,
'circle-stroke-width': 1,
'circle-opacity': ['interpolate', ['linear'], ['zoom'], 2, 0, 2.2, 0.6, 8.2, 0.8]
'circle-opacity': 0.3
}
});

Expand All @@ -90,21 +87,19 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
'text-font': [
'step',
['zoom'],
['literal', ['Open Sans Regular', 'Arial Unicode MS Regular']],
11,
['literal', ['Open Sans Medium', 'Arial Unicode MS Medium']],
13,
['literal', ['Open Sans Bold', 'Arial Unicode MS Bold']]
['literal', ['DIN Pro Regular', 'Arial Unicode MS Regular']],
9,
['literal', ['DIN Pro Bold', 'Arial Unicode MS Medium']],
],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 12, 11, 13, 13, 15],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 14, 11, 15, 13, 16],
'text-ignore-placement': ['step', ['zoom'], false, 9.5, true]
},
paint: {
'text-color': textColorOfMapLabels(darkMode),
//'text-halo-color': '#eaeaea',
'text-halo-color': darkMode == true ? '#1d1d1d' : '#eaeaea',
'text-halo-width': 2,
'text-halo-blur': 100,
'text-halo-width': 2.4,
'text-halo-blur': 1,
'text-emissive-strength': 1,
'text-opacity': ['interpolate', ['linear'], ['zoom'], 2, 0, 2.5, 0.8, 10, 1]
}
Expand All @@ -119,12 +114,12 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
source: 'localrail',
minzoom: 2,
paint: {
'circle-radius': ['interpolate', ['linear'], ['zoom'], 8, 5, 10, 6, 16, 10],
'circle-radius': ['interpolate', ['linear'], ['zoom'], 8, 7, 10, 8, 16, 12],
'circle-color': ['get', 'color'],
'circle-stroke-color': '#fff',
'circle-stroke-width': 1,
'circle-emissive-strength': 1,
'circle-opacity': ['interpolate', ['linear'], ['zoom'], 2, 0, 2.2, 0.6, 8.2, 0.8]
'circle-opacity': 0.6
}
});

Expand All @@ -143,25 +138,17 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
],*/
'text-variable-anchor': ['top'],
'text-radial-offset': 0,
'text-font': [
'step',
['zoom'],
['literal', ['Open Sans Regular', 'Arial Unicode MS Regular']],
11,
['literal', ['Open Sans Medium', 'Arial Unicode MS Medium']],
13,
['literal', ['Open Sans Bold', 'Arial Unicode MS Bold']]
],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 11, 11, 13, 13, 17],
'text-font': ['literal', ['DIN Pro Bold', 'Arial Unicode MS Bold']],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 14, 11, 16, 13, 18],
'text-ignore-placement': ['step', ['zoom'], false, 9.5, true]
},
paint: {
'text-color': textColorOfMapLabels(darkMode),
//'text-halo-color': '#eaeaea',
'text-halo-color': darkMode == true ? '#1d1d1d' : '#eaeaea',
'text-halo-width': 2,
'text-halo-width': 2.4,
'text-halo-blur': 1,
'text-emissive-strength': 1,
'text-halo-blur': 100,
'text-opacity': ['interpolate', ['linear'], ['zoom'], 2, 0, 2.5, 0.8, 10, 1]
}
});
Expand All @@ -174,12 +161,12 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
source: 'intercityrail',
minzoom: 2,
paint: {
'circle-radius': ['interpolate', ['linear'], ['zoom'], 8, 5, 10, 6, 16, 10],
'circle-radius': ['interpolate', ['linear'], ['zoom'], 8, 10, 10, 11, 16, 13],
'circle-color': ['get', 'color'],
'circle-stroke-color': '#fff',
'circle-stroke-width': 1,
'circle-emissive-strength': 1,
'circle-opacity': ['interpolate', ['linear'], ['zoom'], 2, 0, 2.2, 0.6, 8.2, 0.8]
'circle-opacity': 0.8
}
});

Expand All @@ -198,24 +185,15 @@ export function makeCircleLayers(map:any, darkMode: boolean, layerspercategory:
],*/
'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
'text-radial-offset': 0,
'text-font': [
'step',
['zoom'],
['literal', ['Open Sans Regular', 'Arial Unicode MS Regular']],
11,
['literal', ['Open Sans Medium', 'Arial Unicode MS Medium']],
13,
['literal', ['Open Sans Bold', 'Arial Unicode MS Bold']]
],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 16, 11, 18, 13, 22],
'text-font': ['literal', ['DIN Pro Bold', 'Arial Unicode MS Bold']],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 16, 11, 17, 13, 19],
'text-ignore-placement': ['step', ['zoom'], false, 9.5, true]
},
paint: {
'text-color': textColorOfMapLabels(darkMode),
//'text-halo-color': '#eaeaea',
'text-halo-color': darkMode == true ? '#1d1d1d' : '#eaeaea',
'text-halo-width': 1,
'text-halo-blur': 10,
'text-halo-width': 2.4,
'text-halo-blur': 1,
'text-emissive-strength': 1,
'text-opacity': ['interpolate', ['linear'], ['zoom'], 2, 0, 2.5, 0.8, 10, 1]
}
Expand Down
15 changes: 7 additions & 8 deletions src/components/addLayers/addShapes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function addShapes(map: any, darkMode: boolean, layerspercategory: any) {
['concat', ['get', 'onestop_feed_id'], "|", ['get', 'shape_id'], "|", ['coalesce', ['get', 'route_label']]] : ['coalesce', ['get', 'route_label']],
//'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
'text-font': ['literal', ['Open Sans Regular', 'Arial Unicode MS Regular']],
'text-size': ['interpolate', ['linear'], ['zoom'], 8, 6, 9, 7, 13, 11],
'text-size': ['interpolate', ['linear'], ['zoom'], 3, 7, 9, 9, 13, 11],
'text-ignore-placement': false,
'text-allow-overlap': false,
'symbol-spacing':
Expand All @@ -93,7 +93,7 @@ export function addShapes(map: any, darkMode: boolean, layerspercategory: any) {
paint: {
'text-color': ['concat', '#', ['get', 'text_color']],
'text-halo-color': ['concat', '#', ['get', 'color']],
'text-halo-width': 3,
'text-halo-width': 1,
'text-halo-blur': 0,
'text-opacity': ['interpolate', ['linear'], ['zoom'], 6, 0, 7, 0.8, 10, 1],
'line-emissive-strength': 1
Expand Down Expand Up @@ -149,7 +149,7 @@ export function addShapes(map: any, darkMode: boolean, layerspercategory: any) {
paint: {
'text-color': ['concat', '#', ['get', 'text_color']],
'text-halo-color': ['concat', '#', ['get', 'color']],
'text-halo-width': 3,
'text-halo-width': 1,
'text-halo-blur': 1,
'line-emissive-strength': 1,
//'text-opacity': ['interpolate', ['linear'], ['zoom'], 3, 0, 3.5, 0.8, 4, 1]
Expand Down Expand Up @@ -198,10 +198,9 @@ export function addShapes(map: any, darkMode: boolean, layerspercategory: any) {
'symbol-placement': 'line',
'text-field': ['coalesce', ['get', 'route_label']],
//'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
'text-font': ['Open Sans Bold', 'Arial Unicode MS Regular'],
'text-size': ['interpolate', ['linear'], ['zoom'], 3, 7, 9, 9, 13, 11],
'text-ignore-placement': false,

'symbol-spacing': ['step', ['zoom'], 20, 6, 40, 9, 70, 13, 80, 15, 100],
'text-allow-overlap': false,
visibility: 'none'
Expand All @@ -210,7 +209,7 @@ export function addShapes(map: any, darkMode: boolean, layerspercategory: any) {
'text-color': ['concat', '#', ['get', 'text_color']],
'text-emissive-strength': 1,
'text-halo-color': ['concat', '#', ['get', 'color']],
'text-halo-width': 3,
'text-halo-width': 1,
'text-halo-blur': 1
//'text-opacity': ['interpolate', ['linear'], ['zoom'], 3, 0, 3.5, 0.8, 4, 1]
},
Expand Down Expand Up @@ -249,7 +248,7 @@ export function addShapes(map: any, darkMode: boolean, layerspercategory: any) {
'symbol-placement': 'line',
'text-field': ['coalesce', ['get', 'route_label']],
//'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
'text-font': ['Open Sans Bold', 'Arial Unicode MS Regular'],
'text-size': ['interpolate', ['linear'], ['zoom'], 3, 7, 9, 9, 13, 11],
'text-ignore-placement': false,

Expand All @@ -261,7 +260,7 @@ export function addShapes(map: any, darkMode: boolean, layerspercategory: any) {
'text-color': ['concat', '#', ['get', 'text_color']],
'text-emissive-strength': 1,
'text-halo-color': ['concat', '#', ['get', 'color']],
'text-halo-width': 3,
'text-halo-width': 1,
'text-halo-blur': 1
//'text-opacity': ['interpolate', ['linear'], ['zoom'], 3, 0, 3.5, 0.8, 4, 1]
},
Expand Down
26 changes: 13 additions & 13 deletions src/components/addLayers/addStops.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,21 @@ export function addStopsLayers(map:any, darkMode:boolean, layerspercategory:any)
'text-field': ['get', 'displayname'],
//'text-field': ['coalesce', ['get', 'route_types']],
'text-variable-anchor': ['left', 'right', 'top', 'bottom'],
'text-size': ['interpolate', ['linear'], ['zoom'], 12, 6, 15, 8],
'text-size': 10,
'text-radial-offset': 0.7,
//'text-ignore-placement': false,
//'icon-ignore-placement': false,
//'text-allow-overlap': true,
//'symbol-avoid-edges': false,
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Regular']
'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular']
},
paint: {
'text-color': darkMode ? '#eee6fe' : '#2a2a2a',
'text-halo-color': darkMode ? '#0f172a' : '#ffffff',
'text-halo-width': 0.4,
'text-emissive-strength': 1
},
minzoom: window?.innerWidth >= 768 ? 14.5 : 13
minzoom: 11
});


Expand All @@ -77,7 +77,7 @@ export function addStopsLayers(map:any, darkMode:boolean, layerspercategory:any)
: '#333333',
'circle-stroke-width': ['step', ['zoom'], 1.2, 13.2, 1.5],
'circle-stroke-opacity': ['step', ['zoom'], 0.5, 15, 0.6],
'circle-opacity': 0.1,
'circle-opacity': 1,
'circle-emissive-strength': 1
},
minzoom: 8,
Expand Down Expand Up @@ -108,18 +108,18 @@ export function addStopsLayers(map:any, darkMode:boolean, layerspercategory:any)
layout: {
'text-field': ['get', 'displayname'],
'text-variable-anchor': ['left', 'right', 'top', 'bottom'],
'text-size': window.innerWidth >= 1023 ? ['interpolate', ['linear'], ['zoom'], 9, 8, 15, 10, 17, 12] : ['interpolate', ['linear'], ['zoom'], 9, 6, 15, 9, 17, 10],
'text-size': 12,
'text-radial-offset': 1,
//'text-ignore-placement': true,
//'icon-ignore-placement': false,
//'text-allow-overlap': true,
//'symbol-avoid-edges': false,
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Regular'],
'text-font': ['DIN Pro Bold', 'Arial Unicode MS Regular'],

},
paint: {

'text-color': darkMode ? '#ddd6fe' : '#2a2a2a',
'text-color': darkMode ? '#ffffff' : '#2a2a2a',
'text-halo-color': darkMode ? '#0f172a' : '#ffffff',
'text-halo-width': 1,
'text-emissive-strength': 1,
Expand Down Expand Up @@ -159,7 +159,7 @@ export function addStopsLayers(map:any, darkMode:boolean, layerspercategory:any)
: '#333333',
'circle-stroke-width': ['step', ['zoom'], 1.2, 13.2, 1.5],
'circle-stroke-opacity': ['step', ['zoom'], 0.5, 15, 0.6],
'circle-opacity': 0.1,
'circle-opacity': 1,
'circle-emissive-strength': 1
},
minzoom: 7,
Expand Down Expand Up @@ -187,18 +187,18 @@ map.addLayer({
layout: {
'text-field': ['get', 'displayname'],
'text-variable-anchor': ['left', 'right', 'top', 'bottom'],
'text-size': window.innerWidth >= 1023 ? ['interpolate', ['linear'], ['zoom'], 6, 8, 9, 10, 15, 12, 17, 14] : ['interpolate', ['linear'], ['zoom'], 9, 8, 15, 10, 17, 12],
'text-size': 12,
'text-radial-offset': 1,
//'text-ignore-placement': true,
//'icon-ignore-placement': false,
//'text-allow-overlap': true,
//'symbol-avoid-edges': false,
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Regular'],
'text-font': ['DIN Pro Bold', 'Arial Unicode MS Regular'],

},
paint: {

'text-color': darkMode ? '#ddd6fe' : '#2a2a2a',
'text-color': darkMode ? '#ffffff' : '#2a2a2a',
'text-halo-color': darkMode ? '#0f172a' : '#ffffff',
'text-halo-width': 1,
'text-emissive-strength': 1
Expand Down Expand Up @@ -235,7 +235,7 @@ map.addLayer({
//'icon-ignore-placement': false,
//'text-allow-overlap': true,
//'symbol-avoid-edges': false,
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Regular'],
'text-font': ['DIN Pro Bold', 'Arial Unicode MS Regular'],

},
paint: {
Expand Down Expand Up @@ -285,7 +285,7 @@ map.addLayer({
//'icon-ignore-placement': false,
//'text-allow-overlap': true,
//'symbol-avoid-edges': false,
'text-font': ['Open Sans Semibold', 'Arial Unicode MS Regular'],
'text-font': ['DIN Pro Bold', 'Arial Unicode MS Regular'],

},
paint: {
Expand Down
2 changes: 1 addition & 1 deletion src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@
const layersettingsnamestorage = 'layersettingsv4';
if (browser) {
let fetchitem = localStorage.getItem(layersettingsnamestorage);
let fetchitem = ((embedmode && urlParams.get('framework-layers')) ? atob(urlParams.get('framework-layers') as string) : null) || localStorage.getItem(layersettingsnamestorage);
if (fetchitem != null) {
let cachedJsonObject = JSON.parse(fetchitem);
Expand Down

0 comments on commit 76f9bd2

Please sign in to comment.