2gis-maps-react-patched
v0.0.4
Published
Patched 2gis-maps-react
Downloads
108
Readme
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 points={[
[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 startwill run a development server with the component's demo app at http://localhost:3000 with hot module reloading.
Building
npm run buildwill build the component for publishing to npm and also bundle the demo app.npm run cleanwill delete built resources.