Skip to content

Commit

Permalink
fix mapbox tile test app
Browse files Browse the repository at this point in the history
  • Loading branch information
Xiaoji Chen committed Jan 5, 2020
1 parent 28d3c4f commit 6de7138
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 81 deletions.
69 changes: 25 additions & 44 deletions test/apps/mapbox-tile/app.js
@@ -1,8 +1,8 @@
/* global document fetch window */
/* global document fetch */
/* eslint-disable no-console */
import React, {PureComponent} from 'react';
import {render} from 'react-dom';
import DeckGL from 'deck.gl';
import DeckGL from '@deck.gl/react';
import {TileLayer} from '@deck.gl/geo-layers';

import {decodeTile} from './utils/decode';
Expand All @@ -15,15 +15,14 @@ const INITIAL_VIEW_STATE = {
pitch: 0,
longitude: -122.45,
latitude: 37.78,
zoom: 12,
minZoom: 2,
maxZoom: 14,
height: window.innerHeight,
width: window.innerWidth
zoom: 12
};

const MAP_LAYER_STYLES = {
stroked: false,
stroked: true,
extruded: true,

getElevation: f => (f.properties.extrude && f.properties.height) || 0,

getLineColor: [192, 192, 192],

Expand Down Expand Up @@ -61,12 +60,8 @@ const MAP_LAYER_STYLES = {
function getTileData({x, y, z}) {
const mapSource = `https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/${z}/${x}/${y}.vector.pbf?access_token=${MAPBOX_TOKEN}`;
return fetch(mapSource)
.then(response => {
return response.arrayBuffer();
})
.then(buffer => {
return decodeTile(x, y, z, buffer);
});
.then(response => response.arrayBuffer())
.then(buffer => decodeTile(x, y, z, buffer));
}

class Root extends PureComponent {
Expand All @@ -79,7 +74,7 @@ class Root extends PureComponent {
}

_onClick(info) {
this.setState({clickedItem: info && info.object});
this.setState({clickedItem: info.object});
}

_renderClickedItem() {
Expand All @@ -88,40 +83,26 @@ class Root extends PureComponent {
return null;
}

return (
<div
style={{
position: 'fixed',
zIndex: 9,
margin: '20px',
left: 0,
bottom: 0,
whiteSpace: 'nowrap',
pointerEvents: 'none'
}}
>
{JSON.stringify(clickedItem.properties)}
</div>
);
return <div className="clicked-info">{JSON.stringify(clickedItem.properties)}</div>;
}

render() {
return (
<div>
<DeckGL
initialViewState={INITIAL_VIEW_STATE}
controller={true}
onLayerClick={this._onClick}
layers={[
new TileLayer({
...MAP_LAYER_STYLES,
pickable: true,
getTileData
})
]}
/>
<DeckGL
initialViewState={INITIAL_VIEW_STATE}
controller={true}
onClick={this._onClick}
layers={[
new TileLayer({
...MAP_LAYER_STYLES,
getPolygonOffset: null,
pickable: true,
getTileData
})
]}
>
{this._renderClickedItem()}
</div>
</DeckGL>
);
}
}
Expand Down
11 changes: 10 additions & 1 deletion test/apps/mapbox-tile/index.html
Expand Up @@ -5,9 +5,18 @@
<title>deck.gl example</title>
<style type="text/css">
body {margin: 0; padding: 0; background: #fff;}
.clicked-info {
position: fixed;
z-index: 9;
margin: 20px;
left: 0;
bottom: 0;
white-space: nowrap;
pointer-events: none;
}
</style>
</head>
<body>
<script src='bundle.js'></script>
<script src='app.js'></script>
</body>
</html>
16 changes: 9 additions & 7 deletions test/apps/mapbox-tile/package.json
Expand Up @@ -5,15 +5,17 @@
},
"dependencies": {
"@mapbox/vector-tile": "^1.3.1",
"deck.gl": "^7.3.0-beta",
"deck.gl": "^8.0.0",
"pbf": "^3.1.0",
"react": "^16.0.0",
"react-dom": "^16.0.0"
"react": "^16.3.0",
"react-dom": "^16.3.0"
},
"devDependencies": {
"buble": "^0.19.3",
"buble-loader": "^0.5.0",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
"@babel/core": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.1"
}
}
28 changes: 17 additions & 11 deletions test/apps/mapbox-tile/utils/decode.js
@@ -1,40 +1,46 @@
import Protobuf from 'pbf';
import {VectorTile} from '@mapbox/vector-tile';
import {worldToLngLat} from 'viewport-mercator-project';
import {vectorTileFeatureToGeoJSON} from './feature';

const TILE_SIZE = 512;
const PI = Math.PI;
const PI_4 = PI / 4;
const RADIANS_TO_DEGREES_2 = 360 / PI;

export function decodeTile(x, y, z, arrayBuffer) {
const tile = new VectorTile(new Protobuf(arrayBuffer));

const result = [];
const xProj = x * TILE_SIZE;
const yProj = y * TILE_SIZE;

const scale = Math.pow(2, z);
const projX = x / scale;
const projY = y / scale;

const projectFunc = project.bind(null, xProj, yProj, scale);
const projectFunc = project.bind(null, projX, projY, scale);

for (const layerName in tile.layers) {
const vectorTileLayer = tile.layers[layerName];
for (let i = 0; i < vectorTileLayer.length; i++) {
const vectorTileFeature = vectorTileLayer.feature(i);
const features = vectorTileFeatureToGeoJSON(vectorTileFeature, projectFunc);
features.forEach(f => {
for (const f of features) {
f.properties.layer = layerName;
result.push(f);
});
}
}
}
return result;
}

function project(x, y, scale, line, extent) {
const sizeToPixel = extent / TILE_SIZE;
const pixelToCommon = 1 / extent / scale;

for (let ii = 0; ii < line.length; ii++) {
const p = line[ii];
for (let i = 0; i < line.length; i++) {
const p = line[i];
// common space
const cx = x + p[0] * pixelToCommon;
const cy = y + p[1] * pixelToCommon;
// LNGLAT
line[ii] = worldToLngLat([x + p[0] / sizeToPixel, y + p[1] / sizeToPixel], scale);
p[0] = cx * 360 - 180;
p[1] = (Math.atan(Math.exp(PI - cy * 2 * PI)) - PI_4) * RADIANS_TO_DEGREES_2;
}
}
27 changes: 9 additions & 18 deletions test/apps/mapbox-tile/webpack.config.js
@@ -1,42 +1,33 @@
// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
// delete the local development overrides at the bottom of this file

// avoid destructuring for older Node version support
const resolve = require('path').resolve;
const webpack = require('webpack');

const CONFIG = {
mode: 'development',

entry: {
app: resolve('./app.js')
app: './app.js'
},

devtool: 'source-map',

module: {
rules: [
{
// Compile ES2015 using buble
// Transpile ES6 to ES5 with babel
// Remove if your app does not use JSX or you don't need to support old browsers
test: /\.js$/,
loader: 'buble-loader',
include: [resolve('.')],
loader: 'babel-loader',
exclude: [/node_modules/],
options: {
objectAssign: 'Object.assign'
presets: ['@babel/preset-react']
}
}
]
},

resolve: {
alias: {
// From mapbox-gl-js README. Required for non-browserify bundlers (e.g. webpack):
'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
}
},

// Optional: Enables reading mapbox token from environment variable
plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken'])]
};

// This line enables bundling against src in this repo rather than installed deck.gl module
module.exports = env => (env ? require('../webpack.config.local')(CONFIG)(env) : CONFIG);
// This line enables bundling against src in this repo rather than installed module
module.exports = env => (env ? require('..//webpack.config.local')(CONFIG)(env) : CONFIG);

0 comments on commit 6de7138

Please sign in to comment.