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

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.

GitHub