Skip to content

Commit

Permalink
Fix pointer style
Browse files Browse the repository at this point in the history
  • Loading branch information
@42A7C5
42A7C5 committed Feb 12, 2024
1 parent 013bfbf commit d2bfd93
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 126 deletions.
8 changes: 4 additions & 4 deletions src/components/addLayers/addLiveDots.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function makeCircleLayers(map:Map, 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': 0.3
'circle-opacity': 0.7
},
minzoom: 7
});
Expand Down Expand Up @@ -78,7 +78,7 @@ export function makeCircleLayers(map:Map, darkMode: boolean, layerspercategory:
'circle-stroke-color': '#fff',
'circle-emissive-strength': 1,
'circle-stroke-width': 1,
'circle-opacity': 0.3
'circle-opacity': 1
}
});

Expand Down Expand Up @@ -132,7 +132,7 @@ export function makeCircleLayers(map:Map, darkMode: boolean, layerspercategory:
'circle-stroke-color': '#fff',
'circle-stroke-width': 1,
'circle-emissive-strength': 1,
'circle-opacity': 0.6
'circle-opacity': 1

This comment has been minimized.

Sign in to view

Copy link
@kylerchin

kylerchin Feb 13, 2024 •
edited
Loading

Member

Circles should be slightly transparent, I don't think this was a good idea

This comment has been minimized.

Sign in to view

Copy link
@kylerchin

kylerchin Feb 13, 2024

Member

The reason is, this map should be comfortable to use in regions in which extreme density of trains is possible, such as Germany, France, the United Kingdom, Belgium, New York MTA area, etc. The new design obscures the actual data and makes it more difficult to look at them
}
});

Expand Down Expand Up @@ -179,7 +179,7 @@ export function makeCircleLayers(map:Map, darkMode: boolean, layerspercategory:
'circle-stroke-color': '#fff',
'circle-stroke-width': 1,
'circle-emissive-strength': 1,
'circle-opacity': 0.8
'circle-opacity': 1
}
});

