@performant-software/geospatial 1.1.5-beta.1 → 1.1.6-beta.1
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.
package/package.json
CHANGED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
|
|
3
|
-
import React, { useEffect, useMemo } from 'react';
|
|
4
|
-
import { MixedGeoJSONLayer, PulsingMarkerLayer, type Map } from '@peripleo/maplibre';
|
|
5
|
-
import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '../utils/MapStyles';
|
|
6
|
-
import MapUtils from '../utils/Map';
|
|
7
|
-
|
|
8
|
-
type Props = {
|
|
9
|
-
/**
|
|
10
|
-
* The number of miles to buffer the GeoJSON data.
|
|
11
|
-
*/
|
|
12
|
-
buffer: number,
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* The GeoJSON data representing the location.
|
|
16
|
-
*/
|
|
17
|
-
data: { [key: string]: any },
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* GeoJSON layer fill style.
|
|
21
|
-
*/
|
|
22
|
-
fillStyle?: { [key: string]: any },
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* GeoJSON layer point style.
|
|
26
|
-
*/
|
|
27
|
-
pointStyle?: { [key: string]: any },
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* GeoJSON layer stroke style
|
|
31
|
-
*/
|
|
32
|
-
strokeStyle?: { [key: string]: any },
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Hook used to retrieve the map instance.
|
|
36
|
-
*/
|
|
37
|
-
useMap?: () => Map
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
const DEFAULT_BUFFER = 2;
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* This component renders a location marker to be used in a Peripleo context.
|
|
44
|
-
*/
|
|
45
|
-
const LocationMarker = (props: Props) => {
|
|
46
|
-
const map = useMemo(() => props.useMap(), [props.useMap]);
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Sets the bounding box on the map.
|
|
50
|
-
*/
|
|
51
|
-
useEffect(() => {
|
|
52
|
-
if (map && props.data) {
|
|
53
|
-
const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
|
|
54
|
-
map.fitBounds(boundingBox);
|
|
55
|
-
}
|
|
56
|
-
}, [map, props.buffer, props.data]);
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<>
|
|
60
|
-
<PulsingMarkerLayer
|
|
61
|
-
id='current'
|
|
62
|
-
data={props.data}
|
|
63
|
-
/>
|
|
64
|
-
<MixedGeoJSONLayer
|
|
65
|
-
id='current'
|
|
66
|
-
data={props.data}
|
|
67
|
-
fillStyle={props.fillStyle}
|
|
68
|
-
strokeStyle={props.strokeStyle}
|
|
69
|
-
pointStyle={props.pointStyle}
|
|
70
|
-
/>
|
|
71
|
-
</>
|
|
72
|
-
);
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
LocationMarker.defaultProps = {
|
|
76
|
-
buffer: DEFAULT_BUFFER,
|
|
77
|
-
fillStyle: DEFAULT_FILL_STYLE,
|
|
78
|
-
pointStyle: DEFAULT_POINT_STYLE,
|
|
79
|
-
strokeStyle: DEFAULT_STROKE_STYLE
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
export default LocationMarker;
|
package/types/utils/Map.js.flow
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
|
|
3
|
-
import { bbox, bboxPolygon, buffer } from '@turf/turf';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Returns a bounding box for the passed geometry (with optional buffer).
|
|
7
|
-
*
|
|
8
|
-
* @param geometry
|
|
9
|
-
* @param bufferDistance
|
|
10
|
-
*
|
|
11
|
-
* @returns {BBox}
|
|
12
|
-
*/
|
|
13
|
-
const getBoundingBox = (geometry, bufferDistance = null) => {
|
|
14
|
-
// Convert the GeoJSON into a bounding box
|
|
15
|
-
const box = bbox(geometry);
|
|
16
|
-
|
|
17
|
-
// Convert the bounding box to a polygon
|
|
18
|
-
const polygon = bboxPolygon(box);
|
|
19
|
-
|
|
20
|
-
// Create a buffer around the polygon (if a distance is provided)
|
|
21
|
-
let polygonBuffer;
|
|
22
|
-
|
|
23
|
-
if (bufferDistance) {
|
|
24
|
-
polygonBuffer = buffer(polygon, bufferDistance, { units: 'miles' });
|
|
25
|
-
} else {
|
|
26
|
-
polygonBuffer = polygon;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// Convert the buffer to a bounding box
|
|
30
|
-
return bbox(polygonBuffer);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export default {
|
|
34
|
-
getBoundingBox
|
|
35
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
|
|
3
|
-
export const DEFAULT_POINT_STYLE = {
|
|
4
|
-
type: 'circle',
|
|
5
|
-
paint: {
|
|
6
|
-
'circle-radius': [
|
|
7
|
-
'interpolate',
|
|
8
|
-
['linear'],
|
|
9
|
-
['number', ['get', 'point_count'], 1],
|
|
10
|
-
0, 4,
|
|
11
|
-
10, 14
|
|
12
|
-
],
|
|
13
|
-
'circle-stroke-width': 1,
|
|
14
|
-
'circle-color': [
|
|
15
|
-
'case',
|
|
16
|
-
['boolean', ['feature-state', 'hover'], false],
|
|
17
|
-
'#3b62ff',
|
|
18
|
-
'#ff623b'
|
|
19
|
-
],
|
|
20
|
-
'circle-stroke-color': '#8d260c'
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export const DEFAULT_FILL_STYLE = {
|
|
25
|
-
type: 'fill',
|
|
26
|
-
paint: {
|
|
27
|
-
'fill-color': '#ff623b',
|
|
28
|
-
'fill-opacity': 0.2
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export const DEFAULT_STROKE_STYLE = {
|
|
33
|
-
type: 'line',
|
|
34
|
-
paint: {
|
|
35
|
-
'line-color': '#ff623b',
|
|
36
|
-
'line-opacity': 0.6
|
|
37
|
-
}
|
|
38
|
-
};
|