@@ -93,11 +84,14 @@ export default class App extends Component {
{...viewport}
width="100%"
height="100%"
- mapStyle={mapStyle}
+ mapStyle="mapbox://styles/mapbox/light-v9"
onViewportChange={this._onViewportChange}
mapboxApiAccessToken={MAPBOX_TOKEN}
onHover={this._onHover}
>
+
+
+
{this._renderTooltip()}
diff --git a/examples/geojson/src/map-style.js b/examples/geojson/src/map-style.js
index 7ab10f1b..9fda04a6 100644
--- a/examples/geojson/src/map-style.js
+++ b/examples/geojson/src/map-style.js
@@ -1,12 +1,7 @@
-import {fromJS} from 'immutable';
-import MAP_STYLE from '../../map-style-basic-v8.json';
-
// For more information on data-driven styles, see https://www.mapbox.com/help/gl-dds-ref/
-export const dataLayer = fromJS({
+export const dataLayer = {
id: 'data',
- source: 'incomeByState',
type: 'fill',
- interactive: true,
paint: {
'fill-color': {
property: 'percentile',
@@ -24,6 +19,4 @@ export const dataLayer = fromJS({
},
'fill-opacity': 0.8
}
-});
-
-export const defaultMapStyle = fromJS(MAP_STYLE);
+};
diff --git a/examples/heatmap/src/app.js b/examples/heatmap/src/app.js
index 0a0ef2f4..576463f7 100644
--- a/examples/heatmap/src/app.js
+++ b/examples/heatmap/src/app.js
@@ -1,11 +1,27 @@
import React, {Component} from 'react';
import {render} from 'react-dom';
-import MapGL from 'react-map-gl';
+import MapGL, {Source, Layer} from 'react-map-gl';
import ControlPanel from './control-panel';
import {json as requestJson} from 'd3-request';
+import {heatmapLayer} from './map-style';
const MAPBOX_TOKEN = ''; // Set your mapbox token here
-const HEATMAP_SOURCE_ID = 'earthquakes-source';
+
+function filterFeaturesByDay(featureCollection, time) {
+ const date = new Date(time);
+ const year = date.getFullYear();
+ const month = date.getMonth();
+ const day = date.getDate();
+ const features = featureCollection.features.filter(feature => {
+ const featureDate = new Date(feature.properties.time);
+ return (
+ featureDate.getFullYear() === year &&
+ featureDate.getMonth() === month &&
+ featureDate.getDate() === day
+ );
+ });
+ return {type: 'FeatureCollection', features};
+}
export default class App extends Component {
constructor(props) {
@@ -27,79 +43,11 @@ export default class App extends Component {
earthquakes: null
};
- this._mapRef = React.createRef();
- this._handleMapLoaded = this._handleMapLoaded.bind(this);
this._handleChangeDay = this._handleChangeDay.bind(this);
this._handleChangeAllDay = this._handleChangeAllDay.bind(this);
}
- _mkFeatureCollection = features => ({type: 'FeatureCollection', features});
-
- _filterFeaturesByDay = (features, time) => {
- const date = new Date(time);
- const year = date.getFullYear();
- const month = date.getMonth();
- const day = date.getDate();
- return features.filter(feature => {
- const featureDate = new Date(feature.properties.time);
- return (
- featureDate.getFullYear() === year &&
- featureDate.getMonth() === month &&
- featureDate.getDate() === day
- );
- });
- };
-
- _mkHeatmapLayer = (id, source) => {
- const MAX_ZOOM_LEVEL = 9;
- return {
- id,
- source,
- maxzoom: MAX_ZOOM_LEVEL,
- type: 'heatmap',
- paint: {
- // Increase the heatmap weight based on frequency and property magnitude
- 'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
- // Increase the heatmap color weight weight by zoom level
- // heatmap-intensity is a multiplier on top of heatmap-weight
- 'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, MAX_ZOOM_LEVEL, 3],
- // Color ramp for heatmap. Domain is 0 (low) to 1 (high).
- // Begin color ramp at 0-stop with a 0-transparancy color
- // to create a blur-like effect.
- 'heatmap-color': [
- 'interpolate',
- ['linear'],
- ['heatmap-density'],
- 0,
- 'rgba(33,102,172,0)',
- 0.2,
- 'rgb(103,169,207)',
- 0.4,
- 'rgb(209,229,240)',
- 0.6,
- 'rgb(253,219,199)',
- 0.8,
- 'rgb(239,138,98)',
- 0.9,
- 'rgb(255,201,101)'
- ],
- // Adjust the heatmap radius by zoom level
- 'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, MAX_ZOOM_LEVEL, 20],
- // Transition from heatmap to circle layer by zoom level
- 'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0]
- }
- };
- };
-
- _onViewportChange = viewport => this.setState({viewport});
-
- _getMap = () => {
- return this._mapRef.current ? this._mapRef.current.getMap() : null;
- };
-
- _handleMapLoaded = event => {
- const map = this._getMap();
-
+ componentDidMount() {
requestJson(
'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
(error, response) => {
@@ -111,59 +59,56 @@ export default class App extends Component {
const startTime = features[features.length - 1].properties.time;
this.setState({
+ data: response,
earthquakes: response,
endTime,
startTime,
selectedTime: endTime
});
- map.addSource(HEATMAP_SOURCE_ID, {type: 'geojson', data: response});
- map.addLayer(this._mkHeatmapLayer('heatmap-layer', HEATMAP_SOURCE_ID));
}
}
);
- };
+ }
+
+ _onViewportChange = viewport => this.setState({viewport});
_handleChangeDay = time => {
this.setState({selectedTime: time});
- if (this.state.earthquakes !== null && this.state.earthquakes.features) {
- const features = this._filterFeaturesByDay(this.state.earthquakes.features, time);
- this._setMapData(features);
+ if (this.state.earthquakes) {
+ this.setState({data: filterFeaturesByDay(this.state.earthquakes, time)});
}
};
_handleChangeAllDay = allDay => {
this.setState({allDay});
- if (this.state.earthquakes !== null && this.state.earthquakes.features) {
- this._setMapData(
- allDay
- ? this.state.earthquakes.features
- : this._filterFeaturesByDay(this.state.earthquakes.features, this.state.selectedTime)
- );
- }
- };
-
- _setMapData = features => {
- const map = this._getMap();
- if (map) {
- map.getSource(HEATMAP_SOURCE_ID).setData(this._mkFeatureCollection(features));
+ if (this.state.earthquakes) {
+ this.setState({
+ data: allDay
+ ? this.state.earthquakes
+ : filterFeaturesByDay(this.state.earthquakes, this.state.selectedTime)
+ });
}
};
render() {
- const {viewport, allDay, selectedTime, startTime, endTime} = this.state;
+ const {viewport, data, allDay, selectedTime, startTime, endTime} = this.state;
return (
+ >
+ {data && (
+
+
+
+ )}
+