mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier formatting

Browse Source
This commit is contained in:
kajkal
2023-03-26 14:58:29 +02:00
parent 3282e6f325
commit baea873997
2 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/App.tsx
View File

@@ -101,7 +101,9 @@ function App() {
return ( return (
<div> <div>
<Header> <Header>
<Title href="/" onClick={clear}>PMTiles Viewer</Title> <Title href="/" onClick={clear}>
PMTiles Viewer
</Title>
<GithubLink> <GithubLink>
<GithubA href="https://github.com/protomaps/PMTiles" target="_blank"> <GithubA href="https://github.com/protomaps/PMTiles" target="_blank">
<GitHubLogoIcon /> {GIT_SHA} <GitHubLogoIcon /> {GIT_SHA}

66
app/src/MaplibreMap.tsx
View File

@@ -67,7 +67,7 @@ const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
<FeatureRow key={i}> <FeatureRow key={i}>
<span> <span>
<strong>{(f.layer as any)["source-layer"]}</strong> <strong>{(f.layer as any)["source-layer"]}</strong>
<span style={{fontSize: "0.8em"}}> ({f.geometry.type})</span> <span style={{ fontSize: "0.8em" }}> ({f.geometry.type})</span>
</span> </span>
<table> <table>
{Object.entries(f.properties).map(([key, value], i) => ( {Object.entries(f.properties).map(([key, value], i) => (
@@ -88,11 +88,15 @@ interface LayerVisibility {
visible: boolean; visible: boolean;
} }
const LayersVisibilityController = (props: { layers: LayerVisibility[], onChange: (layers: LayerVisibility[]) => void }) => { const LayersVisibilityController = (props: {
const {layers, onChange} = props; layers: LayerVisibility[];
onChange: (layers: LayerVisibility[]) => void;
}) => {
const { layers, onChange } = props;
const allLayersCheckboxRef = useRef<HTMLInputElement>(null); const allLayersCheckboxRef = useRef<HTMLInputElement>(null);
const visibleLayersCount = layers.filter(l => l.visible).length; const visibleLayersCount = layers.filter((l) => l.visible).length;
const indeterminate = visibleLayersCount > 0 && visibleLayersCount !== layers.length; const indeterminate =
visibleLayersCount > 0 && visibleLayersCount !== layers.length;
useEffect(() => { useEffect(() => {
if (allLayersCheckboxRef.current) { if (allLayersCheckboxRef.current) {
@@ -110,13 +114,17 @@ const LayersVisibilityController = (props: { layers: LayerVisibility[], onChange
} }
const toggleAllLayers = () => { const toggleAllLayers = () => {
const someLayersAreHidden = visibleLayersCount !== layers.length; const visible = visibleLayersCount !== layers.length;
onChange(layers.map(l => ({...l, visible: someLayersAreHidden}))); const newLayersVisibility = layers.map((l) => ({ ...l, visible }));
onChange(newLayersVisibility);
}; };
const toggleLayer = (event: React.ChangeEvent<HTMLInputElement>) => { const toggleLayer = (event: React.ChangeEvent<HTMLInputElement>) => {
const layerId = event.target.getAttribute("data-layer-id"); const layerId = event.target.getAttribute("data-layer-id");
onChange(layers.map(l => (l.id === layerId ? {...l, visible: !l.visible} : l))); const newLayersVisibility = layers.map((l) =>
l.id === layerId ? { ...l, visible: !l.visible } : l
);
onChange(newLayersVisibility);
}; };
return ( return (
@@ -132,9 +140,9 @@ const LayersVisibilityController = (props: { layers: LayerVisibility[], onChange
<em>All layers</em> <em>All layers</em>
</CheckboxLabel> </CheckboxLabel>
<LayersVisibilityList> <LayersVisibilityList>
{props.layers.map(({id, visible}) => ( {props.layers.map(({ id, visible }) => (
<li key={id}> <li key={id}>
<CheckboxLabel style={{paddingLeft: 8}}> <CheckboxLabel style={{ paddingLeft: 8 }}>
<input <input
type="checkbox" type="checkbox"
checked={visible} checked={visible}
@@ -284,7 +292,10 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf", glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
layers: layers, layers: layers,
}, },
layersVisibility: vector_layers.map((l: any) => ({id: l.id, visible: true})), layersVisibility: vector_layers.map((l: any) => ({
id: l.id,
visible: true,
})),
}; };
}; };
@@ -309,7 +320,9 @@ function MaplibreMap(props: { file: PMTiles }) {
const toggleShowAttributes = () => { const toggleShowAttributes = () => {
setShowAttributes(!showAttributes); setShowAttributes(!showAttributes);
mapRef.current!.getCanvas().style.cursor = !showAttributes ? "crosshair" : ""; mapRef.current!.getCanvas().style.cursor = !showAttributes
? "crosshair"
: "";
}; };
const toggleShowTileBoundaries = () => { const toggleShowTileBoundaries = () => {
@@ -317,14 +330,18 @@ function MaplibreMap(props: { file: PMTiles }) {
mapRef.current!.showTileBoundaries = !showTileBoundaries; mapRef.current!.showTileBoundaries = !showTileBoundaries;
}; };
const handleLayersVisibilityChange = (layersVisibility: LayerVisibility[]) => { const handleLayersVisibilityChange = (
layersVisibility: LayerVisibility[]
) => {
setLayersVisibility(layersVisibility); setLayersVisibility(layersVisibility);
for (const {id, visible} of layersVisibility) { const map = mapRef.current!;
mapRef.current!.setLayoutProperty(`${id}_fill`, "visibility", visible ? "visible" : "none"); for (const { id, visible } of layersVisibility) {
mapRef.current!.setLayoutProperty(`${id}_stroke`, "visibility", visible ? "visible" : "none"); const visibility = visible ? "visible" : "none";
mapRef.current!.setLayoutProperty(`${id}_point`, "visibility", visible ? "visible" : "none"); map.setLayoutProperty(`${id}_fill`, "visibility", visibility);
map.setLayoutProperty(`${id}_stroke`, "visibility", visibility);
map.setLayoutProperty(`${id}_point`, "visibility", visibility);
} }
} };
useEffect(() => { useEffect(() => {
let protocol = new Protocol(); let protocol = new Protocol();
@@ -355,7 +372,7 @@ function MaplibreMap(props: { file: PMTiles }) {
map.on("mousemove", (e) => { map.on("mousemove", (e) => {
const hoveredFeatures = hoveredFeaturesRef.current; const hoveredFeatures = hoveredFeaturesRef.current;
for (const feature of hoveredFeatures) { for (const feature of hoveredFeatures) {
map.setFeatureState(feature, {hover: false}); map.setFeatureState(feature, { hover: false });
hoveredFeatures.delete(feature); hoveredFeatures.delete(feature);
} }
@@ -364,15 +381,18 @@ function MaplibreMap(props: { file: PMTiles }) {
return; return;
} }
const {x, y} = e.point; const { x, y } = e.point;
const r = 2; // radius around the point const r = 2; // radius around the point
var features = map.queryRenderedFeatures([[x-r, y-r], [x+r,y+r]]); var features = map.queryRenderedFeatures([
[x - r, y - r],
[x + r, y + r],
]);
// ignore the basemap // ignore the basemap
features = features.filter((feature) => feature.source === "source"); features = features.filter((feature) => feature.source === "source");
for (const feature of features) { for (const feature of features) {
map.setFeatureState(feature, {hover: true}); map.setFeatureState(feature, { hover: true });
hoveredFeatures.add(feature); hoveredFeatures.add(feature);
} }
@@ -414,7 +434,7 @@ function MaplibreMap(props: { file: PMTiles }) {
let style = await rasterStyle(props.file); let style = await rasterStyle(props.file);
map.setStyle(style); map.setStyle(style);
} else { } else {
let {style, layersVisibility} = await vectorStyle(props.file); let { style, layersVisibility } = await vectorStyle(props.file);
map.setStyle(style); map.setStyle(style);
setLayersVisibility(layersVisibility); setLayersVisibility(layersVisibility);
} }