Skip to content

Commit

Permalink
Update the overlay API to use a callback and update required props in…
Browse files Browse the repository at this point in the history 
… overlays.
  • Loading branch information
@vicapow
vicapow committed Nov 26, 2015
1 parent aadd76b commit f7741b0
Show file tree
Hide file tree
Showing 13 changed files with 194 additions and 189 deletions.
34 changes: 15 additions & 19 deletions example/examples/choropleth.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

'use strict';

var assign = require('object-assign');
Expand Down Expand Up @@ -57,6 +56,9 @@ var ChoroplethOverlayExample = React.createClass({
},

_onChangeViewport: function _onChangeViewport(opt) {
if (this.props.onChangeViewport) {
return this.props.onChangeViewport(opt);
}
this.setState({
latitude: opt.latitude,
longitude: opt.longitude,
Expand All @@ -67,24 +69,18 @@ var ChoroplethOverlayExample = React.createClass({
},

render: function render() {
return r(MapGL, assign({
latitude: this.state.latitude,
longitude: this.state.longitude,
zoom: this.state.zoom,
width: this.props.width,
height: this.props.height,
startDragLngLat: this.state.startDragLngLat,
isDragging: this.state.isDragging,
onChangeViewport: this.props.onChangeViewport || this._onChangeViewport
}, this.props), [
r(ChoroplethOverlay, {
globalOpacity: 0.8,
colorDomain: [0, 500, 1000],
colorRange: ['#31a354', '#addd8e', '#f7fcb9'],
renderWhileDragging: false,
features: ZIPCODES_SF.get('features')
})
]);
return r(MapGL, assign({}, this.state, this.props, {
onChangeViewport: this._onChangeViewport,
overlays: function overlays(viewport) {
return r(ChoroplethOverlay, assign({}, viewport, {
globalOpacity: 0.8,
colorDomain: [0, 500, 1000],
colorRange: ['#31a354', '#addd8e', '#f7fcb9'],
renderWhileDragging: false,
features: ZIPCODES_SF.get('features')
}));
}
}, this.props));
}
});

Expand Down
73 changes: 38 additions & 35 deletions example/examples/custom.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ var OverlayExample = React.createClass({
},

_onChangeViewport: function _onChangeViewport(opt) {
if (this.props.onChangeViewport) {
return this.props.onChangeViewport(opt);
}
this.setState({
latitude: opt.latitude,
longitude: opt.longitude,
Expand All @@ -76,40 +79,33 @@ var OverlayExample = React.createClass({
});
},

render: function render() {
return r(MapGL, assign({
latitude: this.state.latitude,
longitude: this.state.longitude,
zoom: this.state.zoom,
startDragLngLat: this.state.startDragLngLat,
isDragging: this.state.isDragging,
width: this.props.width,
height: this.props.height,
onChangeViewport: this.props.onChangeViewport || this._onChangeViewport
}, this.props), [
r(CanvasOverlay, {redraw: function _redrawCanvas(opt) {
var p1 = opt.project([location.longitude, location.latitude]);
opt.ctx.clearRect(0, 0, opt.width, opt.height);
opt.ctx.strokeStyle = alphaify('#1FBAD6', 0.4);
opt.ctx.lineWidth = 2;
locations.forEach(function forEach(loc, index) {
opt.ctx.beginPath();
var p2 = opt.project(loc.toArray());
opt.ctx.moveTo(p1[0], p1[1]);
opt.ctx.lineTo(p2[0], p2[1]);
opt.ctx.stroke();
opt.ctx.beginPath();
opt.ctx.fillStyle = alphaify('#1FBAD6', 0.4);
opt.ctx.arc(p2[0], p2[1], 6, 0, 2 * Math.PI);
opt.ctx.fill();
opt.ctx.beginPath();
opt.ctx.fillStyle = '#FFFFFF';
opt.ctx.textAlign = 'center';
opt.ctx.fillText(index, p2[0], p2[1] + 4);
});
}}),
_renderOverlays: function _renderOverlays(viewport) {
return [
r(CanvasOverlay, assign({}, viewport, {
redraw: function _redrawCanvas(opt) {
var p1 = opt.project([location.longitude, location.latitude]);
opt.ctx.clearRect(0, 0, opt.width, opt.height);
opt.ctx.strokeStyle = alphaify('#1FBAD6', 0.4);
opt.ctx.lineWidth = 2;
locations.forEach(function forEach(loc, index) {
opt.ctx.beginPath();
var p2 = opt.project(loc.toArray());
opt.ctx.moveTo(p1[0], p1[1]);
opt.ctx.lineTo(p2[0], p2[1]);
opt.ctx.stroke();
opt.ctx.beginPath();
opt.ctx.fillStyle = alphaify('#1FBAD6', 0.4);
opt.ctx.arc(p2[0], p2[1], 6, 0, 2 * Math.PI);
opt.ctx.fill();
opt.ctx.beginPath();
opt.ctx.fillStyle = '#FFFFFF';
opt.ctx.textAlign = 'center';
opt.ctx.fillText(index, p2[0], p2[1] + 4);
});
}
})),
// We use invisible SVG elements to support interactivity.
r(SVGOverlay, {
r(SVGOverlay, assign({}, viewport, {
redraw: function _redrwaSVGOverlay(opt) {
var p1 = opt.project([location.longitude, location.latitude]);
var style = {
Expand Down Expand Up @@ -144,8 +140,15 @@ var OverlayExample = React.createClass({
}, this))
);
}.bind(this)
})
]);
}))
];
},

render: function render() {
return r(MapGL, assign({}, this.state, this.props, {
onChangeViewport: this._onChangeViewport,
overlays: this._renderOverlays
}, this.props));
}
});

Expand Down
87 changes: 44 additions & 43 deletions example/examples/geodata-creator.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ var GeodataCreator = React.createClass({
},

_onChangeViewport: function _onChangeViewport(opt) {
if (this.props.onChangeViewport) {
return this.props.onChangeViewport(opt);
}
this.setState({
latitude: opt.latitude,
longitude: opt.longitude,
Expand Down Expand Up @@ -95,52 +98,50 @@ var GeodataCreator = React.createClass({
this.setState({points: points});
},

_renderOverlays: function _renderOverlays(viewport) {
return [
r(SVGOverlay, assign({}, viewport, {redraw: function _redraw(opt) {
if (!this.state.points.size) {
return null;
}
var d = 'M' + this.state.points.map(function _map(point) {
return opt.project(point.get('location').toArray());
}).join('L');
return r.path({
style: {stroke: '#1FBAD6', strokeWidth: 2, fill: 'none'},
d: d
});
}.bind(this)})),
r(DraggableOverlay, assign({}, viewport, {
points: this.state.points,
onAddPoint: this._onAddPoint,
onUpdatePoint: this._onUpdatePoint,
renderPoint: function renderPoint(point, pixel) {
return r.g({}, [
r.circle({
r: 10,
style: {
fill: alphaify('#1FBAD6', 0.5),
pointerEvents: 'all'
}
}),
r.text({
style: {fill: 'white', textAnchor: 'middle'},
y: 5
}, point.get('id'))
]);
}
}))
];
},

render: function render() {
return r.div([
r(MapGL, assign({
latitude: this.state.latitude,
longitude: this.state.longitude,
zoom: this.state.zoom,
width: this.props.width,
height: this.props.height,
startDragLngLat: this.state.startDragLngLat,
isDragging: this.state.isDragging,
r(MapGL, assign({}, this.state, this.props, {
style: {float: 'left'},
onChangeViewport: this.props.onChangeViewport || this._onChangeViewport
}, this.props), [
r(SVGOverlay, {redraw: function _redraw(opt) {
if (!this.state.points.size) {
return null;
}
var d = 'M' + this.state.points.map(function _map(point) {
return opt.project(point.get('location').toArray());
}).join('L');
return r.path({
style: {stroke: '#1FBAD6', strokeWidth: 2, fill: 'none'},
d: d
});
}.bind(this)}),
r(DraggableOverlay, {
points: this.state.points,
onAddPoint: this._onAddPoint,
onUpdatePoint: this._onUpdatePoint,
renderPoint: function renderPoint(point, pixel) {
return r.g({}, [
r.circle({
r: 10,
style: {
fill: alphaify('#1FBAD6', 0.5),
pointerEvents: 'all'
}
}),
r.text({
style: {fill: 'white', textAnchor: 'middle'},
y: 5
}, point.get('id'))
]);
}
})
])
onChangeViewport: this._onChangeViewport,
overlays: this._renderOverlays
}, this.props))
]);
}
});
Expand Down
1 change: 0 additions & 1 deletion example/examples/not-interactive.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

'use strict';

var assign = require('object-assign');
Expand Down
26 changes: 13 additions & 13 deletions example/examples/route.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ var RouteOverlayExample = React.createClass({
},

_onChangeViewport: function _onChangeViewport(opt) {
if (this.props.onChangeViewport) {
return this.props.onChangeViewport(opt);
}
this.setState({
latitude: opt.latitude,
longitude: opt.longitude,
Expand Down Expand Up @@ -110,19 +113,16 @@ var RouteOverlayExample = React.createClass({
},

render: function render() {
return r(MapGL, assign({
latitude: this.state.latitude,
longitude: this.state.longitude,
zoom: this.state.zoom,
width: this.props.width,
height: this.props.height,
startDragLngLat: this.state.startDragLngLat,
isDragging: this.state.isDragging,
onChangeViewport: this.props.onChangeViewport || this._onChangeViewport
}, this.props), [
r(SVGOverlay, {redraw: this._redrawSVGOverlay}),
r(CanvasOverlay, {redraw: this._redrawCanvasOverlay})
]);
return r(MapGL, assign({}, this.state, this.props, {
onChangeViewport: this._onChangeViewport,
overlays: function overlays(viewport) {
return [
r(SVGOverlay, assign({redraw: this._redrawSVGOverlay}, viewport)),
r(CanvasOverlay, assign({redraw: this._redrawCanvasOverlay},
viewport))
];
}.bind(this)
}, this.props));
}
});

Expand Down
31 changes: 14 additions & 17 deletions example/examples/scatterplot.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ var ScatterplotOverlayExample = React.createClass({
},

_onChangeViewport: function _onChangeViewport(opt) {
if (this.props.onChangeViewport) {
return this.props.onChangeViewport(opt);
}
this.setState({
latitude: opt.latitude,
longitude: opt.longitude,
Expand All @@ -71,23 +74,17 @@ var ScatterplotOverlayExample = React.createClass({
},

render: function render() {
return r(MapGL, assign({
latitude: this.state.latitude,
longitude: this.state.longitude,
zoom: this.state.zoom,
isDragging: this.state.isDragging,
startDragLngLat: this.state.startDragLngLat,
width: this.props.width,
height: this.props.height,
onChangeViewport: this.props.onChangeViewport || this._onChangeViewport
}, this.props), [
r(ScatterplotOverlay, {
locations: locations,
dotRadius: 2,
globalOpacity: 1,
compositeOperation: 'screen'
})
]);
return r(MapGL, assign({}, this.state, this.props, {
onChangeViewport: this._onChangeViewport,
overlays: function overlay(viewport) {
return r(ScatterplotOverlay, assign({}, viewport, {
locations: locations,
dotRadius: 2,
globalOpacity: 1,
compositeOperation: 'screen'
}));
}
}, this.props));
}
});

Expand Down

0 comments on commit f7741b0

Please sign in to comment.