29:null 2a:["$","title",null,{"children":"Custom event handlers | Eurostat's Workspace | Observable"}] 2f:T14f6,map1 = { const eventMessageContainer = d3.select("#messages"); const m = eurostatmap .map("ps") .nutsLevel(2) .scale("60M") .title("Total GDP and GDP per inhabitant") .subtitle("2022") .stat("size", { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Million EUR", filters: { unit: "MIO_EUR", time: "2022" } }) .stat("color", { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Euro per inhabitant", filters: { unit: "EUR_HAB", time: "2022" } }) .legend({ x: 590, y: 20, boxOpacity: 1, sizeLegend: { title: "Million EUR", values: [800000, 10000] }, colorLegend: { title: "EUR per inhabitant", marginTop: 30, labels: ["10k", "20k", "30k", "40k"].reverse() } }) .psThresholds([10000, 20000, 30000, 40000]) .psColors(["#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]) .psShape("circle") .psMinSize(3) .psMaxSize(23) .transitionDuration(900) .zoomExtent([1, 10]) .dorling(true) .dorlingStrength({ x: 0.1, y: 0.1 }) .dorlingIterations(1) .animateDorling(true) // Set to false for non-animated dorling cartograms .dorlingWorker(false) // You can use a web worker for (non-animated) dorling cartograms in order to not block the main thread .onDorlingProgress(function (progress, map) { eventMessageContainer.selectAll("*").remove(); eventMessageContainer .append("text") .attr("x", 0) .attr("y", 0) .attr("dominant-baseline", "middle") .text(progress); }) .onZoom(function (event, map) { const pos = map.position(); eventMessageContainer.selectAll("*").remove(); const text = eventMessageContainer .append("text") .attr("x", 0) .attr("y", 0); ["onZoom", `x: ${pos.x}`, `y: ${pos.y}`, `z: ${pos.z}`].forEach( (line, i) => { text .append("tspan") .attr("x", 0) .attr("dy", i === 0 ? 0 : "1.2em") // spacing between lines .text(line); } ); }) .onZoomEnd(function (event, map) { const pos = map.position(); eventMessageContainer.selectAll("*").remove(); const text = eventMessageContainer .append("text") .attr("x", 0) .attr("y", 0); ["onZoomEnd", `x: ${pos.x}`, `y: ${pos.y}`, `z: ${pos.z}`].forEach( (line, i) => { text .append("tspan") .attr("x", 0) .attr("dy", i === 0 ? 0 : "1.2em") // spacing between lines .text(line); } ); }) .onRegionMouseOver(function (e, feature, element, map) { const props = feature.properties; const sizeValue = map.statData("size").get(props.id)?.value; const colorValue = map.statData("color").get(props.id)?.value; eventMessageContainer.selectAll("*").remove(); const text = eventMessageContainer .append("text") .attr("x", 0) .attr("y", 0); // Build the multi-line text (adjust/add fields as needed) [ `onRegionMouseOver`, `ID: ${props.id}`, `Name: ${props.na || "(no name)"}`, // optional example `Size value: ${sizeValue || "(no data)"}`, `Color value: ${colorValue || "(no data)"}` ].forEach((line, i) => { text .append("tspan") .attr("x", 0) .attr("dy", i === 0 ? 0 : "1.2em") // line spacing .text(line); }); }) .onRegionMouseMove(function (e, feature, element, map) { const props = feature.properties; const sizeValue = map.statData("size").get(props.id)?.value; const colorValue = map.statData("color").get(props.id)?.value; eventMessageContainer.selectAll("*").remove(); const text = eventMessageContainer .append("text") .attr("x", 0) .attr("y", 0); // Build the multi-line text (adjust/add fields as needed) [ `onRegionMouseMove`, `ID: ${props.id}`, `Name: ${props.na || "(no name)"}`, // optional example `Size value: ${sizeValue || "(no data)"}`, `Color value: ${colorValue || "(no data)"}` ].forEach((line, i) => { text .append("tspan") .attr("x", 0) .attr("dy", i === 0 ? 0 : "1.2em") // line spacing .text(line); }); }) .onRegionMouseOut(function (e, feature, element, map) { const props = feature.properties; const sizeValue = map.statData("size").get(props.id)?.value; const colorValue = map.statData("color").get(props.id)?.value; eventMessageContainer.selectAll("*").remove(); const text = eventMessageContainer .append("text") .attr("x", 0) .attr("y", 0); // Build the multi-line text (adjust/add fields as needed) [ `onRegionMouseOut`, `ID: ${props.id}`, `Name: ${props.na || "(no name)"}`, // optional example `Size value: ${sizeValue || "(no data)"}`, `Color value: ${colorValue || "(no data)"}` ].forEach((line, i) => { text .append("tspan") .attr("x", 0) .attr("dy", i === 0 ? 0 : "1.2em") // line spacing .text(line); }); }) .build(); return m; }30:[] 2d:{"id":"a7c6bcda9f304a6b","slug":"custom-event-handlers","title":"Custom event handlers","thumbnail":"8f208d6ea5e3d709d82fdce9b70f73a7f2aa96fa605ee642fc7c67b0b2503a33","access_level":"public","create_time":"$D2025-07-21T12:42:36.907Z","update_time":"$D2026-05-27T14:55:11.333Z","view_time":null,"first_public_time":"$D2025-10-07T15:47:20.983Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a74f19f52d75fb24","login":"eurostat-ws","name":"Eurostat's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d298b18508a05146d470802a59abcc3c9e25b908a97a509956539a954f9359f4","tier":"starter_2024"},"version":223,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null}],"members":[{"type":"team","id":"a74f19f52d75fb24","login":"eurostat-ws","name":"Eurostat's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d298b18508a05146d470802a59abcc3c9e25b908a97a509956539a954f9359f4","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"cd44389fd6d53000","slug":"eurostatmap-js","title":"Eurostat map","owner":{"id":"a74f19f52d75fb24","login":"eurostat-ws","name":"Eurostat's Workspace"}},"type":"notebook","body":{"title":"Custom event handlers","cells":[{"id":0,"value":"# Custom event handlers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"https://github.com/eurostat/eurostat-map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"You can use custom event handlers to link two maps together with eurostat-map:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"

\n \n \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"Hover the mouse over the map and pan/zoom to see the available custom events:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"maps = {\n const mapHeight = 500;\n const mapWidth = 600;\n const mapA = eurostatmap\n .map(\"choropleth\")\n .svgId(\"mapA\")\n .containerId(\"mapA\")\n .title(\"Map A\")\n .height(mapHeight)\n .width(mapWidth)\n .stat({\n eurostatDatasetCode: \"demo_r_d3dens\",\n unitText: \"people/km²\",\n filters: { TIME: \"2023\" }\n })\n .nutsLevel(1)\n .zoomExtent([1, 10])\n .build();\n\n const mapB = eurostatmap\n .map(\"choropleth\")\n .svgId(\"mapB\")\n .containerId(\"mapB\")\n .title(\"Map B\")\n .height(mapHeight)\n .width(mapWidth)\n .stat({\n eurostatDatasetCode: \"nama_10r_3gdp\",\n unitText: \"euro per inhabitant\",\n filters: { TIME: \"2022\", UNIT: \"EUR_HAB\" }\n })\n .colorFunction(d3.interpolateGreens)\n .nutsLevel(1)\n .zoomExtent([1, 10])\n .build();\n\n linkMaps(mapA, mapB);\n\n return [mapA, mapB];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"function linkMaps(mapA, mapB) {\n let syncing = false;\n\n function withLock(fn) {\n if (syncing) return;\n syncing = true;\n try {\n fn();\n } finally {\n // Release immediately after the action finishes\n syncing = false;\n }\n }\n\n // Sync zoom/pan\n mapA.onZoom(() => withLock(() => mapB.position(mapA.position())));\n mapB.onZoom(() => withLock(() => mapA.position(mapB.position())));\n\n // Sync highlights (hover)\n mapA.onRegionMouseOver((e, f) =>\n withLock(() => mapB.highlightRegion(f.properties.id))\n );\n mapB.onRegionMouseOver((e, f) =>\n withLock(() => mapA.highlightRegion(f.properties.id))\n );\n\n mapA.onRegionMouseOut(() => withLock(() => mapB.clearHighlight()));\n mapB.onRegionMouseOut(() => withLock(() => mapA.clearHighlight()));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"eurostatmap = require(\"eurostat-map\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"