Expand Down
131 changes: 11 additions & 120 deletions src/components/addLayers/makebearingarrowpointers.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export function makeBearingArrowPointers(map:any, darkMode:boolean,layerspercategory:any) {
const busbearingiconsize = ['interpolate', ['linear'], ['zoom'], 9, 0.2, 12, 0.5, 15, 1];
const busbearingiconsize = 0.3;

This comment has been minimized.

Sign in to view

Copy link
@kylerchin

kylerchin Feb 13, 2024

Member

Why is the coefficient interpolation removed? It should shrink as the zoom is reduced

const busbearingoffset = ['interpolate', ['linear'], ['zoom'],10, ['literal', [0, -64]], 13, ['literal', [0, -45]], 15, ['literal', [0, -48]]];
const busbearingoffset = ['literal', [0, -43]];

const railbearingiconsize = ['interpolate', ['linear'], ['zoom'], 9, 0.2, 12, 0.3, 15, 0.5];
const railbearingiconsize = 0.5;

const railbearingoffset = ['interpolate', ['linear'], ['zoom'],9, ['literal', [0, -80]], 13, ['literal', [0, -60]], 15, ['literal', [0, -60]]];
const railbearingoffset = ['literal', [0, -40]];

const geobearingoffset = ['interpolate', ['linear'], ['zoom'],9, ['literal', [0, -80]], 13, ['literal', [0, -60]], 15, ['literal', [0, -60]], 17, ['literal', [0, -50]]];

Expand All @@ -29,7 +29,7 @@ export function makeBearingArrowPointers(map:any, darkMode:boolean,layerspercate
filter: ["!=", 0, ['get', 'bearing']],
paint: {
'icon-color': ['get', 'contrastdarkmodebearing'],
'icon-opacity': 0.4
'icon-opacity': 0.6
},
layout: {
'icon-image': 'pointingcoloured',
Expand All @@ -40,7 +40,7 @@ export function makeBearingArrowPointers(map:any, darkMode:boolean,layerspercate
'icon-offset': busbearingoffset,
'icon-size': busbearingiconsize
},
minzoom: 8
minzoom: 12
});

map.addLayer({
Expand All @@ -52,7 +52,7 @@ export function makeBearingArrowPointers(map:any, darkMode:boolean,layerspercate
'icon-color': ['get', 'contrastdarkmodebearing'],
'icon-opacity': 0.6
},
minZoom: 2,
minZoom: 6,
layout: {
'icon-image': 'pointingcoloured',
'icon-allow-overlap': true,
Expand All @@ -73,6 +73,7 @@ export function makeBearingArrowPointers(map:any, darkMode:boolean,layerspercate
'icon-color': ['get', 'contrastdarkmodebearing'],
'icon-opacity': 0.6
},
minZoom: 10,
layout: {
'icon-image': 'pointingcoloured',
'icon-allow-overlap': true,
Expand All @@ -93,14 +94,15 @@ export function makeBearingArrowPointers(map:any, darkMode:boolean,layerspercate
'icon-color': ['get', 'contrastdarkmodebearing'],
'icon-opacity': 0.6
},
minZoom: 10,
layout: {
'icon-image': 'pointingcoloured',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-rotate': ['get', 'bearing'],
'icon-rotation-alignment': 'map',
'icon-offset': railbearingoffset,
'icon-size': railbearingiconsize
'icon-offset': busbearingoffset,
'icon-size': busbearingiconsize
}
});

Expand Down Expand Up @@ -130,116 +132,5 @@ export function makeBearingArrowPointers(map:any, darkMode:boolean,layerspercate
}

})




map.loadImage('./icons/pointing-shell.png', (error, image) => {

This comment has been minimized.

Sign in to view

Copy link
@kylerchin

kylerchin Feb 13, 2024

Member

Why was this removed?
if (error) throw error;

if (image) {

map.addImage('pointingshell', image);

map.addLayer({
id: layerspercategory.bus.pointingshell,
source: 'buses',
type: 'symbol',
filter: ["!=", 0, ['get', 'bearing']],
paint: {
'icon-opacity': ['interpolate', ['linear'], ['zoom'], 2, 0, 2.5, 0.9, 5, 0.8, 9, 0.6, 11.5, 0.8]
},
layout: {
'icon-image': darkMode == true ? 'pointingshell' : 'pointingshelllight',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-rotate': ['get', 'bearing'],
'icon-rotation-alignment': 'map',
'icon-offset': busbearingoffset,
'icon-size': busbearingiconsize
},
minzoom: 8
});

map.addLayer({
id: layerspercategory.intercityrail.pointingshell,
source: 'intercityrail',
type: 'symbol',
filter: ["!=", 0, ['get', 'bearing']],
paint: {
'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9, 0.3, 11.5, 0.8]
},
minZoom: 2,
layout: {
'icon-image': darkMode == true ? 'pointingshell' : 'pointingshelllight',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-rotate': ['get', 'bearing'],
'icon-rotation-alignment': 'map',
'icon-offset': railbearingoffset,
'icon-size': railbearingiconsize
},
});

map.addLayer({
id: layerspercategory.localrail.pointingshell,
source: 'localrail',
type: 'symbol',
filter: ["!=", 0, ['get', 'bearing']],
paint: {
'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9, 0.3, 11.5, 0.8]
},
layout: {
'icon-image': darkMode == true ? 'pointingshell' : 'pointingshelllight',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-rotate': ['get', 'bearing'],
'icon-rotation-alignment': 'map',
'icon-offset': railbearingoffset,
'icon-size': railbearingiconsize
},
});

map.addLayer({
id: layerspercategory.other.pointingshell,
source: 'other',
type: 'symbol',
filter: ["!=", 0, ['get', 'bearing']],
paint: {
'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9, 0.3, 11.5, 0.8]
},
layout: {
'icon-image': darkMode == true ? 'pointingshell' : 'pointingshelllight',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-rotate': ['get', 'bearing'],
'icon-rotation-alignment': 'map',
'icon-offset': railbearingoffset,
'icon-size': railbearingiconsize
},
});

//usergeo

map.addLayer({
id: "geolocationheadingshell",
source: 'geolocation',
type: 'symbol',
filter: ["!=", null, ['get', 'heading']],
paint: {
'icon-opacity': ['interpolate', ['linear'], ['zoom'], 9, 0.3, 11.5, 0.8]
},
layout: {
'icon-image': darkMode == true ? 'pointingshell' : 'pointingshelllight',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'icon-rotate': ['get', 'heading'],
'icon-rotation-alignment': 'map',
'icon-offset': geobearingoffset,
'icon-size': railbearingiconsize
},
});
}
})

}
4 changes: 2 additions & 2 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1887,10 +1887,10 @@
}
});
makeBearingArrowPointers(map, darkMode, layerspercategory);
makeCircleLayers(map, darkMode, layerspercategory);
makeBearingArrowPointers(map, darkMode, layerspercategory);
runSettingsAdapt();
setInterval(() => {
Expand Down

0 comments on commit d2bfd93

Please sign in to comment.