diff --git a/examples/controls/app.css b/examples/controls/app.css
index 5b00ab62..d6b7fd24 100644
--- a/examples/controls/app.css
+++ b/examples/controls/app.css
@@ -3,15 +3,18 @@ body {
background: #000;
}
-.city-pin {
- cursor: pointer;
- fill: #d00;
- stroke: none;
-}
-
-.nav {
+.options-panel {
position: absolute;
top: 0;
right: 0;
- padding: 10px;
+ max-width: 320px;
+ background: #fff;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+ padding: 12px 24px;
+ margin: 20px;
+ font-size: 13px;
+ line-height: 2;
+ color: #6b6b76;
+ text-transform: uppercase;
+ outline: none;
}
diff --git a/examples/controls/src/app.js b/examples/controls/src/app.js
index 3937b783..2ce19597 100644
--- a/examples/controls/src/app.js
+++ b/examples/controls/src/app.js
@@ -3,9 +3,11 @@ import React, {Component} from 'react';
import {render} from 'react-dom';
import MapGL, {Marker, Popup, NavigationControl} from 'react-map-gl';
+import ControlPanel from './control-panel';
import CityPin from './city-pin';
+import CityInfo from './city-info';
-import CITIES from './cities.json';
+import CITIES from '../../data/cities.json';
const token = process.env.MapboxAccessToken; // eslint-disable-line
@@ -16,7 +18,7 @@ if (!token) {
const navStyle = {
position: 'absolute',
top: 0,
- right: 0,
+ left: 0,
padding: '10px'
};
@@ -28,29 +30,16 @@ export default class App extends Component {
viewport: {
latitude: 37.785164,
longitude: -100,
- zoom: 4,
+ zoom: 3.5,
bearing: 0,
pitch: 0,
- width: window.innerWidth,
- height: window.innerHeight,
+ width: 500,
+ height: 500,
},
popupInfo: null
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.width !== this.state.viewport.width ||
- nextProps.height !== this.state.viewport.height) {
- this.setState({
- viewport: {
- ...this.state.viewport,
- width: nextProps.width,
- height: nextProps.height
- }
- });
- }
- }
-
componentDidMount() {
window.addEventListener('resize', this._resize);
this._resize();
@@ -60,19 +49,18 @@ export default class App extends Component {
window.removeEventListener('resize', this._resize);
}
- _updateViewport = (viewport) => {
- this.setState({viewport});
- }
-
_resize = () => {
- const {widthOffset, heightOffset} = this.props;
this.setState({
viewport: {
...this.state.viewport,
- width: window.innerWidth - widthOffset,
- height: window.innerHeight - heightOffset,
+ width: this.props.width || window.innerWidth,
+ height: this.props.height || window.innerHeight
}
});
+ };
+
+ _updateViewport = (viewport) => {
+ this.setState({viewport});
}
_renderCityMarker = (city, index) => {
@@ -94,7 +82,7 @@ export default class App extends Component {
longitude={popupInfo.longitude}
latitude={popupInfo.latitude}
onClose={() => this.setState({popupInfo: null})} >
- {popupInfo.city}, {popupInfo.state}
+
Map showing top 20 most populated cities of the United States. Click on a marker to learn more.
+Data source: Wikipedia
+Map showing median household income by state in year {settings.year}. + Hover over a state to see details.
+Data source: US Census Bureau
+Turn interactive features off/on.
+Dynamically show/hide map layers and change color with Immutable map style.
+Smooth animate of the viewport.
+