Permalink
Browse files

first commit

  • Loading branch information...
mariusandra committed Dec 16, 2016
0 parents commit f84f262de1dcb3af0849487a1f1346e46a1ba127
Showing with 3,877 additions and 0 deletions.
  1. +3 −0 .babelrc
  2. +18 −0 .eslintrc
  3. +4 −0 .gitignore
  4. +46 −0 demo/demo.js
  5. +11 −0 demo/index.html
  6. +11 −0 demo/index.js
  7. +19 −0 lib/index.js
  8. +127 −0 lib/map.js
  9. +56 −0 lib/marker.js
  10. +49 −0 package.json
  11. +4 −0 src/index.js
  12. +80 −0 src/map.js
  13. +21 −0 src/marker.js
  14. +71 −0 webpack.config.js
  15. +3,357 −0 yarn.lock
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "stage-0", "react"]
}
@@ -0,0 +1,18 @@
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2,
"no-labels": 0,
"arrow-parens": 0
},
"extends": "standard",
"parser": "babel-eslint"
}
@@ -0,0 +1,4 @@
node_modules
npm-debug.log
@@ -0,0 +1,46 @@
import React, { Component } from 'react'
import Map, { Marker } from 'fully-react-maps'
export default class App extends Component {
constructor (props) {
super(props)
this.state = {
center: [50.879, 4.6997],
zoom: 12
}
}
zoomIn = () => {
this.setState({
zoom: Math.min(this.state.zoom + 1, 18)
})
}
zoomOut = () => {
this.setState({
zoom: Math.max(this.state.zoom - 1, 1)
})
}
render () {
const { center, zoom } = this.state
return (
<div>
<Map center={center} zoom={zoom} width={600} height={400}>
<Marker position={[50.879, 4.6997]} offset={[15, 31]}>
<img src='https://www.apprentus.com/images/map/pin-green-large@2x.png' width={29} height={34} alt='' />
</Marker>
</Map>
<div>
<button onClick={this.zoomIn}>Zoom In</button>
<button onClick={this.zoomOut}>Zoom Out</button>
{' '}
{zoom}
</div>
</div>
)
}
}
@@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fully React Maps!</title>
</head>
<body>
<div id="root"></div>
<script src="/common.bundle.js"></script>
</body>
</html>
@@ -0,0 +1,11 @@
import ReactDOM from 'react-dom'
import React from 'react'
import Demo from './demo'
import './index.html'
ReactDOM.render(
<Demo />,
document.getElementById('root')
)
@@ -0,0 +1,19 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Marker = undefined;
var _map = require('./map');
var _map2 = _interopRequireDefault(_map);
var _marker = require('./marker');
var _marker2 = _interopRequireDefault(_marker);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Marker = _marker2.default;
exports.default = _map2.default;
@@ -0,0 +1,127 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function wikimedia(x, y, z) {
return 'https://maps.wikimedia.org/osm-intl/' + z + '/' + x + '/' + y + (window.devicePixelRatio >= 2 ? '@2x' : '') + '.png';
}
// https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
var long2tile = function long2tile(lon, zoom) {
return (lon + 180) / 360 * Math.pow(2, zoom);
};
var lat2tile = function lat2tile(lat, zoom) {
return (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom);
};
var Map = function (_Component) {
_inherits(Map, _Component);
function Map() {
_classCallCheck(this, Map);
return _possibleConstructorReturn(this, (Map.__proto__ || Object.getPrototypeOf(Map)).apply(this, arguments));
}
_createClass(Map, [{
key: 'render',
value: function render() {
var _props = this.props,
center = _props.center,
zoom = _props.zoom,
width = _props.width,
height = _props.height,
provider = _props.provider;
var mapUrl = provider || wikimedia;
var tileCenterX = long2tile(center[1], zoom);
var tileCenterY = lat2tile(center[0], zoom);
var halfWidth = width / 2 / 256.0;
var halfHeight = height / 2 / 256.0;
var tileMinX = Math.floor(tileCenterX - halfWidth);
var tileMaxX = Math.floor(tileCenterX + halfWidth);
var tileMinY = Math.floor(tileCenterY - halfHeight);
var tileMaxY = Math.floor(tileCenterY + halfHeight);
var tiles = [];
for (var x = tileMinX; x <= tileMaxX; x++) {
for (var y = tileMinY; y <= tileMaxY; y++) {
tiles.push({
key: x + '-' + y + '-' + zoom,
url: mapUrl(x, y, zoom),
left: (x - tileMinX) * 256,
top: (y - tileMinY) * 256
});
}
}
var left = -((tileCenterX - tileMinX) * 256 - width / 2);
var top = -((tileCenterY - tileMinY) * 256 - height / 2);
var childrenWithProps = _react2.default.Children.map(this.props.children, function (child) {
var _child$props = child.props,
position = _child$props.position,
offset = _child$props.offset;
if (position) {
var childLeft = (long2tile(center[1], zoom) - tileMinX) * 256;
var childTop = (lat2tile(center[0], zoom) - tileMinY) * 256;
return _react2.default.cloneElement(child, {
left: childLeft - (offset ? offset[0] : 0),
top: childTop - (offset ? offset[1] : 0)
});
}
});
return _react2.default.createElement(
'div',
{ style: { width: width, height: height, position: 'relative', display: 'inline-block', overflow: 'hidden' } },
_react2.default.createElement(
'div',
{ style: { position: 'absolute', width: (tileMaxX - tileMinX + 1) * 256, height: (tileMaxY - tileMinY + 1) * 256, left: left, top: top } },
tiles.map(function (tile) {
return _react2.default.createElement('img', { key: tile.key, src: tile.url, width: 256, height: 256, style: { position: 'absolute', left: tile.left, top: tile.top } });
})
),
_react2.default.createElement(
'div',
{ style: { position: 'absolute', width: (tileMaxX - tileMinX + 1) * 256, height: (tileMaxY - tileMinY + 1) * 256, left: left, top: top } },
childrenWithProps
)
);
}
}]);
return Map;
}(_react.Component);
Map.propTypes = {
center: _react2.default.PropTypes.array,
zoom: _react2.default.PropTypes.number,
width: _react2.default.PropTypes.number,
height: _react2.default.PropTypes.number,
provider: _react2.default.PropTypes.func,
children: _react2.default.PropTypes.node
};
exports.default = Map;
@@ -0,0 +1,56 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Marker = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Marker = exports.Marker = function (_Component) {
_inherits(Marker, _Component);
function Marker() {
_classCallCheck(this, Marker);
return _possibleConstructorReturn(this, (Marker.__proto__ || Object.getPrototypeOf(Marker)).apply(this, arguments));
}
_createClass(Marker, [{
key: 'render',
value: function render() {
var _props = this.props,
left = _props.left,
top = _props.top;
return _react2.default.createElement(
'div',
{ style: { position: 'absolute', left: left, top: top } },
this.props.children
);
}
}]);
return Marker;
}(_react.Component);
Marker.propTypes = {
position: _react2.default.PropTypes.array,
offset: _react2.default.PropTypes.array,
left: _react2.default.PropTypes.number,
top: _react2.default.PropTypes.number,
children: _react2.default.PropTypes.node
};
@@ -0,0 +1,49 @@
{
"name": "fully-reat-maps",
"version": "0.0.1",
"description": "React Maps without dependencies",
"author": "Marius Andra",
"license": "MIT",
"main": "lib/index.js",
"jsnext:main": "src/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/mariusandra/fully-react-maps.git"
},
"bugs": {
"url": "https://github.com/mariusandra/fully-react-maps/issues"
},
"homepage": "https://github.com/mariusandra/fully-react-maps#readme",
"scripts": {
"start": "./node_modules/.bin/webpack-dev-server --history-api-fallback --hot --port 4040",
"compile": "./node_modules/.bin/babel src --out-dir lib",
"watch": "./node_modules/.bin/babel -w src --out-dir lib",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {},
"peerDependencies": {
"react": "*"
},
"devDependencies": {
"babel-cli": "6.18.0",
"babel-core": "6.20.0",
"babel-eslint": "7.1.1",
"babel-loader": "6.2.9",
"babel-plugin-add-module-exports": "0.2.1",
"babel-plugin-react-transform": "2.0.2",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-preset-stage-0": "6.16.0",
"eslint": "3.12.1",
"eslint-config-standard": "6.2.1",
"eslint-plugin-promise": "3.4.0",
"eslint-plugin-react": "6.8.0",
"eslint-plugin-standard": "2.0.1",
"file-loader": "^0.9.0",
"react": "15.4.1",
"react-dom": "15.4.1",
"react-hot-loader": "1.3.1",
"webpack": "1.13.3",
"webpack-dev-server": "1.16.2"
}
}
@@ -0,0 +1,4 @@
import Map from './map'
export Marker from './marker'
export default Map
Oops, something went wrong.

0 comments on commit f84f262

Please sign in to comment.