Skip to content

Commit c85b576

Browse files
kylebarronkylebarron
authored
Fix multipolygon rendering (#48)
1 parent 33a9c26 commit c85b576

File tree

9 files changed

+1774
-14
lines changed

9 files changed

+1774
-14
lines changed

‎examples/multipolygon/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
## Example: Use `@geoarrow/deck.gl-layers` with GeoArrow MultiPolygon data
2+
3+
## Data for example:
4+
5+
Download [Admin 0 - Countries](https://www.naturalearthdata.com/downloads/10m-cultural-vectors/10m-admin-0-countries/) data.
6+
7+
```
8+
wget https://naciscdn.org/naturalearth/10m/cultural/ne_10m_admin_0_countries.zip
9+
poetry install
10+
poetry run python generate_data.py
11+
```
12+
13+
## Serve data
14+
15+
```
16+
npx http-server --cors
17+
```
18+
19+
## Usage
20+
21+
To install dependencies:
22+
23+
```bash
24+
npm install
25+
# or
26+
yarn
27+
```
28+
29+
Commands:
30+
31+
* `npm start` is the development target, to serve the app and hot reload.
32+
* `npm run build` is the production target, to create the final bundle and write to disk.

‎examples/multipolygon/app.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { useState, useEffect } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
4+
import DeckGL, { Layer, PickingInfo } from "deck.gl/typed";
5+
import { GeoArrowSolidPolygonLayer } from "@geoarrow/deck.gl-layers";
6+
import * as arrow from "apache-arrow";
7+
8+
const GEOARROW_POLYGON_DATA =
9+
"http://localhost:8080/ne_10m_admin_0_countries.feather";
10+
11+
const INITIAL_VIEW_STATE = {
12+
latitude: 0,
13+
longitude: 0,
14+
zoom: 2,
15+
bearing: 0,
16+
pitch: 0,
17+
};
18+
19+
const MAP_STYLE =
20+
"https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
21+
const NAV_CONTROL_STYLE = {
22+
position: "absolute",
23+
top: 10,
24+
left: 10,
25+
};
26+
27+
function Root() {
28+
const onClick = (info: PickingInfo) => {
29+
if (info.object) {
30+
console.log(JSON.stringify(info.object.toJSON()));
31+
}
32+
};
33+
34+
const [table, setTable] = useState<arrow.Table | null>(null);
35+
36+
useEffect(() => {
37+
// declare the data fetching function
38+
const fetchData = async () => {
39+
const data = await fetch(GEOARROW_POLYGON_DATA);
40+
const buffer = await data.arrayBuffer();
41+
const table = arrow.tableFromIPC(buffer);
42+
setTable(table);
43+
};
44+
45+
if (!table) {
46+
fetchData().catch(console.error);
47+
}
48+
});
49+
50+
const layers: Layer[] = [];
51+
52+
table &&
53+
layers.push(
54+
new GeoArrowSolidPolygonLayer({
55+
id: "geoarrow-polygons",
56+
data: table,
57+
filled: true,
58+
wireframe: true,
59+
extruded: true,
60+
getPolygon: table.getChild("geometry")!,
61+
getFillColor: [255, 0, 0],
62+
// pickable: true,
63+
// autoHighlight: true,
64+
})
65+
);
66+
67+
return (
68+
<DeckGL
69+
initialViewState={INITIAL_VIEW_STATE}
70+
controller={true}
71+
layers={layers}
72+
ContextProvider={MapContext.Provider}
73+
// onClick={onClick}
74+
>
75+
<StaticMap mapStyle={MAP_STYLE} />
76+
<NavigationControl style={NAV_CONTROL_STYLE} />
77+
</DeckGL>
78+
);
79+
}
80+
81+
/* global document */
82+
const container = document.body.appendChild(document.createElement("div"));
83+
createRoot(container).render(<Root />);

‎examples/multipolygon/generate_data.py‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import geopandas as gpd
2+
import pyarrow.feather as feather
3+
from lonboard.geoarrow.geopandas_interop import geopandas_to_geoarrow
4+
5+
6+
def main():
7+
gdf = gpd.read_file("ne_10m_admin_0_countries.zip", engine="pyogrio")
8+
table = geopandas_to_geoarrow(gdf)
9+
feather.write_feather(
10+
table, "ne_10m_admin_0_countries.feather", compression="uncompressed"
11+
)
12+
13+
14+
if __name__ == "__main__":
15+
main()

‎examples/multipolygon/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>deck.gl GeoArrowPolygonLayer MultiPolygon Example</title>
6+
<style>
7+
body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}
8+
</style>
9+
</head>
10+
<body>
11+
</body>
12+
<script type="module" src="app.tsx"></script>
13+
</html>

‎examples/multipolygon/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "deckgl-example-geoarrow-multipolygon-layer",
3+
"version": "0.0.0",
4+
"private": true,
5+
"license": "MIT",
6+
"scripts": {
7+
"start": "vite --open",
8+
"build": "vite build"
9+
},
10+
"dependencies": {
11+
"@geoarrow/deck.gl-layers": "../../",
12+
"apache-arrow": "^13.0.0",
13+
"deck.gl": "^8.9.23",
14+
"react": "^18.0.0",
15+
"react-dom": "^18.0.0",
16+
"react-map-gl": "^5.3.0"
17+
},
18+
"devDependencies": {
19+
"@types/react": "^18.0.0",
20+
"@types/react-dom": "^18.0.0",
21+
"vite": "^4.0.0"
22+
},
23+
"volta": {
24+
"extends": "../../package.json"
25+
}
26+
}

0 commit comments

Comments
 (0)