Skip to content

Commit c1e5e89

Browse files
cjonesofcjonesof
committed
Added GeoSource
1 parent c3a1517 commit c1e5e89

File tree

2 files changed

+126
-122
lines changed

2 files changed

+126
-122
lines changed

‎src/lib/components/data-vis/map/Map.svelte‎

Lines changed: 117 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
setMaxBounds = false,
8282
onload,
8383
onidle,
84+
geoSouce,
8485
}: {
8586
data: object[];
8687
customPalette?: object[];
@@ -124,6 +125,7 @@
124125
interactive?: boolean;
125126
onload?: (map: maplibregl.Map) => void;
126127
onidle?: (e: maplibregl.MapLibreEvent) => void;
128+
geosouce: String;
127129
} = $props();
128130
129131
let styleLookup = {
@@ -377,135 +379,128 @@
377379
{:else if !interactive}
378380
<ScaleControl position={scaleControlPosition} unit={scaleControlUnit} />
379381
{/if}
380-
381-
<!-- <GeoJSON id="areas" data={merged} promoteId="areanm">
382-
<FillLayer
383-
paint={{
384-
"fill-color": ["coalesce", ["get", "color"], "lightgrey"],
385-
"fill-opacity": changeOpacityOnHover
386-
? hoverStateFilter(fillOpacity, hoverOpacity)
387-
: fillOpacity,
388-
}}
389-
beforeLayerType="symbol"
390-
manageHoverState={interactive}
391-
onclick={interactive ? (e) => zoomToArea(e) : undefined}
392-
onmousemove={interactive
393-
? (e) => {
394-
hoveredArea = e.features[0].id;
395-
hoveredAreaData = e.features[0].properties.metric;
396-
currentMousePosition = e.event.point;
397-
}
398-
: undefined}
399-
onmouseleave={interactive
400-
? () => {
401-
hoveredArea = null;
402-
hoveredAreaData = null;
403-
}
404-
: undefined}
405-
/>
406-
{#if showBorder}
407-
<LineLayer
408-
layout={{ "line-cap": "round", "line-join": "round" }}
382+
{#if geoSouce == "file"}
383+
<GeoJSON id="areas" data={merged} promoteId="areanm">
384+
<FillLayer
409385
paint={{
410-
"line-color": hoverStateFilter(borderColor, "orange"),
411-
"line-width": zoomTransition(3, 0, 12, maxBorderWidth),
386+
"fill-color": ["coalesce", ["get", "color"], "lightgrey"],
387+
"fill-opacity": changeOpacityOnHover
388+
? hoverStateFilter(fillOpacity, hoverOpacity)
389+
: fillOpacity,
412390
}}
413391
beforeLayerType="symbol"
392+
manageHoverState={interactive}
393+
onclick={interactive ? (e) => zoomToArea(e) : undefined}
394+
onmousemove={interactive
395+
? (e) => {
396+
hoveredArea = e.features[0].id;
397+
hoveredAreaData = e.features[0].properties.metric;
398+
currentMousePosition = e.event.point;
399+
}
400+
: undefined}
401+
onmouseleave={interactive
402+
? () => {
403+
hoveredArea = null;
404+
hoveredAreaData = null;
405+
}
406+
: undefined}
414407
/>
415-
{/if}
416-
</GeoJSON> -->
417-
418-
<!-- <VectorTileSource
419-
tiles={[
420-
"https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333",
421-
]}
422-
> -->
423-
424-
<!-- <VectorTileSource
425-
id={"imdlayer"}
426-
tiles={["https://cdn.ons.gov.uk/maptiles/t18/tiles/{z}/{x}/{y}.pbf"]}
427-
> -->
428-
429-
<VectorTileSource
430-
id={"lsoas"}
431-
promoteId={"LSOA21NM"}
432-
tiles={["http://localhost:8080/{z}/{x}/{y}.pbf"]}
433-
minzoom={6}
434-
maxzoom={14}
435-
>
436-
<FillLayer
437-
paint={{
438-
"fill-color": [
439-
"match",
440-
[
441-
"to-number",
442-
["get", "Index of Multiple Deprivation (IMD) Decile"],
443-
],
444-
1,
445-
"#ffffcc",
446-
2,
447-
"#ffffcc",
448-
3,
449-
"#a1dab4",
450-
4,
451-
"#a1dab4",
452-
5,
453-
"#41b6c4",
454-
6,
455-
"#41b6c4",
456-
7,
457-
"#2c7fb8",
458-
8,
459-
"#2c7fb8",
460-
9,
461-
"#253494",
462-
10,
463-
"#253494",
464-
/* default */ "rgba(0,0,0,0)",
465-
],
466-
"fill-opacity": 0.4,
467-
}}
468-
sourceLayer={"LSOA"}
469-
onclick={interactive
470-
? (e) => {
471-
console.log(e);
472-
return zoomToArea(e);
473-
}
474-
: undefined}
475-
onmousemove={interactive
476-
? (e) => {
477-
hoveredArea = e.features[0].id;
478-
hoveredAreaData =
479-
e.features[0].properties[
480-
"Index of Multiple Deprivation (IMD) Rank"
481-
];
482-
currentMousePosition = e.event.point;
483-
}
484-
: undefined}
485-
onmouseleave={interactive
486-
? () => {
487-
hoveredArea = null;
488-
hoveredAreaData = null;
489-
}
490-
: undefined}
491-
></FillLayer>
492-
{#if showBorder}
493-
<LineLayer
494-
layout={{ "line-cap": "round", "line-join": "round" }}
408+
{#if showBorder}
409+
<LineLayer
410+
layout={{ "line-cap": "round", "line-join": "round" }}
411+
paint={{
412+
"line-color": hoverStateFilter(borderColor, "orange"),
413+
"line-width": zoomTransition(3, 0, 12, maxBorderWidth),
414+
}}
415+
beforeLayerType="symbol"
416+
/>
417+
{/if}
418+
</GeoJSON>
419+
{:else if geoSouce == "tiles"}
420+
<VectorTileSource
421+
id={"lsoas"}
422+
promoteId={"LSOA21NM"}
423+
tiles={["http://localhost:8080/{z}/{x}/{y}.pbf"]}
424+
minzoom={6}
425+
maxzoom={14}
426+
>
427+
<FillLayer
495428
paint={{
496-
"line-color": hoverStateFilter(borderColor, "orange"),
497-
"line-width": zoomTransition(
498-
minZoom ?? 3,
499-
0,
500-
maxZoom ?? 14,
501-
maxBorderWidth,
502-
),
429+
"fill-color": [
430+
"match",
431+
[
432+
"to-number",
433+
["get", "Index of Multiple Deprivation (IMD) Decile"],
434+
],
435+
1,
436+
"#ffffcc",
437+
2,
438+
"#ffffcc",
439+
3,
440+
"#a1dab4",
441+
4,
442+
"#a1dab4",
443+
5,
444+
"#41b6c4",
445+
6,
446+
"#41b6c4",
447+
7,
448+
"#2c7fb8",
449+
8,
450+
"#2c7fb8",
451+
9,
452+
"#253494",
453+
10,
454+
"#253494",
455+
/* default */ "rgba(0,0,0,0)",
456+
],
457+
"fill-opacity": 0.4,
503458
}}
504-
beforeLayerType="symbol"
505459
sourceLayer={"LSOA"}
506-
/>
507-
{/if}
508-
</VectorTileSource>
460+
onclick={interactive
461+
? (e) => {
462+
console.log(e);
463+
return zoomToArea(e);
464+
}
465+
: undefined}
466+
onmousemove={interactive
467+
? (e) => {
468+
hoveredArea = e.features[0].id;
469+
hoveredAreaData =
470+
e.features[0].properties[
471+
"Index of Multiple Deprivation (IMD) Rank"
472+
];
473+
currentMousePosition = e.event.point;
474+
}
475+
: undefined}
476+
onmouseleave={interactive
477+
? () => {
478+
hoveredArea = null;
479+
hoveredAreaData = null;
480+
}
481+
: undefined}
482+
></FillLayer>
483+
{#if showBorder}
484+
<LineLayer
485+
layout={{ "line-cap": "round", "line-join": "round" }}
486+
paint={{
487+
"line-color": hoverStateFilter(borderColor, "orange"),
488+
"line-width": zoomTransition(
489+
minZoom ?? 3,
490+
0,
491+
maxZoom ?? 14,
492+
maxBorderWidth,
493+
),
494+
}}
495+
beforeLayerType="symbol"
496+
sourceLayer={"LSOA"}
497+
/>
498+
{/if}
499+
</VectorTileSource>
500+
{:else}
501+
<p>No data</p>
502+
{/if}
503+
509504
<!-- Important note: sourceLayer must match `-l` value from tippecanoe -->
510505

511506
{#if interactive && tooltip}

‎src/wrappers/components/data-vis/map/MapWrapper.svelte‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -433,6 +433,15 @@
433433
value: "ltla",
434434
options: ["cauth", "ctry", "cty", "ltla", "mcty", "rgn", "uk", "utla"],
435435
},
436+
{
437+
name: "geoSouce",
438+
isProp: true,
439+
description: "Tiles or maps",
440+
category: "Data",
441+
value: "Tiles",
442+
options: ["tiles", "file", "none"],
443+
},
444+
{ name: "addData", isProp: true, category: "Data", value: true },
436445
{
437446
name: "year",
438447
isProp: true,

0 commit comments

Comments
 (0)