diff --git a/components/centered-map/enhance-map-data.js b/components/centered-map/enhance-map-data.js index 00c3e6ec2..1185a714e 100644 --- a/components/centered-map/enhance-map-data.js +++ b/components/centered-map/enhance-map-data.js @@ -6,7 +6,7 @@ import flip from '@turf/flip' import {isBboxFlipped, flipBbox} from '../../lib/geo/bbox' -export default uniqueFeatureId => Map => hoist(class extends React.PureComponent { +export default Map => hoist(class extends React.PureComponent { static propTypes = { frozen: PropTypes.bool, extent: PropTypes.object, @@ -37,21 +37,17 @@ export default uniqueFeatureId => Map => hoist(class extends React.PureComponent } } - if (!frozen && uniqueFeatureId) { - // We’re adding a unique property to all features - // so that we can easily identify them later. + if (!frozen) { + // We’re adding a unique id to all features so that we can easily identify them later. if (transformedData.features) { if (!transformed) { transformedData = {...transformedData} } - transformedData.features = transformedData.features.map((feature, index) => ({ + transformedData.features = transformedData.features.map((feature, id) => ({ ...feature, - properties: { - ...feature.properties, - [uniqueFeatureId]: index - } + id })) } } diff --git a/components/centered-map/map.js b/components/centered-map/map.js index c517a2b63..ff17aa590 100644 --- a/components/centered-map/map.js +++ b/components/centered-map/map.js @@ -7,8 +7,6 @@ import enhanceMapData from './enhance-map-data' import Feature from './feature' -const UNIQUE_FEATURE_ID = '$GDV_UNIQUE_FEATURE_ID$' - class CenteredMap extends React.Component { static propTypes = { data: PropTypes.object.isRequired, @@ -79,34 +77,24 @@ class CenteredMap extends React.Component { data }) - map.addSource('hover', { - type: 'geojson', - data: { - type: 'FeatureCollection', - features: [] - } - }) - map.addLayer({ id: 'point', type: 'circle', source: 'data', paint: { 'circle-radius': 5, - 'circle-color': '#3099df', - 'circle-opacity': 0.6 - }, - filter: ['==', '$type', 'Point'] - }) - - map.addLayer({ - id: 'point-hover', - type: 'circle', - source: 'hover', - paint: { - 'circle-radius': 5, - 'circle-color': '#2c3e50', - 'circle-opacity': 0.8 + 'circle-color': [ + 'case', + ['boolean', ['feature-state', 'hover'], false], + '#2c3e50', + '#3099df' + ], + 'circle-opacity': [ + 'case', + ['boolean', ['feature-state', 'hover'], false], + 0.8, + 0.6 + ] }, filter: ['==', '$type', 'Point'] }) @@ -116,20 +104,18 @@ class CenteredMap extends React.Component { type: 'fill', source: 'data', paint: { - 'fill-color': '#3099df', - 'fill-opacity': 0.3 - }, - filter: ['==', '$type', 'Polygon'] - }) - - map.addLayer({ - id: 'polygon-fill-hover', - type: 'fill', - source: 'hover', - paint: { - 'fill-color': '#9ab0d1' - // We’re not setting an opacity here. - // There will be overlapping features due to how vector tiles work. + 'fill-color': [ + 'case', + ['boolean', ['feature-state', 'hover'], false], + '#2c3e50', + '#3099df' + ], + 'fill-opacity': [ + 'case', + ['boolean', ['feature-state', 'hover'], false], + 0.5, + 0.3 + ] }, filter: ['==', '$type', 'Polygon'] }) @@ -150,19 +136,12 @@ class CenteredMap extends React.Component { type: 'line', source: 'data', paint: { - 'line-color': '#3099df', - 'line-width': 5, - 'line-opacity': 0.8 - }, - filter: ['==', '$type', 'LineString'] - }) - - map.addLayer({ - id: 'line-hover', - type: 'line', - source: 'hover', - paint: { - 'line-color': '#2c3e50', + 'line-color': [ + 'case', + ['boolean', ['feature-state', 'hover'], false], + '#2c3e50', + '#3099df' + ], 'line-width': 5, 'line-opacity': 0.8 }, @@ -177,26 +156,16 @@ class CenteredMap extends React.Component { const [feature] = event.features - const sourceFeatures = map.querySourceFeatures('data', { - filter: [ - '==', UNIQUE_FEATURE_ID, feature.properties[UNIQUE_FEATURE_ID] - ] - }) - - // Eventually, we’ll have to @turf/union the sourceFeatures - // when https://github.com/w8r/martinez/issues/51 is fixed. - - map.getSource('hover').setData({ - type: 'FeatureCollection', - features: sourceFeatures - }) + if (this.highlighted) { + map.setFeatureState({source: 'data', id: this.highlighted}, {hover: false}) + } - const properties = {...feature.properties} - delete properties[UNIQUE_FEATURE_ID] + this.highlighted = feature.id + map.setFeatureState({source: 'data', id: this.highlighted}, {hover: true}) this.setState({ highlight: { - properties, + properties: feature.properties, count: event.features.length } }) @@ -207,10 +176,9 @@ class CenteredMap extends React.Component { const canvas = map.getCanvas() canvas.style.cursor = '' - map.getSource('hover').setData({ - type: 'FeatureCollection', - features: [] - }) + if (this.highlighted) { + map.setFeatureState({source: 'data', id: this.highlighted}, {hover: false}) + } this.setState({ highlight: null @@ -256,6 +224,4 @@ class CenteredMap extends React.Component { } } -export default enhanceMapData(UNIQUE_FEATURE_ID)( - CenteredMap -) +export default enhanceMapData(CenteredMap) diff --git a/package.json b/package.json index 742d01fb0..330966057 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "isomorphic-unfetch": "^2.0.0", "lodash": "^4.17.10", "lodash-es": "^4.17.10", - "mapbox-gl": "^0.45.0", + "mapbox-gl": "^0.46.0", "marked": "^0.4.0", "moment": "^2.22.2", "next": "^6.0.3", diff --git a/yarn.lock b/yarn.lock index 5778c3742..f710851ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -789,17 +789,13 @@ dependencies: wgs84 "0.0.0" -"@mapbox/gl-matrix@^0.0.1": - version "0.0.1" - resolved "https://registry.yarnpkg.com/@mapbox/gl-matrix/-/gl-matrix-0.0.1.tgz#e5126aab4d64c36b81c7a97d0ae0dddde5773d2b" - "@mapbox/jsonlint-lines-primitives@^2.0.1": version "2.0.1" resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.1.tgz#bc4c1593e2ec2371e2771c518068d6eab8eeae58" -"@mapbox/mapbox-gl-supported@^1.3.1": - version "1.3.1" - resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.3.1.tgz#81bd3a5e3cfdc40047608656ee9b519e02216bf1" +"@mapbox/mapbox-gl-supported@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.4.0.tgz#36946b22944fe2cfa43cfafd5ef36fdb54a069e4" "@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0": version "0.1.0" @@ -3782,9 +3778,9 @@ geojson-rewind@^0.3.0: concat-stream "~1.6.0" minimist "1.2.0" -geojson-vt@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.1.0.tgz#37b63d9ab7fafc9861dacc9aef20022df135074a" +geojson-vt@^3.1.2: + version "3.1.3" + resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.1.3.tgz#f5185ea3b476832008bd824039bccdf14951f2fb" get-caller-file@^1.0.1: version "1.0.2" @@ -3816,6 +3812,10 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" +gl-matrix@^2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-2.6.1.tgz#1bc7f7b396f4ae80abdb4db9a98cd07d170b9004" + glob-base@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4" @@ -5524,13 +5524,12 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" -mapbox-gl@^0.45.0: - version "0.45.0" - resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-0.45.0.tgz#af71cc824f0d7e51ccd5c505eaae411bc0910ccd" +mapbox-gl@^0.46.0: + version "0.46.0" + resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-0.46.0.tgz#7deca240ad1690ff783ebe66496ce311b2896f50" dependencies: - "@mapbox/gl-matrix" "^0.0.1" "@mapbox/jsonlint-lines-primitives" "^2.0.1" - "@mapbox/mapbox-gl-supported" "^1.3.1" + "@mapbox/mapbox-gl-supported" "^1.4.0" "@mapbox/point-geometry" "^0.1.0" "@mapbox/shelf-pack" "^3.1.0" "@mapbox/tiny-sdf" "^1.1.0" @@ -5541,7 +5540,8 @@ mapbox-gl@^0.45.0: csscolorparser "~1.0.2" earcut "^2.1.3" geojson-rewind "^0.3.0" - geojson-vt "^3.1.0" + geojson-vt "^3.1.2" + gl-matrix "^2.6.1" gray-matter "^3.0.8" grid-index "^1.0.0" minimist "0.0.8"