0.0.4 • Published 9 years ago

2gis-maps-react

Licence

MIT

Version

0.0.4

Deps

Vulns

Weekly

Stars

DeprecatedThis package is deprecated

Summary Dependency Versions

React component Maps API 2GIS

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

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.

Keywords

react-component web-components