[DEPRECATED] React component for 2gis-maps
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Trufi Deprecate package (#11)
* Update README.md

* Add reference for mapsapi
Latest commit ad4d644 May 11, 2018

README.md

React component Maps API 2GIS

🚧 WARNING: This package is no longer supported. Please use https://github.com/2gis/mapsapi instead. 🚧

Installation

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

Getting started

Demo

Demo
Source code of the 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 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.