Leaflet connector and TileJSON support for Leaflet interaction control.

Young Hahn · Young Hahn · commit d320011a15b6 · 2011-07-12T16:27:30.000-04:00
diff --git a/Makefile b/Makefile
@@ -16,7 +16,7 @@ dist/wax.mm.min.js:
 	$(UGLIFYJS) dist/wax.mm.js > dist/wax.mm.min.js
 
 dist/wax.leaf.min.js:
-	cat build/header.js ext/reqwest.min.js lib/*.js control/lib/*.js control/leaf/*.js > dist/wax.leaf.js
+	cat build/header.js ext/reqwest.min.js lib/*.js control/lib/*.js control/leaf/*.js connectors/leaf/*.js > dist/wax.leaf.js
 	$(UGLIFYJS) dist/wax.leaf.js > dist/wax.leaf.min.js
 
 dist_setup:
diff --git a/connectors/leaf/connector.js b/connectors/leaf/connector.js
@@ -0,0 +1,11 @@
+wax = wax || {};
+wax.leaf = wax.leaf || {};
+
+wax.leaf.connector = L.TileLayer.extend({
+    initialize: function(options) {
+        options = options || {};
+        options.minZoom = options.minzoom || 0;
+        options.maxZoom = options.maxzoom || 22;
+        L.TileLayer.prototype.initialize.call(this, options.tiles[0], options);
+    }
+});
diff --git a/control/leaf/interaction.js b/control/leaf/interaction.js
@@ -18,7 +18,7 @@ wax.leaf.interaction = function(map, options) {
     var interaction = {
         modifyingEvents: ['move'],
 
-        waxGM: new wax.GridManager(),
+        waxGM: new wax.GridManager(options),
 
         // This requires wax.Tooltip or similar
         callbacks: options.callbacks || new wax.tooltip(),
diff --git a/dist/wax.g.js b/dist/wax.g.js
@@ -1,4 +1,4 @@
-/* wax - 2.1.6 - 1.0.4-302-g2796b42 */
+/* wax - 2.1.6 - 1.0.4-304-gc4dd2d3 */
 
 
 /*!
diff --git a/dist/wax.g.min.js b/dist/wax.g.min.js
diff --git a/dist/wax.leaf.js b/dist/wax.leaf.js
@@ -1,4 +1,4 @@
-/* wax - 2.1.6 - 1.0.4-302-g2796b42 */
+/* wax - 2.1.6 - 1.0.4-304-gc4dd2d3 */
 
 
 /*!
@@ -802,7 +802,7 @@ wax.leaf.interaction = function(map, options) {
     var interaction = {
         modifyingEvents: ['move'],
 
-        waxGM: new wax.GridManager(),
+        waxGM: new wax.GridManager(options),
 
         // This requires wax.Tooltip or similar
         callbacks: options.callbacks || new wax.tooltip(),
@@ -973,3 +973,14 @@ wax.leaf.interaction = function(map, options) {
     // Ensure chainability
     return interaction.add(map);
 };
+wax = wax || {};
+wax.leaf = wax.leaf || {};
+
+wax.leaf.connector = L.TileLayer.extend({
+    initialize: function(options) {
+        options = options || {};
+        options.minZoom = options.minzoom || 0;
+        options.maxZoom = options.maxzoom || 22;
+        L.TileLayer.prototype.initialize.call(this, options.tiles[0], options);
+    }
+});
diff --git a/dist/wax.leaf.min.js b/dist/wax.leaf.min.js
diff --git a/dist/wax.mm.js b/dist/wax.mm.js
@@ -1,4 +1,4 @@
-/* wax - 2.1.6 - 1.0.4-302-g2796b42 */
+/* wax - 2.1.6 - 1.0.4-304-gc4dd2d3 */
 
 
 /*!
diff --git a/dist/wax.mm.min.js b/dist/wax.mm.min.js
diff --git a/dist/wax.ol.js b/dist/wax.ol.js
@@ -1,4 +1,4 @@
-/* wax - 2.1.6 - 1.0.4-302-g2796b42 */
+/* wax - 2.1.6 - 1.0.4-304-gc4dd2d3 */
 
 
 /*!
diff --git a/dist/wax.ol.min.js b/dist/wax.ol.min.js
diff --git a/manual/index.html b/manual/index.html
@@ -110,7 +110,7 @@
 </div>
 
 Wax has a custom Modest Maps provider that can display tilesets described
-by TileJSON format at `wax.mm.connector`.
+by the TileJSON format at `wax.mm.connector`.
 
 <div class='section'>
 <div id='modestmaps-setup' class='map'></div>
@@ -425,19 +425,72 @@
 </pre>
 </div>
 
-With `scheme='tms'` it's simple to add layers to Leaflet.
+Wax has a custom Leaflet tile layer that can display tilesets described by
+the TileJSON format at `wax.leaf.connector`.
 
 <div class='section'>
 <div id='leaflet-simple' class='map'></div>
 <a class='attribution' href='http://mapbox.com/tileset/geography-class'>Geography Class</a>
 <pre class='sh_javascript run'>
-var map = new L.Map('leaflet-simple');
-map.setView(new L.LatLng(51.505, -0.09), 1).addLayer(
-    new L.TileLayer('http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png', {
-        maxZoom: 5,
-        scheme: 'tms'
-    }));
-wax.leaf.interaction(map);
+var tilejson = {
+  tilejson: '1.0.0',
+  scheme: 'tms',
+  tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'],
+  grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'],
+  formatter: function(options, data) { return data.NAME }
+};
+var map = new L.Map('leaflet-simple')
+  .addLayer(new wax.leaf.connector(tilejson))
+  .setView(new L.LatLng(51.505, -0.09), 1);
+wax.leaf.interaction(map, tilejson);
+</pre>
+</div>
+
+# Google Maps
+
+The Google Maps API V3 is supported by Wax.
+
+- Include the Google Maps API V3 according to the [API documentation](http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API).
+- `wax/dist/wax.g.js` contains the Wax controls and integration code for
+  Google Maps.
+- `wax/theme/controls.css` contains default styles for controls. You can always
+  swap in your own later on.
+
+<div class='section'>
+<pre>
+&lt;html&gt;
+&lt;head&gt;
+  &lt;script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'&gt;&lt;/script&gt;
+  &lt;script src='wax/dist/wax.g.js' type='text/javascript'&gt;&lt;/script&gt;
+  &lt;link href='wax/theme/controls.css' rel='stylesheet' type='text/css' /&gt;
+  ...
+</pre>
+</div>
+
+Wax has a custom Google map type that can display tilesets described by
+the TileJSON format at `wax.g.connector`.
+
+<div class='section'>
+<div id='google-map' class='map'></div>
+<a class='attribution' href='http://mapbox.com/tileset/geography-class'>Geography Class</a>
+<pre class='sh_javascript run'>
+var tilejson = {
+  tilejson: '1.0.0',
+  scheme: 'tms',
+  tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'],
+  grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'],
+  formatter: function(options, data) { return data.NAME }
+};
+
+var m = new google.maps.Map(
+  document.getElementById('google-map'), {
+    center: new google.maps.LatLng(0, 0),
+    disableDefaultUI: true,
+    zoom: 1,
+    mapTypeId: google.maps.MapTypeId.ROADMAP });
+m.mapTypes.set('mb', new wax.g.connector(tilejson));
+m.setMapTypeId('mb');
+wax.g.interaction(m, tilejson);
 </pre>
 </div>
 
@@ -496,54 +549,6 @@
 </pre>
 </div>
 
-# Google Maps
-
-The Google Maps API V3 is supported by Wax.
-
-- Include the Google Maps API V3 according to the [API documentation](http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API).
-- `wax/dist/wax.g.js` contains the Wax controls and integration code for
-  Google Maps.
-- `wax/theme/controls.css` contains default styles for controls. You can always
-  swap in your own later on.
-
-<div class='section'>
-<pre>
-&lt;html&gt;
-&lt;head&gt;
-  &lt;script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'&gt;&lt;/script&gt;
-  &lt;script src='wax/dist/wax.g.js' type='text/javascript'&gt;&lt;/script&gt;
-  &lt;link href='wax/theme/controls.css' rel='stylesheet' type='text/css' /&gt;
-  ...
-</pre>
-</div>
-
-The tilesets that TileStream serves and TileMill creates are supported by a
-custom `MapType` provided by Wax at `wax.g.MapType`.
-
-<div class='section'>
-<div id='google-map' class='map'></div>
-<a class='attribution' href='http://mapbox.com/tileset/geography-class'>Geography Class</a>
-<pre class='sh_javascript run'>
-var tilejson = {
-  tilejson: '1.0.0',
-  scheme: 'tms',
-  tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'],
-  grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'],
-  formatter: function(options, data) { return data.NAME }
-};
-
-var m = new google.maps.Map(
-  document.getElementById('google-map'), {
-    center: new google.maps.LatLng(0, 0),
-    disableDefaultUI: true,
-    zoom: 1,
-    mapTypeId: google.maps.MapTypeId.ROADMAP });
-m.mapTypes.set('mb', new wax.g.connector(tilejson));
-m.setMapTypeId('mb');
-wax.g.interaction(m, tilejson);
-</pre>
-</div>
-
 # Comparison of Mapping Libraries
 
 Wax supports [Modest Maps] [1], [OpenLayers] [2], and [Google Maps] [3] APIs

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/* wax - 2.1.6 - 1.0.4-302-g2796b42 */`
	`1`	`+/* wax - 2.1.6 - 1.0.4-304-gc4dd2d3 */`
`2`	`2`
`3`	`3`
`4`	`4`	`/*!`