109 |

110 | {(this.state.type === 0 || this.state.type === 1) ? 'Points: ' : 'Bounds (two points): '} 111 |

119 |                 </div>
120 |                 <br/>
121 |                 <input type="radio" name="type-polygon" checked={this.state.type === 0} value={this.state.type} onChange={this.onChangeLine}/> <label>Polyline</label>
122 |                 <br/>
123 |                 <input type="radio" name="type-polygon" checked={this.state.type === 1} value={!this.state.type} onChange={this.onChangePolygon}/> <label>Polygon</label>
124 |                 <br/>
125 |                 <input type="radio" name="type-polygon" checked={this.state.type === 2} value={this.state.type} onChange={this.onChangeRectangle}/> <label>Rectangle</label>
126 |                 <br/>
127 |                 <button onClick={this.addElement}>Add element</button>
128 |                 <br/>
129 |                 <button onClick={this.deleteElement}>Delete element</button>
130 |                 <Map
131 |                     style={{width: "500px", height: "500px"}}
132 |                     center={this.state.center}
133 |                     zoom={this.state.zoom}
134 |                 >
135 |                     { this.state.polygons }
136 |                 </Map>
137 |             </div>
138 |         );
139 |     }
140 | }
141 |

--------------------------------------------------------------------------------
/demo/src/MarkerIcon.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Map, Marker, Icon, DivIcon } from '../../src/'
 3 | 
 4 | export default class MarkerIcon extends Component {
 5 |     state = {
 6 |         zoom: 13,
 7 |         center: [54.98, 82.89],
 8 |         url: 'http://maps.api.2gis.ru/2.0/example_logo.png',
 9 |         size: [48, 48],
10 |         html: '<a href="https://2gis.com">HTML-link</a>',
11 |         insideMarker: []
12 | 
13 |     };
14 | 
15 |     onChangeUrl = e => {
16 |         this.setState({
17 |             url: e.target.value
18 |         });
19 |     };
20 |     onChangeSize= e => {
21 |         this.setState({
22 |             size: [e.target.value.split(',')[0], e.target.value.split(',')[1]]
23 |         });
24 |     };
25 | 
26 |     onChangeHtml = e => {
27 |         this.setState({
28 |             html: e.target.value
29 |         });
30 |     };
31 | 
32 |     changeToImage = () => {
33 |         this.setState({
34 |             insideMarker: <Icon
35 |                 iconUrl={this.state.url}
36 |                 iconSize={this.state.size}
37 |             />
38 |         });
39 |     };
40 | 
41 |     changeToDiv = () => {
42 |         this.setState({
43 |             insideMarker: <DivIcon
44 |                 iconSize={this.state.size}
45 |                 dangerouslySetInnerHTML={this.state.html}
46 |             >
47 |             </DivIcon>
48 |         });
49 |     };
50 | 
51 |     render() {
52 |         return (
53 |             <div>
54 |                 <div>
55 |                     <label>Icon size: </label>
56 |                     <input onChange={this.onChangeSize} value={this.state.size} />
57 |                 </div>
58 | 
59 |                 <div>
60 |                     <label>Image url: </label>
61 |                     <input onChange={this.onChangeUrl} value={this.state.url} style={{width: 300}}/>
62 |                 </div>
63 |                 <div>
64 |                     <label style={{display: 'block'}}>Div html: </label>
65 |                     <textarea onChange={this.onChangeHtml} value={this.state.html} style={{width: 200, height: 60}}/>
66 |                 </div>
67 | 
68 |                 <button onClick={this.changeToImage}>Change Icon to Image</button>
69 |                 <br/>
70 |                 <button onClick={this.changeToDiv}>Change Icon to Div</button>
71 | 
72 |                 <Map
73 |                     style={{width: "500px", height: "500px"}}
74 |                     center={this.state.center}
75 |                     zoom={this.state.zoom}
76 |                 >
77 |                     <Marker
78 |                         pos={this.state.center}
79 |                     >
80 |                         { this.state.insideMarker }
81 |                     </Marker>
82 |                 </Map>
83 |             </div>
84 |         );
85 |     }
86 | }
87 |

--------------------------------------------------------------------------------
/demo/src/MarkerLabel.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Map, Marker, Popup } from '../../src/'
  3 | 
  4 | export default class MarkerLabel extends Component {
  5 |     state = {
  6 |         zoom: 13,
  7 |         center: [54.98, 82.89],
  8 |         markers: [],
  9 |         pos: [54.98, 82.89],
 10 |         staticLabel: false,
 11 |         labelContent: 'I\'m Label!'
 12 |     };
 13 | 
 14 |     onChangePos = e => {
 15 |         this.setState({
 16 |             pos: e.target.value.split(',')
 17 |         });
 18 |     };
 19 | 
 20 |     onChangeStaticLabel = () => {
 21 |         this.setState({
 22 |             staticLabel:!this.state.staticLabel
 23 |         });
 24 |     };
 25 | 
 26 |     onChangeLabelContent = e => {
 27 |         this.setState({
 28 |             labelContent: e.target.value
 29 |         });
 30 |     };
 31 | 
 32 |     addMarker = () => {
 33 |         let markers = this.state.markers;
 34 |         const pos = this.state.pos;
 35 |         const labelContent = this.state.labelContent;
 36 | 
 37 |         let staticLabel = false;
 38 |         let label = false;
 39 | 
 40 |         if (this.state.staticLabel) {
 41 |             staticLabel = labelContent;
 42 |         }
 43 |         else {
 44 |             label = labelContent;
 45 |         }
 46 | 
 47 |         markers.push(
 48 |             <Marker
 49 |                 pos={pos}
 50 |                 label={label}
 51 |                 staticLabel={staticLabel}
 52 |             />
 53 |         );
 54 | 
 55 |         this.setState({
 56 |             markers: markers
 57 |         });
 58 |     };
 59 | 
 60 |     removeMarker = () => {
 61 |         let markers = this.state.markers;
 62 |         markers.pop();
 63 |         this.setState({
 64 |             markers: markers
 65 |         });
 66 |     };
 67 | 
 68 |     render() {
 69 |         return (
 70 |             <div>
 71 |                 <div>
 72 |                     <label>Position: </label>
 73 |                     <input onChange={this.onChangePos} value={this.state.pos} style={{width: 100}}/>
 74 |                 </div>
 75 |                 <div>
 76 |                     <div>
 77 |                         <input type="checkbox" value={this.state.withPopup} onChange={this.onChangeStaticLabel}/> <label>Static label</label>
 78 |                     </div>
 79 |                     <div>
 80 |                         <label style={{display: 'block'}}>Label content (you can use html): </label>
 81 |                         <textarea onChange={this.onChangeLabelContent} value={this.state.labelContent} style={{width: 400}}/>
 82 |                     </div>
 83 |                 </div>
 84 |                 <div>
 85 |                     <button onClick={this.addMarker}>Add marker</button>
 86 |                     <br/>
 87 |                     <button onClick={this.removeMarker} disabled={!this.state.markers.length}>Remove marker</button>
 88 |                 </div>
 89 |                 <Map
 90 |                     style={{width: "500px", height: "500px"}}
 91 |                     center={this.state.center}
 92 |                     zoom={this.state.zoom}
 93 |                 >
 94 |                     { this.state.markers }
 95 |                 </Map>
 96 |             </div>
 97 |         );
 98 |     }
 99 | }
