├── LICENSE
├── README.md
├── demo
├── singleMap.html
└── singleMapRefreshable.html
├── package.json
└── src
└── map.js
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 Matti Nelimarkka and Helsinki Institute for Information Technology HIIT
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### Maps for React
2 |
3 | A map component for [React](https://github.com/facebook/react), the declarative UI library. Allow your React sites to use Google Maps easily.
4 |
5 | ### Example
6 |
7 | In the render-function of the component where you want to show a map:
8 |
9 | ```
10 |
12 | ```
13 |
14 |
--------------------------------------------------------------------------------
/demo/singleMap.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Single Map Demo - React-Map
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
38 |
39 |
40 |
41 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/demo/singleMapRefreshable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Single Map Demo - React-Map
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
55 |
56 |
57 |
58 |
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-map",
3 | "version": "0.0.1",
4 | "keywords": [
5 | "react", "map", "googlemaps"
6 | ],
7 | "homepage": "https://github.com/matnel/react-maps",
8 | "bugs": "https://github.com/matnel/react-maps/issues",
9 | "licenses": [
10 | {
11 | "type": "MIT",
12 | "url": "http://opensource.org/licenses/MIT"
13 | }
14 | ],
15 | "main": "src/map.js",
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/matnel/react-maps.git"
19 | },
20 | "dependencies": {
21 | "React": "git://github.com/facebook/react.git"
22 | },
23 | "devDependencies": {},
24 | "engines": {
25 | "node": ">=0.10.0"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/map.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 | "use strict";
5 |
6 | var __in_node = (typeof exports !== 'undefined' && this.exports !== exports);
7 |
8 | if( __in_node ) {
9 | var React = require('react');
10 | }
11 |
12 | var Map = React.createClass({
13 |
14 | // initialize local variables
15 | getInitialState: function() {
16 | return {
17 | map : null,
18 | markers : []
19 | };
20 | },
21 |
22 | // set some default values
23 | getDefaultProps: function() {
24 | return {
25 | latitude: 0,
26 | longitude: 0,
27 | zoom: 4,
28 | width: 500,
29 | height: 500,
30 | points: [],
31 | gmaps_api_key: '',
32 | gmaps_sensor: false
33 | }
34 | },
35 |
36 | // update geo-encoded markers
37 | updateMarkers : function(points) {
38 |
39 | var markers = this.state.markers;
40 | var map = this.state.map;
41 |
42 | // map may not be loaded when parent component re-renders
43 | if(map === null) { return false; }
44 |
45 | // remove everything
46 | markers.forEach( function(marker) {
47 | marker.setMap(null);
48 | } );
49 |
50 | this.state.markers = [];
51 |
52 | // add new markers
53 | points.forEach( (function( point ) {
54 |
55 | var location = new google.maps.LatLng( point.latitude , point.longitude );
56 |
57 | var marker = new google.maps.Marker({
58 | position: location,
59 | map: map,
60 | title: point.label
61 | });
62 |
63 | markers.push( marker );
64 |
65 | }) );
66 |
67 | this.setState( { markers : markers });
68 | },
69 |
70 | render : function() {
71 |
72 | var style = {
73 | width: this.props.width,
74 | height: this.props.height
75 | }
76 |
77 | return (
78 | React.DOM.div({style:style})
79 | );
80 | },
81 |
82 | componentDidMount : function() {
83 | var createMap = (function() {
84 | var mapOptions = {
85 | zoom: this.props.zoom,
86 | center: new google.maps.LatLng( this.props.latitude , this.props.longitude ),
87 | mapTypeId: google.maps.MapTypeId.ROADMAP
88 | };
89 |
90 | var map = new google.maps.Map( this.getDOMNode(), mapOptions);
91 |
92 | this.setState( { map : map } );
93 | this.updateMarkers(this.props.points);
94 | }).bind(this);
95 |
96 | if (typeof google !== 'undefined') {
97 | // scripts already loaded, create map immediately
98 | createMap()
99 | } else {
100 | if (!window.reactMapCallback) {
101 | // if this is the first time, load the scripts:
102 | var s =document.createElement('script');
103 | s.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.props.gmaps_api_key + '&sensor=' + this.props.gmaps_sensor + '&callback=reactMapCallback';
104 | document.head.appendChild( s );
105 |
106 | // when the script has loaded, run all the callbacks
107 | window.reactMapCallbacks = []
108 | window.reactMapCallback = function(){
109 | while (window.reactMapCallbacks.length > 0)
110 | (window.reactMapCallbacks.shift())() // remove from front
111 | }
112 | }
113 |
114 | // add a callback to the end of the chain
115 | window.reactMapCallbacks.push(createMap)
116 | }
117 | },
118 |
119 | // update markers if needed
120 | componentWillReceiveProps : function(props) {
121 | if( props.points ) this.updateMarkers(props.points);
122 | }
123 |
124 | });
125 |
126 | if( __in_node ) {
127 | module.exports = Map;
128 | }
129 |
--------------------------------------------------------------------------------