Skip to content

Instantly share code, notes, and snippets.

@samgehret

samgehret/index.html

Created March 7, 2019 20:02
Show Gist options
  • Save samgehret/9225832e63f5996e8e2c46d2bebb9b6e to your computer and use it in GitHub Desktop.
Save samgehret/9225832e63f5996e8e2c46d2bebb9b6e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title><!-- Your title goes here --></title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='shortcut icon' href='https://static-assets.mapbox.com/branding/favicon/v1/favicon.ico' type='image/x-icon'>
<!-- Mapbox GL-JS CSS -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Assembly -->
<link href='https://api.mapbox.com/mapbox-assembly/v0.21.0/assembly.min.css' rel='stylesheet'>
<script async defer src="https://api.mapbox.com/mapbox-assembly/v0.21.0/assembly.js"></script>
<link href='https://api.mapbox.com/mapbox-assembly/mapbox-addon/v0.3.0/assembly.min.css' rel='stylesheet'>
<script src='https://api.mapbox.com/mapbox-assembly/mapbox-addon/v0.3.0/assembly.js'></script>
<!-- Custom styles -->
<!-- <link href='main.css' rel='stylesheet' type="text/css"/> -->
</head>
<body>
<div class='viewport-full relative clip'>
<div class='viewport-twothirds viewport-full-ml relative'>
<div id='map' class='absolute top left right bottom'></div>
</div>
<div class='absolute top-ml left bottom z1 w-full w300-ml p12-ml'>
<div class='viewport-third h-auto-ml hmax-full bg-white round-ml shadow-darken5 scroll-auto'>
<div class='p12 scroll-auto'>
<h3 class='txt-m txt-bold mb6'>Choose your ticket</h3>
<button class='btn'>Default</button>
</div>
<footer class='p12 bg-gray-faint round-b-ml txt-s'>
Footer content here
</footer>
</div>
</div>
</div>
<script>
mapboxgl.accessToken = "pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/samgehret/cjsmo7aep1glx1fpfcviheg4p?fresh=true",
center: [-125.544, 38.581],
zoom: 5
});
var hoveredStateId = null;
map.on("load", () => {
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point);
console.log(features)
});
map.addLayer({
"id": "venue-fills",
"type": "fill",
"source": "composite",
"source-layer": "features",
"layout": {},
"paint": {
"fill-color": "red",
"fill-opacity": ["case",
["boolean", ["feature-state", "hover"], false],
1,
0.5
]
}
});
map.on("mousemove", "venue-fills", function (e) {
if (e.features.length > 0) {
if (hoveredStateId) {
map.setFeatureState({
source: 'composite',
sourceLayer: "features",
id: hoveredStateId
}, {
hover: false
});
}
hoveredStateId = e.features[0].id;
map.setFeatureState({
source: 'composite',
sourceLayer: "features",
id: hoveredStateId
}, {
hover: true
});
}
});
// When the mouse leaves the state-fill layer, update the feature state of the
// previously hovered feature.
map.on("mouseleave", "venue-fills", function () {
if (hoveredStateId) {
map.setFeatureState({
source: 'composite',
sourceLayer: "features",
id: hoveredStateId
}, {
hover: false
});
}
hoveredStateId = null;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment