Skip to content

Instantly share code, notes, and snippets.

@malwoodsantoro

malwoodsantoro/index.html

Last active November 19, 2020 22:33
Show Gist options
  • Save malwoodsantoro/0b4050d85df318ab27dd5d39ba7db23c to your computer and use it in GitHub Desktop.
Save malwoodsantoro/0b4050d85df318ab27dd5d39ba7db23c to your computer and use it in GitHub Desktop.
Download ZIP
Swap static map on click
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="robots" content="noindex, nofollow" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src=https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js></script>
<link
href=https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css
rel="stylesheet"
/>
<style>
body {
margin: 5px 20px 20px 20px;
padding: 2em;
}
#content {
width: 600px;
}
#container {
width: 600px;
height: 400px;
margin: 20px 0px;
display: grid;
}
#map {
grid-column: 1;
grid-row: 1;
width: 100%;
height: 100%;
visibility: hidden;
}
#static {
background-image: url("https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-85.757,38.25,10/600x400?access_token=pk.eyJ1Ijoic3ZjLW9rdGEtbWFwYm94LXN0YWZmLWFjY2VzcyIsImEiOiJja2VtbnQ1aGwxZXEyMnhwaWRidzF4cHliIn0.rZ8AmESrT0cz1V3FgymCvg");
width: 100%;
height: 100%;
grid-column: 1;
grid-row: 1;
}
</style>
</head>
<body>
<header>
<h2>Title of my webpage</h2>
</header>
<div id="content">
<div id="container">
<div id="map"></div>
<div id="static"></div>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script>
mapboxgl.accessToken = "pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w";
const map = new mapboxgl.Map({
container: "map", // container id
style: "mapbox://styles/mapbox/streets-v11", // stylesheet location
center: [-85.757, 38.25], // starting position [lng, lat]
zoom: 10, // starting zoom
});
document.getElementById('static').addEventListener("click", function() {
var mapContainerEl = document.getElementById("map");
mapContainerEl.style.visibility = "visible";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment