-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
An option to use a feature property as ID for feature state (#8987)
* add ability to id by property for feature state * flow fixes * rework promoteId according to PR discussions * properly expose promoted ids in query methods * fix lint * use state ids that can be cast as Float64 as is; update tests * promoteId: geojson support, better flow typing, v8 docs * fix spec test * make sure id is provided in getFeatureState * minor fixes after review * hash ids > MAX_SAFE_INTEGER * overhaul promoteId validation, add render test
- Loading branch information
Showing
27 changed files
with
352 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>Mapbox GL JS debug page</title> | ||
<meta charset='utf-8'> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | ||
<link rel='stylesheet' href='../dist/mapbox-gl.css' /> | ||
<style> | ||
body { margin: 0; padding: 0; } | ||
html, body, #map { height: 100%; } | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div id='map'></div> | ||
|
||
<script src='../dist/mapbox-gl-dev.js'></script> | ||
<script src='../debug/access_token_generated.js'></script> | ||
<script> | ||
|
||
var map = window.map = new mapboxgl.Map({ | ||
container: 'map', | ||
zoom: 4, | ||
center: [-96, 38], | ||
style: {version: 8, layers: [], sources: {}} | ||
}); | ||
|
||
map.on('load', () => { | ||
|
||
map.addSource('counties', { | ||
"type": "vector", | ||
"url": "mapbox://mapbox.82pkq93d", | ||
"promoteId": {"original": "COUNTY"} | ||
}); | ||
|
||
map.addLayer({ | ||
"id": "counties", | ||
"type": "fill", | ||
"source": "counties", | ||
"source-layer": "original", | ||
"paint": { | ||
"fill-outline-color": "black", | ||
"fill-color": ["case", ["boolean", ["feature-state", "hover"], false], "red", "lightgrey"] | ||
} | ||
}); | ||
|
||
let selectedCounty = null; | ||
|
||
function resetFeatureState() { | ||
if (selectedCounty) { | ||
map.setFeatureState({source: 'counties', sourceLayer: 'original', id: selectedCounty}, {hover: false}); | ||
selectedCounty = null; | ||
} | ||
} | ||
|
||
map.on("mouseleave", "counties", () => { | ||
resetFeatureState(); | ||
}); | ||
|
||
map.on("mousemove", "counties", (e) => { | ||
const feature = e.features[0]; | ||
|
||
if (selectedCounty !== feature.id) { | ||
resetFeatureState(); | ||
map.setFeatureState({source: 'counties', sourceLayer: 'original', id: feature.id}, {hover: true}); | ||
selectedCounty = feature.id; | ||
} | ||
}); | ||
}); | ||
|
||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.