Commits

Ralph Bean  committed ecc1ce9

Parameterized the tile styles

  • Participants
  • Parent commits e7fb10b

Comments (0)

Files changed (8)

File tw2/polymaps/resources.py

 custom_js = twc.JSLink(
     modname=modname, filename='static/custom/js/tw2.polymaps.js')
 
-custom_css = twc.CSSLink(
-    modname=modname, filename='static/custom/css/tw2.polymaps.css')
+custom_css_1 = twc.CSSLink(
+    modname=modname, filename='static/custom/css/tw2.polymaps-example1.css')
+
+custom_css_2 = twc.CSSLink(
+    modname=modname, filename='static/custom/css/tw2.polymaps-example2.css')

File tw2/polymaps/samples.py

 WidgetBrowser.
 """
 from widgets import PolyMap, PollingPolyMap
-from resources import custom_css
+from resources import custom_css_1, custom_css_2
 from geojsonify import geojsonify
 from tw2.core import JSSymbol
 
 import random
 
-class js(JSSymbol):
-    def __init__(self, src):
-        super(js, self).__init__(src=src)
+class DemoPolyMap(PolyMap):
+    data_url = '/polymap_demo/'
 
-class DemoPolyMap(PolyMap):
-    css_class = 'tw2-polymaps-container'
-
-    data_url = '/polymap_demo/'
     interact = True
 
+    # You should get your own one of these at http://cloudmade.com/register
+    cloudmade_api_key = "1a1b06b230af4efdbb989ea99e9841af"
+
+    # To style the map tiles
+    cloudmade_tileset = 'midnight-commander'
+
+    # Both specify the css_class AND include your own custom css file that
+    # specifies what it looks like.
+    css_class = 'sample-tw2-polymaps-container-1'
     def prepare(self):
         super(DemoPolyMap, self).prepare()
-        self.resources.append(custom_css)
+        self.resources.append(custom_css_1)
 
     @classmethod
     @geojsonify
 mw.controllers.register(DemoPolyMap, 'polymap_demo')
 
 class DemoPollingPolyMap(PollingPolyMap):
-    css_class = 'tw2-polymaps-container'
-
     data_url = '/polymap_polling_demo/'
 
+    # You should get your own one of these at http://cloudmade.com/register
+    cloudmade_api_key = "1a1b06b230af4efdbb989ea99e9841af"
+
+    # To style the map tiles
+    cloudmade_tileset = 'pale-dawn'
+
+    # Both specify the css_class AND include your own custom css file that
+    # specifies what it looks like.
+    css_class = 'sample-tw2-polymaps-container-2'
     def prepare(self):
         super(DemoPollingPolyMap, self).prepare()
-        self.resources.append(custom_css)
+        self.resources.append(custom_css_2)
 
     @classmethod
     @geojsonify

File tw2/polymaps/static/custom/css/tw2.polymaps-example1.css

+svg {
+        width: 100%;
+        height: 100%;
+}
+
+.sample-tw2-polymaps-container-1 {
+        width: 300px;
+        height: 300px;
+}
+
+.layer circle {
+  fill: lawngreen;
+  fill-opacity: .5;
+  stroke: green;
+  vector-effect: non-scaling-stroke;
+}

File tw2/polymaps/static/custom/css/tw2.polymaps-example2.css

+svg {
+        width: 100%;
+        height: 100%;
+}
+
+.sample-tw2-polymaps-container-2 {
+        width: 600px;
+        height: 600px;
+}
+
+.layer circle {
+  fill: lawngreen;
+  fill-opacity: .5;
+  stroke: green;
+  vector-effect: non-scaling-stroke;
+}

File tw2/polymaps/static/custom/css/tw2.polymaps.css

-svg {
-        width: 100%;
-        height: 100%;
-}
-
-.tw2-polymaps-container {
-        width: 600px;
-        height: 600px;
-}
-
-.layer circle {
-  fill: lawngreen;
-  fill-opacity: .5;
-  stroke: green;
-  vector-effect: non-scaling-stroke;
-}

File tw2/polymaps/static/custom/js/tw2.polymaps.js

 
 var po = org.polymaps;
 
-function setupPolymap(args)
+function setupPolymap(args, api_key, tileset_id)
 {
         var map = po.map();
         map.container(
 
         // http://cloudmade.com/register
         map.add(po.image()
-        .url(po.url("http://{S}tile.cloudmade.com"
-                + "/1a1b06b230af4efdbb989ea99e9841af"
-                + "/999/256/{Z}/{X}/{Y}.png")
+        .url(po.url("http://{S}tile.cloudmade.com/" + api_key
+                + "/" + tileset_id + "/256/{Z}/{X}/{Y}.png")
                 .hosts(["a.", "b.", "c.", ""])));
         return map;
 }

File tw2/polymaps/templates/polymap.mak

 <div id="${w.attrs['id']}:target"></div>
 </div>
 <script type="text/javascript">
-	var map = setupPolymap(${w.j('attrs')});
+	var map = setupPolymap(${w.j('attrs')}, ${w.j('cloudmade_api_key')},
+	                       ${w.j('_tileset_id')});
 	map = setupPolymapControls(map,
 	            ${w.j('arrow')}, ${w.j('compass')}, ${w.j('dblclick')},
 				${w.j('drag')}, ${w.j('grid')}, ${w.j('hash')},

File tw2/polymaps/widgets.py

 
     data_url = twc.Param("""Url to pull a geoJSON layer from""", default=None)
 
+    cloudmade_api_key = twc.Param("""Developer API key for cloudmade tiles.""")
+    cloudmade_tileset = twc.Param(
+        """ Cloudmade tileset.  One of 'pale-dawn' or 'midnight-commander'. """,
+        default='pale-dawn')
+    _tileset_id = twc.Variable("Cloudmade tileset id")
+
     arrow = twc.Param(
         """Constructs an arrow control with default settings. The arrow control
         provides key listeners for the arrow keys for panning, and the plus and
     def j(cls, attr):
        return simplejson.dumps(getattr(cls, attr))
 
+    def prepare(self):
+        super(PolyMap, self).prepare()
+        tileset_id_lookup = {
+            'pale-dawn' : 998,
+            'midnight-commander' : 999,
+        }
+        self._tileset_id = tileset_id_lookup[self.cloudmade_tileset]
+
 class PollingPolyMap(PolyMap):
     interval = twc.Param("Polling interval in milliseconds", default=1000)