Added point-location conversion methods to Base.Map and its implement…

…ations
mutsumiya · Feb 9, 2013 · d1dfbf4 · d1dfbf4
1 parent 914e9c5
commit d1dfbf4
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 3 deletions.
diff --git a/Base.ts b/Base.ts
@@ -1,8 +1,13 @@
 import Grid = module('Grid');
+import Core = module('Core');
+import Geo = module('Geo');
 
 export interface Map
 {
     grid:Grid.Grid;
     parent:HTMLElement;
     redraw():void;
+
+    pointLocation(point:Core.Point):Geo.Location;
+    locationPoint(loc:Geo.Location):Core.Point;
 }
diff --git a/Div.ts b/Div.ts
@@ -12,6 +12,7 @@ export class Map implements Base.Map
     public parent:HTMLElement;
 
     private selection:ID3Selection;
+    private projection:Geo.Mercator;
 
     constructor(parent:HTMLElement, proj:Geo.Mercator, loc:Geo.Location, zoom:number)
     {
@@ -24,6 +25,7 @@ export class Map implements Base.Map
             coord = proj.locationCoordinate(loc).zoomTo(zoom);
 
         this.grid = new Grid.Grid(size.x, size.y, coord, 0);
+        this.projection = proj;
 
         var map = this;
 
@@ -37,6 +39,18 @@ export class Map implements Base.Map
         this.redraw();
     }
 
+    public pointLocation(point:Core.Point=null):Geo.Location
+    {
+        var coord = this.grid.pointCoordinate(point ? point : this.grid.center);
+        return this.projection.coordinateLocation(coord);
+    }
+
+    public locationPoint(loc:Geo.Location):Core.Point
+    {
+        var coord = this.projection.locationCoordinate(loc);
+        return this.grid.coordinatePoint(coord);
+    }
+
     public redraw():void
     {
         var tiles = this.grid.visibleTiles(),

diff --git a/Grid.bro.js b/Grid.bro.js
@@ -448,6 +448,7 @@ var Map = (function () {
         Mouse.link_control(this.selection, new Mouse.Control(this, true));
         var size = Mouse.element_size(this.parent), coord = proj.locationCoordinate(loc).zoomTo(zoom);
         this.grid = new Grid.Grid(size.x, size.y, coord, 3);
+        this.projection = proj;
         this.queue = new Queue(this.loaded_tiles);
         this.tile_queuer = this.getTileQueuer();
         this.tile_dequeuer = this.getTileDequeuer();
@@ -462,6 +463,15 @@ var Map = (function () {
         this.grid.resize(size.x, size.y);
         this.redraw();
     };
+    Map.prototype.pointLocation = function (point) {
+        if (typeof point === "undefined") { point = null; }
+        var coord = this.grid.pointCoordinate(point ? point : this.grid.center);
+        return this.projection.coordinateLocation(coord);
+    };
+    Map.prototype.locationPoint = function (loc) {
+        var coord = this.projection.locationCoordinate(loc);
+        return this.grid.coordinatePoint(coord);
+    };
     Map.prototype.redraw = function () {
         var tiles = this.grid.visibleTiles(), join = this.selection.selectAll('img.tile').data(tiles, Map.tile_key);
         join.exit().each(this.tile_dequeuer).remove();
@@ -774,6 +784,8 @@ exports.Coordinate = Coordinate;
 });
 
 require.define("/Base.js",function(require,module,exports,__dirname,__filename,process,global){
+
+
 
 });
 
@@ -949,6 +961,7 @@ var Map = (function () {
         Mouse.link_control(this.selection, new Mouse.Control(this, false));
         var size = Mouse.element_size(this.parent), coord = proj.locationCoordinate(loc).zoomTo(zoom);
         this.grid = new Grid.Grid(size.x, size.y, coord, 0);
+        this.projection = proj;
         var map = this;
         d3.select(window).on('resize.map', function () {
             map.update_gridsize();
@@ -959,6 +972,15 @@ var Map = (function () {
         this.grid.resize(size.x, size.y);
         this.redraw();
     };
+    Map.prototype.pointLocation = function (point) {
+        if (typeof point === "undefined") { point = null; }
+        var coord = this.grid.pointCoordinate(point ? point : this.grid.center);
+        return this.projection.coordinateLocation(coord);
+    };
+    Map.prototype.locationPoint = function (loc) {
+        var coord = this.projection.locationCoordinate(loc);
+        return this.grid.coordinatePoint(coord);
+    };
     Map.prototype.redraw = function () {
         var tiles = this.grid.visibleTiles(), join = this.selection.selectAll('div.tile').data(tiles, Map.tile_key);
         join.exit().remove();

diff --git a/Image.ts b/Image.ts
@@ -20,6 +20,8 @@ export class Map implements Base.Map
     private tile_queuer:(tile:Tile.Tile, index:number)=>void;
     private tile_dequeuer:(tile:Tile.Tile, index:number)=>void;
     private tile_onloaded:(tile:Tile.Tile, index:number)=>void;
+
+    private projection:Geo.Mercator;
 
     constructor(parent:HTMLElement, template:string, proj:Geo.Mercator, loc:Geo.Location, zoom:number)
     {
@@ -34,6 +36,7 @@ export class Map implements Base.Map
             coord = proj.locationCoordinate(loc).zoomTo(zoom);
 
         this.grid = new Grid.Grid(size.x, size.y, coord, 3);
+        this.projection = proj;
 
         this.queue = new Queue(this.loaded_tiles);
         this.tile_queuer = this.getTileQueuer();
@@ -52,6 +55,18 @@ export class Map implements Base.Map
         this.redraw();
     }
 
+    public pointLocation(point:Core.Point=null):Geo.Location
+    {
+        var coord = this.grid.pointCoordinate(point ? point : this.grid.center);
+        return this.projection.coordinateLocation(coord);
+    }
+
+    public locationPoint(loc:Geo.Location):Core.Point
+    {
+        var coord = this.projection.locationCoordinate(loc);
+        return this.grid.coordinatePoint(coord);
+    }
+
     public redraw():void
     {
         var tiles = this.grid.visibleTiles(),

diff --git a/new.html b/new.html
@@ -20,6 +20,21 @@
             padding: 0;
         }
 
+        #map-center
+        {
+            z-index: 99;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+
+            #map-center img
+            {
+                position: absolute;
+                top: -16px;
+                left: -16px;
+            }
+
         body
         {
             overflow: hidden;
@@ -40,17 +55,19 @@
     </style>
 </head>
 <body>
-    <div id="map"></div>
+    <div id="map">
+        <div id="map-center"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAMAAABgOjJdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAAA////pdmf3QAAAAJ0Uk5T/wDltzBKAAAAHUlEQVR42mJgRAMMowKjAkgChMFoiI0K4BEACDAAyNoEAWlto/IAAAAASUVORK5CYII="></div>
+    </div>
     <script type="application/javascript">
     <!--
 
         /*
-        var map = ps.makeDivMap(document.getElementById('map'), 1582, 656, 12);
+        var map = ps.makeDivMap(document.getElementById('map'), 37.804319, -122.271210, 12);
         */
 
         var map = ps.makeImgMap(document.getElementById('map'),
                                 'http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg',
-                                37.8575, -122.3437, 12);
+                                37.804319, -122.271210, 12);
 
         map.redraw();