danswick · February 7, 2020 20:18 · Feb 7, 2020 · Feb 7, 2020 · Feb 7, 2020
diff --git a/index.html b/index.html
@@ -7,14 +7,14 @@
 <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: 20px; padding: 2em; }
+	body { margin: 5px 20px 20px 20px; padding: 2em; }
 	#content {
     width: 800px;
   }
   #bigMap { 
     width: 600px;
     height: 400px;
-    margin: 40px 0px;
+    margin: 20px 0px;
     display: grid;
   }
   #map {
@@ -38,7 +38,6 @@
   <h2>My dope site</h2>
 </header>
 <div id="content">
-  <div>Please observe my map and how it loads so nicely.</div>
   <div id="bigMap">
     <div id="map"></div>
     <div id="static"></div>

diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+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.
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
   <h2>My dope site</h2>
 </header>
 <div id="content">
-  <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>Please observe my map and how it loads so nicely.</div>
   <div id="bigMap">
     <div id="map"></div>
     <div id="static"></div>

diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!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: 20px; padding: 2em; }
+	#content {
+    width: 800px;
+  }
+  #bigMap { 
+    width: 600px;
+    height: 400px;
+    margin: 40px 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>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 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>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		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.
No results found