@bpd-library/components 1.2.3-beta.5 → 1.2.3-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { environment } from '@bpd-library/utilities';
|
|
1
|
+
import { calculateBoundingBox, environment } from '@bpd-library/utilities';
|
|
2
2
|
const OUTER_COORDINATES = [
|
|
3
3
|
[
|
|
4
4
|
[-42, 74],
|
|
@@ -9,35 +9,96 @@ const OUTER_COORDINATES = [
|
|
|
9
9
|
],
|
|
10
10
|
];
|
|
11
11
|
const ISOCHRONE_SOURCE = 'isochrone';
|
|
12
|
+
const DEFAULT_FILL_COLOR = '#000000';
|
|
13
|
+
const DEFAULT_STROKE_COLOR = '#32C1DE';
|
|
12
14
|
let mask;
|
|
13
15
|
let polygon;
|
|
14
16
|
const addIsochrone = async (map, isochroneSetting) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
await init();
|
|
18
|
+
async function init() {
|
|
19
|
+
if (!mask || !polygon) {
|
|
20
|
+
const maskPackage = await import('@turf/mask');
|
|
21
|
+
const helpersPackage = await import('@turf/helpers');
|
|
22
|
+
mask = await maskPackage.default;
|
|
23
|
+
polygon = await helpersPackage.polygon;
|
|
24
|
+
}
|
|
25
|
+
if (!map.getSource(ISOCHRONE_SOURCE)) {
|
|
26
|
+
setupSource();
|
|
27
|
+
setupLayer();
|
|
28
|
+
}
|
|
29
|
+
const { coordinate, minutes, profile, fitBounds } = isochroneSetting;
|
|
30
|
+
const accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;
|
|
31
|
+
try {
|
|
32
|
+
let url = `https://api.mapbox.com/isochrone/v1/mapbox/${profile}/${coordinate[0]},${coordinate[1]}?contours_minutes=${minutes}&polygons=true&access_token=${accessToken}`;
|
|
33
|
+
if (profile === 'driving') {
|
|
34
|
+
url += '&generalize=100';
|
|
35
|
+
}
|
|
36
|
+
const result = await fetch(url);
|
|
37
|
+
const parsedResult = await result.json();
|
|
38
|
+
if (parsedResult) {
|
|
39
|
+
const source = map.getSource(ISOCHRONE_SOURCE);
|
|
40
|
+
const invertedCoordinates = invertCoordinates(parsedResult);
|
|
41
|
+
if (fitBounds) {
|
|
42
|
+
fitApiResultBounds(parsedResult);
|
|
43
|
+
}
|
|
44
|
+
source === null || source === void 0 ? void 0 : source.setData(invertedCoordinates);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
catch (e) {
|
|
48
|
+
if (environment.isLocal) {
|
|
49
|
+
console.error(e);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
20
52
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
53
|
+
function setupSource() {
|
|
54
|
+
map.addSource(ISOCHRONE_SOURCE, {
|
|
55
|
+
type: 'geojson',
|
|
56
|
+
data: {
|
|
57
|
+
type: 'FeatureCollection',
|
|
58
|
+
features: [],
|
|
59
|
+
},
|
|
60
|
+
});
|
|
24
61
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
62
|
+
function setupLayer() {
|
|
63
|
+
const { fill = DEFAULT_FILL_COLOR, stroke = DEFAULT_STROKE_COLOR } = isochroneSetting.color || {};
|
|
64
|
+
map.addLayer({
|
|
65
|
+
id: 'isochroneFill',
|
|
66
|
+
type: 'fill',
|
|
67
|
+
source: ISOCHRONE_SOURCE,
|
|
68
|
+
layout: {},
|
|
69
|
+
paint: {
|
|
70
|
+
'fill-color': fill,
|
|
71
|
+
'fill-opacity': 0.07,
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
map.addLayer({
|
|
75
|
+
id: 'isochroneStroke',
|
|
76
|
+
type: 'line',
|
|
77
|
+
source: ISOCHRONE_SOURCE,
|
|
78
|
+
layout: {},
|
|
79
|
+
paint: {
|
|
80
|
+
'line-color': stroke,
|
|
81
|
+
'line-width': 1,
|
|
82
|
+
},
|
|
83
|
+
});
|
|
36
84
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
85
|
+
function invertCoordinates(apiResult) {
|
|
86
|
+
var _a;
|
|
87
|
+
const apiCoordinates = (_a = apiResult.features[0]) === null || _a === void 0 ? void 0 : _a.geometry.coordinates;
|
|
88
|
+
const outerPolygon = polygon(apiCoordinates);
|
|
89
|
+
const innerPolygon = polygon([...OUTER_COORDINATES]);
|
|
90
|
+
const invertedPolygon = mask(outerPolygon, innerPolygon);
|
|
91
|
+
return invertedPolygon;
|
|
92
|
+
}
|
|
93
|
+
function fitApiResultBounds(apiResult) {
|
|
94
|
+
var _a;
|
|
95
|
+
const coordinates = (_a = apiResult.features[0]) === null || _a === void 0 ? void 0 : _a.geometry.coordinates;
|
|
96
|
+
const boundingBox = calculateBoundingBox(coordinates);
|
|
97
|
+
map.fitBounds(boundingBox, {
|
|
98
|
+
padding: 20,
|
|
99
|
+
animate: true,
|
|
100
|
+
duration: 1000,
|
|
101
|
+
});
|
|
41
102
|
}
|
|
42
103
|
};
|
|
43
104
|
const removeIsochrone = (map) => {
|
|
@@ -49,44 +110,5 @@ const removeIsochrone = (map) => {
|
|
|
49
110
|
features: [],
|
|
50
111
|
});
|
|
51
112
|
};
|
|
52
|
-
function setupSource(map) {
|
|
53
|
-
map.addSource(ISOCHRONE_SOURCE, {
|
|
54
|
-
type: 'geojson',
|
|
55
|
-
data: {
|
|
56
|
-
type: 'FeatureCollection',
|
|
57
|
-
features: [],
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
function setupLayer(map) {
|
|
62
|
-
map.addLayer({
|
|
63
|
-
id: 'isochroneFill',
|
|
64
|
-
type: 'fill',
|
|
65
|
-
source: ISOCHRONE_SOURCE,
|
|
66
|
-
layout: {},
|
|
67
|
-
paint: {
|
|
68
|
-
'fill-color': '#000000',
|
|
69
|
-
'fill-opacity': 0.07,
|
|
70
|
-
},
|
|
71
|
-
});
|
|
72
|
-
map.addLayer({
|
|
73
|
-
id: 'isochroneStroke',
|
|
74
|
-
type: 'line',
|
|
75
|
-
source: ISOCHRONE_SOURCE,
|
|
76
|
-
layout: {},
|
|
77
|
-
paint: {
|
|
78
|
-
'line-color': '#32C1DE',
|
|
79
|
-
'line-width': 1,
|
|
80
|
-
},
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
function invertCoordinates(apiResult) {
|
|
84
|
-
var _a;
|
|
85
|
-
const apiCoordinates = (_a = apiResult.features[0]) === null || _a === void 0 ? void 0 : _a.geometry.coordinates;
|
|
86
|
-
const outerPolygon = polygon(apiCoordinates);
|
|
87
|
-
const innerPolygon = polygon([...OUTER_COORDINATES]);
|
|
88
|
-
const invertedPolygon = mask(outerPolygon, innerPolygon);
|
|
89
|
-
return invertedPolygon;
|
|
90
|
-
}
|
|
91
113
|
export { addIsochrone, removeIsochrone };
|
|
92
114
|
//# sourceMappingURL=isochrone.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"isochrone.js","sourceRoot":"","sources":["../../../../../src/molecules/map/utilities/mapbox/isochrone.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"isochrone.js","sourceRoot":"","sources":["../../../../../src/molecules/map/utilities/mapbox/isochrone.ts"],"names":[],"mappings":"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","sourcesContent":["import { Coordinates, MapIsochroneSetting } from '@bpd-library/types';\nimport { calculateBoundingBox, environment } from '@bpd-library/utilities';\nimport mapboxgl from 'mapbox-gl';\n\nconst OUTER_COORDINATES: Coordinates = [\n [\n [-42, 74],\n [-42, 1],\n [80, 1],\n [80, 74],\n [-42, 74],\n ],\n];\nconst ISOCHRONE_SOURCE = 'isochrone';\nconst DEFAULT_FILL_COLOR = '#000000';\nconst DEFAULT_STROKE_COLOR = '#32C1DE';\n\ntype IsochroneApiResult = GeoJSON.FeatureCollection<GeoJSON.Polygon>;\n\nlet mask: any;\nlet polygon: any;\n\nconst addIsochrone = async (map: mapboxgl.Map, isochroneSetting: MapIsochroneSetting) => {\n await init();\n\n async function init() {\n // Lazyload turf package\n if (!mask || !polygon) {\n const maskPackage = await import('@turf/mask');\n const helpersPackage = await import('@turf/helpers');\n\n mask = await maskPackage.default;\n polygon = await helpersPackage.polygon;\n }\n\n // Setup source and layer, if not existing\n if (!map.getSource(ISOCHRONE_SOURCE)) {\n setupSource();\n setupLayer();\n }\n\n const { coordinate, minutes, profile, fitBounds } = isochroneSetting;\n\n const accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;\n\n try {\n let url: string = `https://api.mapbox.com/isochrone/v1/mapbox/${profile}/${coordinate[0]},${coordinate[1]}?contours_minutes=${minutes}&polygons=true&access_token=${accessToken}`;\n\n // To simplify the polygon. Makes calculating boundingBoxes more performant\n if (profile === 'driving') {\n url += '&generalize=100';\n }\n\n const result = await fetch(url);\n const parsedResult: IsochroneApiResult = await result.json();\n\n if (parsedResult) {\n const source = map.getSource(ISOCHRONE_SOURCE) as\n | mapboxgl.GeoJSONSource\n | undefined;\n\n const invertedCoordinates = invertCoordinates(parsedResult);\n\n if (fitBounds) {\n fitApiResultBounds(parsedResult);\n }\n\n source?.setData(invertedCoordinates);\n }\n } catch (e) {\n if (environment.isLocal) {\n console.error(e);\n }\n }\n }\n\n function setupSource() {\n map.addSource(ISOCHRONE_SOURCE, {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: [],\n },\n });\n }\n\n function setupLayer() {\n const {\n fill = DEFAULT_FILL_COLOR,\n stroke = DEFAULT_STROKE_COLOR\n } = isochroneSetting.color || {};\n\n map.addLayer({\n id: 'isochroneFill',\n type: 'fill',\n source: ISOCHRONE_SOURCE,\n layout: {},\n paint: {\n 'fill-color': fill,\n 'fill-opacity': 0.07,\n },\n });\n\n map.addLayer({\n id: 'isochroneStroke',\n type: 'line',\n source: ISOCHRONE_SOURCE,\n layout: {},\n paint: {\n 'line-color': stroke,\n 'line-width': 1,\n },\n });\n }\n\n function invertCoordinates(apiResult: IsochroneApiResult) {\n const apiCoordinates = apiResult.features[0]?.geometry.coordinates;\n\n const outerPolygon = polygon(apiCoordinates);\n const innerPolygon = polygon([...OUTER_COORDINATES]);\n\n const invertedPolygon = mask(outerPolygon, innerPolygon);\n\n return invertedPolygon;\n }\n\n function fitApiResultBounds(apiResult: IsochroneApiResult) {\n const coordinates = apiResult.features[0]?.geometry.coordinates as Coordinates;\n const boundingBox = calculateBoundingBox(coordinates);\n\n map.fitBounds(boundingBox, {\n padding: 20,\n animate: true,\n duration: 1000,\n });\n }\n};\n\nconst removeIsochrone = (map: mapboxgl.Map) => {\n const source = map.getSource(ISOCHRONE_SOURCE) as mapboxgl.GeoJSONSource | undefined;\n\n if (!source) return;\n\n source.setData({\n type: 'FeatureCollection',\n features: [],\n });\n};\n\nexport { addIsochrone, removeIsochrone };\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpd-library/components",
|
|
3
|
-
"version": "1.2.3-beta.
|
|
3
|
+
"version": "1.2.3-beta.6",
|
|
4
4
|
"description": "Description",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "5c31464bcb98abef8fa71e9c77f646916c1d5587",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@atomify/core": "2.4.1",
|
|
52
52
|
"@atomify/hooks": "1.1.11",
|
|
53
53
|
"@atomify/jsx": "1.7.1",
|
|
54
54
|
"@atomify/kit": "1.1.11",
|
|
55
|
-
"@bpd-library/types": "^1.2.3-beta.
|
|
56
|
-
"@bpd-library/utilities": "^1.2.3-beta.
|
|
55
|
+
"@bpd-library/types": "^1.2.3-beta.6",
|
|
56
|
+
"@bpd-library/utilities": "^1.2.3-beta.6",
|
|
57
57
|
"@mapbox/mapbox-gl-geocoder": "^4.7.0",
|
|
58
58
|
"@mapbox/mapbox-gl-language": "^0.10.1",
|
|
59
59
|
"@turf/helpers": "^6.5.0",
|