// ----------------------------------------------------------------------------- // Immo-Ka — Agrégateur de propriétés à vendre (province de Québec) // Auteur : Simon-Pierre Boucher — contact@spboucher.ai // map/immokaStyle.ts : style cartographique « Groupe Ka », écrit FROM SCRATCH // sur le schéma OpenMapTiles (tuiles vectorielles libres OpenFreeMap). // Direction « éditoriale contrastée » : crème chaud, eau bleue franche, // forêts vertes, autoroutes rouges (la marque), primaires jaune Michelin, // relief au zoom province — une carte de magazine, pas un fond gris. // ----------------------------------------------------------------------------- import type { StyleSpecification } from "maplibre-gl"; // ---- palette éditoriale ----------------------------------------------------- const PAPER = "#f6efe6"; // crème chaud const WATER = "#a6c7dd"; // eau bleue franche const WATER_DEEP = "#97bcd6"; // océan / grands plans d'eau const GRASS = "#dce8c6"; // prés / cultures const WOOD = "#c4dcae"; // forêts — vert affirmé const PARK = "#cbe3b3"; // parcs const RESID = "#efe2d2"; // trame urbaine sable const INDUS = "#e9e0e2"; // industriel mauve-gris const SAND = "#f3e8c9"; const BUILD = "#e2cdbd"; // bâtiments terracotta pâle const BUILD_LINE = "#d2b7a4"; const MOTOR = "#e0584c"; // autoroutes — ROUGE Immo-Ka const MOTOR_CASE = "#ad342d"; const PRIM = "#f6d17c"; // primaires — jaune éditorial const PRIM_CASE = "#cfa14a"; const ROAD = "#ffffff"; const ROAD_CASE = "#cfbcab"; const MINOR_CASE = "#dccbba"; const RAIL = "#a29191"; const BOUND = "#a77f8b"; const INK = "#2a2024"; // étiquettes principales const INK_SOFT = "#6d5d60"; const WATER_INK = "#3f6f92"; const GREEN_INK = "#5c7a45"; const style: StyleSpecification = { version: 8, name: "Immo-Ka · Groupe Ka (éditorial)", glyphs: "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf", sources: { omt: { type: "vector", url: "https://tiles.openfreemap.org/planet" }, relief: { type: "raster", maxzoom: 6, tileSize: 256, tiles: ["https://tiles.openfreemap.org/natural_earth/ne2sr/{z}/{x}/{y}.png"], }, }, layers: [ { id: "bg", type: "background", paint: { "background-color": PAPER } }, // relief léger au zoom province — donne du corps à la vue d'ensemble { id: "relief", type: "raster", source: "relief", maxzoom: 7, paint: { "raster-opacity": ["interpolate", ["linear"], ["zoom"], 0, 0.55, 5, 0.45, 6.5, 0] } }, // --- occupation du sol ------------------------------------------------- { id: "landcover-grass", type: "fill", source: "omt", "source-layer": "landcover", filter: ["in", ["get", "class"], ["literal", ["grass", "farmland"]]], paint: { "fill-color": GRASS, "fill-opacity": 0.85 } }, { id: "landcover-wetland", type: "fill", source: "omt", "source-layer": "landcover", filter: ["==", ["get", "class"], "wetland"], paint: { "fill-color": "#cfe0cf", "fill-opacity": 0.7 } }, { id: "landcover-wood", type: "fill", source: "omt", "source-layer": "landcover", filter: ["==", ["get", "class"], "wood"], paint: { "fill-color": WOOD, "fill-opacity": ["interpolate", ["linear"], ["zoom"], 5, 0.7, 11, 0.9] } }, { id: "landcover-sand", type: "fill", source: "omt", "source-layer": "landcover", filter: ["==", ["get", "class"], "sand"], paint: { "fill-color": SAND } }, { id: "landcover-ice", type: "fill", source: "omt", "source-layer": "landcover", filter: ["==", ["get", "class"], "ice"], paint: { "fill-color": "#eef4f6" } }, { id: "landuse-residential", type: "fill", source: "omt", "source-layer": "landuse", filter: ["in", ["get", "class"], ["literal", ["residential", "suburb", "neighbourhood"]]], paint: { "fill-color": RESID, "fill-opacity": ["interpolate", ["linear"], ["zoom"], 8, 0.5, 12, 0.9] } }, { id: "landuse-indus", type: "fill", source: "omt", "source-layer": "landuse", filter: ["in", ["get", "class"], ["literal", ["industrial", "commercial", "quarry", "railway"]]], paint: { "fill-color": INDUS, "fill-opacity": 0.7 } }, { id: "landuse-green", type: "fill", source: "omt", "source-layer": "landuse", filter: ["in", ["get", "class"], ["literal", ["cemetery", "stadium", "pitch", "playground"]]], paint: { "fill-color": PARK, "fill-opacity": 0.6 } }, { id: "park", type: "fill", source: "omt", "source-layer": "park", paint: { "fill-color": PARK, "fill-opacity": 0.75 } }, // --- eau --------------------------------------------------------------- { id: "waterway", type: "line", source: "omt", "source-layer": "waterway", paint: { "line-color": WATER, "line-width": ["interpolate", ["exponential", 1.4], ["zoom"], 8, 0.8, 14, 3, 18, 8] } }, { id: "water", type: "fill", source: "omt", "source-layer": "water", paint: { "fill-color": ["case", ["==", ["get", "class"], "ocean"], WATER_DEEP, WATER] } }, // --- aéroports ---------------------------------------------------------- { id: "aeroway", type: "line", source: "omt", "source-layer": "aeroway", minzoom: 11, filter: ["in", ["get", "class"], ["literal", ["runway", "taxiway"]]], paint: { "line-color": "#e6d9d2", "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 11, 1, 16, 26] } }, // --- tunnels -------------------------------------------------------------- { id: "tunnel", type: "line", source: "omt", "source-layer": "transportation", filter: ["==", ["get", "brunnel"], "tunnel"], paint: { "line-color": ROAD_CASE, "line-dasharray": [2, 2], "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 8, 0.8, 14, 3.5, 18, 12] } }, // --- voirie : liserés (du bas vers le haut de la hiérarchie) --------------- { id: "road-minor-case", type: "line", source: "omt", "source-layer": "transportation", minzoom: 11, filter: ["all", ["!=", ["get", "brunnel"], "tunnel"], ["in", ["get", "class"], ["literal", ["minor", "service", "track"]]]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": MINOR_CASE, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 11, 1.2, 15, 5, 18, 16] } }, { id: "road-mid-case", type: "line", source: "omt", "source-layer": "transportation", minzoom: 9, filter: ["all", ["!=", ["get", "brunnel"], "tunnel"], ["in", ["get", "class"], ["literal", ["secondary", "tertiary"]]]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": ROAD_CASE, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 9, 2, 14, 7, 18, 22] } }, { id: "road-prim-case", type: "line", source: "omt", "source-layer": "transportation", minzoom: 7, filter: ["all", ["!=", ["get", "brunnel"], "tunnel"], ["in", ["get", "class"], ["literal", ["primary", "trunk"]]]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": PRIM_CASE, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 7, 1.8, 14, 8, 18, 26] } }, { id: "motorway-case", type: "line", source: "omt", "source-layer": "transportation", minzoom: 5, filter: ["==", ["get", "class"], "motorway"], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": MOTOR_CASE, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 5, 1.4, 14, 9, 18, 28] } }, // --- voirie : remplissages --------------------------------------------------- { id: "road-path", type: "line", source: "omt", "source-layer": "transportation", minzoom: 14, filter: ["==", ["get", "class"], "path"], paint: { "line-color": "#b8a394", "line-dasharray": [2.5, 2], "line-width": ["interpolate", ["linear"], ["zoom"], 14, 0.8, 18, 2.5] } }, { id: "road-minor", type: "line", source: "omt", "source-layer": "transportation", minzoom: 11, filter: ["all", ["!=", ["get", "brunnel"], "tunnel"], ["in", ["get", "class"], ["literal", ["minor", "service", "track"]]]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": ROAD, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 11, 0.7, 15, 3.8, 18, 13] } }, { id: "road-mid", type: "line", source: "omt", "source-layer": "transportation", minzoom: 9, filter: ["all", ["!=", ["get", "brunnel"], "tunnel"], ["in", ["get", "class"], ["literal", ["secondary", "tertiary"]]]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": ROAD, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 9, 1.3, 14, 5.5, 18, 18] } }, { id: "road-prim", type: "line", source: "omt", "source-layer": "transportation", minzoom: 7, filter: ["all", ["!=", ["get", "brunnel"], "tunnel"], ["in", ["get", "class"], ["literal", ["primary", "trunk"]]]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": PRIM, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 7, 1.1, 14, 6.5, 18, 22] } }, { id: "motorway", type: "line", source: "omt", "source-layer": "transportation", minzoom: 5, filter: ["==", ["get", "class"], "motorway"], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": MOTOR, "line-width": ["interpolate", ["exponential", 1.5], ["zoom"], 5, 0.9, 14, 7, 18, 24] } }, { id: "rail", type: "line", source: "omt", "source-layer": "transportation", minzoom: 10, filter: ["==", ["get", "class"], "rail"], paint: { "line-color": RAIL, "line-dasharray": [3, 3], "line-width": ["interpolate", ["linear"], ["zoom"], 10, 0.7, 16, 2.2] } }, // --- ponts (léger liseré pour lecture) ----------------------------------------- { id: "bridge-case", type: "line", source: "omt", "source-layer": "transportation", minzoom: 12, filter: ["==", ["get", "brunnel"], "bridge"], paint: { "line-color": "#b7a08e", "line-gap-width": ["interpolate", ["exponential", 1.5], ["zoom"], 12, 3, 18, 20], "line-width": 1.2 } }, // --- bâtiments ------------------------------------------------------------------- { id: "building", type: "fill", source: "omt", "source-layer": "building", minzoom: 13, paint: { "fill-color": BUILD, "fill-outline-color": BUILD_LINE, "fill-opacity": ["interpolate", ["linear"], ["zoom"], 13, 0.55, 16, 0.95] } }, // --- frontières ----------------------------------------------------------------- { id: "boundary-prov", type: "line", source: "omt", "source-layer": "boundary", filter: ["all", ["==", ["get", "admin_level"], 4], ["!=", ["get", "maritime"], 1]], paint: { "line-color": BOUND, "line-dasharray": [4, 3], "line-width": ["interpolate", ["linear"], ["zoom"], 4, 0.8, 10, 1.6] } }, { id: "boundary-country", type: "line", source: "omt", "source-layer": "boundary", filter: ["all", ["==", ["get", "admin_level"], 2], ["!=", ["get", "maritime"], 1]], paint: { "line-color": BOUND, "line-width": ["interpolate", ["linear"], ["zoom"], 3, 1.2, 10, 2.6] } }, // --- étiquettes -------------------------------------------------------------------- { id: "park-label", type: "symbol", source: "omt", "source-layer": "park", minzoom: 11, filter: ["==", ["geometry-type"], "Point"], layout: { "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]], "text-font": ["Noto Sans Italic"], "text-size": 11.5 }, paint: { "text-color": GREEN_INK, "text-halo-color": PAPER, "text-halo-width": 1.4 } }, { id: "water-label", type: "symbol", source: "omt", "source-layer": "water_name", layout: { "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]], "text-font": ["Noto Sans Italic"], "text-size": ["interpolate", ["linear"], ["zoom"], 6, 11, 12, 14] }, paint: { "text-color": WATER_INK, "text-halo-color": "rgba(246,239,230,0.75)", "text-halo-width": 1.2 } }, { id: "road-label", type: "symbol", source: "omt", "source-layer": "transportation_name", minzoom: 12.5, layout: { "symbol-placement": "line", "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]], "text-font": ["Noto Sans Regular"], "text-size": 11.5 }, paint: { "text-color": INK_SOFT, "text-halo-color": PAPER, "text-halo-width": 1.6 } }, { id: "place-village", type: "symbol", source: "omt", "source-layer": "place", minzoom: 9, filter: ["in", ["get", "class"], ["literal", ["village", "suburb", "neighbourhood", "hamlet"]]], layout: { "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]], "text-font": ["Noto Sans Regular"], "text-size": ["interpolate", ["linear"], ["zoom"], 9, 11, 14, 13.5] }, paint: { "text-color": INK_SOFT, "text-halo-color": PAPER, "text-halo-width": 1.7 } }, { id: "place-town", type: "symbol", source: "omt", "source-layer": "place", filter: ["==", ["get", "class"], "town"], layout: { "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]], "text-font": ["Noto Sans Bold"], "text-size": ["interpolate", ["linear"], ["zoom"], 6, 12, 12, 16] }, paint: { "text-color": INK, "text-halo-color": PAPER, "text-halo-width": 1.8 } }, { id: "place-city", type: "symbol", source: "omt", "source-layer": "place", filter: ["==", ["get", "class"], "city"], layout: { "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]], "text-font": ["Noto Sans Bold"], "text-size": ["interpolate", ["linear"], ["zoom"], 4, 13, 10, 19] }, paint: { "text-color": INK, "text-halo-color": PAPER, "text-halo-width": 2 } }, { id: "place-state", type: "symbol", source: "omt", "source-layer": "place", maxzoom: 7, filter: ["==", ["get", "class"], "state"], layout: { "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]], "text-font": ["Noto Sans Regular"], "text-size": 11.5, "text-transform": "uppercase", "text-letter-spacing": 0.18 }, paint: { "text-color": BOUND, "text-halo-color": PAPER, "text-halo-width": 1.5 } }, ], }; export default style;