100 |

--------------------------------------------------------------------------------
/demo/src/Markers.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Map, Marker, Popup } from '../../src/'
  3 | 
  4 | export default class Markers extends Component {
  5 |     state = {
  6 |         zoom: 13,
  7 |         center: [54.98, 82.89],
  8 |         markers: [],
  9 |         pos: [54.98, 82.89],
 10 |         draggable: false,
 11 |         withPopup: false,
 12 |         popupContent: 'Hello world!'
 13 |     };
 14 | 
 15 |     onChangePos = e => {
 16 |         this.setState({
 17 |             pos: e.target.value.split(',')
 18 |         });
 19 |     };
 20 | 
 21 |     onChangeDraggable = () => {
 22 |         this.setState({
 23 |             draggable: !this.state.draggable
 24 |         });
 25 |     };
 26 | 
 27 |     onChangeWithPopup = () => {
 28 |         this.setState({
 29 |             withPopup:!this.state.withPopup
 30 |         });
 31 |     };
 32 | 
 33 |     onChangePopupContent = e => {
 34 |         this.setState({
 35 |             popupContent: e.target.value
 36 |         });
 37 |     };
 38 | 
 39 |     addMarker = () => {
 40 |         let markers = this.state.markers;
 41 |         const pos = this.state.pos;
 42 |         const draggable = this.state.draggable;
 43 |         const popupContent = this.state.popupContent;
 44 |         let popup = null;
 45 |         if (this.state.withPopup) {
 46 |             popup = (
 47 |                 <Popup>
 48 |                     { popupContent }
 49 |                 </Popup>
 50 |             );
 51 |         }
 52 |         markers.push(
 53 |             <Marker
 54 |                 key={this.state.markers.length}
 55 |                 draggable={draggable}
 56 |                 pos={pos}
 57 |             >
 58 |                 { popup }
 59 |             </Marker>
 60 |         );
 61 |         this.setState({
 62 |             markers: markers
 63 |         });
 64 |     };
 65 | 
 66 |     removeMarker = () => {
 67 |         let markers = this.state.markers;
 68 |         markers.pop();
 69 |         this.setState({
 70 |             markers: markers
 71 |         });
 72 |     };
 73 | 
 74 |     render() {
 75 |         return (
 76 |             <div>
 77 |                 <div>
 78 |                     <label>Position: </label>
 79 |                     <input onChange={this.onChangePos} value={this.state.pos} style={{width: 100}}/>
 80 |                     <button onClick={this.addMarker}>Add marker</button>
 81 |                 </div>
 82 |                 <div>
 83 |                     <div>
 84 |                         <input type="checkbox" value={this.state.draggable} onChange={this.onChangeDraggable}/><label>Draggable</label>
 85 |                     </div>
 86 |                     <div>
 87 |                         <input type="checkbox" value={this.state.withPopup} onChange={this.onChangeWithPopup}/><label>Popup</label>
 88 |                     </div>
 89 |                     <div>
 90 |                         <label>Popup content: </label>
 91 |                         <input onChange={this.onChangePopupContent} disabled={!this.state.withPopup} value={this.state.popupContent} style={{width: 400}}/>
 92 |                     </div>
 93 |                 </div>
 94 |                 <div>
 95 |                     <button onClick={this.removeMarker} disabled={!this.state.markers.length}>Remove marker</button>
 96 |                 </div>
 97 |                 <Map
 98 |                     style={{width: "500px", height: "500px"}}
 99 |                     center={this.state.center}
100 |                     zoom={this.state.zoom}
101 |                 >
102 |                     { this.state.markers }
103 |                 </Map>
104 |             </div>
105 |         );
106 |     }
107 | }
108 |

