Two maps side by side

migurski · Oct 30, 2009 · bcbfb8b · bcbfb8b
1 parent 192f9da
commit bcbfb8b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/modestmaps.js b/modestmaps.js
@@ -381,6 +381,7 @@ com.modestmaps.Map = function(parent, provider, dimensions) {
         parent = document.getElementById(parent);
     }
     this.parent = parent;
+    this.idBase = parent.id;
 
     this.parent.style.position = 'relative';
     this.parent.style.width = parseInt(dimensions.x) + 'px';
@@ -395,7 +396,7 @@ com.modestmaps.Map = function(parent, provider, dimensions) {
 
     // add an invisible layer so that image.onload will have a srcElement in IE6
     this.loadingLayer = document.createElement('div');
-    this.loadingLayer.id = 'loading layer';
+    this.loadingLayer.id = this.idBase+'loading layer';
     this.loadingLayer.style.display = 'none';
     this.parent.appendChild(this.loadingLayer);
 
@@ -404,7 +405,7 @@ com.modestmaps.Map = function(parent, provider, dimensions) {
     // add a div for each zoom level
     for (var z = 0; z <= 20; z++) {
         var layer = document.createElement('div');
-        layer.id = 'zoom-'+z;
+        layer.id = this.idBase+'zoom-'+z;
         layer.style.margin = '0';
         layer.style.padding = '0';
         layer.style.width = '100%';
@@ -877,7 +878,7 @@ com.modestmaps.Map.prototype = {
 
         var wantedTiles = { };
 
-        var thisLayer = document.getElementById('zoom-'+parseInt(baseCoord.zoom));
+        var thisLayer = document.getElementById(this.idBase+'zoom-'+parseInt(baseCoord.zoom));
         thisLayer.coordinate = this.coordinate.copy();
 
         var showParentLayer = false;

diff --git a/zoomify.html b/zoomify.html
@@ -9,21 +9,35 @@
     <style type="text/css" title="text/css">
     <!--
         body { background-color: #bbb; }
-        #map { border: 1px solid black; background-color: #ccc; }
+
+        .map
+        {
+            border: 1px solid black;
+            background-color: #ccc;
+            width: 550px;
+            height: 390px;
+            margin-right: 1em;
+            float: left;
+        }
     -->
     </style>
 </head>
 <body>
 
-    <div id="map" style="width: 650px; height: 390px;"></div>
+    <div id="picture" class="map"></div>
+    <div id="basemap" class="map"></div>
     <script type="text/javascript" language="javascript1.5">
     <!--
 
         var mm = com.modestmaps;
-        var map = new mm.Map('map', new ZoomifyProvider('http://localhost/~migurski/Canvas%20Warp/pages-12-13_img', 11946, 5670), new mm.Point(650, 390))
-
-        map.setCenterZoom(new mm.Location(559, 2563), 5);
-        map.draw();
+
+        var picture = new mm.Map('picture', new ZoomifyProvider('http://localhost/~migurski/Canvas%20Warp/pages-12-13_img', 11946, 5670), new mm.Point(550, 390))
+        picture.setCenterZoom(new mm.Location(559, 2563), 5);
+        picture.draw();
+
+        var basemap = new mm.Map('basemap', new mm.MapProvider(function(c) { return 'http://tile.openstreetmap.org/'+c.zoom+'/'+c.column+'/'+c.row+'.png'; }), new mm.Point(550, 390))
+        basemap.setCenterZoom(new mm.Location(37.805, -122.263), 15);
+        basemap.draw();
 
     //-->
     </script>

diff --git a/zoomify.js b/zoomify.js
@@ -47,7 +47,7 @@ var ZoomifyProvider = function(dir, width, height)
     }
 };
 
-ZoomifyProvider.prototype = mm.MapProvider.prototype;
+com.modestmaps.extend(ZoomifyProvider, com.modestmaps.MapProvider);
 
 ZoomifyProvider.prototype.coordinateGroup = function(c)
 {