React component Maps API 2GIS

React component for 2gis-maps.

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 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

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.

GitHub