├── .gitignore
├── bower.json
├── dist
    ├── react-map.min.js
    └── react-map.js
├── package.json
├── readme.md
├── src
    └── reactmap.jsx
├── index.html
├── LICENSE
└── Gruntfile.js


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-map",
 3 |   "version": "1.0.0",
 4 |   "authors": [
 5 |     "Atle Frenvik Sveen <atle@frenviksveen.net>"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |     "react": "~0.12.2",
17 |     "leaflet": "~0.7.3"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/dist/react-map.min.js:
--------------------------------------------------------------------------------
1 | /*! react-map 16.02.2015 */
2 | var Map=React.createClass({displayName:"Map",createMap:function(a){var b=L.map(a);return L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",{attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(b),b},setupMap:function(){this.map.setView([this.props.lat,this.props.lon],this.props.zoom)},componentDidMount:function(){this.map=this.props.createMap?this.props.createMap(this.getDOMNode()):this.createMap(this.getDOMNode()),this.setupMap()},render:function(){return React.createElement("div",{className:"map"})}});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-map",
 3 |   "version": "1.0.0",
 4 |   "description": "ReactMap",
 5 |   "main": "dist/react-map.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/atlefren/react-map.git"
 9 |   },
10 |   "author": "",
11 |   "license": "MIT",
12 |   "bugs": {
13 |     "url": "https://github.com/atlefren/react-map/issues"
14 |   },
15 |   "homepage": "https://github.com/atlefren/react-map",
16 |   "devDependencies": {
17 |     "grunt": "^0.4.5",
18 |     "grunt-bump-build-git": "^1.1.1",
19 |     "grunt-contrib-uglify": "^0.7.0",
20 |     "grunt-contrib-watch": "^0.6.1",
21 |     "grunt-react": "^0.10.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | ReactMap
 2 | --------
 3 | 
 4 | Provides an easy leaflet.js wrapper for react, so that you can initialize a map as a React-component:
 5 | 
 6 |     <Map lat="60.0" lon="10.0" zoom="10"/>
 7 | 
 8 | 
 9 | Properties
10 | ----------
11 | 
12 | * lat (required): initial latitude of map
13 | * lon (required): initial longitude of map
14 | * zoom (required): initial zoom level of map
15 | * createMap (optional): function that takes a DOM-element and creates a map, the default is quite simple:
16 | 
17 | ```javascript    
18 | function (element) {
19 |     var map = L.map(element);
20 |     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
21 |         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
22 |     }).addTo(map);
23 |     return map;
24 | }
25 | ```
26 | 
27 | Demo
28 | ----
29 | See http://code.atlefren.net/react-map/index.html
30 | 


--------------------------------------------------------------------------------
/src/reactmap.jsx:
--------------------------------------------------------------------------------
 1 | var Map = React.createClass({
 2 | 
 3 |     createMap: function (element) {
 4 |         var map = L.map(element);
 5 |         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 6 |             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 7 |         }).addTo(map);
 8 |         return map;
 9 |     },
10 | 
11 |     setupMap: function () {
12 |         this.map.setView([this.props.lat, this.props.lon], this.props.zoom);        
13 |     },
14 | 
15 |     componentDidMount: function () {
16 | 
17 |         if (this.props.createMap) {
18 |             this.map = this.props.createMap(this.getDOMNode());
19 |         } else {
20 |             this.map = this.createMap(this.getDOMNode());
21 |         }
22 | 
23 |         this.setupMap();
24 |     },
25 | 
26 |     render: function () {
27 |         return (<div className="map"></div>);
28 |     }
29 | 
30 | });


--------------------------------------------------------------------------------
/dist/react-map.js:
--------------------------------------------------------------------------------
 1 | var Map = React.createClass({displayName: "Map",
 2 | 
 3 |     createMap: function (element) {
 4 |         var map = L.map(element);
 5 |         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 6 |             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 7 |         }).addTo(map);
 8 |         return map;
 9 |     },
10 | 
11 |     setupMap: function () {
12 |         this.map.setView([this.props.lat, this.props.lon], this.props.zoom);        
13 |     },
14 | 
15 |     componentDidMount: function () {
16 | 
17 |         if (this.props.createMap) {
18 |             this.map = this.props.createMap(this.getDOMNode());
19 |         } else {
20 |             this.map = this.createMap(this.getDOMNode());
21 |         }
22 | 
23 |         this.setupMap();
24 |     },
25 | 
26 |     render: function () {
27 |         return (React.createElement("div", {className: "map"}));
28 |     }
29 | 
30 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" type="text/css" media="all" href="bower_components/leaflet/dist/leaflet.css"/>
 7 |     <style type="text/css">
 8 | 
 9 |         .map {
10 |             position: absolute;
11 |             left: 0;
12 |             right: 0;
13 |             top: 0;
14 |             bottom: 0;
15 |         }
16 | 
17 |     </style>
18 | </head>
19 | <body>
20 | 
21 | <script src="bower_components/react/react.js"></script>
22 | <script src="bower_components/react/JSXTransformer.js"></script>
23 | <script src="bower_components/leaflet/dist/leaflet.js"></script>
24 | <script type="text/javascript" src="dist/react-map.js"></script>
25 | 
26 | <script type="text/jsx">
27 |       React.render(
28 |         <Map lat="60.0" lon="10.0" zoom="10"/>,
29 |         document.getElementsByTagName("body")[0]
30 |       );
31 |     </script>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Atle Frenvik Sveen
 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.


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |   // Project configuration.
 4 |   grunt.initConfig({
 5 |     pkg: grunt.file.readJSON('package.json'),
 6 |       react: {
 7 |         build: {
 8 |           files: {
 9 |             'dist/<%= pkg.name %>.js': [
10 |               'src/reactmap.jsx'
11 |             ]
12 |         }
13 |       }
14 |     },
15 |     uglify: {
16 |       options: {
17 |         // the banner is inserted at the top of the output
18 |         banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd.mm.yyyy") %> */\n'
19 |       },
20 |       dist: {
21 |         files: {
22 |           'dist/<%= pkg.name %>.min.js': ['dist/<%= pkg.name %>.js']
23 |         }
24 |       }
25 |     },
26 |     watch: {
27 |       scripts: {
28 |         files: 'src/**/*.jsx',
29 |         tasks: 'default',
30 |       },
31 |     },
32 |     build: {
33 |       tasks: ['default'],
34 |       gitAdd: 'package.json bower.json dist/*'
35 |     }
36 |   });
37 | 
38 |   // Load the plugin that provides the "uglify" task.
39 |   grunt.loadNpmTasks('grunt-contrib-uglify');
40 | 
41 |   grunt.loadNpmTasks('grunt-contrib-watch');
42 | 
43 |   grunt.loadNpmTasks('grunt-react');
44 | 
45 |   grunt.loadNpmTasks('grunt-bump-build-git');
46 | 
47 |   // Default task(s).
48 |   grunt.registerTask('default', ['react', 'uglify']);
49 | 
50 | };


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