playbook_ui_docs 12.28.0.pre.alpha.PLAY814removemomentjs871 → 12.28.0.pre.alpha.PLAY837MapCustomButton868
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +83 -0
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md +1 -0
- data/app/pb_kits/playbook/pb_map/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_map/docs/index.js +1 -0
- data/dist/playbook-doc.js +286 -9
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5a190a60e7ac71bbe145381200c14e00f26b9f4aabbcdf9ace62d5bbda2a712f
|
|
4
|
+
data.tar.gz: 102b23a8670cf6c7d3d644977c8782af70a7c3d922d4b15d9d185561b0ee8c00
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ecca175ac0723a43181db1d0ed5d70b81db2c946ad6fa8220a213f88ee5bccbb6c89e99ca9dfc552add9823370af75347c224a09daab9b6b38e0b1ab61ad12b4
|
|
7
|
+
data.tar.gz: d22418dcddbfeda850b603af73c2f36701e032c39984fe9aadf632a7612871036012df20268dc772c0c77e296961927014fe3315c100a9dfcda50ac222b7c03b
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React, { useRef, useEffect, useState } from 'react'
|
|
2
|
+
import { Map, mapTheme, MapCustomButton } from '../..'
|
|
3
|
+
import maplibregl from 'maplibre-gl'
|
|
4
|
+
|
|
5
|
+
const MapWithCustomButton = (props) => {
|
|
6
|
+
|
|
7
|
+
//set Map instance to access from outside useEffect
|
|
8
|
+
const [mapInstance, setMapInstance] = useState(null)
|
|
9
|
+
const mapContainerRef = useRef(null)
|
|
10
|
+
|
|
11
|
+
//Set default position
|
|
12
|
+
const defaultPosition = [-75.379143, 39.831200]
|
|
13
|
+
|
|
14
|
+
// linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
|
|
15
|
+
const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
|
|
16
|
+
const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
|
|
17
|
+
const handleFlyTo = (map) => {map.flyTo({
|
|
18
|
+
center: defaultPosition,
|
|
19
|
+
... mapTheme.flyToConfig
|
|
20
|
+
});}
|
|
21
|
+
|
|
22
|
+
//This function is called by the useEffect when map instance first loads
|
|
23
|
+
const loadMap = ( { target: map }) => {
|
|
24
|
+
//set marker/pin
|
|
25
|
+
new maplibregl.Marker({
|
|
26
|
+
color: mapTheme.marker,
|
|
27
|
+
}).setLngLat(defaultPosition)
|
|
28
|
+
.setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
|
29
|
+
.addTo(map);
|
|
30
|
+
|
|
31
|
+
// disable map zoom when using scroll
|
|
32
|
+
map.scrollZoom.disable();
|
|
33
|
+
|
|
34
|
+
//add attributioncontrols
|
|
35
|
+
map.addControl(new maplibregl.AttributionControl({
|
|
36
|
+
compact: true
|
|
37
|
+
}));
|
|
38
|
+
|
|
39
|
+
//set map instance
|
|
40
|
+
setMapInstance(map)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
new maplibregl.Map({
|
|
45
|
+
container: mapContainerRef.current,
|
|
46
|
+
center: defaultPosition,
|
|
47
|
+
...mapTheme.mapConfig
|
|
48
|
+
}).on('load', loadMap)
|
|
49
|
+
|
|
50
|
+
}, [])
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<Map
|
|
54
|
+
{...props}
|
|
55
|
+
>
|
|
56
|
+
<Map.Controls flyTo
|
|
57
|
+
flyToClick={()=> {handleFlyTo(mapInstance)}}
|
|
58
|
+
zoomBtns
|
|
59
|
+
zoomInClick={() => {handleZoomIn(mapInstance)}}
|
|
60
|
+
zoomOutClick={()=> {handleZoomOut(mapInstance)}}
|
|
61
|
+
>
|
|
62
|
+
<MapCustomButton icon="home"
|
|
63
|
+
onClick={() => alert("button clicked!")}
|
|
64
|
+
/>
|
|
65
|
+
<MapCustomButton icon="search"
|
|
66
|
+
onClick={() => alert("button clicked!")}
|
|
67
|
+
/>
|
|
68
|
+
</Map.Controls>
|
|
69
|
+
<div
|
|
70
|
+
ref={mapContainerRef}
|
|
71
|
+
style={{
|
|
72
|
+
position: 'absolute',
|
|
73
|
+
left: 0,
|
|
74
|
+
right: 0,
|
|
75
|
+
top: 0,
|
|
76
|
+
bottom: 0,
|
|
77
|
+
}}
|
|
78
|
+
/>
|
|
79
|
+
</Map>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export default MapWithCustomButton
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
If you want to add custom buttons to the Map, you can use the `MapCustomButton` component nested inside Map.Controls as shown in the code snippet below. Note that when Map.Controls is used in this way, the props for the rest of the buttons must also be passed to Map.Controls instead of the Map itself.
|