--------------------------------------------------------------------------------
/demo/src/Popups.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Map, Popup } from '../../src/'
  3 | 
  4 | export default class Popups extends Component {
  5 |     state = {
  6 |         zoom: 13,
  7 |         center: [54.98, 82.89],
  8 |         popups: [],
  9 |         pos: [54.98, 82.89],
 10 |         popupContent: 'Hello world!',
 11 |         sprawling: false,
 12 |         maxWidth: 300,
 13 |         minWidth: 50,
 14 |         maxHeight: null
 15 |     };
 16 | 
 17 |     onChangePos = e => {
 18 |         this.setState({
 19 |             pos: e.target.value.split(',')
 20 |         });
 21 |     };
 22 | 
 23 |     onChangePopupContent = e => {
 24 |         this.setState({
 25 |             popupContent: e.target.value
 26 |         });
 27 |     };
 28 | 
 29 |     onChangeSprawling = e => {
 30 |         this.setState({
 31 |             sprawling: !this.state.sprawling
 32 |         });
 33 |     };
 34 | 
 35 |     onChangeMaxWidth = e => {
 36 |         this.setState({
 37 |             maxWidth: e.target.value
 38 |         });
 39 |     };
 40 | 
 41 |     onChangeMinWidth = e => {
 42 |         this.setState({
 43 |             minWidth: e.target.value
 44 |         });
 45 |     };
 46 | 
 47 |     onChangeMaxHeight = e => {
 48 |         this.setState({
 49 |             maxHeight: e.target.value
 50 |         });
 51 |     };
 52 | 
 53 |     addPopup = () => {
 54 |         const pos = this.state.pos;
 55 |         const popupContent = this.state.popupContent;
 56 |         const sprawling = this.state.sprawling;
 57 |         const maxWidth = this.state.maxWidth;
 58 |         const minWidth = this.state.minWidth;
 59 |         const maxHeight = this.state.maxHeight;
 60 | 
 61 |         let popups = this.state.popups;
 62 | 
 63 |         popups.push(
 64 |             <Popup
 65 |                 key={this.state.popups.length}
 66 |                 pos={pos}
 67 |                 sprawling={sprawling}
 68 |                 maxWidth={maxWidth}
 69 |                 minWidth={minWidth}
 70 |                 maxHeight={maxHeight}
 71 |             >
 72 |                 { popupContent }
 73 |             </Popup>
 74 |         );
 75 |         this.setState({
 76 |             popups: popups
 77 |         });
 78 |     };
 79 | 
 80 |     render() {
 81 |         return (
 82 |             <div>
 83 |                 <div>
 84 |                     <label>Position: </label>
 85 |                     <input onChange={this.onChangePos} value={this.state.pos} style={{width: 100}}/>
 86 |                     <br/>
 87 |                     <div>
 88 |                         <label style={{display: 'block'}}>Popup content: </label>
 89 |                         <textarea onChange={this.onChangePopupContent} value={this.state.popupContent} style={{width: 400}}/>
 90 |                     </div>
 91 |                     <div>
 92 |                         <input type="checkbox" value={this.state.sprawling} onChange={this.onChangeSprawling}/><label>Sprawling</label>
 93 |                         <br/>
 94 |                         <label>Max width: </label><input disabled={!this.state.sprawling} onChange={this.onChangeMaxWidth} value={this.state.maxWidth} style={{width: 100}}/>
 95 |                         <br/>
 96 |                         <label>Min width: </label><input disabled={!this.state.sprawling} onChange={this.onChangeMinWidth} value={this.state.minWidth} style={{width: 100}}/>
 97 |                         <br/>
 98 |                         <label>Max height: </label><input disabled={!this.state.sprawling} onChange={this.onChangeMaxHeight} value={this.state.maxHeight} style={{width: 100}}/>
 99 |                     </div>
100 |                     <br/>
101 |                     <button onClick={this.addPopup}>Open popup</button>
102 |                 </div>
103 |                 <Map
104 |                     style={{width: "500px", height: "500px"}}
105 |                     center={this.state.center}
106 |                     zoom={this.state.zoom}
107 |                 >
108 |                     { this.state.popups }
109 |                 </Map>
110 |             </div>
111 |         );
112 |     }
113 | }
114 |

--------------------------------------------------------------------------------
/demo/src/SimpleMap.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Map } from '../../src/'
 3 | 
 4 | export default class SimpleMap extends Component {
 5 |     state = {
 6 |         zoom: 13,
 7 |         center: [54.98, 82.89]
 8 |     };
 9 | 
10 |     onChangeZoom = e => {
11 |         this.setState({
12 |             zoom: e.target.value
13 |         });
14 |     };
15 | 
16 |     onChangeCenter = e => {
17 |         this.setState({
18 |             center: e.target.value.split(',')
19 |         });
20 |     };
21 | 
22 |     onZoomend = e => {
23 |         this.setState({
24 |             zoom: e.target.getZoom()
25 |         });
26 |     };
27 | 
28 |     onDrag = e => {
29 |         this.setState({
30 |             center: [
31 |                 e.target.getCenter().lat,
32 |                 e.target.getCenter().lng
33 |             ]
34 |         });
35 |     };
36 | 
37 |     render() {
38 |         return (
39 |             <div>
40 |                 <div>
41 |                     <label>Zoom: </label>
42 |                     <input onChange={this.onChangeZoom} value={this.state.zoom} style={{width: 30}}/>
43 |                 </div>
44 |                 <div>
45 |                     <label>Center: </label>
46 |                     <input onChange={this.onChangeCenter} value={this.state.center} style={{width: 300}}/>
47 |                 </div>
48 |                 <Map
49 |                     style={{width: "500px", height: "500px"}}
50 |                     center={this.state.center}
51 |                     zoom={this.state.zoom}
52 |                     onZoomend={this.onZoomend}
53 |                     onDrag={this.onDrag}
54 |                 />
55 |             </div>
56 |         );
57 |     }
58 | }
59 |

--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | import SimpleMap from './SimpleMap'
 5 | import Popups from './Popups'
 6 | import Markers from './Markers'
 7 | import MarkerIcon from './MarkerIcon'
 8 | import MarkerLabel from './MarkerLabel'
 9 | import GeometryCircle from './GeometryCircle'
10 | import GeometryPolygons from './GeometryPolygons'
11 | 
12 | class Examples extends Component {
13 |     render() {
14 |         return (
15 |           <div>
16 |               <h2 id="simple-map">Simple map with editable zoom and center position <a href="#simple-map">#</a></h2>
17 |               <SimpleMap/>
18 | 
19 |               <h2 id="popups">Popups <a href="#popups">#</a></h2>
20 |               <Popups/>
21 | 
22 |               <h2 id="markers">Markers <a href="#markers">#</a></h2>
23 | 
24 |               <h3 id="markers-simple">Markers with popup <a href="#markers-simple">#</a></h3>
25 |               <Markers/>
26 | 
27 |               <h3 id="markers-icon">Marker with Icon <a href="#markers-icon">#</a></h3>
28 |               <MarkerIcon/>
29 | 
30 |               <h3 id="markers-label">Marker with Label <a href="#markers-label">#</a></h3>
31 |               <MarkerLabel/>
32 | 
33 |               <h2 id="geometry">Geometry <a href="#geometry">#</a></h2>
34 | 
35 |               <h3 id="geometry-circle">Circle and Circle Marker <a href="#geometry-circle">#</a></h3>
36 |               <GeometryCircle/>
37 | 
38 |               <h3 id="geometry-polygon">Polygon and Rectangle <a href="#geometry-polygon">#</a></h3>
39 |               <GeometryPolygons/>
40 |           </div>
41 |         );
42 |     };
43 | }
44 | 
45 | const domElement = document.getElementById('demo');
46 | ReactDOM.render(<Examples/>, domElement);
47 |

