§ examples · symbology
Renderers

Name: MapGPU
Author: Mustafa Gurbuz
Same ten cities rendered four different ways. Segmented control swaps the IRenderer instance on the layer — Simple / UniqueValue (by region) / ClassBreaks (by population) / Callback (size+color from multiple attributes).
slugrenderers
source172 lines
statuslive
tsexamples-src/renderers.ts
1/**
* Renderers — the four `IRenderer` implementations on the same 10-city
* point layer. Segmented control swaps the renderer at runtime; each
* renderer consumes the same feature attributes but produces different
* symbology.
*/
7 
8import { MapView } from "mapgpu";
9import { GeoJSONLayer, RasterTileLayer } from "mapgpu/layers";
10import { RenderEngine } from "mapgpu/render";
11import {
CallbackRenderer,
ClassBreaksRenderer,
SimpleRenderer,
UniqueValueRenderer,
16} from "mapgpu/core";
17 
18import type { RunResultObject } from "@/components/examples/ExampleCanvas";
19 
20type Region = "coastal" | "inland" | "eastern";
21 
22interface CityProps {
name: string;
region: Region;
/** millions */
pop: number;
27}
28 
29// Inline data: 10 cities with region + population attributes so each
30// renderer can key off a different field.
31const CITIES = {
type: "FeatureCollection" as const,
features: [
  { type: "Feature" as const, properties: { name: "Istanbul",  region: "coastal", pop: 15.8 }, geometry: { type: "Point" as const, coordinates: [28.979, 41.015] } },
  { type: "Feature" as const, properties: { name: "Ankara",    region: "inland",  pop:  5.7 }, geometry: { type: "Point" as const, coordinates: [32.866, 39.925] } },
  { type: "Feature" as const, properties: { name: "Izmir",     region: "coastal", pop:  4.4 }, geometry: { type: "Point" as const, coordinates: [27.140, 38.423] } },
  { type: "Feature" as const, properties: { name: "Bursa",     region: "inland",  pop:  3.2 }, geometry: { type: "Point" as const, coordinates: [29.060, 40.188] } },
  { type: "Feature" as const, properties: { name: "Antalya",   region: "coastal", pop:  2.6 }, geometry: { type: "Point" as const, coordinates: [30.714, 36.897] } },
  { type: "Feature" as const, properties: { name: "Konya",     region: "inland",  pop:  2.3 }, geometry: { type: "Point" as const, coordinates: [32.484, 37.871] } },
  { type: "Feature" as const, properties: { name: "Gaziantep", region: "eastern", pop:  2.1 }, geometry: { type: "Point" as const, coordinates: [37.378, 37.067] } },
  { type: "Feature" as const, properties: { name: "Diyarbakır",region: "eastern", pop:  1.8 }, geometry: { type: "Point" as const, coordinates: [40.230, 37.913] } },
  { type: "Feature" as const, properties: { name: "Trabzon",   region: "coastal", pop:  0.8 }, geometry: { type: "Point" as const, coordinates: [39.727, 41.005] } },
  { type: "Feature" as const, properties: { name: "Erzurum",   region: "eastern", pop:  0.76}, geometry: { type: "Point" as const, coordinates: [41.277, 39.904] } },
],
45};
46 
47type RendererId = "simple" | "unique-value" | "class-breaks" | "callback";
48 
49function buildRenderer(kind: RendererId) {
switch (kind) {
  case "simple":
    return new SimpleRenderer({
      type: "simple-marker",
      color: [255, 92, 26, 240],
      size: 9,
      outlineColor: [255, 255, 255, 255],
      outlineWidth: 2,
    });
59 
  case "unique-value":
    // Color by region — categorical mapping via UniqueValueRenderer.
    return new UniqueValueRenderer({
      field: "region",
      defaultSymbol: {
        type: "simple-marker",
        color: [128, 128, 128, 240],
        size: 9,
        outlineColor: [255, 255, 255, 255],
        outlineWidth: 2,
      },
      uniqueValues: [
        { value: "coastal", symbol: { type: "simple-marker", color: [67, 176, 255, 240],  size: 9, outlineColor: [255, 255, 255, 255], outlineWidth: 2 } },
        { value: "inland",  symbol: { type: "simple-marker", color: [255, 176, 32,  240], size: 9, outlineColor: [255, 255, 255, 255], outlineWidth: 2 } },
        { value: "eastern", symbol: { type: "simple-marker", color: [120, 220, 120, 240], size: 9, outlineColor: [255, 255, 255, 255], outlineWidth: 2 } },
      ],
    });
77 
  case "class-breaks":
    // Size by population — numeric range mapping via ClassBreaksRenderer.
    return new ClassBreaksRenderer({
      field: "pop",
      defaultSymbol: {
        type: "simple-marker",
        color: [255, 92, 26, 240],
        size: 6,
        outlineColor: [255, 255, 255, 255],
        outlineWidth: 2,
      },
      breaks: [
        { min: 0,    max: 1,        symbol: { type: "simple-marker", color: [255, 92, 26, 240], size:  6, outlineColor: [255, 255, 255, 255], outlineWidth: 2 } },
        { min: 1,    max: 3,        symbol: { type: "simple-marker", color: [255, 92, 26, 240], size: 11, outlineColor: [255, 255, 255, 255], outlineWidth: 2 } },
        { min: 3,    max: 6,        symbol: { type: "simple-marker", color: [255, 92, 26, 240], size: 16, outlineColor: [255, 255, 255, 255], outlineWidth: 2 } },
        { min: 6,    max: Infinity, symbol: { type: "simple-marker", color: [255, 92, 26, 240], size: 22, outlineColor: [255, 255, 255, 255], outlineWidth: 2 } },
      ],
    });
96 
  case "callback":
    // Fully programmatic — size driven by sqrt(population), hue by
    // longitude. Shows how to blend multiple attributes into one symbol.
    return new CallbackRenderer((feature) => {
      // `attributes` is `Record<string, unknown>`; narrow via unknown.
      const p = feature.attributes as unknown as CityProps;
      const size = 4 + Math.sqrt(p.pop) * 3.2;
      // `geometry.coordinates` is a discriminated union; for points it
      // is `[lon, lat]`. Narrow through an explicit cast.
      const lon = feature.geometry.type === "Point"
        ? (feature.geometry.coordinates as [number, number])[0]
        : 34;
      // Longitude 26°E → red end, 42°E → blue end (east Anatolia cooler).
      const t = Math.max(0, Math.min(1, (lon - 26) / 16));
      const r = Math.round(255 * (1 - t) + 80 * t);
      const g = Math.round(120 * (1 - t) + 180 * t);
      const b = Math.round(60  * (1 - t) + 255 * t);
      return {
        type: "simple-marker",
        color: [r, g, b, 240],
        size,
        outlineColor: [255, 255, 255, 255],
        outlineWidth: 2,
      };
    });
}
123}
124 
125export async function run(container: HTMLElement): Promise<RunResultObject> {
const view = new MapView({
  container,
  renderEngine: new RenderEngine(),
  mode: "2d",
  center: [35.0, 39.5],
  zoom: 5,
  minZoom: 2,
  maxZoom: 18,
  backgroundColor: "transparent",
});
136 
view.map.add(
  new RasterTileLayer({
    id: "osm",
    urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    maxZoom: 19,
    attribution: "© OpenStreetMap contributors",
  }),
);
145 
const cities = new GeoJSONLayer({ id: "cities", data: CITIES });
cities.renderer = buildRenderer("simple");
view.map.add(cities);
149 
await view.when();
151 
return {
  dispose: () => view.destroy(),
  controls: [
    {
      kind: "segmented",
      id: "renderer",
      initial: "simple",
      options: [
        { value: "simple",       label: "Simple" },
        { value: "unique-value", label: "By region" },
        { value: "class-breaks", label: "By population" },
        { value: "callback",     label: "Callback" },
      ],
      onChange: (value) => {
        cities.renderer = buildRenderer(value as RendererId);
      },
    },
  ],
};
171}