Adding OpenLayers and PolyMaps snippets, Fixes #19, will be better wi…

…th mustache
tilemill-project · Dec 15, 2010 · a7b619f · a7b619f
1 parent e72d0d0
commit a7b619f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/client/css/tilemill.css b/client/css/tilemill.css
@@ -846,3 +846,12 @@ a.popup-close { background-color:#222; }
 #form-providers div.datasource .url {
   display:none;
   }
+
+/**
+ * Code snippets in info popup
+ */
+textarea.code-snippet {
+  font-family: monospace;
+  width: 100%;
+  height: 150px;
+  }
diff --git a/client/index.html b/client/index.html
@@ -262,6 +262,30 @@ <h2><%= title %></h2>
         <div><label for='mml-url'>MML URL</label>
             <input id='mml-url' class='text' type='text' value='<%= mml_url %>' />
         </div>
+        <div>
+            <label for='polymaps'>Polymaps</label>
+            <textarea class='code-snippet'>
+var po = org.polymaps;
+
+var map = po.map()
+    .container(document.getElementById("map").appendChild(po.svg("svg")))
+    .add(po.interact())
+    .add(po.hash())
+    // layer setup
+    .add(po.image()
+    .url(po.url(<%= tilelive_url %>
+    + "/{Z}/{X}/{Y}.png")
+    ))
+    // end layer setup
+    .add(po.compass()
+    .pan("none"));
+</textarea>
+</div>
+<div>       <label for='openlayers'>OpenLayers</label>
+            <textarea class='code-snippet'>
+                var layer = new OpenLayers.Layer('layer', <%= tilelive_url %>, { sphericalMercator: true });
+</textarea>
+        </div>
       </form>
     </div>
     </script>