--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     type: 'react-component',
 3 |     build: {
 4 |         externals: {
 5 |             'react': 'React'
 6 |         },
 7 |         global: 'y',
 8 |         jsNext: true,
 9 |         umd: true
10 |     },
11 |     babel: {
12 |         stage: 0,
13 |         optional: ['runtime']
14 |     }
15 | };
16 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "2gis-maps-react",
 3 |   "version": "0.0.4",
 4 |   "description": "2gis-maps React component",
 5 |   "main": "lib/index.js",
 6 |   "jsnext:main": "es6/index.js",
 7 |   "files": [
 8 |     "css",
 9 |     "es6",
10 |     "lib",
11 |     "umd"
12 |   ],
13 |   "scripts": {
14 |     "build": "nwb build",
15 |     "clean": "nwb clean",
16 |     "start": "nwb serve",
17 |     "test": "nwb test",
18 |     "test:watch": "nwb test --server"
19 |   },
20 |   "dependencies": {},
21 |   "devDependencies": {
22 |     "2gis-maps": "^2.2.6",
23 |     "nwb": "0.9.x",
24 |     "react": "^15.2.1",
25 |     "react-dom": "^15.2.1"
26 |   },
27 |   "author": "",
28 |   "homepage": "",
29 |   "license": "MIT",
30 |   "repository": "git@github.com:2gis/2gis-maps-react.git",
31 |   "keywords": [
32 |     "react-component",
33 |     "web-components"
34 |   ]
35 | }
36 |

--------------------------------------------------------------------------------
/src/Circle.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class Circle extends MapComponent {
 6 |     static propsTypes = {
 7 |         style: PropTypes.object,
 8 |         pos: PropTypes.array,
 9 |         radius: PropTypes.number,
10 |         label: PropTypes.string
11 |     };
12 | 
13 |     state = {
14 |         dgElement: null,
15 |         childrenForRender: []
16 |     };
17 | 
18 |     componentDidMount() {
19 |         let dgElement = DG.circle(this.props.pos, this.props.radius);
20 | 
21 |         if (this.props.style) {
22 |             dgElement.setStyle(this.props.style);
23 |         }
24 | 
25 |         if (this.props.label) {
26 |             dgElement.bindLabel(this.props.label);
27 |         }
28 | 
29 |         this.setState({
30 |             dgElement: dgElement
31 |         });
32 | 
33 |         this.bindEvents(dgElement);
34 | 
35 |         this.props.element.addLayer(dgElement);
36 |     }
37 | 
38 |     componentDidUpdate(prevProps) {
39 |         let { dgElement } = this.state;
40 | 
41 |         this.updatePos(prevProps);
42 | 
43 |         if (this.checkPropsChange('radius', prevProps)) {
44 |             dgElement.setRadius(this.props.radius);
45 |         }
46 | 
47 |         this.updateLabel(prevProps);
48 | 
49 |         this.updateStyle(prevProps);
50 | 
51 |         this.updateEvents(dgElement, prevProps);
52 |     }
53 | }
54 |

--------------------------------------------------------------------------------
/src/CircleMarker.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class CircleMarker extends MapComponent {
 6 |     static propsTypes = {
 7 |         style: PropTypes.object,
 8 |         pos: PropTypes.array,
 9 |         radius: PropTypes.number,
10 |         label: PropTypes.string
11 |     };
12 | 
13 |     state = {
14 |         dgElement: null,
15 |         childrenForRender: []
16 |     };
17 | 
18 |     componentDidMount() {
19 |         let dgElement = DG.circleMarker(this.props.pos);
20 | 
21 |         if (this.props.style) {
22 |             dgElement.setStyle(this.props.style);
23 |         }
24 | 
25 |         if (this.props.label) {
26 |             dgElement.bindLabel(this.props.label);
27 |         }
28 | 
29 |         if (this.props.radius) {
30 |             dgElement.setRadius(this.props.radius);
31 |         }
32 | 
33 |         this.setState({
34 |             dgElement: dgElement
35 |         });
36 | 
37 |         this.bindEvents(dgElement);
38 | 
39 |         this.props.element.addLayer(dgElement);
40 |     }
41 | 
42 |     componentDidUpdate(prevProps) {
43 |         let { dgElement } = this.state;
44 | 
45 |         this.updatePos(prevProps);
46 | 
47 |         if (this.checkPropsChange('radius', prevProps)) {
48 |             dgElement.setRadius(this.props.radius);
49 |         }
50 | 
51 |         this.updateLabel(prevProps);
52 | 
53 |         this.updateStyle(prevProps);
54 | 
55 |         this.updateEvents(dgElement, prevProps);
56 |     }
57 | }
58 |

--------------------------------------------------------------------------------
/src/DivIcon.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import ReactDOMServer from 'react-dom/server';
 3 | import DG from '2gis-maps'
 4 | import MapComponent from './MapComponent'
 5 | 
 6 | export default class DivIcon extends MapComponent {
 7 |     static propsTypes = {
 8 |         iconSize: PropTypes.array,
 9 |         dangerouslySetInnerHTML: PropTypes.string
10 |     };
11 | 
12 |     static defaultProps = {
13 |         dangerouslySetInnerHTML: ''
14 |     };
15 | 
16 |     componentDidMount() {
17 |         let iconHtml = '';
18 |         if (this.props.children) {
19 |             iconHtml = ReactDOMServer.renderToString(
20 |                 <div style={{
21 |                 padding: 0,
22 |                 margin: 0,
23 |                 display: 'inline'
24 |             }}>{ this.props.children }</div>
25 |             );
26 |         }
27 |         else {
28 |             iconHtml = this.props.dangerouslySetInnerHTML;
29 |         }
30 | 
31 |         let icon = DG.divIcon({
32 |             iconSize: this.props.iconSize,
33 |             html: iconHtml
34 |         });
35 | 
36 |         this.props.element.setIcon(icon);
37 |     }
38 | }
39 |

