react-d3/react-d3-map-orthographic

Name: react-d3-map-orthographic

Owner: react-d3

Description: react-d3 interactive map with orthographic map

Created: 2015-11-29 13:04:14.0

Updated: 2017-11-05 19:27:21.0

Pushed: 2015-11-29 13:54:07.0

Homepage: http://maportho.reactd3.org/test-multipolygon.html

Size: 5496

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-d3-map-orthographic

react-d3 interactive map with orthographic control panel

based on https://github.com/react-d3/react-d3-map

LIVE DEMO

Multipolygon and Polygon

• http://maportho.reactd3.org/test-multipolygon.html
• http://maportho.reactd3.org/test-polygon.html

Markers and Points

• http://maportho.reactd3.org/test-point.html

LineString and MultiLineString

• http://maportho.reactd3.org/test-line.html

Examples

Polygon and MultiPolygon

MapOrthographic = require('react-d3-map-orthographic').MapOrthographic;

mport react-d3-map polygonGroup
PolygonGroup = require('react-d3-map').PolygonGroup;

ction() {
r width = 1000;
r height = 800;
r scale = 1 << 12;
r scaleExtent = [1 << 10, 1 << 14]
r center = [-100.95, 40.7];
r data = require('json!../data/states.json');
r onPolygonMouseOut= function(dom , d, i) {
console.log('out')

r onPolygonMouseOver= function(dom, d, i) {
console.log('over')

r onPolygonClick= function(dom, d, i) {
console.log('click')

r onPolygonCloseClick= function(id) {
console.log('close click')
console.log(id)

r popupContent = function(d) { return 'hi, i am polygon'; }

actDOM.render(
<MapOrthographic
  width= {width}
  height= {height}
  scale= {scale}
  scaleExtent= {scaleExtent}
  center= {center}
>
  <PolygonGroup
    key= {"polygon-test"}
    data= {data}
    popupContent= {popupContent}
    onClick= {onPolygonClick}
    onCloseClick= {onPolygonCloseClick}
    onMouseOver= {onPolygonMouseOver}
    onMouseOut= {onPolygonMouseOut}
    polygonClass= {"your-polygon-css-class"}
  />
</MapOrthographic>
document.getElementById('blank-multipolygon')

LineString and MultiLineString

MapOrthographic = require('react-d3-map-orthographic').MMapOrthographic;

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


ction() {
r width = 1000;
r height = 800;
r scale = 1 << 22;
r scaleExtent = [1 << 20, 1 << 24]
r center = [-122.486052, 37.830348];
r popupContent = function(d) { return d.properties.text; }

r data = {
      "type": "Feature",
      "properties": {},
      "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 onLineMouseOut= function(dom , d, i) {
console.log('out')

r onLineMouseOver= function(dom, d, i) {
console.log('over')

r onLineClick= function(dom, d, i) {
console.log('click')

r onLineCloseClick= function(id) {
console.log('close click')



actDOM.render(
<MapOrthographic
  width= {width}
  height= {height}
  scale= {scale}
  scaleExtent= {scaleExtent}
  center= {center}
>
  <LineGroup
    key= {"line-test"}
    data= {data}
    popupContent= {popupContent}
    onClick= {onLineClick}
    onCloseClick= {onLineCloseClick}
    onMouseOver= {onLineMouseOver}
    onMouseOut= {onLineMouseOut}
    meshClass= {"your-line-css-class"}
  />
</MapOrthographic>
document.getElementById('blank-line')

Points and Markers

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

MapOrthographic = require('react-d3-map-orthographic').MapOrthographic;

mport react-d3-map markerGroup
MarkerGroup = require('react-d3-map').MarkerGroup;

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

xample
ction() {
r width = 1000;
r height = 800;
r scale = 1200 * 5;
r scaleExtent = [1 << 12, 1 << 13]
r center = [-5, 55.4];
r uk = require('json!../data/uk.json');
r data = topojson.feature(uk, uk.objects.places);
r popupContent = function(d) { return d.properties.name; }
r onMarkerMouseOut= function(dom , d, i) {
console.log('out')

r onMarkerMouseOver= function(dom, d, i) {
console.log('over')

r onMarkerClick= function(dom, d, i) {
console.log('click')

r onMarkerCloseClick= function(id) {
console.log('close click')



actDOM.render(
<MapOrthographic
  width= {width}
  height= {height}
  scale= {scale}
  scaleExtent= {scaleExtent}
  center= {center}
>
  <MarkerGroup
    key= {"polygon-test"}
    data= {data}
    popupContent= {popupContent}
    onClick= {onMarkerClick}
    onCloseClick= {onMarkerCloseClick}
    onMouseOver= {onMarkerMouseOver}
    onMouseOut= {onMarkerMouseOut}
    markerClass= {"your-marker-css-class"}
  />
</MapOrthographic>
document.getElementById('blank-point')

Svg in Map

One of the most powerful part of react-d3-map-orthographic is you can easy put all your svg tags and component inside your map, without any efforts

tDOM.render(
apOrthographic
width= {width}
height= {height}
scale= {scale}
scaleExtent= {scaleExtent}
center= {center}

// you can put any svg inside here, such as <rect>, <text> ...
<text
  x= {width / 2}
  y= {height/ 2}
>
  HI, this is a text
</text>
MapOrthographic>
cument.getElementById('blank-point')

Install

install react-d3-map-orthographic

License

Apache 2.0