Skip to content

Commit

Permalink
Merge pull request #647 from etalab/tusbar/use-feature-attributes
Browse files Browse the repository at this point in the history 
Use feature states for map highlights
  • Loading branch information
@tusbar
tusbar committed Jun 21, 2018
2 parents 0974862 + afd2abe commit 8cfdda6
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 100 deletions.
14 changes: 5 additions & 9 deletions components/centered-map/enhance-map-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
}))
}
}
Expand Down
114 changes: 40 additions & 74 deletions components/centered-map/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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']
})
Expand All @@ -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']
})
Expand All @@ -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
},
Expand All @@ -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
}
})
Expand All @@ -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
Expand Down Expand Up @@ -256,6 +224,4 @@ class CenteredMap extends React.Component {
}
}

export default enhanceMapData(UNIQUE_FEATURE_ID)(
CenteredMap
)
export default enhanceMapData(CenteredMap)
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
32 changes: 16 additions & 16 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
version "0.1.0"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down

0 comments on commit 8cfdda6

Please sign in to comment.