Skip to content

Commit 14f23d6

Browse files
kylebarronkylebarron
authored
Multi-geometry support (#32)
* wip multipoint * Multi point support * support multi linestrings in pathlayer * wip multipolygon * fix validation in path layer * validate multi polygon type
1 parent ffecb2d commit 14f23d6

14 files changed

+1010
-37
lines changed

‎examples/multilinestring/app.tsx

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
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 } from "deck.gl/typed";
5+
import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
6+
import * as arrow from "apache-arrow";
7+
8+
const GEOARROW_MULTILINESTRING_DATA =
9+
"http://localhost:8080/ne_10m_roads_north_america.feather";
10+
11+
const INITIAL_VIEW_STATE = {
12+
latitude: 20,
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+
console.log("multipoint")
28+
console.log(arrow);
29+
30+
function Root() {
31+
const onClick = (info) => {
32+
if (info.object) {
33+
// eslint-disable-next-line
34+
alert(
35+
`${info.object.properties.name} (${info.object.properties.abbrev})`
36+
);
37+
}
38+
};
39+
40+
const [table, setTable] = useState<arrow.Table | null>(null);
41+
42+
useEffect(() => {
43+
// declare the data fetching function
44+
const fetchData = async () => {
45+
const data = await fetch(GEOARROW_MULTILINESTRING_DATA);
46+
const buffer = await data.arrayBuffer();
47+
const table = arrow.tableFromIPC(buffer);
48+
console.log(table);
49+
setTable(table);
50+
};
51+
52+
if (!table) {
53+
fetchData().catch(console.error);
54+
}
55+
});
56+
57+
const layers: Layer[] = [];
58+
59+
table &&
60+
layers.push(
61+
new GeoArrowPathLayer({
62+
id: "geoarrow-path",
63+
data: table,
64+
// getPath: table.getC
65+
// getPosition: table.getChild("geometry")!,
66+
getColor:[255, 0, 0],
67+
widthMinPixels: 0.2,
68+
// getFillColor: [255, 0, 0],
69+
// getFillColor: table.getChild("colors")!,
70+
// getLineColor: table.getChild("colors")!,
71+
radiusMinPixels: 4,
72+
getPointRadius: 10,
73+
pointRadiusMinPixels: 0.8,
74+
})
75+
);
76+
77+
return (
78+
<DeckGL
79+
initialViewState={INITIAL_VIEW_STATE}
80+
controller={true}
81+
layers={layers}
82+
// @ts-expect-error
83+
ContextProvider={MapContext.Provider}
84+
>
85+
<StaticMap mapStyle={MAP_STYLE} />
86+
<NavigationControl style={NAV_CONTROL_STYLE} />
87+
</DeckGL>
88+
);
89+
}
90+
91+
/* global document */
92+
const container = document.body.appendChild(document.createElement("div"));
93+
createRoot(container).render(<Root />);

‎examples/multilinestring/index.html

+13
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 GeoArrowPathLayer MultiLineString 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/multilinestring/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "deckgl-example-geoarrow-multilinestring-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+
"apache-arrow": "^13.0.0",
12+
"deck.gl": "^8.9.23",
13+
"react": "^18.0.0",
14+
"react-dom": "^18.0.0",
15+
"react-map-gl": "^5.3.0"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.0.0",
19+
"@types/react-dom": "^18.0.0",
20+
"vite": "^4.0.0"
21+
},
22+
"volta": {
23+
"extends": "../../package.json"
24+
}
25+
}

