mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
93 lines
4.3 KiB
Plaintext
93 lines
4.3 KiB
Plaintext
---
|
|
// Softer colors for the OpenFreeMap `positron` and `dark` map styles: near-white
|
|
// land, pale water and muted labels. Defines `window.tablerMapPalette(map, mode)`;
|
|
// put it on the page once, before the maps. `Map.astro` calls it on each style load.
|
|
// Also defines `window.tablerMapColor(name)`, which turns a CSS variable into a
|
|
// plain rgb() color for a map layer.
|
|
import CaptureScript from '../CaptureScript.astro';
|
|
---
|
|
|
|
<CaptureScript>
|
|
<!-- BEGIN MAP PALETTE -->
|
|
<script is:inline>
|
|
// MapLibre draws on a canvas, so a layer needs a plain rgb() color instead of a CSS variable
|
|
window.tablerMapColor = (name) => {
|
|
const context = document.createElement('canvas').getContext('2d');
|
|
const probe = document.body.appendChild(document.createElement('span'));
|
|
|
|
probe.style.color = `var(${name})`;
|
|
context.fillStyle = getComputedStyle(probe).color;
|
|
context.fillRect(0, 0, 1, 1);
|
|
probe.remove();
|
|
|
|
const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
|
|
|
|
return `rgb(${red}, ${green}, ${blue})`;
|
|
};
|
|
|
|
// Paint values by layer id: the first rule that matches a layer is used
|
|
window.tablerMapPalette = (map, mode) => {
|
|
const palettes = {
|
|
light: [
|
|
[/^background$/, { 'background-color': '#fafaf8' }],
|
|
[/^(park|landcover_wood)$/, { 'fill-color': 'rgba(234, 241, 233, 0.6)' }],
|
|
[/^water$/, { 'fill-color': '#d4dadc' }],
|
|
[/^waterway$/, { 'line-color': '#d1dbdf' }],
|
|
[/^landcover_(ice_shelf|glacier)$/, { 'fill-color': '#fafaf8' }],
|
|
[/^landuse_residential$/, { 'fill-color': 'rgba(237, 237, 237, 0.5)' }],
|
|
[/^building$/, { 'fill-color': '#ededed', 'fill-outline-color': '#dfdfdf' }],
|
|
[/^road_area_pier$/, { 'fill-color': '#fafaf8' }],
|
|
[/^road_pier$/, { 'line-color': '#fafaf8' }],
|
|
[/^highway_path$/, { 'line-color': '#ededed' }],
|
|
[/^highway_minor$/, { 'line-color': '#e6e6e6' }],
|
|
[/_casing$/, { 'line-color': '#dddddd' }],
|
|
[/^tunnel_.*_inner$/, { 'line-color': '#f3f3f3' }],
|
|
[/^highway_.*_inner$/, { 'line-color': '#ffffff' }],
|
|
[/_subtle$/, { 'line-color': '#e6e6e6' }],
|
|
[/^railway.*dashline$/, { 'line-color': '#fafaf8' }],
|
|
[/^railway/, { 'line-color': '#e3e3e3' }],
|
|
[/^boundary_/, { 'line-color': '#e3cdd0' }],
|
|
[/^waterway_line_label$/, { 'text-color': '#7a96a0' }],
|
|
[/^water_name/, { 'text-color': '#abb6be' }],
|
|
[/^highway-name/, { 'text-color': '#9aa5ad', 'text-halo-color': 'rgba(255, 255, 255, 0.8)' }],
|
|
[/^(airport|label_country|label_state)/, { 'text-color': '#8a99a4', 'text-halo-color': 'rgba(255, 255, 255, 0.8)' }],
|
|
[/^label_/, { 'text-color': '#697b89', 'text-halo-color': 'rgba(255, 255, 255, 0.8)' }],
|
|
],
|
|
dark: [
|
|
[/^background$/, { 'background-color': '#0e0e0e' }],
|
|
[/^water$/, { 'fill-color': '#2c353c' }],
|
|
[/^waterway$/, { 'line-color': 'rgb(63, 90, 109)' }],
|
|
[/^landcover_(ice_shelf|glacier)$/, { 'fill-color': '#0e0e0e' }],
|
|
[/^landuse_residential$/, { 'fill-color': 'rgba(0, 0, 0, 0.5)' }],
|
|
[/^(landcover_wood|landuse_park)$/, { 'fill-color': '#121412' }],
|
|
[/^building$/, { 'fill-color': '#1a1a1a' }],
|
|
[/^road_area_pier$/, { 'fill-color': '#0e0e0e' }],
|
|
[/^road_pier$/, { 'line-color': '#0e0e0e' }],
|
|
[/^highway_path$/, { 'line-color': '#232323' }],
|
|
[/^highway_minor$/, { 'line-color': 'rgba(65, 71, 88, 0.7)' }],
|
|
[/_casing$/, { 'line-color': '#232323' }],
|
|
[/^highway_major_inner$/, { 'line-color': 'rgb(65, 71, 88)' }],
|
|
[/^highway_motorway_inner$/, { 'line-color': 'rgb(83, 86, 102)' }],
|
|
[/_subtle$/, { 'line-color': 'rgba(65, 71, 88, 0.6)' }],
|
|
[/^railway.*dashline$/, { 'line-color': '#0e0e0e' }],
|
|
[/^railway/, { 'line-color': '#262626' }],
|
|
[/^boundary_/, { 'line-color': 'rgb(96, 96, 96)' }],
|
|
[/^water_name$/, { 'text-color': 'rgb(109, 123, 129)', 'text-halo-color': 'rgba(0, 0, 0, 0.7)' }],
|
|
[/^highway_name/, { 'text-color': 'rgb(120, 126, 137)', 'text-halo-color': 'rgba(0, 0, 0, 0.7)' }],
|
|
[/^place_(country|state)/, { 'text-color': 'rgb(118, 126, 137)' }],
|
|
[/^place_/, { 'text-color': 'rgb(204, 208, 228)' }],
|
|
],
|
|
};
|
|
|
|
map.getStyle().layers.forEach((layer) => {
|
|
const rule = palettes[mode].find(([pattern]) => pattern.test(layer.id));
|
|
|
|
if (rule) {
|
|
Object.entries(rule[1]).forEach(([property, value]) => map.setPaintProperty(layer.id, property, value));
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
<!-- END MAP PALETTE -->
|
|
</CaptureScript>
|