2.5.10 • Published 3 years ago
@gruzf/map
Licence
MIT
Version
2.5.10
Deps
3
Size
58 kB
Vulns
0
Weekly
0
GRUZF Map
This library is designed to embed MapBox as a React component.
GRUZF Map is written in
typescriptand built on the MapBox library
- Install
- Usage
Install
npm install @gruzf/mapor
yarn add @gruzf/mapUsage
import Map from "@gruzf/map";
import "mapbox-gl/dist/mapbox-gl.css"; // important!
function HelloWorld() {
return <Map accessToken={`MAPBOX_TOKEN`} />;
}Map Props
accessToken (required)
- Type:
string - Default:
undefined
You need a Mapbox access token to use any of Mapbox's tools, APIs, or SDKs.
attributionControl
- Type:
boolean - Default:
false
If true , an AttributionControl will be added to the map.
boundsDuration
- Type:
number - Default:
1200
The animation's duration, measured in milliseconds.
center
- Type:
[number, number] - Default:
[59.939704, 30.31483]
The initial geographical centerpoint of the map.
cooperativeGestures
- Type:
boolean - Default:
true
If true , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to activate if enabled.
disableRotate
- Type:
boolean - Default:
true
Disable rotate the map
height
- Type:
number | string - Default:
400
Map height
style
- Type:
string - Default:
mapbox://styles/gevorgyan/ck8r55dm00vi51io8tyzx4vsw
The map's Mapbox style.
timeout
- Type:
number - Default:
100
Time to render the map in milliseconds
width
- Type:
number | string - Default:
"100%"
Map width
zoom
- Type:
number - Default:
12
The initial zoom level of the map.
Map Handlers
onClick
- Event:
MapEvent
onZoom
- Event:
MapEvent
onZoomStart
- Event:
MapEvent
onZoomEnd
- Event:
MapEvent
onMoveStart
- Event:
MapboxEvent
onMoveEnd
- Event:
MapboxEvent
onMouseDown
- Event:
MapEvent
onMouseUp
- Event:
MapEvent
onTouchStart
- Event:
MapEvent
onTouchEnd
- Event:
MapEvent
NavigationControl
import Map from "@gruzf/map";
import NavigationControl from "@gruzf/map/NavigationControl";
function HelloWorld() {
return (
<Map>
<NavigationControl />
</Map>
);
}...other props
Other NavigationControl options from mapboxgl.NavigationControl
GeolocateControl
import Map from "@gruzf/map";
import GeolocateControl from "@gruzf/map/GeolocateControl";
function HelloWorld() {
return (
<Map>
<GeolocateControl />
</Map>
);
}...other props
Other GeolocateControl options from mapboxgl.GeolocateControl
CallBackControl
import Map from "@gruzf/map";
import CallBackControl from "@gruzf/map/CallBackControl";
function HelloWorld() {
return (
<Map>
<CallBackControl />
</Map>
);
}title
- Type:
string - Default:
Close
Button text
breakpoint
- Type:
"md" | "sm" | "xs" - Default:
sm
Breakpoint above which the button is hidden
position
- Type:
"top" | "bottom" - Default:
bottom
CallBackControl Handlers
onClick
- Event:
MouseEvent
RouteNavigationControl
import Map from "@gruzf/map";
import RouteNavigationControl from "@gruzf/map/RouteNavigationControl";
function HelloWorld() {
return (
<Map>
<RouteNavigationControl
coordinates={[
[number, number],
[number, number],
]}
/>
</Map>
);
}coordinates
- Type:
Coords[] - Default:
undefined
Coordinates to be in map view
duration
- Type:
number - Default:
1200
Animation duration
padding
- Type:
CameraOptions["padding"] - Default:
{ bottom: 140, top: 100, left: 40, right: 40 }
Map padding
Marker
import Map from "@gruzf/map";
import Marker from "@gruzf/map/Marker";
function HelloWorld() {
return (
<Map>
<Marker position={[number, number]} />
</Map>
);
}animateDuration
- Type:
number - Default:
1200
Number in milliseconds
index
- Type:
number - Default:
undefined
If defined, renders the index to the marker
icon
- Type:
ReactNode - Default:
<Pin />
Marker appearance
logo
- Type:
ReactNode - Default:
undefined
Logo inside marker
disabled
- Type:
boolean - Default:
false
disableEaseTo
- Type:
boolean - Default:
false
Center map relative to marker
...other
Other marker options from mapboxgl.MarkerOptions
Marker Handlers
onClick
- Event:
MarkerInfo
onDrag
- Event:
MarkerInfo
onDragStart
- Event:
MarkerInfo
onDragEnd
- Event:
MarkerInfo
Line
import Map from "@gruzf/map";
import Line from "@gruzf/map/Line";
function HelloWorld() {
return (
<Map>
<Line id="route" coordinates={[number, number]} width={2} />
</Map>
);
}id (required)
- Type:
string - Default:
undefined
coordinates (required)
- Type:
[number, number] - Default:
undefined
color
- Type:
string - Default:
MUI theme primary color
paint
- Type: mapboxgl.LinePaint
- Default:
MUI theme primary color
width
- Type:
number - Default:
2
Line width
Line Handlers
onClick
- Event:
undefined
Polygon
import Map from "@gruzf/map";
import Polygon from "@gruzf/map/Polygon";
function HelloWorld() {
return (
<Map>
<Polygon id="route" coordinates={[number, number]} />
</Map>
);
}id (required)
- Type:
string - Default:
undefined
coordinates (required)
- Type:
[number, number] - Default:
undefined
color
- Type:
string - Default:
MUI theme primary color
paint
- Type: mapboxgl.FillPaint
- Default:
MUI theme primary color
opacity
- Type:
number - Default:
0.4
Polygon Handlers
onClick
- Event:
undefined
Cluster
import Map from "@gruzf/map";
import Cluster from "@gruzf/map/Cluster";
function HelloWorld() {
return (
<Map>
<Cluster
data={[
[number, number],
[number, number],
[number, number],
]}
onClick={(e) => handler(e)}
/>
</Map>
);
}data (required)
- Type:
CoordsContent[] | number[][] - Default:
undefined
pinElement
- Type:
HTMLImageElement - Default:
undefined
pinUrl
- Type:
string - Default:
undefined
pinSize
- Type:
number - Default:
0.5
pinOffset
- Type:
[number, number] - Default:
[0, -44]
clusterMaxZoom
- Type:
number - Default:
14
clusterRadius
- Type:
number - Default:
50
circles
- Type:
Circles - Default:
{ 1: { color: "#51bbd6", radius: 20, }, 2: { color: "#f1f075", radius: 30, }, 3: { color: "#f28cb1", radius: 40, }, }
Cluster Handlers
onClick
- Event:
CoordsContent