playbook_ui_docs 12.28.0.pre.alpha.PLAY837MapCustomButton868 → 12.28.0.pre.alpha.PLAY863multilevelv2876
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_map/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_map/docs/index.js +0 -1
- data/dist/playbook-doc.js +9 -9
- metadata +2 -4
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +0 -83
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md +0 -1
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 12.28.0.pre.alpha.
|
|
4
|
+
version: 12.28.0.pre.alpha.PLAY863multilevelv2876
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2023-07-
|
|
12
|
+
date: 2023-07-05 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -816,8 +816,6 @@ files:
|
|
|
816
816
|
- app/pb_kits/playbook/pb_loading_inline/docs/index.js
|
|
817
817
|
- app/pb_kits/playbook/pb_map/docs/_map_default.jsx
|
|
818
818
|
- app/pb_kits/playbook/pb_map/docs/_map_default.md
|
|
819
|
-
- app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx
|
|
820
|
-
- app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md
|
|
821
819
|
- app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx
|
|
822
820
|
- app/pb_kits/playbook/pb_map/docs/_map_with_plugin.md
|
|
823
821
|
- app/pb_kits/playbook/pb_map/docs/example.yml
|
|
@@ -1,83 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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.
|