react-d3 interactive map, just like Leaflet!!! But BYE BYE layers!!!! We use SVG components to replace layers!!!
npm install react-d3-map
- http://interactive.reactd3.org/test-multipolygon.html
- http://interactive.reactd3.org/test-polygon.html
(function(){varwidth=1000;varheight=800;varscale=1<<12;varscaleExtent=[1<<10,1<<14]varcenter=[-100.95,40.7];vardata=require('json!../data/states.json');varonPolygonMouseOut=function(component,d,i){console.log('out')component.hidePopup();}varonPolygonMouseOver=function(component,d,i){console.log('over')component.showPopup();}varonPolygonClick=function(component,d,i){// component.showPopup();}varonPolygonCloseClick=function(component,id){// component.hidePopup();}varpopupContent=function(d){return'hi, i am polygon';}varContainer=React.createClass({render: function(){return(<g><PolygonGroupkey={"polygon-test"}data={data}popupContent={popupContent}onClick={onPolygonClick}onCloseClick={onPolygonCloseClick}onMouseOver={onPolygonMouseOver}onMouseOut={onPolygonMouseOut}polygonClass={"your-polygon-css-class"}/></g>)}})ReactDOM.render(<Mapwidth={width}height={height}scale={scale}scaleExtent={scaleExtent}center={center}clip={true}bounds={[[0,0],[width,height]]}><Container/></Map>,document.getElementById('blank-multipolygon'))})()
varMap=require('react-d3-map').Map;varLineGroup=require('react-d3-map').LineGroup;(function(){varwidth=1000;varheight=800;varscale=1<<22;varscaleExtent=[1<<20,1<<24]varcenter=[-122.486052,37.830348];varpopupContent=function(d){returnd.properties.text;}vardata={"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]]}}varonLineMouseOut=function(component,d,i){component.hidePopup();console.log('out')}varonLineMouseOver=function(component,d,i){component.showPopup();console.log('over')}varonLineClick=function(component,d,i){console.log('click')}varonLineCloseClick=function(componentcomponent,id){console.log('close click')}ReactDOM.render(<Mapwidth={width}height={height}scale={scale}scaleExtent={scaleExtent}center={center}><LineGroupkey={"line-test"}data={data}popupContent={popupContent}onClick={onLineClick}onCloseClick={onLineCloseClick}onMouseOver={onLineMouseOver}onMouseOut={onLineMouseOut}meshClass={"your-line-css-class"}/></Map>,document.getElementById('blank-line'))})()
varMap=require('react-d3-map').Map;varMarkerGroup=require('react-d3-map').MarkerGroup;// Example(function(){varwidth=1000;varheight=800;varscale=1200*5;varscaleExtent=[1<<12,1<<13]varcenter=[-5,55.4];varuk=require('json!../data/uk.json');vardata=topojson.feature(uk,uk.objects.places);varpopupContent=function(d){returnd.properties.name;}varonMarkerMouseOut=function(component,d,i){console.log('out')}varonMarkerMouseOver=function(component,d,i){console.log('over')}varonMarkerClick=function(component,d,i){component.showPopup();console.log('click')}varonMarkerCloseClick=function(component,id){component.hidePopup();console.log('close click')}ReactDOM.render(<Mapwidth={width}height={height}scale={scale}scaleExtent={scaleExtent}center={center}><MarkerGroupkey={"polygon-test"}data={data}popupContent={popupContent}onClick={onMarkerClick}onCloseClick={onMarkerCloseClick}onMouseOver={onMarkerMouseOver}onMouseOut={onMarkerMouseOut}markerClass={"your-marker-css-class"}/></Map>,document.getElementById('blank-point'))})()
You have to add your ZoomControl panel by default using ZoomControl component in react-d3-map-core. And send your zoomScale props in Map component, to achieve the zoomIn and zoomOut effect.
"use strict";varReact=require('react');varReactDOM=require('react-dom');vartopojson=require('topojson');varMap=require('react-d3-map').Map;varZoomControl=require('react-d3-map-core').ZoomControl;varcss=require('./css/polygon.css');// Example(function(){varwidth=1000;varheight=800;varscale=(1<<18);varcenter=[-73.95,40.7];vardata={geometry: {coordinates: [[[-74.0479,40.8820],[-73.9067,40.8820],[-73.9067,40.6829],[-74.0479,40.6829],[-74.0479,40.8820]]],type: "Polygon"},id: 999999,properties:{"text": "hi, this is a polygon!"},type: "Feature"};varpopupContent=function(d){returnd.properties.text;}varContainer=React.createClass({getInitialState: function(){return{scale: scale}},zoomOut: function(){this.setState({scale: this.state.scale/2})},zoomIn: function(){this.setState({scale: this.state.scale*2})},render: function(){varzoomIn=this.zoomIn;varzoomOut=this.zoomOut;varstyleContainer={position: 'relative',backgroundColor: '#EEE',width: width}return(<divstyle={styleContainer}><Mapwidth={width}height={height}scale={scale}zoomScale={this.state.scale}center={center}data={data}popupContent={popupContent}/><ZoomControlzoomInClick={zoomIn}zoomOutClick={zoomOut}/></div>)}})ReactDOM.render(<Container/>,document.getElementById('blank-container'))})()One of the most powerful part of react-d3-map is you can easy put all your svg tags and component inside your map, without any efforts
ReactDOM.render(<Mapwidth={width}height={height}scale={scale}scaleExtent={scaleExtent}center={center}>
// you can put any svg inside here, such as <rect>, <text> ...
<textx={width/2}y={height/2}>
HI, this is a text
</text></Map>
, document.getElementById('blank-point')
)Apache 2.0