0.0.4 • Published 7 years ago

2gis-maps-react v0.0.4

Weekly downloads
36
License
MIT
Repository
github
Last release
7 years ago

React component Maps API 2GIS

Travis npm package Coveralls

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 nameDynamicDescriptionData example
centerCenter position of map54.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 map54.98, 82.89

Optional props

Prop nameDynamicDescriptionData exampleDefault value
labelText of marker label54.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 icon48, 48

DivIcon

Can be inside Marker.

Required props

Prop nameDynamicDescriptionData exampleDefault value
iconSizeSize of icon48, 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 map54.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 map54.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.