diff --git a/website-gatsby/ocular-config.js b/website-gatsby/ocular-config.js index 6afce60068a..7822b804adb 100644 --- a/website-gatsby/ocular-config.js +++ b/website-gatsby/ocular-config.js @@ -160,9 +160,9 @@ based maps.', }, { title: 'TextLayer', - path: 'examples/text', + path: 'examples/website/text-layer', image: 'images/examples/demo-thumb-text.jpg', - componentUrl: resolve(__dirname, '../examples/website/tagmap/app.js') + componentUrl: resolve(__dirname, './src/examples/example-text-layer.jsx') }, { title: 'TileLayer', diff --git a/website-gatsby/src/examples/example-text-layer.jsx b/website-gatsby/src/examples/example-text-layer.jsx new file mode 100644 index 00000000000..f844f756221 --- /dev/null +++ b/website-gatsby/src/examples/example-text-layer.jsx @@ -0,0 +1,81 @@ +import React, {Component} from 'react'; +import InfoPanel from '../components/info-panel'; +import {MAPBOX_STYLES, DATA_URI, GITHUB_TREE} from '../constants/defaults'; +import {loadData} from '../utils/data-utils'; +import {readableInteger} from '../utils/format-utils'; +import App from '../../../examples/website/tagmap/app'; + +export default class TextLayerDemo extends Component { + constructor(props) { + super(props); + this.state = { + data: [], + dataCount: 0, + cluster: true, + fontSize: 32 + }; + + this._handleChange = this._handleChange.bind(this); + } + + componentDidMount() { + loadData(`${DATA_URI}/hashtags100k.txt`, '/workers/hashtags-decoder.js', (response, meta) => { + this.setState({ + data: response, + dataCount: meta.count + }); + }); + } + + _handleChange(event) { + switch (event.target.name) { + case 'font-size': + this.setState({fontSize: parseInt(event.target.value)}); + break; + case 'cluster': + this.setState({cluster: event.target.checked}); + break; + } + } + + render() { + const {data, dataCount, cluster, fontSize} = this.state; + + return ( +
Data set from Twitter showing hashtags with geolocation.
++ Data source: + Twitter +
+