‎examples/multipoint/app.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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 } from "deck.gl/typed";
5+
import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
6+
import * as arrow from "apache-arrow";
7+
8+
const GEOARROW_MULTIPOINT_DATA =
9+
"http://localhost:8080/naturalearth_cities_multipoint.feather";
10+
11+
const INITIAL_VIEW_STATE = {
12+
latitude: 20,
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+
console.log("multipoint")
28+
console.log(arrow);
29+
30+
function Root() {
31+
const onClick = (info) => {
32+
if (info.object) {
33+
// eslint-disable-next-line
34+
alert(
35+
`${info.object.properties.name} (${info.object.properties.abbrev})`
36+
);
37+
}
38+
};
39+
40+
const [table, setTable] = useState<arrow.Table | null>(null);
41+
42+
useEffect(() => {
43+
// declare the data fetching function
44+
const fetchData = async () => {
45+
const data = await fetch(GEOARROW_MULTIPOINT_DATA);
46+
const buffer = await data.arrayBuffer();
47+
const table = arrow.tableFromIPC(buffer);
48+
console.log(table);
49+
setTable(table);
50+
};
51+
52+
if (!table) {
53+
fetchData().catch(console.error);
54+
}
55+
});
56+
57+
const layers: Layer[] = [];
58+
59+
table &&
60+
layers.push(
61+
new GeoArrowScatterplotLayer({
62+
id: "geoarrow-points",
63+
data: table,
64+
getPosition: table.getChild("geometry")!,
65+
getFillColor: [255, 0, 0],
66+
// getFillColor: table.getChild("colors")!,
67+
// getLineColor: table.getChild("colors")!,
68+
radiusMinPixels: 4,
69+
getPointRadius: 10,
70+
pointRadiusMinPixels: 0.8,
71+
})
72+
);
73+
74+
return (
75+
<DeckGL
76+
initialViewState={INITIAL_VIEW_STATE}
77+
controller={true}
78+
layers={layers}
79+
// @ts-expect-error
80+
ContextProvider={MapContext.Provider}
81+
>
82+
<StaticMap mapStyle={MAP_STYLE} />
83+
<NavigationControl style={NAV_CONTROL_STYLE} />
84+
</DeckGL>
85+
);
86+
}
87+
88+
/* global document */
89+
const container = document.body.appendChild(document.createElement("div"));
90+
createRoot(container).render(<Root />);

‎examples/multipoint/index.html

+13
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 GeoArrowPointLayer MultiPoint 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/multipoint/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "deckgl-example-geoarrow-multipoint-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+
"apache-arrow": "^13.0.0",
12+
"deck.gl": "^8.9.23",
13+
"react": "^18.0.0",
14+
"react-dom": "^18.0.0",
15+
"react-map-gl": "^5.3.0"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.0.0",
19+
"@types/react-dom": "^18.0.0",
20+
"vite": "^4.0.0"
21+
},
22+
"volta": {
23+
"extends": "../../package.json"
24+
}
25+
}

‎generate_data.py

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import geopandas as gpd
2+
import pyarrow as pa
3+
import numpy as np
4+
import shapely
5+
import pyarrow.feather as feather
6+
from geoarrow.shapely.geopandas_interop import geopandas_to_geoarrow
7+
8+
gdf = gpd.read_file(gpd.datasets.get_path('naturalearth_cities'))
9+
multipoint_geom = shapely.multipoints(gdf.geometry)
10+
gdf2 = gpd.GeoDataFrame({'a': [0]}, geometry=[multipoint_geom])
11+
12+
table = geopandas_to_geoarrow(gdf2)
13+
colors = pa.FixedSizeListArray.from_arrays([255, 0, 0], 3)
14+
table = table.append_column("colors", colors)
15+
feather.write_feather(table, "naturalearth_cities_multipoint.feather", compression="uncompressed")

‎package-lock.json

+41
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/constants.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Enum holding GeoArrow extension type names
3+
*/
4+
export enum EXTENSION_NAME {
5+
POINT = "geoarrow.point",
6+
LINESTRING = "geoarrow.linestring",
7+
POLYGON = "geoarrow.polygon",
8+
MULTIPOINT = "geoarrow.multipoint",
9+
MULTILINESTRING = "geoarrow.multilinestring",
10+
MULTIPOLYGON = "geoarrow.multipolygon",
11+
}

0 commit comments

Comments
 (0)