Maps API 2GIS
React componentInstallation
For installation use command npm install 2gis-maps-react 2gis-maps
Getting started
Demo
Api referense.
Creation of simple map.A map is a basic component. For creating the map you need to specify center point, zoom level and size of dom element.
<Map = = = />
Api referense.
Creation of popup inside the map.A simple popup. For setting of maxWidth, minWith and maxHeight use prop sprawling. Demo Source code
<Map = = = > <Popup = > The content for popup <h3>Can be HTML</h3> </Popup> </Map>
Api referense.
Creation of Markers and Popups on Markers.Simple Marker
<Map = = = > <Marker = /> </Map>
Static and draggable markers. Popups on Markers. Demo Source code
<Map = = = > <Marker = = = /> <Marker = > <Popup> The content for popup <h3>Can be HTML</h3> </Popup> </Marker> </Map>
Marker with icon and html icon. Demo Source code
<Map = = = > <Marker = > <Icon = = /> </Marker> <Marker = > <DivIcon = > <h2>Can be HTML</h2> </DivIcon> </Marker> </Map>
Marker with label and static label. Demo Source code
<Map = = = > <Marker = = /> <Marker = = /> </Map>
Api referense.
Creating of vector objects.Circle and Circle Marker. Demo Source code
<Map = = = > <CircleMarker = = = /> </Map>
Polygon, Polyline and Rectangle. Demo Source code
<Map = = = > <Polyline = /> <Polygon = = /> <Rectangle = = /> </Map>
Events
For binding 2gis-mapsapi events use props similar to onEvent
where Event is 2gis-mapsapi event with a capital first character.
Components
Map
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
center | ✓ | Center position of map | [54.98, 82.89] |
zoom | ✓ | Zoom level of map | 15 |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
minZoom | ✘ | Minimal zoom level | 10 | null |
maxZoom | ✘ | Maximal zoom level | 20 | null |
maxBounds | ✘ | Bounds of map | [ [54.98, 82.89], [54.98, 82.89] ] | null |
style | ✓ | CSS style of map container | {width: "500px", height: "500px"} | null |
geoclicker | ✘ | Show popup on click about place on map | true | false |
projectDetector | ✘ | Load current user project | true | false |
zoomControl | ✘ | Show zoom control button | false | true |
fullscreenControl | ✘ | Show fullscreen control button | false | true |
preferCanvas | ✘ | Use canvas element for rendering geometry | false | true |
touchZoom | ✘ | Zooming when touch (on mobile) | false | true |
scrollWheelZoom | ✘ | Zooming when scrolling | false | true |
doubleClickZoom | ✘ | Zooming when double click | false | true |
dragging | ✘ | Dragging map | false | true |
Popup
Can be bound to Marker, Map, Polygon, Polyline, Rectangle.
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
pos | ✓ | Position on map (not use if popup inside another element) | [54.98, 82.89] |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
className | ✘ | Class name of popup dom element | example-string | - |
maxWidth | ✘ | Max width of popup | 150 | 300 |
minWidth | ✘ | Min width of popup | 150 | 50 |
maxHeight | ✘ | Max height of popup | 150 | null |
sprawling | ✘ | Popup width on map width | true | false |
Marker
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
pos | ✓ | Position on map | [54.98, 82.89] |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
label | ✓ | Text of marker label | [54.98, 82.89] | - |
staticLabel | ✓ | Text of marker label. Label will be static. | [54.98, 82.89] | - |
draggable | ✓ | Marker is draggable | true | false |
clickable | ✓ | Marker is clickable | false | true |
Icon
Can be inside Marker.
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
iconUrl | ✓ | Url of icon | http://maps.api.2gis.ru/2.0/example_logo.png |
iconSize | ✓ | Size of icon | [48, 48] |
DivIcon
Can be inside Marker.
Required props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
iconSize | ✓ | Size of icon | [48, 48] | - |
dangerouslySetInnerHTML | ✓ | Inner html | http://maps.api.2gis.ru/2.0/example_logo.png | - |
Ruler
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
points | ✓ | Points of ruler | [ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ] |
Polyline
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
points | ✓ | Points of line | [ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ] |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
label | ✓ | Text of label | example-string | - |
style | ✓ | Style of line | {color: '#FF0000'} | - |
Polygon
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
points | ✓ | Points of polygon | [ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ] |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
label | ✓ | Text of label | example-string | - |
style | ✓ | Style of line | {color: '#FF0000'} | - |
Rectangle
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
bounds | ✓ | Bounds of rectangle | [ [54.9827,82.8958], [54.9837,82.8968] ] |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
label | ✓ | Text of label | example-string | - |
style | ✓ | Style of line | {color: '#FF0000'} | - |
Circle
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
pos | ✓ | Position on map | [54.9827,82.8958] |
radius | ✓ | Circle radius in meters | 300 |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
label | ✓ | Text of label | example-string | - |
style | ✓ | Style of line | {color: '#FF0000'} | - |
CircleMarker
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
pos | ✓ | Position on map | [54.9827,82.8958] |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
radius | ✓ | Circle radius in pixels | 300 | 10 |
label | ✓ | Text of label | example-string | - |
style | ✓ | Style of line | {color: '#FF0000'} | - |
Wkt
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
data | ✓ | Wkt data string | POLYGON((82.9155.04, 82.91 55.04, 82.91 55.04, 82.9155.04)) |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
style | ✓ | Style of objeck | {color: '#FF0000'} | - |
GeoJSON
Required props
Prop name | Dynamic | Description | Data example |
---|---|---|---|
data | ✓ | GeoJSON data object | { "type": "Feature", "properties": { "address": "г. Новосибирск, пл. Карла Маркса, 7" }, "geometry": { "type": "Point", "coordinates": [82.8974, 54.9801] } }; |
Optional props
Prop name | Dynamic | Description | Data example | Default value |
---|---|---|---|---|
pointToLayer | ✓ | Function for render point | function() {} | Will be render simple Marker |
onEachFeature | ✓ | Function running on every element | function() {} | - |
filter | ✓ | Function for filter objects | function() {} | - |
style | ✓ | Style of object | {color: '#FF0000'} | - |
Demo Development Server
npm start
will run a development server with the component's demo app at http://localhost:3000 with hot module reloading.
Building
-
npm run build
will build the component for publishing to npm and also bundle the demo app. -
npm run clean
will delete built resources.