Skip to content

Commit 18b5eaf

Browse files
committed
migrated from mapbox to mablibre
1 parent b3bb2fc commit 18b5eaf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+5152
-113
lines changed

apps/docs/next.config.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
module.exports = {};
1+
module.exports = {
2+
experimental: {
3+
esmExternals: 'loose',
4+
},
5+
};
6+
Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import "maplibre-gl/dist/maplibre-gl.css";
2+
import "@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css";
3+
4+
import { NakshaMaplibreDraw } from "@biodiv-platform/naksha-maplibre-draw";
5+
6+
import React, { useState } from "react";
7+
import { tw } from "twind";
8+
9+
const geojson = {
10+
type: "FeatureCollection",
11+
features: [
12+
{
13+
type: "Feature",
14+
properties: {},
15+
geometry: {
16+
type: "Point",
17+
coordinates: [78, 30],
18+
},
19+
},
20+
{
21+
type: "Feature",
22+
properties: {},
23+
geometry: {
24+
type: "Polygon",
25+
coordinates: [
26+
[
27+
[72, 20],
28+
[79, 20],
29+
[79, 24],
30+
[72, 24],
31+
[72, 20],
32+
],
33+
],
34+
},
35+
},
36+
{
37+
type: "Feature",
38+
properties: {},
39+
geometry: {
40+
type: "LineString",
41+
coordinates: [
42+
[76.5527, 29.1137],
43+
[79.7167, 17.7696],
44+
],
45+
},
46+
},
47+
],
48+
};
49+
50+
const changedGeojson = {
51+
type: "FeatureCollection",
52+
features: [
53+
{
54+
type: "Feature",
55+
properties: {},
56+
geometry: {
57+
type: "Polygon",
58+
coordinates: [
59+
[
60+
[76.5966796875, 16.678293098288513],
61+
[85.2978515625, 16.678293098288513],
62+
[85.2978515625, 20.96143961409684],
63+
[76.5966796875, 20.96143961409684],
64+
[76.5966796875, 16.678293098288513],
65+
],
66+
],
67+
},
68+
},
69+
],
70+
};
71+
72+
export default function NakshaMapboxDrawPage() {
73+
const [controlled, setControlled] = useState(false);
74+
const [multiple, setMultiple] = useState(false);
75+
const [data, setData] = useState(geojson.features);
76+
77+
return (
78+
<div className={tw`h-[100vh] w-[100vw]`}>
79+
<NakshaMaplibreDraw
80+
features={data}
81+
onFeaturesChange={setData}
82+
isControlled={controlled}
83+
isMultiple={multiple}
84+
/>
85+
<div
86+
className={tw`absolute top-3 right-12 bg-white rounded p-4 shadow-md`}
87+
>
88+
<label>
89+
<input type="checkbox" onChange={() => setControlled(!controlled)} />
90+
Controlled {JSON.stringify(controlled)}
91+
</label>
92+
<br />
93+
<label>
94+
<input type="checkbox" onChange={() => setMultiple(!multiple)} />
95+
Multiple {JSON.stringify(multiple)}
96+
</label>
97+
<br />
98+
<button onClick={() => setData(changedGeojson.features)}>
99+
Change GeoJSON
100+
</button>
101+
</div>
102+
</div>
103+
);
104+
}
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import "maplibre-gl/dist/maplibre-gl.css";
2+
3+
import { NakshaMaplibreLayers } from "@biodiv-platform/naksha-maplibre-layers";
4+
5+
import axios from "axios";
6+
import React from "react";
7+
import { tw } from "twind";
8+
9+
const Popup = (props) => {
10+
return (
11+
<div className={tw`max-w-[250px] overflow-auto`}>
12+
<button onClick={() => alert("Clicked")}>Clicked</button>
13+
<pre>{JSON.stringify(props, null, 2)}</pre>
14+
</div>
15+
);
16+
};
17+
18+
const HoverPopup = ({ feature }) => (
19+
<div key={feature?.properties?.count}>
20+
{feature?.properties?.count} Observations
21+
</div>
22+
);
23+
24+
const fetchGridData = async (geoProps) => {
25+
const params = {
26+
...geoProps,
27+
view: "map",
28+
geoField: "location",
29+
// taxon: 5275,
30+
};
31+
32+
const response = await axios.post(
33+
`http://localhost:8010/proxy/observation-api/api/v1/observation/list/extended_observation/_doc`,
34+
{},
35+
{ params }
36+
);
37+
return response.data.geohashAggregation;
38+
};
39+
40+
const handleOnGeoserverLayerClick = (feat) => {
41+
console.debug("gs_clicked!", feat);
42+
};
43+
44+
export default function NakshaMaplibreListPage() {
45+
return (
46+
<div className={tw`h-[100vh] w-[100vw]`}>
47+
<NakshaMaplibreLayers
48+
loadToC={true}
49+
showToC={true}
50+
managePublishing={true}
51+
nakshaApiEndpoint="http://localhost:8010/proxy/naksha-api/api"
52+
nakshaEndpointToken={process.env.NEXT_PUBLIC_NAKSHA_TOKEN}
53+
geoserver={{
54+
endpoint: "http://localhost:8010/proxy/geoserver",
55+
store: "naksha",
56+
workspace: "biodiv",
57+
}}
58+
onLayerDownload={console.log}
59+
canLayerShare={true}
60+
// selectedLayers={[
61+
// "global-observations",
62+
// "lyr_3_agar_soil",
63+
// "lyr_1_agar_geology",
64+
// ]}
65+
markers={[
66+
{
67+
latitude: 23.241346,
68+
longitude: 78.046875,
69+
colorHex: "07BEF1",
70+
},
71+
]}
72+
layers={[
73+
{
74+
id: "global-observations",
75+
title: "Global Observations",
76+
source: { type: "grid", fetcher: fetchGridData },
77+
onClick: Popup,
78+
onHover: HoverPopup,
79+
data: {
80+
index: "extended_observation",
81+
type: "extended_records",
82+
geoField: "location",
83+
summaryColumn: ["count"],
84+
propertyMap: { count: "Count" },
85+
},
86+
},
87+
]}
88+
/>
89+
</div>
90+
);
91+
}
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import "maplibre-gl/dist/maplibre-gl.css";
2+
import { NakshaMaplibreView } from "@biodiv-platform/naksha-maplibre-view";
3+
4+
import React from "react";
5+
import { tw } from "twind";
6+
7+
const geojson = {
8+
type: "FeatureCollection",
9+
features: [
10+
{
11+
type: "Feature",
12+
properties: {},
13+
geometry: {
14+
type: "Point",
15+
coordinates: [78, 30],
16+
},
17+
},
18+
{
19+
type: "Feature",
20+
properties: {},
21+
geometry: {
22+
type: "Polygon",
23+
coordinates: [
24+
[
25+
[72, 20],
26+
[79, 20],
27+
[79, 24],
28+
[72, 24],
29+
[72, 20],
30+
],
31+
],
32+
},
33+
},
34+
{
35+
type: "Feature",
36+
properties: {},
37+
geometry: {
38+
type: "LineString",
39+
coordinates: [
40+
[76.5527, 29.1137],
41+
[79.7167, 17.7696],
42+
],
43+
},
44+
},
45+
],
46+
};
47+
48+
export default function NakshaMaplibreViewPage() {
49+
return (
50+
<div className={tw`h-[100vh] w-[100vw]`}>
51+
<NakshaMaplibreView data={geojson} />
52+
</div>
53+
);
54+
}

