2gis-maps-react v0.0.4
React component Maps API 2GIS
Installation
For installation use command npm install 2gis-maps-react 2gis-maps
Getting started
Demo
Creation of simple map. Api referense.
A map is a basic component. For creating the map you need to specify center point, zoom level and size of dom element.
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
/>
Creation of popup inside the map. Api referense.
A simple popup. For setting of maxWidth, minWith and maxHeight use prop sprawling. Demo Source code
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
>
<Popup
pos={[54.98, 82.89]}
>
The content for popup
<h3>Can be HTML</h3>
</Popup>
</Map>
Creation of Markers and Popups on Markers. Api referense.
Simple Marker
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
>
<Marker
pos={[54.98, 82.89]}
/>
</Map>
Static and draggable markers. Popups on Markers. Demo Source code
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
>
<Marker
pos={[54.98, 82.89]}
staticLabel={'You can drag me.'}
draggable={true}
/>
<Marker
pos={[54.98, 82.895]}
>
<Popup>
The content for popup
<h3>Can be HTML</h3>
</Popup>
</Marker>
</Map>
Marker with icon and html icon. Demo Source code
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
>
<Marker
pos={[54.98, 82.89]}
>
<Icon
iconUrl={'http://maps.api.2gis.ru/2.0/example_logo.png'}
iconSize={[54.98, 82.89]}
/>
</Marker>
<Marker
pos={[54.98, 82.895]}
>
<DivIcon
iconSize={[54.98, 82.89]}
>
<h2>Can be HTML</h2>
</DivIcon>
</Marker>
</Map>
Marker with label and static label. Demo Source code
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
>
<Marker
pos={[54.98, 82.89]}
label={'I\'m label.'}
/>
<Marker
pos={[54.98, 82.895]}
staticLabel={'I\'m static label.'}
/>
</Map>
Creating of vector objects. Api referense.
Circle and Circle Marker. Demo Source code
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
>
<CircleMarker
pos={[54.98, 82.89]}
label={'I\'m Circle Marker.<br/>My radius doesn't change when zooming.<br/>He in pixels.'}
radius={50}
/>
<Circle
pos={[54.98, 82.895]}
label={'I\'m Circle.<br/>My radius changes when zooming.<br/>He in meters'}
radius={200}
/>
</Map>
Polygon, Polyline and Rectangle. Demo Source code
<Map
style={{width: "500px", height: "500px"}}
center={[54.98, 82.89]}
zoom={13}
>
<Polyline points={[
[54.9827,82.8958],
[54.9837,82.8968],
[54.9837,82.8938]
]}
/>
<Polygon points={[
[54.98214514427189, 82.89540767669679],
[54.981683400666896, 82.89724230766298],
[54.982754637698605, 82.89746761322023]
]}
style={{
color: '#00FF00'
}}
/>
<Rectangle bounds={[
[54.9827238554242, 82.89354085922243],
[54.98205895253545, 82.89488196372986]
]}
style={{
color: '#FF0000'
}}
/>
</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.