--------------------------------------------------------------------------------
/src/GeoJSON.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class GeoJSON extends MapComponent {
 6 |     static propsTypes = {
 7 |         data: PropTypes.object,
 8 |         style: PropTypes.object,
 9 |         pointToLayer: PropTypes.func,
10 |         onEachFeature: PropTypes.func,
11 |         filter: PropTypes.func
12 |     };
13 | 
14 |     static defaultProps = {
15 |         style: null,
16 |         pointToLayer: null,
17 |         onEachFeature: null,
18 |         filter: null
19 |     };
20 | 
21 |     state = {
22 |         dgElement: null
23 |     };
24 | 
25 |     componentDidMount() {
26 |         this.renderGeoJSON();
27 |     }
28 | 
29 |     componentDidUpdate(prevProps) {
30 |         if (this.checkPropsChange(['data', 'style', 'pointToLayer', 'onEachFeature', 'onEachFeature'], prevProps)) {
31 |             this.renderGeoJSON();
32 |         }
33 |     }
34 | 
35 |     renderGeoJSON() {
36 |         let options = {
37 |             style: this.props.style,
38 |             pointToLayer: this.props.pointToLayer,
39 |             onEachFeature: this.props.onEachFeature,
40 |             filter: this.props.filter
41 |         };
42 | 
43 |         if (this.state.dgElement) {
44 |             this.state.dgElement.remove();
45 |         }
46 | 
47 |         let dgElement = DG.geoJson(this.props.data, options);
48 |         this.props.element.addLayer(dgElement);
49 | 
50 |         this.setState({
51 |             dgElement: dgElement
52 |         });
53 |     }
54 | }
55 |

--------------------------------------------------------------------------------
/src/Icon.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class Icon extends MapComponent {
 6 |     static propsTypes = {
 7 |         iconUrl: PropTypes.string,
 8 |         iconSize: PropTypes.array
 9 |     };
10 | 
11 |     componentDidMount() {
12 |         this.setIcon();
13 |     }
14 | 
15 |     componentDidUpdate(prevProps, prevState) {
16 |         if (prevProps.iconUrl != this.props.iconUrl || prevProps.iconSize != this.props.iconSize) {
17 |             this.setIcon();
18 |         }
19 |         this.props.element._bringToFront()
20 |     }
21 | 
22 |     setIcon() {
23 |         this.props.element.setIcon(DG.icon({
24 |             iconUrl: this.props.iconUrl,
25 |             iconSize: this.props.iconSize
26 |         }));
27 |     }
28 | }
29 |

--------------------------------------------------------------------------------
/src/Map.js:
--------------------------------------------------------------------------------
  1 | import React, { PropTypes } from 'react';
  2 | import DG from '2gis-maps';
  3 | import MapComponent from './MapComponent'
  4 | 
  5 | export default class Map extends MapComponent {
  6 |     static propsTypes = {
  7 |         style: PropTypes.object,
  8 |         center: PropTypes.array,
  9 |         zoom: PropTypes.number,
 10 |         geoclicker: PropTypes.bool,
 11 |         projectDetector: PropTypes.bool,
 12 |         zoomControl: PropTypes.bool,
 13 |         fullscreenControl: PropTypes.bool,
 14 |         preferCanvas: PropTypes.bool,
 15 |         touchZoom: PropTypes.bool,
 16 |         scrollWheelZoom: PropTypes.bool,
 17 |         doubleClickZoom: PropTypes.bool,
 18 |         dragging: PropTypes.bool,
 19 |         maxBounds: PropTypes.array,
 20 |         minZoom: PropTypes.number,
 21 |         maxZoom: PropTypes.number
 22 |     };
 23 | 
 24 |     static defaultProps = {
 25 |         zoom: false,
 26 |         center: false,
 27 |         geoclicker: false,
 28 |         projectDetector: false,
 29 |         zoomControl: true,
 30 |         fullscreenControl: true,
 31 |         preferCanvas: true,
 32 |         touchZoom: true,
 33 |         scrollWheelZoom: true,
 34 |         doubleClickZoom: true,
 35 |         dragging: true
 36 |     };
 37 | 
 38 |     state = {
 39 |         dgElement: null,
 40 |         childrenForRender: []
 41 |     };
 42 | 
 43 |     componentDidMount() {
 44 |         const { container } = this.refs;
 45 | 
 46 |         // Map options.
 47 |         const {
 48 |             zoom, center, geoclicker, projectDetector, zoomControl, fullscreenControl, preferCanvas, touchZoom,
 49 |             scrollWheelZoom, doubleClickZoom, dragging, maxBounds, minZoom, maxZoom
 50 |         } = this.props;
 51 | 
 52 |         let options = {
 53 |             zoom, center, geoclicker, projectDetector, zoomControl, fullscreenControl, preferCanvas, touchZoom,
 54 |             scrollWheelZoom, doubleClickZoom, dragging, maxBounds, minZoom, maxZoom
 55 |         };
 56 | 
 57 |         // Check exist prop center.
 58 |         if (!center) {
 59 |             console.error('For initial map You should set prop \'center\'.');
 60 |         }
 61 | 
 62 |         // Check exist zoom center.
 63 |         if (!zoom) {
 64 |             console.error('For initial map You should set prop \'zoom\'.');
 65 |         }
 66 | 
 67 |         // Create Map.
 68 |         let dgElement = DG.map(container, options);
 69 | 
 70 |         if (this.props.onProjectChange) {
 71 |             dgElement.on('projectchange', e => this.props.onProjectChange(e));
 72 |         }
 73 | 
 74 |         if (this.props.onProjectLeave) {
 75 |             dgElement.on('projectleave', e => this.props.onProjectLeave(e));
 76 |         }
 77 | 
 78 |         this.setState({
 79 |             dgElement: dgElement
 80 |         });
 81 | 
 82 |         this.bindEvents(dgElement);
 83 |     }
 84 | 
 85 |     componentDidUpdate(prevProps, prevState) {
 86 |         const { dgElement } = this.state;
 87 | 
 88 |         if (this.checkPropsChange('center', prevProps)) {
 89 |             dgElement.setView(this.props.center);
 90 |         }
 91 | 
 92 |         if (this.checkPropsChange('zoom', prevProps)) {
 93 |             dgElement.setZoom(this.props.zoom);
 94 |         }
 95 | 
 96 |         if (this.checkPropsChange('style', prevProps)) {
 97 |             dgElement.invalidateSize();
 98 |         }
 99 | 
100 |         this.updateEvents(dgElement, prevProps);
101 |     }
102 | 
103 |     render() {
104 |         return (
105 |             <div ref="container" style={this.props.style}>
106 |                 { super.render() }
107 |             </div>
108 |         );
109 |     }
110 | }
111 |