apps/docs/pages/index.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ import React from "react";
22
import { tw } from "twind";
33

44
const modules = [
5-
"naksha-mapbox-list",
6-
"naksha-mapbox-view",
5+
"naksha-gmaps-draw",
6+
"naksha-gmaps-view",
77
"naksha-mapbox-draw",
88
"naksha-gmaps-draw",
99
"naksha-gmaps-view",
10+
"naksha-maplibre-layers",
11+
"naksha-maplibre-view",
12+
"naksha-maplibre-draw",
1013
];
1114

1215
export default function IndexPage() {

packages/naksha-commons/src/static/naksha.tsx

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,6 @@ export const defaultViewState = {
1414
};
1515

1616
export const defaultMapStyles = [
17-
{
18-
text: "Streets",
19-
key: MapStyles.MAP_STREETS,
20-
style: "mapbox://styles/biodiv/cku4aoj5k1g9h17o5r3tjsntn",
21-
},
22-
{
23-
text: "Satellite",
24-
key: MapStyles.MAP_SATELLITE,
25-
style: "mapbox://styles/biodiv/cku49ca8q1esz18o7gxfjmh5r",
26-
},
27-
{
28-
text: "Dark",
29-
key: MapStyles.MAP_DARK,
30-
style: "mapbox://styles/biodiv/cku4a35961fgo17mykoq76se1",
31-
},
3217
{
3318
text: "OSM",
3419
key: MapStyles.MAP_OSM,

packages/naksha-components-react/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "naksha-components-react",
3-
"version": "4.5.8",
3+
"version": "4.6.1-beta.12",
44
"author": "harshzalavadiya",
55
"main": "./dist/index.js",
66
"module": "./dist/esm/index.js",
@@ -26,6 +26,9 @@
2626
"@biodiv-platform/naksha-mapbox-draw": "4.4.9",
2727
"@biodiv-platform/naksha-mapbox-list": "4.5.0",
2828
"@biodiv-platform/naksha-mapbox-view": "4.4.9",
29+
"@biodiv-platform/naksha-maplibre-draw": "5.0.0",
30+
"@biodiv-platform/naksha-maplibre-layers": "5.0.0",
31+
"@biodiv-platform/naksha-maplibre-view": "5.0.0",
2932
"@biodiv-platform/tsconfig": "4.4.9"
3033
},
3134
"devDependencies": {

packages/naksha-components-react/src/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ export * from "@biodiv-platform/naksha-gmaps-view";
44
export * from "@biodiv-platform/naksha-mapbox-draw";
55
export * from "@biodiv-platform/naksha-mapbox-list";
66
export * from "@biodiv-platform/naksha-mapbox-view";
7+
export * from "@biodiv-platform/naksha-maplibre-draw";
8+
export * from "@biodiv-platform/naksha-maplibre-layers";
9+
export * from "@biodiv-platform/naksha-maplibre-view";

0 commit comments

Comments
 (0)