31: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; }32:[] 2f:{"title":"Custom event handlers","cells":[{"id":0,"value":"# Custom event handlers","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"https://github.com/eurostat/eurostat-map","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"You can use custom event handlers to link two maps together with eurostat-map:","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"

\n \n \n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":206,"value":"Hover the mouse over the map and pan/zoom to see the available custom events:","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":159,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":7,"value":"eurostatmap = require(\"eurostat-map\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}