@bpd-library/components 1.2.5-beta.4 → 1.2.5-beta.5
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.
|
@@ -33,9 +33,10 @@ const addDirections = async (map, directionsOptions) => {
|
|
|
33
33
|
],
|
|
34
34
|
});
|
|
35
35
|
const middlePoint = geometry.coordinates[~~(geometry.coordinates.length / 2)];
|
|
36
|
+
const transformedDuration = transformDuration(duration);
|
|
36
37
|
startPopup = addPopup(start, startLabel());
|
|
37
38
|
endPopup = addPopup(end, endLabel());
|
|
38
|
-
durationPopup = addPopup(middlePoint, durationLabel(
|
|
39
|
+
durationPopup = addPopup(middlePoint, durationLabel(transformedDuration));
|
|
39
40
|
fitApiResultBounds(geometry);
|
|
40
41
|
onInitialized && onInitialized();
|
|
41
42
|
}
|
|
@@ -46,6 +47,15 @@ const addDirections = async (map, directionsOptions) => {
|
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
49
|
}
|
|
50
|
+
function transformDuration(seconds) {
|
|
51
|
+
const totalHours = seconds / 60 / 60;
|
|
52
|
+
const hours = Math.floor(totalHours);
|
|
53
|
+
const minutes = Math.round((totalHours - hours) * 0.6 * 100);
|
|
54
|
+
return {
|
|
55
|
+
hours,
|
|
56
|
+
minutes,
|
|
57
|
+
};
|
|
58
|
+
}
|
|
49
59
|
function setupSource() {
|
|
50
60
|
map.addSource(DIRECTIONS_SOURCE, {
|
|
51
61
|
type: 'geojson',
|
|
@@ -65,7 +75,7 @@ const addDirections = async (map, directionsOptions) => {
|
|
|
65
75
|
});
|
|
66
76
|
}
|
|
67
77
|
function addPopup(location, labelNode, options) {
|
|
68
|
-
return new Popup(Object.assign({ closeButton: false, closeOnClick: false, offset: 5 }, options))
|
|
78
|
+
return new Popup(Object.assign({ closeButton: false, closeOnClick: false, offset: 5, focusAfterOpen: false }, options))
|
|
69
79
|
.setLngLat(location)
|
|
70
80
|
.setDOMContent(labelNode)
|
|
71
81
|
.addTo(map);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"directions.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/utilities/mapbox/directions/directions.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"directions.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/utilities/mapbox/directions/directions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Coordinate,\n Coordinates,\n DirectionsAPIRoute,\n MapDirectionsDuration,\n MapDirectionsSetting,\n} from '@bpd-library/types';\nimport { calculateBoundingBox, environment } from '@bpd-library/utilities';\nimport mapboxgl, { Popup } from 'mapbox-gl';\n\ninterface DirectionsAPIResult {\n routes: DirectionsAPIRoute[];\n}\n\nconst DIRECTIONS_SOURCE = 'directions';\n\nlet startPopup: Popup | undefined;\nlet endPopup: Popup | undefined;\nlet durationPopup: Popup | undefined;\n\nconst addDirections = async (map: mapboxgl.Map, directionsOptions: MapDirectionsSetting) => {\n await init();\n\n async function init() {\n startPopup?.remove();\n endPopup?.remove();\n durationPopup?.remove();\n\n if (!map.getSource(DIRECTIONS_SOURCE)) {\n setupSource();\n setupLayer();\n }\n\n const { profile, start, end, startLabel, endLabel, durationLabel, onInitialized } =\n directionsOptions;\n\n const accessToken = window.__ENVIRONMENT_DETAILS__.mapbox.accessToken;\n\n try {\n const url = `https://api.mapbox.com/directions/v5/mapbox/${profile}/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson&access_token=${accessToken}`;\n const {\n routes: [route],\n } = (await fetch(url).then((r) => r.json())) as DirectionsAPIResult;\n\n if (route) {\n const { geometry, duration } = route;\n\n const source = map.getSource(DIRECTIONS_SOURCE) as\n | mapboxgl.GeoJSONSource\n | undefined;\n source?.setData({\n type: 'FeatureCollection',\n features: [\n {\n type: 'Feature',\n geometry: geometry,\n properties: null,\n },\n ],\n });\n\n const middlePoint = geometry.coordinates[\n ~~(geometry.coordinates.length / 2)\n ] as Coordinate;\n\n // TODO: find better middle point - the one that lies on the line that passes between the start and end point\n // possibly use turf but definitely something like this:\n //\n // - for each coordinate on the route (except start and end)\n // - calculate distance between start and end\n // - divide (coord -> start) and (coord -> end)\n //\n // the point that has that division closest to 1 lies on that middle line and should be a good approximation\n\n const transformedDuration = transformDuration(duration);\n\n startPopup = addPopup(start, startLabel());\n endPopup = addPopup(end, endLabel());\n durationPopup = addPopup(middlePoint, durationLabel(transformedDuration));\n\n fitApiResultBounds(geometry);\n\n onInitialized && onInitialized();\n }\n } catch (e) {\n if (environment.isLocal) {\n console.error(e);\n }\n }\n }\n\n function transformDuration(seconds: number): MapDirectionsDuration {\n const totalHours = seconds / 60 / 60;\n const hours = Math.floor(totalHours);\n const minutes = Math.round((totalHours - hours) * 0.6 * 100);\n\n return {\n hours,\n minutes,\n };\n }\n\n function setupSource() {\n map.addSource(DIRECTIONS_SOURCE, {\n type: 'geojson',\n data: {\n type: 'FeatureCollection',\n features: [],\n },\n });\n }\n\n function setupLayer() {\n map.addLayer({\n id: 'directionsStroke',\n type: 'line',\n source: DIRECTIONS_SOURCE,\n layout: {},\n paint: {\n 'line-color': '#32C1DE',\n 'line-width': 4,\n ...directionsOptions.linePaintOptions,\n },\n });\n }\n\n // function getMiddlePoint(start: Coordinates, end: Coordinates, points: Position[]) {\n // //\n // }\n\n function addPopup(location: Coordinate, labelNode: Node, options?: mapboxgl.PopupOptions) {\n return new Popup({\n closeButton: false,\n closeOnClick: false,\n offset: 5,\n focusAfterOpen: false,\n ...options,\n })\n .setLngLat(location)\n .setDOMContent(labelNode)\n .addTo(map);\n }\n\n function fitApiResultBounds(geometry: GeoJSON.LineString) {\n const coordinates = [geometry.coordinates] as Coordinates;\n const boundingBox = calculateBoundingBox(coordinates);\n\n map.fitBounds(boundingBox, {\n padding: directionsOptions.boundsPadding || 50,\n animate: true,\n duration: 1000,\n });\n }\n};\n\nfunction removeDirections(map: mapboxgl.Map) {\n const source = map.getSource(DIRECTIONS_SOURCE) as mapboxgl.GeoJSONSource | undefined;\n\n if (!source) return;\n\n source.setData({\n type: 'FeatureCollection',\n features: [],\n });\n\n startPopup?.remove();\n endPopup?.remove();\n durationPopup?.remove();\n}\n\nexport { addDirections, removeDirections };\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpd-library/components",
|
|
3
|
-
"version": "1.2.5-beta.
|
|
3
|
+
"version": "1.2.5-beta.5",
|
|
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": "2c42936beb2dc142a7d8ef9ac6630e717d1a3359",
|
|
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.5-beta.
|
|
56
|
-
"@bpd-library/utilities": "^1.2.5-beta.
|
|
55
|
+
"@bpd-library/types": "^1.2.5-beta.5",
|
|
56
|
+
"@bpd-library/utilities": "^1.2.5-beta.5",
|
|
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",
|