maps

React component for 2gis-maps

Jul 13, 2018
React component for 2gis-maps

React component Maps API 2GIS

React component for 2gis-maps.

View demo Download Source

Installation

For installation use command npm install 2gis-maps-react 2gis-maps

Getting started

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 nameDynamicDescriptionData example
centerCenter position of map[54.98, 82.89]
zoomZoom level of map15

Optional props

Prop nameDynamicDescriptionData exampleDefault value
minZoomMinimal zoom level10null
maxZoomMaximal zoom level20null
maxBoundsBounds of map[ [54.98, 82.89], [54.98, 82.89] ]null
styleCSS style of map container{width: "500px", height: "500px"}null
geoclickerShow popup on click about place on maptruefalse
projectDetectorLoad current user projecttruefalse
zoomControlShow zoom control buttonfalsetrue
fullscreenControlShow fullscreen control buttonfalsetrue
preferCanvasUse canvas element for rendering geometryfalsetrue
touchZoomZooming when touch (on mobile)falsetrue
scrollWheelZoomZooming when scrollingfalsetrue
doubleClickZoomZooming when double clickfalsetrue
draggingDragging mapfalsetrue

Popup

Can be bound to Marker, Map, Polygon, Polyline, Rectangle.

Required props

Prop nameDynamicDescriptionData example
posPosition on map (not use if popup inside another element)[54.98, 82.89]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
classNameClass name of popup dom elementexample-string-
maxWidthMax width of popup150300
minWidthMin width of popup15050
maxHeightMax height of popup150null
sprawlingPopup width on map widthtruefalse

Marker

Required props

Prop nameDynamicDescriptionData example
posPosition on map[54.98, 82.89]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
labelText of marker label[54.98, 82.89]-
staticLabelText of marker label. Label will be static.[54.98, 82.89]-
draggableMarker is draggabletruefalse
clickableMarker is clickablefalsetrue

Icon

Can be inside Marker.

Required props

Prop nameDynamicDescriptionData example
iconUrlUrl of iconhttp://maps.api.2gis.ru/2.0/example_logo.png
iconSizeSize of icon[48, 48]

DivIcon

Can be inside Marker.

Required props

Prop nameDynamicDescriptionData exampleDefault value
iconSizeSize of icon[48, 48]-
dangerouslySetInnerHTMLInner htmlhttp://maps.api.2gis.ru/2.0/example_logo.png-

Ruler

Required props

Prop nameDynamicDescriptionData example
pointsPoints of ruler[ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ]

Polyline

Required props

Prop nameDynamicDescriptionData example
pointsPoints of line[ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
labelText of labelexample-string-
styleStyle of line{color: '#FF0000'}-

Polygon

Required props

Prop nameDynamicDescriptionData example
pointsPoints of polygon[ [54.9827,82.8958], [54.9837,82.8968], [54.9837,82.8938] ]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
labelText of labelexample-string-
styleStyle of line{color: '#FF0000'}-

Rectangle

Required props

Prop nameDynamicDescriptionData example
boundsBounds of rectangle[ [54.9827,82.8958], [54.9837,82.8968] ]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
labelText of labelexample-string-
styleStyle of line{color: '#FF0000'}-

Circle

Required props

Prop nameDynamicDescriptionData example
posPosition on map[54.9827,82.8958]
radiusCircle radius in meters300

Optional props

Prop nameDynamicDescriptionData exampleDefault value
labelText of labelexample-string-
styleStyle of line{color: '#FF0000'}-

CircleMarker

Required props

Prop nameDynamicDescriptionData example
posPosition on map[54.9827,82.8958]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
radiusCircle radius in pixels30010
labelText of labelexample-string-
styleStyle of line{color: '#FF0000'}-

Wkt

Required props

Prop nameDynamicDescriptionData example
dataWkt data stringPOLYGON((82.9155.04, 82.91 55.04, 82.91 55.04, 82.9155.04))

Optional props

Prop nameDynamicDescriptionData exampleDefault value
styleStyle of objeck{color: '#FF0000'}-

GeoJSON

Required props

Prop nameDynamicDescriptionData example
dataGeoJSON data object{ "type": "Feature", "properties": { "address": "г. Новосибирск, пл. Карла Маркса, 7" }, "geometry": { "type": "Point", "coordinates": [82.8974, 54.9801] } };

Optional props

Prop nameDynamicDescriptionData exampleDefault value
pointToLayerFunction for render pointfunction() {}Will be render simple Marker
onEachFeatureFunction running on every elementfunction() {}-
filterFunction for filter objectsfunction() {}-
styleStyle 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.

GitHub

Recommended