--------------------------------------------------------------------------------
/src/MapComponent.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, Children, cloneElement } from 'react'
  2 | 
  3 | export default class MapComponent extends Component {
  4 |     componentWillUnmount() {
  5 |         if (this.state && this.state.dgElement) {
  6 |             this.state.dgElement.remove();
  7 |         }
  8 |     }
  9 | 
 10 |     render() {
 11 |         let childrenForRender = [];
 12 | 
 13 |         if (this.state && this.state.dgElement && this.props.children ) {
 14 |             childrenForRender = Children.map(this.props.children,
 15 |                 child => cloneElement(child, {
 16 |                     element: this.state.dgElement
 17 |                 })
 18 |             );
 19 |         }
 20 | 
 21 |         return (
 22 |             <noscript>
 23 |                 { childrenForRender }
 24 |             </noscript>
 25 |         );
 26 |     }
 27 | 
 28 |     checkPropsChange(propsName, prevProps) {
 29 |         if (typeof propsName == 'string') {
 30 |             return prevProps[propsName] !== this.props[propsName];
 31 |         }
 32 |         else if (typeof propsName == 'object') {
 33 |             return propsName.some(name => {
 34 |                 return prevProps[name] !== this.props[name]
 35 |             });
 36 |         }
 37 |     }
 38 | 
 39 |     updateLabel(prevProps) {
 40 |         if (this.checkPropsChange('label', prevProps)) {
 41 |             if (this.props.label) {
 42 |                 this.state.dgElement.bindLabel(this.props.label);
 43 |             }
 44 |             else {
 45 |                 this.state.dgElement.unbindLabel();
 46 |             }
 47 |         }
 48 |     }
 49 | 
 50 |     updatePos(prevProps) {
 51 |         if (this.checkPropsChange('pos', prevProps)) {
 52 |             this.state.dgElement.setLatLng(this.props.pos);
 53 |         }
 54 |     }
 55 | 
 56 |     updatePoints(prevProps) {
 57 |         if (this.checkPropsChange('points', prevProps)) {
 58 |             this.state.dgElement.setLatLngs(this.props.points);
 59 |         }
 60 |     }
 61 | 
 62 |     updateStyle(prevProps) {
 63 |         if (this.checkPropsChange('style', prevProps)) {
 64 |             this.state.dgElement.setStyle(this.props.style);
 65 |         }
 66 |     }
 67 | 
 68 |     insideMap() {
 69 |         return !!this.props.element.options.zoom
 70 |     }
 71 | 
 72 |     isFunction(variable) {
 73 |         return typeof variable === 'function';
 74 |     }
 75 | 
 76 |     bindEvents(dgElement) {
 77 |         for (let prop in this.props) {
 78 |             if (prop.slice(0, 2) === 'on' && this.isFunction(this.props[prop])) {
 79 |                 dgElement.on(prop.slice(2).toLowerCase(), this.props[prop]);
 80 |             }
 81 |         }
 82 |     }
 83 | 
 84 |     updateEvents(dgElement, prevProps) {
 85 |         for (let prop in this.props) {
 86 |             if (prop.slice(0, 2) === 'on') {
 87 |                 let dgPropName = prop.slice(2).toLowerCase();
 88 | 
 89 |                 if (!prevProps[prop] && this.isFunction(this.props[prop])) {
 90 |                     dgElement.on(dgPropName, this.props[prop]);
 91 |                 }
 92 | 
 93 |                 if (this.props[prop] !== prevProps[prop] && this.isFunction(this.props[prop])) {
 94 |                     dgElement.off(dgPropName, prevProps[prop]);
 95 |                     dgElement.on(dgPropName, this.props[prop]);
 96 |                 }
 97 | 
 98 |                 if (!this.props[prop] && this.isFunction(prevProps[prop])) {
 99 |                     dgElement.off(dgPropName, prevProps[prop]);
100 |                 }
101 |             }
102 |         }
103 |     }
104 | }
105 |

