diff --git a/website-gatsby/ocular-config.js b/website-gatsby/ocular-config.js index 7822b804adb..4099863a462 100644 --- a/website-gatsby/ocular-config.js +++ b/website-gatsby/ocular-config.js @@ -166,9 +166,9 @@ based maps.', }, { title: 'TileLayer', - path: 'examples/maptile', + path: 'examples/website/map-tile', image: 'images/examples/demo-thumb-tile.jpg', - componentUrl: resolve(__dirname, '../examples/website/map-tile/app.js') + componentUrl: resolve(__dirname, './src/examples/example-tile-layer.jsx') }, { title: 'TripsLayer', diff --git a/website-gatsby/src/examples/example-tile-layer.jsx b/website-gatsby/src/examples/example-tile-layer.jsx new file mode 100644 index 00000000000..18fa1ec4c9e --- /dev/null +++ b/website-gatsby/src/examples/example-tile-layer.jsx @@ -0,0 +1,47 @@ +import React, {Component} from 'react'; +import InfoPanel from '../components/info-panel'; +import {MAPBOX_STYLES, GITHUB_TREE} from '../constants/defaults'; +import App from '../../../examples/website/map-tile/app'; + +export default class TextLayerDemo extends Component { + constructor(props) { + super(props); + this.state = { + autoHighlight: true + }; + + this._handleChange = this._handleChange.bind(this); + } + + _handleChange(event) { + this.setState({autoHighlight: event.target.checked}); + } + + render() { + const {autoHighlight} = this.state; + + return ( +
+ + +

Raster Map Tiles

+

+ OpenStreetMap data source: + Wiki and + Tile Servers +

+
+
+ + +
+
+
+ ); + } +}