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