--------------------------------------------------------------------------------
/src/Marker.js:
--------------------------------------------------------------------------------
  1 | import React, { PropTypes } from 'react'
  2 | import DG from '2gis-maps'
  3 | import MapComponent from './MapComponent'
  4 | 
  5 | export default class Marker extends MapComponent {
  6 |     static propsTypes = {
  7 |         pos: PropTypes.array,
  8 |         label: PropTypes.string,
  9 |         staticLabel: PropTypes.string,
 10 |         draggable: PropTypes.bool,
 11 |         clickable: PropTypes.bool
 12 |     };
 13 | 
 14 |     static defaultProps = {
 15 |         draggable: false,
 16 |         clickable: true,
 17 |         label: false,
 18 |         staticLabel: false
 19 |     };
 20 | 
 21 |     state = {
 22 |         dgElement: null,
 23 |         childrenForRender: [],
 24 |         pos: this.props.pos || null
 25 |     };
 26 | 
 27 |     componentDidMount() {
 28 |         let dgElement = DG.marker(this.props.pos, {
 29 |             draggable: this.props.draggable,
 30 |             clickable: this.props.clickable
 31 |         });
 32 | 
 33 |         if (this.props.label) {
 34 |             dgElement.bindLabel(this.props.label);
 35 |         }
 36 | 
 37 |         this.setState({
 38 |             dgElement: dgElement
 39 |         }, () => {
 40 |             // For dragging Marker.
 41 |             if (this.props.draggable) {
 42 |                 this.draggingSwitchTo(true);
 43 |             }
 44 |         });
 45 | 
 46 |         this.bindEvents(dgElement);
 47 | 
 48 |         // todo: fix it after fix https://github.com/2gis/mapsapi/issues/332
 49 |         if (this.props.staticLabel) {
 50 |             this.props.element.addLayer(dgElement);
 51 | 
 52 |             dgElement.bindLabel(this.props.staticLabel, { 'static': true });
 53 |         }
 54 |         else {
 55 |             this.props.element.addLayer(dgElement);
 56 |         }
 57 |     }
 58 | 
 59 |     componentDidUpdate(prevProps) {
 60 |         const { dgElement } = this.state;
 61 | 
 62 |         this.updatePos(prevProps);
 63 | 
 64 |         this.updateLabel(prevProps);
 65 | 
 66 |         // Update static label.
 67 |         if (this.checkPropsChange('staticLabel', prevProps)) {
 68 |             dgElement.bindLabel(this.props.staticLabel, { 'static': true });
 69 |         }
 70 | 
 71 |         // Update draggable.
 72 |         if (this.checkPropsChange('draggable', prevProps)) {
 73 |             this.draggingSwitchTo(this.props.draggable);
 74 |         }
 75 | 
 76 |         this.updateEvents(dgElement, prevProps);
 77 |     }
 78 | 
 79 |     dragging = e => {
 80 |         this.setState({
 81 |             dgElement: this.state.dgElement,
 82 |             childrenForRender: this.state.childrenForRender,
 83 |             pos: e.latlng
 84 |         });
 85 |     };
 86 | 
 87 |     draggingSwitchTo(isEnable) {
 88 |         const { dgElement } = this.state;
 89 | 
 90 |         if (isEnable) {
 91 |             dgElement.on('drag', this.dragging);
 92 |             dgElement.dragging.enable();
 93 |         }
 94 |         else {
 95 |             dgElement.off('drag', this.dragging);
 96 |             dgElement.dragging.disable();
 97 |             dgElement.setLatLng(this.state.pos);
 98 |         }
 99 |     }
100 | }
101 |

--------------------------------------------------------------------------------
/src/Polygon.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class Polygon extends MapComponent {
 6 |     static propsTypes = {
 7 |         style: PropTypes.object,
 8 |         points: PropTypes.array,
 9 |         label: PropTypes.string
10 |     };
11 | 
12 |     state = {
13 |         dgElement: null,
14 |         childrenForRender: []
15 |     };
16 | 
17 |     componentDidMount() {
18 |         let dgElement = DG.polygon(this.props.points);
19 | 
20 |         if (this.props.style) {
21 |             dgElement.setStyle(this.props.style);
22 |         }
23 | 
24 |         if (this.props.label) {
25 |             dgElement.bindLabel(this.props.label)
26 |         }
27 | 
28 |         this.setState({
29 |             dgElement: dgElement
30 |         });
31 | 
32 |         this.bindEvents(dgElement);
33 | 
34 |         this.props.element.addLayer(dgElement);
35 |     }
36 | 
37 |     componentDidUpdate(prevProps) {
38 |         this.updatePoints(prevProps);
39 |         this.updateLabel(prevProps);
40 |         this.updateStyle(prevProps);
41 |         this.updateEvents(this.state.dgElement);
42 |     }
43 | }
44 |

--------------------------------------------------------------------------------
/src/Polyline.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class Polyline extends MapComponent {
 6 |     static propsTypes = {
 7 |         style: PropTypes.object,
 8 |         points: PropTypes.array,
 9 |         label: PropTypes.string
10 |     };
11 | 
12 |     state = {
13 |         dgElement: null
14 |     };
15 | 
16 |     static defaultProps = {
17 |         style: null
18 |     };
19 | 
20 |     componentDidMount() {
21 |         let dgElement = DG.polyline(this.props.points, this.props.style);
22 | 
23 |         if (this.props.label) {
24 |             dgElement.bindLabel(this.props.label)
25 |         }
26 | 
27 |         this.setState({
28 |             dgElement: dgElement
29 |         });
30 | 
31 |         this.bindEvents(dgElement);
32 | 
33 |         this.props.element.addLayer(dgElement);
34 |     }
35 | 
36 |     componentDidUpdate(prevProps) {
37 |         this.updatePoints(prevProps);
38 |         this.updateLabel(prevProps);
39 |         this.updateStyle(prevProps);
40 |         this.updateEvents(this.state.dgElement);
41 |     }
42 | }
43 |

--------------------------------------------------------------------------------
/src/Popup.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import ReactDOMServer from 'react-dom/server';
 3 | import DG from '2gis-maps'
 4 | import MapComponent from './MapComponent'
 5 | 
 6 | export default class Popup extends MapComponent {
 7 |     static propsTypes = {
 8 |         pos: PropTypes.array,
 9 |         maxWidth: PropTypes.number,
10 |         minWidth: PropTypes.number,
11 |         maxHeight: PropTypes.number,
12 |         sprawling: PropTypes.bool,
13 |         className: PropTypes.string
14 |     };
15 | 
16 |     static defaultProps = {
17 |         maxWidth: 300,
18 |         minWidth: 50,
19 |         maxHeight: null,
20 |         sprawling: false,
21 |         className: ''
22 |     };
23 | 
24 |     componentDidMount() {
25 |         const popupHtml = this.renderChildren();
26 | 
27 |         let { element } = this.props;
28 | 
29 |         let dgElement = null;
30 | 
31 |         // Popup options.
32 |         const {
33 |             maxWidth, minWidth, maxHeight, sprawling, className
34 |         } = this.props;
35 | 
36 |         let options = {
37 |             maxWidth, minWidth, maxHeight, sprawling, className
38 |         };
39 | 
40 |         if (this.insideMap()) {
41 |             dgElement = DG.popup(options)
42 |                 .setLatLng(this.props.pos)
43 |                 .setContent(popupHtml)
44 |                 .openOn(element);
45 |         } else {
46 |             if (element.getPopup()) {
47 |                 element.setPopupContent(popupHtml);
48 |             }
49 |             else {
50 |                 element.bindPopup(popupHtml, options);
51 |             }
52 | 
53 |             dgElement = element.getPopup()
54 |         }
55 |     }
56 | 
57 |     componentDidUpdate(prevProps, prevState) {
58 |         let { element } = this.props;
59 | 
60 |         if (prevProps.children != this.props.children) {
61 |             const popupHtml = this.renderChildren();
62 | 
63 |             if (this.insideMap()) {
64 |                 element.getPopup().setContent(popupHtml)
65 |             }
66 |             else {
67 |                 element.setPopupContent(popupHtml);
68 |             }
69 |         }
70 | 
71 |         this.updatePos(prevProps);
72 | 
73 |         if (element.getPopup) {
74 |             this.updateEvents(element.getPopup());
75 |         }
76 |     }
77 | 
78 |     componentWillUnmount() {
79 |         this.props.element.unbindPopup();
80 |     }
81 | 
82 |     renderChildren() {
83 |         return ReactDOMServer.renderToString(
84 |             <div style={{
85 |                 padding: 0,
86 |                 margin: 0,
87 |                 display: 'inline'
88 |             }}>{ this.props.children }</div>
89 |         );
90 |     }
91 | }
92 |

