Skip to content

Instantly share code, notes, and snippets.

@danswick

danswick/README.md

Last active February 7, 2020 20:18
Show Gist options
  • Save danswick/1c28ea2f36faa3f066104ba5780c3387 to your computer and use it in GitHub Desktop.
Save danswick/1c28ea2f36faa3f066104ba5780c3387 to your computer and use it in GitHub Desktop.
Download ZIP
Load a static placeholder map until Mapbox GL JS finishes rendering
Raw
README.md

This page has two maps of the exact same area: one fully interactive Mapbox GL JS map and a simple static map. The Mapbox GL JS map is hidden at the beginning and only the static map is visible. When the Mapbox GL JS map finishes its first full render (map.on('load',...)), it seamlessly replaces the static map.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 5px 20px 20px 20px; padding: 2em; }
#content {
width: 800px;
}
#bigMap {
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.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og');
width: 100%;
height: 100%;
grid-column: 1;
grid-row: 1;
}
</style>
</head>
<body>
<header>
<h2>My dope site</h2>
</header>
<div id="content">
<div id="bigMap">
<div id="map"></div>
<div id="static"></div>
</div>
<div>Yeah, I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more. I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more (Kio, Kio). I got the horses in the back. Horse tack is attached. Hat is matte black. Got the boots that's black to match. Ridin' on a horse, ha. You can whip your Porsche. I been in the valley. You ain't been up off that porch, now. Can't nobody tell me nothin'. You can't tell me nothin'. Can't nobody tell me nothin'. You can't tell me nothin'. Ridin' on a tractor. Lean all in my bladder. Cheated on my baby. You can go and ask her. My life is a movie. Bull ridin' and boobies. Cowboy hat from Gucci. Wrangler on my booty. Can't nobody tell me nothin'. You can't tell me nothin'. Can't nobody tell me nothin'. You can't tell me nothin'. Yeah, I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more. I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more. I got the</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
var 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
});
map.on('load', function(e) {
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