Skip to content

Commit 119a689

Browse files
hiddewiehiddewie
committed
Icons with SDF border
1 parent 438507e commit 119a689

File tree

1 file changed

+186
-146
lines changed

1 file changed

+186
-146
lines changed

‎proxy/js/styles.mjs‎

Lines changed: 186 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1087,6 +1087,29 @@ const preferredDirectionLayer = (id, filter) => ({
10871087
},
10881088
});
10891089

1090+
const imageLayerWithOutline = (id, spriteExpression, layer) => [
1091+
{
1092+
id: `${id}_outline`,
1093+
...layer,
1094+
paint: {
1095+
'icon-halo-color': 'white',
1096+
'icon-halo-width': 2.0,
1097+
},
1098+
layout: {
1099+
...(layer.layout || {}),
1100+
'icon-image': ['image', ['concat', 'sdf:', spriteExpression]],
1101+
},
1102+
},
1103+
{
1104+
id: `${id}_image`,
1105+
...layer,
1106+
layout: {
1107+
...(layer.layout || {}),
1108+
'icon-image': ['image', spriteExpression],
1109+
},
1110+
},
1111+
]
1112+
10901113
// TODO remove all [switch, [zoom]] to ensure legend displays only visible features
10911114
const layers = {
10921115
standard: [
@@ -1541,81 +1564,106 @@ const layers = {
15411564
'icon-image': 'general/tram-stop',
15421565
}
15431566
},
1544-
{
1545-
id: 'railway_symbols_low',
1546-
type: 'symbol',
1547-
minzoom: 10,
1548-
source: 'openrailwaymap_standard',
1549-
'source-layer': 'standard_railway_symbols',
1550-
filter: ['==', ['get', 'feature'], 'general/border'],
1551-
layout: {
1552-
'icon-image': ['image', ['get', 'feature']],
1553-
}
1554-
},
1555-
{
1556-
id: 'railway_symbols_med_high',
1557-
type: 'symbol',
1558-
minzoom: 13,
1559-
source: 'openrailwaymap_standard',
1560-
'source-layer': 'standard_railway_symbols',
1561-
filter: ['any',
1562-
['==', ['get', 'feature'], 'general/crossing'],
1563-
['==', ['get', 'feature'], 'general/level-crossing'],
1564-
['==', ['get', 'feature'], 'general/level-crossing-light'],
1565-
['==', ['get', 'feature'], 'general/level-crossing-barrier'],
1566-
['==', ['get', 'feature'], 'general/lubricator'],
1567-
['==', ['get', 'feature'], 'general/fuel'],
1568-
['==', ['get', 'feature'], 'general/sand_store'],
1569-
['==', ['get', 'feature'], 'general/aei'],
1570-
['==', ['get', 'feature'], 'general/buffer_stop'],
1571-
['==', ['get', 'feature'], 'general/derail'],
1572-
['==', ['get', 'feature'], 'general/defect_detector'],
1573-
['==', ['get', 'feature'], 'general/hump_yard'],
1574-
['==', ['get', 'feature'], 'general/loading_gauge'],
1575-
['==', ['get', 'feature'], 'general/preheating'],
1576-
['==', ['get', 'feature'], 'general/compressed_air_supply'],
1577-
['==', ['get', 'feature'], 'general/waste_disposal'],
1578-
['==', ['get', 'feature'], 'general/coaling_facility'],
1579-
['==', ['get', 'feature'], 'general/wash'],
1580-
['==', ['get', 'feature'], 'general/water_tower'],
1581-
['==', ['get', 'feature'], 'general/water_crane'],
1582-
['==', ['get', 'feature'], 'general/vacancy-detection-insulated-rail-joint'],
1583-
['==', ['get', 'feature'], 'general/vacancy-detection-axle-counter'],
1584-
],
1585-
layout: {
1586-
'symbol-z-order': 'source',
1587-
'icon-overlap': 'always',
1588-
'icon-image': ['image', ['get', 'feature']],
1589-
}
1590-
},
1591-
{
1592-
id: 'railway_symbols_med',
1593-
type: 'symbol',
1594-
minzoom: 12,
1595-
source: 'openrailwaymap_standard',
1596-
'source-layer': 'standard_railway_symbols',
1597-
filter: ['any',
1598-
['==', ['get', 'feature'], 'general/owner-change'],
1599-
['==', ['get', 'feature'], 'general/radio-mast'],
1600-
['==', ['get', 'feature'], 'general/radio-antenna'],
1601-
],
1602-
layout: {
1603-
'symbol-z-order': 'source',
1604-
'icon-image': ['image', ['get', 'feature']],
1567+
...imageLayerWithOutline(
1568+
'railway_symbols_low',
1569+
['get', 'feature'],
1570+
{
1571+
type: 'symbol',
1572+
minzoom: 10,
1573+
source: 'openrailwaymap_standard',
1574+
'source-layer': 'standard_railway_symbols',
1575+
filter: ['==', ['get', 'feature'], 'general/border'],
1576+
layout: {
1577+
'icon-overlap': 'cooperative',
1578+
},
16051579
},
1606-
},
1607-
{
1608-
id: 'railway_symbols_high',
1609-
type: 'symbol',
1610-
minzoom: 16,
1611-
source: 'openrailwaymap_standard',
1612-
'source-layer': 'standard_railway_symbols',
1613-
filter: ['==', ['get', 'feature'], 'general/phone'],
1614-
layout: {
1615-
'symbol-z-order': 'source',
1616-
'icon-image': ['image', ['get', 'feature']],
1617-
}
1618-
},
1580+
),
1581+
...imageLayerWithOutline(
1582+
'railway_symbols_med_high',
1583+
['get', 'feature'],
1584+
{
1585+
type: 'symbol',
1586+
minzoom: 13,
1587+
source: 'openrailwaymap_standard',
1588+
'source-layer': 'standard_railway_symbols',
1589+
filter: ['any',
1590+
['==', ['get', 'feature'], 'general/crossing'],
1591+
['==', ['get', 'feature'], 'general/level-crossing'],
1592+
['==', ['get', 'feature'], 'general/level-crossing-light'],
1593+
['==', ['get', 'feature'], 'general/level-crossing-barrier'],
1594+
['==', ['get', 'feature'], 'general/lubricator'],
1595+
['==', ['get', 'feature'], 'general/fuel'],
1596+
['==', ['get', 'feature'], 'general/sand_store'],
1597+
['==', ['get', 'feature'], 'general/aei'],
1598+
['==', ['get', 'feature'], 'general/buffer_stop'],
1599+
['==', ['get', 'feature'], 'general/derail'],
1600+
['==', ['get', 'feature'], 'general/defect_detector'],
1601+
['==', ['get', 'feature'], 'general/hump_yard'],
1602+
['==', ['get', 'feature'], 'general/loading_gauge'],
1603+
['==', ['get', 'feature'], 'general/preheating'],
1604+
['==', ['get', 'feature'], 'general/compressed_air_supply'],
1605+
['==', ['get', 'feature'], 'general/waste_disposal'],
1606+
['==', ['get', 'feature'], 'general/coaling_facility'],
1607+
['==', ['get', 'feature'], 'general/wash'],
1608+
['==', ['get', 'feature'], 'general/water_tower'],
1609+
['==', ['get', 'feature'], 'general/water_crane'],
1610+
['==', ['get', 'feature'], 'general/vacancy-detection-insulated-rail-joint'],
1611+
['==', ['get', 'feature'], 'general/vacancy-detection-axle-counter'],
1612+
],
1613+
layout: {
1614+
'symbol-z-order': 'source',
1615+
'icon-overlap': 'always',
1616+
},
1617+
},
1618+
),
1619+
...imageLayerWithOutline(
1620+
'railway_symbols_low',
1621+
['get', 'feature'],
1622+
{
1623+
type: 'symbol',
1624+
minzoom: 10,
1625+
source: 'openrailwaymap_standard',
1626+
'source-layer': 'standard_railway_symbols',
1627+
filter: ['==', ['get', 'feature'], 'general/border'],
1628+
layout: {
1629+
'icon-overlap': 'cooperative',
1630+
},
1631+
},
1632+
),
1633+
...imageLayerWithOutline(
1634+
'railway_symbols_med',
1635+
['get', 'feature'],
1636+
{
1637+
type: 'symbol',
1638+
minzoom: 12,
1639+
source: 'openrailwaymap_standard',
1640+
'source-layer': 'standard_railway_symbols',
1641+
filter: ['any',
1642+
['==', ['get', 'feature'], 'general/owner-change'],
1643+
['==', ['get', 'feature'], 'general/radio-mast'],
1644+
['==', ['get', 'feature'], 'general/radio-antenna'],
1645+
],
1646+
layout: {
1647+
'symbol-z-order': 'source',
1648+
'icon-overlap': 'always',
1649+
},
1650+
},
1651+
),
1652+
...imageLayerWithOutline(
1653+
'railway_symbols_high',
1654+
['get', 'feature'],
1655+
{
1656+
type: 'symbol',
1657+
minzoom: 16,
1658+
source: 'openrailwaymap_standard',
1659+
'source-layer': 'standard_railway_symbols',
1660+
filter: ['==', ['get', 'feature'], 'general/phone'],
1661+
layout: {
1662+
'symbol-z-order': 'source',
1663+
'icon-overlap': 'always',
1664+
},
1665+
},
1666+
),
16191667
railwayKmText,
16201668
{
16211669
id: 'railway_text_track_numbers',
@@ -2106,40 +2154,36 @@ const layers = {
21062154
'icon-rotate': ['get', 'azimuth'],
21072155
}
21082156
},
2109-
{
2110-
id: 'speed_railway_signals',
2111-
type: 'symbol',
2112-
source: 'openrailwaymap_speed',
2113-
minzoom: 13,
2114-
'source-layer': 'speed_railway_signals',
2115-
filter: ['step', ['zoom'],
2116-
['all',
2117-
['!=', ['get', 'feature'], null],
2118-
['==', ['get', 'type'], 'line'],
2119-
],
2120-
14,
2121-
['all',
2122-
['!=', ['get', 'feature'], null],
2123-
['any',
2157+
...imageLayerWithOutline(
2158+
'speed_railway_signals',
2159+
['get', 'feature'],
2160+
{
2161+
type: 'symbol',
2162+
source: 'openrailwaymap_speed',
2163+
minzoom: 13,
2164+
'source-layer': 'speed_railway_signals',
2165+
filter: ['step', ['zoom'],
2166+
['all',
2167+
['!=', ['get', 'feature'], null],
21242168
['==', ['get', 'type'], 'line'],
2125-
['==', ['get', 'type'], 'tram'],
2126-
]
2169+
],
2170+
14,
2171+
['all',
2172+
['!=', ['get', 'feature'], null],
2173+
['any',
2174+
['==', ['get', 'type'], 'line'],
2175+
['==', ['get', 'type'], 'tram'],
2176+
]
2177+
],
2178+
16,
2179+
['!=', ['get', 'feature'], null],
21272180
],
2128-
16,
2129-
['!=', ['get', 'feature'], null],
2130-
],
2131-
paint: {
2132-
// TODO https://github.com/maplibre/martin/issues/1075
2133-
// 'icon-halo-color': 'rgba(255, 255, 255, 1)',
2134-
// 'icon-halo-blur': 0,
2135-
// 'icon-halo-width': 2.0,
2181+
layout: {
2182+
'symbol-z-order': 'source',
2183+
'icon-overlap': 'always',
2184+
},
21362185
},
2137-
layout: {
2138-
'symbol-z-order': 'source',
2139-
'icon-overlap': 'always',
2140-
'icon-image': ['image', ['get', 'feature']],
2141-
}
2142-
},
2186+
),
21432187
railwayKmText,
21442188
{
21452189
id: 'speed_railway_line_text',
@@ -2342,31 +2386,21 @@ const layers = {
23422386
'icon-rotate': ['get', 'azimuth'],
23432387
}
23442388
},
2345-
{
2346-
id: 'railway_signals',
2347-
type: 'symbol',
2348-
minzoom: 13,
2349-
source: 'openrailwaymap_signals',
2350-
'source-layer': 'signals_railway_signals',
2351-
paint: {
2352-
// TODO https://github.com/maplibre/martin/issues/1075
2353-
// 'icon-halo-color': 'rgba(255, 255, 255, 1)',
2354-
// 'icon-halo-blur': 0,
2355-
// 'icon-halo-width': 2.0,
2389+
...imageLayerWithOutline(
2390+
'railway_signals',
2391+
['get', 'feature'],
2392+
{
2393+
type: 'symbol',
2394+
minzoom: 13,
2395+
source: 'openrailwaymap_signals',
2396+
'source-layer': 'signals_railway_signals',
2397+
// TODO fix blockkennzeichen
2398+
layout: {
2399+
'symbol-z-order': 'source',
2400+
'icon-overlap': 'always',
2401+
},
23562402
},
2357-
layout: {
2358-
'symbol-z-order': 'source',
2359-
'icon-overlap': 'always',
2360-
'icon-image': ['step', ['zoom'],
2361-
['case',
2362-
['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'], 'de/blockkennzeichen',
2363-
['image', ['get', 'feature']],
2364-
],
2365-
16,
2366-
['image', ['get', 'feature']],
2367-
],
2368-
}
2369-
},
2403+
),
23702404
{
23712405
id: 'railway_signals_deactivated',
23722406
type: 'symbol',
@@ -2602,23 +2636,20 @@ const layers = {
26022636
'icon-rotate': ['get', 'azimuth'],
26032637
}
26042638
},
2605-
{
2606-
id: 'electrification_signals',
2607-
type: 'symbol',
2608-
minzoom: 16,
2609-
source: 'openrailwaymap_electrification',
2610-
'source-layer': 'electrification_signals',
2611-
paint: {
2612-
// TODO https://github.com/maplibre/martin/issues/1075
2613-
// 'icon-halo-color': 'rgba(255, 255, 255, 1)',
2614-
// 'icon-halo-blur': 0,
2615-
// 'icon-halo-width': 2.0,
2639+
...imageLayerWithOutline(
2640+
'electrification_signals',
2641+
['get', 'feature'],
2642+
{
2643+
type: 'symbol',
2644+
minzoom: 16,
2645+
source: 'openrailwaymap_electrification',
2646+
'source-layer': 'electrification_signals',
2647+
layout: {
2648+
'symbol-z-order': 'source',
2649+
'icon-overlap': 'always',
2650+
},
26162651
},
2617-
layout: {
2618-
'icon-overlap': 'always',
2619-
'icon-image': ['image', ['get', 'feature']],
2620-
}
2621-
},
2652+
),
26222653
railwayKmText,
26232654
{
26242655
id: 'electrification_railway_text_high',
@@ -3057,7 +3088,16 @@ const makeStyle = selectedStyle => ({
30573088
metadata: {},
30583089
name: `OpenRailwayMap ${selectedStyle}`,
30593090
sources,
3060-
sprite: `${origin}/sprite/symbols`,
3091+
sprite: [
3092+
{
3093+
id: 'sdf',
3094+
url: `${origin}/sdf_sprite/symbols`
3095+
},
3096+
{
3097+
id: 'default',
3098+
url: `${origin}/sprite/symbols`
3099+
}
3100+
],
30613101
version: 8,
30623102
layers: layers[selectedStyle],
30633103
});

0 commit comments

Comments
 (0)