--------------------------------------------------------------------------------
/src/Rectangle.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class Rectangle extends MapComponent {
 6 |     static propsTypes = {
 7 |         style: PropTypes.object,
 8 |         bounds: PropTypes.array,
 9 |         label: PropTypes.string
10 |     };
11 | 
12 |     state = {
13 |         dgElement: null,
14 |         childrenForRender: []
15 |     };
16 | 
17 |     componentDidMount() {
18 |         let dgElement = DG.rectangle(this.props.bounds);
19 | 
20 |         if (this.props.style) {
21 |             dgElement.setStyle(this.props.style);
22 |         }
23 | 
24 |         if (this.props.label) {
25 |             dgElement.bindLabel(this.props.label)
26 |         }
27 | 
28 |         this.setState({
29 |             dgElement: dgElement
30 |         });
31 | 
32 |         this.bindEvents(dgElement);
33 | 
34 |         this.props.element.addLayer(dgElement);
35 |     }
36 | 
37 |     componentDidUpdate(prevProps) {
38 |         let { dgElement } = this.state;
39 | 
40 |         if (this.checkPropsChange('bounds', prevProps)) {
41 |             dgElement.setBounds(this.props.bounds);
42 |         }
43 |         this.updateLabel(prevProps);
44 |         this.updateStyle(prevProps);
45 |         this.updateEvents(dgElement, prevProps);
46 |     }
47 | }
48 |

--------------------------------------------------------------------------------
/src/Ruler.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class Ruler extends MapComponent {
 6 |     static propsTypes = {
 7 |         points: PropTypes.array
 8 |     };
 9 | 
10 |     state = {
11 |         dgElement: null
12 |     };
13 | 
14 |     componentDidMount() {
15 |         let dgElement = DG.ruler(this.props.points);
16 |         this.props.element.addLayer(dgElement);
17 |         this.setState({
18 |             dgElement: dgElement
19 |         });
20 |     }
21 | 
22 |     componentDidUpdate(prevProps, prevState) {
23 |         this.updatePoints(prevProps);
24 |     }
25 | }
26 |

--------------------------------------------------------------------------------
/src/Wkt.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PropTypes } from 'react'
 2 | import DG from '2gis-maps'
 3 | import MapComponent from './MapComponent'
 4 | 
 5 | export default class Wkt extends MapComponent {
 6 |     static propsTypes = {
 7 |         style: PropTypes.object,
 8 |         data: PropTypes.string
 9 |     };
10 | 
11 |     static defaultProps = {
12 |         style: null
13 |     };
14 | 
15 |     state = {
16 |         dgElement: null
17 |     };
18 | 
19 |     componentDidMount() {
20 |         this.renderWkt();
21 |     }
22 | 
23 |     componentDidUpdate(prevProps) {
24 |         if (this.checkPropsChange(['data', 'style'], prevProps)) {
25 |             this.renderWkt();
26 |         }
27 |     }
28 | 
29 |     renderWkt() {
30 |         let dgElement = DG.Wkt.geoJsonLayer(this.props.data, this.props.style);
31 | 
32 |         if (this.state.dgElement) {
33 |             this.state.dgElement.remove();
34 |         }
35 | 
36 |         this.props.element.addLayer(dgElement);
37 | 
38 |         this.setState({
39 |             dgElement: dgElement
40 |         });
41 | 
42 |     }
43 | }
44 |

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export Map from './Map.js';
 2 | export Marker from './Marker.js';
 3 | export Popup from './Popup.js';
 4 | export Icon from './Icon.js';
 5 | export DivIcon from './DivIcon.js';
 6 | export Ruler from './Ruler.js';
 7 | export GeoJSON from './GeoJSON.js';
 8 | export Wkt from './Wkt.js';
 9 | export Circle from './Circle.js';
10 | export CircleMarker from './CircleMarker.js';
11 | export Polyline from './Polyline.js';
12 | export Polygon from './Polygon.js';
13 | export Rectangle from './Rectangle.js';
14 |

--------------------------------------------------------------------------------
/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "mocha": true
4 |   }
5 | }
6 |

--------------------------------------------------------------------------------
/tests/index-test.js:
--------------------------------------------------------------------------------
 1 | import expect from 'expect'
 2 | import React from 'react'
 3 | import { render, unmountComponentAtNode } from 'react-dom'
 4 | 
 5 | import { Map, Marker } from 'src/'
 6 | 
 7 | describe('Map component with Marker inside', () => {
 8 |     let node;
 9 | 
10 |     const map = (
11 |         <Map
12 |             center={[0, 0]}
13 |             zoom={12}
14 |         >
15 |             <Marker
16 |                 pos={[0, 0]}
17 |                 staticLabel={'I\'m marker on map.'}
18 |             />
19 |         </Map>
20 |     );
21 | 
22 |     beforeEach(() => {
23 |         node = document.createElement('div')
24 |     });
25 | 
26 |     afterEach(() => {
27 |         unmountComponentAtNode(node)
28 |     });
29 | 
30 |     it('displays a static label', () => {
31 |         render(map, node, () => {
32 |             expect(node.innerHTML).toContain('I\'m marker on map.')
33 |         });
34 |     })
35 | });
36 |

--------------------------------------------------------------------------------

Can be HTML

Can be HTML

Can be HTML