react-d3/react-d3-map-mobile

Name: react-d3-map-mobile

Owner: react-d3

Description: mobile first react-d3-map

Created: 2015-12-05 12:26:22.0

Updated: 2016-02-18 21:00:22.0

Pushed: 2015-12-06 06:08:40.0

Homepage:

Size: 1530

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-d3-map-mobile

Mobile first map!

Install

install react-d3-map-mobile

Example

Polygon

 strict";

React = require('react');
ReactDOM = require('react-dom');
topojson = require('topojson');

MercatorMobileMap = require('react-d3-map-mobile').MercatorMobileMap;
PolygonGroup = require('react-d3-map-mobile').PolygonGroup;

css= require('./css/polygon.css');

xample
ction() {
r width = window.innerWidth > 736? 736 : window.innerWidth;
r height = window.innerHeight > 736? 736 : window.innerHeight;
r scale = (1 << 12);
r controllerScale = (1 << 8);
r center = [-100.95, 40.7];
r data = require('json!../data/states.json');
r content = function(d) { return 'hello I am polygon'; }

actDOM.render(
<MercatorMobileMap
  width= {width}
  height= {height}
  scale= {scale}
  controllerScale= {controllerScale}
  center= {center}
>
  <PolygonGroup
    data= {data}
    overlayContent= {content}
  />
</MercatorMobileMap>
document.getElementById('blank-multipolygon')

Line

 strict";

React = require('react');
ReactDOM = require('react-dom');
topojson = require('topojson');

MercatorMobileMap = require('react-d3-map-mobile').MercatorMobileMap;
LineGroup = require('react-d3-map-mobile').LineGroup;

css= require('./css/polygon.css');

xample
ction() {
r width = window.innerWidth > 736? 736 : window.innerWidth;
r height = window.innerHeight > 736? 736 : window.innerHeight;
r scale = (1 << 22);
r controllerScale = (1 << 17);
r center = [-122.486052, 37.830348];
r data = {
  "type": "Feature",
  "properties": {
    "text": "this is a LineString"
  },
  "geometry": {
      "type": "LineString",
      "coordinates": [
          [-122.48369693756104, 37.83381888486939],
          [-122.48348236083984, 37.83317489144141],
          [-122.48339653015138, 37.83270036637107],
          [-122.48356819152832, 37.832056363179625],
          [-122.48404026031496, 37.83114119107971],
          [-122.48404026031496, 37.83049717427869],
          [-122.48348236083984, 37.829920943955045],
          [-122.48356819152832, 37.82954808664175],
          [-122.48507022857666, 37.82944639795659],
          [-122.48610019683838, 37.82880236636284],
          [-122.48695850372314, 37.82931081282506],
          [-122.48700141906738, 37.83080223556934],
          [-122.48751640319824, 37.83168351665737],
          [-122.48803138732912, 37.832158048267786],
          [-122.48888969421387, 37.83297152392784],
          [-122.48987674713133, 37.83263257682617],
          [-122.49043464660643, 37.832937629287755],
          [-122.49125003814696, 37.832429207817725],
          [-122.49163627624512, 37.832564787218985],
          [-122.49223709106445, 37.83337825839438],
          [-122.49378204345702, 37.83368330777276]
      ]
  }

r content = function(d) { return d.properties.text; }

actDOM.render(
<MercatorMobileMap
  width= {width}
  height= {height}
  scale= {scale}
  controllerScale= {controllerScale}
  center= {center}
>
  <LineGroup
    data= {data}
    overlayContent= {content}
  />
</MercatorMobileMap>
document.getElementById('blank-line')

Point

 strict";

React = require('react');
ReactDOM = require('react-dom');
topojson = require('topojson');

MercatorMobileMap = require('react-d3-map-mobile').MercatorMobileMap;
PointGroup = require('react-d3-map-mobile').PointGroup;
MarkerGroup = require('react-d3-map-mobile').MarkerGroup;

css= require('./css/polygon.css');

xample
ction() {
r width = window.innerWidth > 736? 736 : window.innerWidth;
r height = window.innerHeight > 736? 736 : window.innerHeight;
r scale = 1200 * 5;
r controllerScale = (1 << 8);
r center = [-5, 55.4];
r uk = require('json!../data/uk.json');
r data = topojson.feature(uk, uk.objects.places);
r content = function(d) { return d.properties.name; }

actDOM.render(
<MercatorMobileMap
  width= {width}
  height= {height}
  scale= {scale}
  controllerScale= {controllerScale}
  center= {center}
>
  <MarkerGroup
    data= {data}
    overlayContent= {content}
  />
</MercatorMobileMap>
document.getElementById('blank-point')

Styles

You will have to clone react-d3-map-mobile.css and include in your html for default styles.

License

Apache 2.0