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
center✓Center position of map54.98, 82.89
zoom✓Zoom level of map15

Optional props

Prop nameDynamicDescriptionData exampleDefault value
minZoom✘Minimal zoom level10null
maxZoom✘Maximal zoom level20null
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 maptruefalse
projectDetector✘Load current user projecttruefalse
zoomControl✘Show zoom control buttonfalsetrue
fullscreenControl✘Show fullscreen control buttonfalsetrue
preferCanvas✘Use canvas element for rendering geometryfalsetrue
touchZoom✘Zooming when touch (on mobile)falsetrue
scrollWheelZoom✘Zooming when scrollingfalsetrue
doubleClickZoom✘Zooming when double clickfalsetrue
dragging✘Dragging mapfalsetrue

Popup

Can be bound to Marker, Map, Polygon, Polyline, Rectangle.

Required props

Prop nameDynamicDescriptionData example
pos✓Position on map (not use if popup inside another element)54.98, 82.89

Optional props

Prop nameDynamicDescriptionData exampleDefault value
className✘Class name of popup dom elementexample-string-
maxWidth✘Max width of popup150300
minWidth✘Min width of popup15050
maxHeight✘Max height of popup150null
sprawling✘Popup width on map widthtruefalse

Marker

Required props

Prop nameDynamicDescriptionData example
pos✓Position on map54.98, 82.89

Optional props

Prop nameDynamicDescriptionData exampleDefault value
label✓Text of marker label54.98, 82.89-
staticLabel✓Text of marker label. Label will be static.54.98, 82.89-
draggable✓Marker is draggabletruefalse
clickable✓Marker is clickablefalsetrue

Icon

Can be inside Marker.

Required props

Prop nameDynamicDescriptionData example
iconUrl✓Url of iconhttp://maps.api.2gis.ru/2.0/example_logo.png
iconSize✓Size of icon48, 48

DivIcon

Can be inside Marker.

Required props

Prop nameDynamicDescriptionData exampleDefault value
iconSize✓Size of icon48, 48-
dangerouslySetInnerHTML✓Inner htmlhttp://maps.api.2gis.ru/2.0/example_logo.png-

Ruler

Required props

Prop nameDynamicDescriptionData example
points✓Points of ruler[ 54.9827,82.8958, 54.9837,82.8968, 54.9837,82.8938 ]

Polyline

Required props

Prop nameDynamicDescriptionData example
points✓Points of line[ 54.9827,82.8958, 54.9837,82.8968, 54.9837,82.8938 ]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
label✓Text of labelexample-string-
style✓Style of line{color: '#FF0000'}-

Polygon

Required props

Prop nameDynamicDescriptionData example
points✓Points of polygon[ 54.9827,82.8958, 54.9837,82.8968, 54.9837,82.8938 ]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
label✓Text of labelexample-string-
style✓Style of line{color: '#FF0000'}-

Rectangle

Required props

Prop nameDynamicDescriptionData example
bounds✓Bounds of rectangle[ 54.9827,82.8958, 54.9837,82.8968 ]

Optional props

Prop nameDynamicDescriptionData exampleDefault value
label✓Text of labelexample-string-
style✓Style of line{color: '#FF0000'}-

Circle

Required props

Prop nameDynamicDescriptionData example
pos✓Position on map54.9827,82.8958
radius✓Circle radius in meters300

Optional props

Prop nameDynamicDescriptionData exampleDefault value
label✓Text of labelexample-string-
style✓Style of line{color: '#FF0000'}-

CircleMarker

Required props

Prop nameDynamicDescriptionData example
pos✓Position on map54.9827,82.8958

Optional props

Prop nameDynamicDescriptionData exampleDefault value
radius✓Circle radius in pixels30010
label✓Text of labelexample-string-
style✓Style of line{color: '#FF0000'}-

Wkt

Required props

Prop nameDynamicDescriptionData example
data✓Wkt data stringPOLYGON((82.9155.04, 82.91 55.04, 82.91 55.04, 82.9155.04))

Optional props

Prop nameDynamicDescriptionData exampleDefault value
style✓Style of objeck{color: '#FF0000'}-

GeoJSON

Required props

Prop nameDynamicDescriptionData example
data✓GeoJSON data object{ "type": "Feature", "properties": { "address": "г. Новосибирск, пл. Карла Маркса, 7" }, "geometry": { "type": "Point", "coordinates": 82.8974, 54.9801 } };

Optional props

Prop nameDynamicDescriptionData exampleDefault value
pointToLayer✓Function for render pointfunction() {}Will be render simple Marker
onEachFeature✓Function running on every elementfunction() {}-
filter✓Function for filter objectsfunction() {}-
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.

react-componentweb-components
@everything-registry/sub-chunk-6@zalastax/nolb-2@infinitebrahmanuniverse/nolb-2g
0.0.4

7 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago