_routeUpdated = (ghostbike) => {
const {viewport} = this.state
const center = [viewport.width, viewport.height]
const mercator = ViewportMercator(viewport);
//console.log(ghostbike.id + ' ' + this.props.me.id)
//if (this._isMe(ghostbike.id)) {
var lngLat = [ghostbike.longitude, ghostbike.latitude]
const pixelLngLat = mercator.project(lngLat)
const diff = [pixelLngLat[0]-center[0], pixelLngLat[1]-center[1]],
centeredPixel = [pixelLngLat[0]+diff[0], pixelLngLat[1]+diff[1]]
const diffLngLat = mercator.unproject(centeredPixel)
const newViewport = {
longitude: diffLngLat[0],
latitude: diffLngLat[1],
isDragging: true,
startDragLngLat: pixelLngLat
};
//this._onChangeViewport(newViewport)
//}
}
_redraw: function _redraw() {
this._elapsed = Date.now() - this._elapsed
const mercator = ViewportMercator(this.props);
this._renderer.resize(this.props.width, this.props.height);
this._redrawLocations(mercator)
this._redrawPolylines(mercator)
this._redrawAccidents(mercator)
this._renderer.render(this._stage);
},
_redraw: function _redraw() {
var mercator = ViewportMercator(this.props);
this._heatmap.clear();
this._heatmap.adjustSize();
this.props.locations.forEach(function each(location) {
var size = this.props.sizeAccessor(location);
var intensity = this.props.intensityAccessor(location);
var pixel = mercator.project(this.props.lngLatAccessor(location));
this._heatmap.addPoint(pixel[0], pixel[1], size, intensity);
}, this);
this._heatmap.update();
this._heatmap.display();
},
setViewport() {
const {width, height, latitude, longitude, zoom} = this.props;
this.setState({
viewport: {x: 0, y: 0, width, height},
mercator: ViewportMercator({
width, height, latitude, longitude, zoom,
tileSize: 512
})
});
this.setUniforms({
viewport: [0, 0, width, height],
mercatorScale: Math.pow(2, zoom),
mercatorCenter: [longitude, latitude]
});
log(3, this.state.viewport, latitude, longitude, zoom);
}
_redraw() {
const pixelRatio = window.devicePixelRatio || 1;
const canvas = this.refs.overlay;
const ctx = canvas.getContext('2d');
ctx.save();
ctx.scale(pixelRatio, pixelRatio);
const mercator = ViewportMercator(this.props);
this.props.redraw({
width: this.props.width,
height: this.props.height,
ctx,
project: mercator.project,
unproject: mercator.unproject,
isDragging: this.props.isDragging
});
ctx.restore();
}
render: function render() {
var style = assign({}, {
pointerEvents: 'none',
position: 'absolute',
left: 0,
top: 0
}, this.props.style)
var mercator = ViewportMercator(this.props)
return r.svg({
ref: 'overlay',
width: this.props.width,
height: this.props.height,
style: style
}, this.props.redraw({
width: this.props.width,
height: this.props.height,
project: mercator.project,
unproject: mercator.unproject,
isDragging: this.props.isDragging
}))
}
_redraw() {
const pixelRatio = window.devicePixelRatio;
const canvas = this.refs.overlay;
const ctx = canvas.getContext('2d');
const mercator = ViewportMercator(this.props);
ctx.save();
ctx.scale(pixelRatio, pixelRatio);
ctx.clearRect(0, 0, this.props.width, this.props.height);
function projectPoint(lon, lat) {
const point = mercator.project([lon, lat]);
/* eslint-disable no-invalid-this */
this.stream.point(point[0], point[1]);
/* eslint-enable no-invalid-this */
}
if (this.props.renderWhileDragging || !this.props.isDragging) {
const transform = geoTransform({point: projectPoint});
const path = geoPath().projection(transform).context(ctx);
this._drawFeatures(ctx, path);
}
ctx.restore();
}
render() {
const {width, height, isDragging} = this.props;
const style = {
pointerEvents: 'none',
position: 'absolute',
left: 0,
top: 0,
...this.props.style
};
const mercator = ViewportMercator(this.props);
const {project, unproject} = mercator;
return (
<svg
ref="overlay"
width={ width }
height={ height }
style={ style }>
{ this.props.redraw({width, height, project, unproject, isDragging}) }
</svg>
);
}