Sandbox examples in an iframe (fixes #734)

maplibre · Sep 15, 2014 · bf0b47c · bf0b47c
1 parent cc68822
commit bf0b47c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/docs/_layouts/example.html b/docs/_layouts/example.html
@@ -16,15 +16,35 @@
 </div>
 
 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/{{site.version}}/mapbox-gl.js'></script>
-<link href='https://api.tiles.mapbox.com/mapbox-gl-js/{{site.version}}/mapbox-gl.css' rel='stylesheet' />
 
+<iframe id='demo' class='row10 col12' allowfullscreen='true' mozallowfullscreen='true' webkitallowfullscreen='true'></iframe>
 <script>
-    mapboxgl.accessToken = App.accessToken;
-</script>
-<div id='demo' class='contain row10 fill-light'>{{content}}</div>
+    if (mapboxgl.util.supported()) {
+        var doc = $('#demo')[0].contentWindow.document;
 
-<script>
-    if (!mapboxgl.util.supported()) {
+        var jsURL = 'https://api.tiles.mapbox.com/mapbox-gl-js/{{site.version}}/mapbox-gl.js',
+            cssURL = 'https://api.tiles.mapbox.com/mapbox-gl-js/{{site.version}}/mapbox-gl.css';
+
+        var exampleCSS = 'body { margin:0; padding:0; }\n#map { position:absolute; top:0; bottom:0; width:100%; }';
+
+        var examplePREFIX =
+            "<html><head><meta charset=utf-8 /><title>{{page.exampletitle}}</title>\n" +
+            "<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />\n" +
+            "<script src='" + jsURL + "'><\/script>\n" +
+            "<link href='" + cssURL + "' rel='stylesheet' />\n" +
+            "<style>" + exampleCSS + "</style>\n" +
+            "<script>" +
+                "mapboxgl.accessToken = '" + App.accessToken + "';" +
+            "<\/script>\n" +
+            "</head>\n<body>\n";
+
+        var exampleCONTENT = {{content | jsonify | replace: '</', '<\/'}};
+        var examplePOSTFIX = "</body>\n</html>";
+
+        doc.open();
+        doc.write(examplePREFIX + exampleCONTENT + examplePOSTFIX);
+        doc.close();
+    } else {
         $('#unsupported').removeClass('hidden');
         $('#demo').hide();
     }

diff --git a/docs/_posts/examples/3400-01-03-flyto.html b/docs/_posts/examples/3400-01-03-flyto.html
@@ -5,9 +5,25 @@
 description: Using .flyTo to smoothly interpolate between locations
 ---
 
+<style>
+    #fly {
+        display: block;
+        position: relative;
+        margin: 0px auto;
+        width: 50%;
+        height: 40px;
+        padding: 10px;
+        border: none;
+        border-radius: 3px;
+        font-size: 12px;
+        text-align: center;
+        color: #fff;
+        background: #ee8a65;
+    }
+</style>
 <div id='map'></div>
 <br />
-<button class='col6 margin3 fill-orange' onclick='fly();' id='fly'>Fly</button>
+<button onclick='fly();' id='fly'>Fly</button>
 <script>
 var map = new mapboxgl.Map({
   container: 'map',