OpenLayers OpenLayers

Ticket #686: spherical-mercator.patch

File spherical-mercator.patch, 32.1 kB (added by crschmidt, 1 year ago)

  • tests/Layer/test_SphericalMercator.html

    old new  
     1<html> 
     2<head> 
     3    <!-- this gmaps key generated for http://openlayers.org/dev/ --> 
     4    <script src="../../lib/OpenLayers.js"></script> 
     5    <script type="text/javascript"> 
     6    function test_SphericalMercator_forwardProject(t) { 
     7        t.plan(12); 
     8        var arctic = OpenLayers.Layer.SphericalMercator.forwardMercator(0, 85); 
     9        var antarctic = OpenLayers.Layer.SphericalMercator.forwardMercator(0, -85); 
     10        var hawaii = OpenLayers.Layer.SphericalMercator.forwardMercator(-180, 0); 
     11        var phillipines = OpenLayers.Layer.SphericalMercator.forwardMercator(180, 0); 
     12        var ne = OpenLayers.Layer.SphericalMercator.forwardMercator(180, 90); 
     13        var sw = OpenLayers.Layer.SphericalMercator.forwardMercator(-180, -90); 
     14         
     15        t.eq(arctic.lon, 0, "Arctic longitude is correct"); 
     16        t.eq(Math.round(arctic.lat), 19971869, "Arctic latitude is correct"); 
     17         
     18        t.eq(antarctic.lon, 0, "Antarctic longitude is correct"); 
     19        t.eq(Math.round(antarctic.lat), -19971869, "Antarctic latitude is correct"); 
     20         
     21        t.eq(Math.round(hawaii.lat), 0, "Hawaiian lat is correct"); 
     22        t.eq(hawaii.lon, -20037508.34, "Hawaiian lon is correct"); 
     23         
     24        t.eq(Math.round(phillipines.lat), 0, "Phillipines lat is correct"); 
     25        t.eq(phillipines.lon, 20037508.340, "Phillipines lon is correct"); 
     26        
     27        // Rounding errors make this not infinity  
     28        t.ok(ne.lat > 50000000, "NE lat is correct"); 
     29        t.eq(ne.lon, 20037508.34, "NE lon is correct"); 
     30         
     31        t.eq(sw.lat, -Infinity, "SW lat is correct"); 
     32        t.eq(sw.lon, -20037508.34, "SW lon is correct"); 
     33    }  
     34     
     35    function test_sphericalMercator_inverseProject(t) { 
     36        t.plan(4); 
     37        var sw =  OpenLayers.Layer.SphericalMercator.inverseMercator(-20037508.34,  -20037508.34); 
     38        var ne =  OpenLayers.Layer.SphericalMercator.inverseMercator(20037508.34,  20037508.34); 
     39        t.eq(sw.lon, -180, "Southwest lon correct"); 
     40        t.eq(ne.lon, 180, "Northeast lon correct"); 
     41         
     42        t.eq(sw.lat, -85.05112877980659, "Southwest lat correct"); 
     43        t.eq(ne.lat, 85.05112877980660, "Northeast lat correct"); 
     44    } 
     45     
     46  </script>  
     47</head> 
     48<body> 
     49</body> 
     50</html> 

  • tests/Layer/test_Google.html

    old new  
    128128                          window.location.host); 
    129129        } 
    130130    } 
     131     
     132    function test_Layer_Goole_forwardMercator(t){ 
     133        t.plan(2); 
     134        //Just test that the fowardMercator function still exists. 
     135        var layer = new OpenLayers.Layer.Google('Test Layer', {'sphericalMercator': true}); 
     136        layer.forwardMercator = function(evt) { 
     137                                    t.ok( true, "GoogleMercator.forwardMercator was called and executed." ); 
     138                                    return; 
     139                                } 
     140        layer.forwardMercator(); 
     141        //Now test the fowardMercator returns the expected LonLat object 
     142        var layer = new OpenLayers.Layer.Google('Test Layer', {'sphericalMercator': true}); 
     143        var lonlat2 = new OpenLayers.LonLat(Math.random(),Math.random()); 
     144        var result = layer.forwardMercator(lonlat2.lon, lonlat2.lat); 
     145        t.ok( result instanceof OpenLayers.LonLat, "OpenLayers.Google.fowardMercator returns LonLat object" ); 
     146         
     147    } 
    131148 
    132149    function test_Layer_Google_overlay(t) { 
    133150        // Test for #849. 

  • tests/list-tests.html

    old new  
    4040    <li>Layer/test_EventPane.html</li> 
    4141    <li>Layer/test_FixedZoomLevels.html</li> 
    4242    <li>Layer/test_GeoRSS.html</li> 
     43    <li>Layer/test_SphericalMercator.html</li> 
    4344    <li>Layer/test_Google.html</li> 
    4445    <li>Layer/test_Grid.html</li> 
    4546    <li>Layer/test_HTTPRequest.html</li> 

  • lib/OpenLayers/Layer/SphericalMercator.js

    old new  
     1/** 
     2 * Class: OpenLayers.Layer.SphericalMercator 
     3 * A mixin for layers that wraps up the pieces neccesary to have a coordinate 
     4 *     conversion for working with commercial APIs which use a spherical 
     5 *     mercator projection.  Using this layer as a base layer, additional 
     6 *     layers can be used as overlays if they are in the same projection. 
     7 * 
     8 * A layer is given properties of this object by setting the sphericalMercator 
     9 *     property to true. 
     10 * 
     11 * More projection information: 
     12 *  - http://spatialreference.org/ref/user/google-projection/ 
     13 * 
     14 * Proj4 Text: 
     15 *     +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 
     16 *     +k=1.0 +units=m +nadgrids=@null +no_defs 
     17 * 
     18 * WKT: 
     19 *     900913=PROJCS["WGS84 / Simple Mercator", GEOGCS["WGS 84", 
     20 *     DATUM["WGS_1984", SPHEROID["WGS_1984", 6378137.0, 298.257223563]],  
     21 *     PRIMEM["Greenwich", 0.0], UNIT["degree", 0.017453292519943295],  
     22 *     AXIS["Longitude", EAST], AXIS["Latitude", NORTH]], 
     23 *     PROJECTION["Mercator_1SP_Google"],  
     24 *     PARAMETER["latitude_of_origin", 0.0], PARAMETER["central_meridian", 0.0],  
     25 *     PARAMETER["scale_factor", 1.0], PARAMETER["false_easting", 0.0],  
     26 *     PARAMETER["false_northing", 0.0], UNIT["m", 1.0], AXIS["x", EAST], 
     27 *     AXIS["y", NORTH], AUTHORITY["EPSG","900913"]] 
     28 */ 
     29OpenLayers.Layer.SphericalMercator = { 
     30 
     31    /** 
     32     * Method: getExtent 
     33     * Get the map's extent. 
     34     * 
     35     * Returns: 
     36     * {<OpenLayers.Bounds>} The map extent. 
     37     */ 
     38    getExtent: function() { 
     39        var extent = null; 
     40        if (this.sphericalMercator) { 
     41            extent = this.map.calculateBounds(); 
     42        } else { 
     43            extent = OpenLayers.Layer.FixedZoomLevels.prototype.getExtent.apply(this); 
     44        } 
     45        return extent; 
     46    }, 
     47 
     48    /**  
     49     * Method: initMercatorParameters  
     50     * Set up the mercator parameters on the layer: resolutions, 
     51     *     projection, units. 
     52     */ 
     53    initMercatorParameters: function() { 
     54        // set up properties for Mercator - assume EPSG:900913 
     55        this.RESOLUTIONS = []; 
     56        var maxResolution = 156543.0339; 
     57        for(var zoom=0; zoom<=this.MAX_ZOOM_LEVEL; ++zoom) { 
     58            this.RESOLUTIONS[zoom] = maxResolution / Math.pow(2, zoom); 
     59        } 
     60        this.units = "m"; 
     61        this.projection = "EPSG:900913"; 
     62    }, 
     63 
     64    /** 
     65     * Method: forwardMercator 
     66     * Given a lon,lat in EPSG:4326, return a point in Spherical Mercator. 
     67     * 
     68     * Parameters: 
     69     * lon - {float}  
     70     * lat - {float} 
     71     *  
     72     * Returns: 
     73     * {<OpenLayers.LonLat>} The coordinates transformed to Mercator. 
     74     */ 
     75    forwardMercator: function(lon, lat) { 
     76        var x = lon * 20037508.34 / 180; 
     77        var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180); 
     78 
     79        y = y * 20037508.34 / 180; 
     80         
     81        return new OpenLayers.LonLat(x, y); 
     82    }, 
     83 
     84    /** 
     85     * Method: inverseMercator 
     86     * Given a x,y in Spherical Mercator, return a point in EPSG:4326. 
     87     * 
     88     * Parameters: 
     89     * x - {float} A map x in Spherical Mercator. 
     90     * y - {float} A map y in Spherical Mercator. 
     91     *  
     92     * Returns: 
     93     * {<OpenLayers.LonLat>} The coordinates transformed to EPSG:4326. 
     94     */ 
     95    inverseMercator: function(x, y) { 
     96 
     97        var lon = (x / 20037508.34) * 180; 
     98        var lat = (y / 20037508.34) * 180; 
     99 
     100        lat = 180/Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2); 
     101         
     102        return new OpenLayers.LonLat(lon, lat); 
     103    } 
     104 
     105}; 

  • lib/OpenLayers/Layer/VirtualEarth.js

    old new  
    1414 *  - <OpenLayers.Layer.FixedZoomLevels> 
    1515 */ 
    1616OpenLayers.Layer.VirtualEarth = OpenLayers.Class( 
    17   OpenLayers.Layer.EventPane, OpenLayers.Layer.FixedZoomLevels, { 
     17    OpenLayers.Layer.EventPane, 
     18    OpenLayers.Layer.FixedZoomLevels, { 
    1819     
    1920    /**  
    2021     * Constant: MIN_ZOOM_LEVEL 
    …… 
    5859     */ 
    5960    type: null, 
    6061 
     62    /** 
     63     * APIProperty: sphericalMercator 
     64     * {Boolean} Should the map act as a mercator-projected map? This will 
     65     *     cause all interactions with the map to be in the actual map 
     66     *     projection, which allows support for vector drawing, overlaying 
     67     *     other maps, etc.  
     68     */ 
     69    sphericalMercator: false,  
     70 
    6171    /**  
    6272     * Constructor: OpenLayers.Layer.VirtualEarth 
    6373     *  
    …… 
    6979        OpenLayers.Layer.EventPane.prototype.initialize.apply(this, arguments); 
    7080        OpenLayers.Layer.FixedZoomLevels.prototype.initialize.apply(this,  
    7181                                                                    arguments); 
     82        if(this.sphericalMercator) { 
     83            OpenLayers.Util.extend(this, OpenLayers.Layer.SphericalMercator); 
     84            this.initMercatorParameters(); 
     85        } 
    7286    }, 
    7387     
    7488    /** 
    …… 
    214228     * {Float} Longitude of the given MapObject LonLat 
    215229     */ 
    216230    getLongitudeFromMapObjectLonLat: function(moLonLat) { 
    217         return moLonLat.Longitude; 
     231        return this.sphericalMercator ?  
     232            this.forwardMercator(moLonLat.Longitude, moLonLat.Latitude).lon : 
     233            moLonLat.Longitude; 
    218234    }, 
    219235 
    220236    /** 
    …… 
    227243     * {Float} Latitude of the given MapObject LonLat 
    228244     */ 
    229245    getLatitudeFromMapObjectLonLat: function(moLonLat) { 
    230         return moLonLat.Latitude; 
     246        return this.sphericalMercator ?  
     247            this.forwardMercator(moLonLat.Longitude, moLonLat.Latitude).lat : 
     248            moLonLat.Latitude; 
    231249    }, 
    232250 
    233251    /** 
    …… 
    241259     * {Object} MapObject LonLat built from lon and lat params 
    242260     */ 
    243261    getMapObjectLonLatFromLonLat: function(lon, lat) { 
    244         return new VELatLong(lat, lon); 
     262        var veLatLong; 
     263        if(this.sphericalMercator) { 
     264            var lonlat = this.inverseMercator(lon, lat); 
     265            veLatLong = new VELatLong(lonlat.lat, lonlat.lon); 
     266        } else { 
     267            veLatLong = new VELatLong(lat, lon); 
     268        } 
     269        return veLatLong; 
    245270    }, 
    246271 
    247272  // Pixel 

  • lib/OpenLayers/Layer/Google.js

    old new  
    44 
    55 
    66/** 
     7 * @requires OpenLayers/Layer/SphericalMercator.js 
    78 * @requires OpenLayers/Layer/EventPane.js 
    89 * @requires OpenLayers/Layer/FixedZoomLevels.js 
    910 *  
    1011 * Class: OpenLayers.Layer.Google 
    1112 *  
    1213 * Inherits: 
     14 *  - <OpenLayers.Layer.SphericalMercator> 
    1315 *  - <OpenLayers.Layer.EventPane> 
    1416 *  - <OpenLayers.Layer.FixedZoomLevels> 
    1517 */ 
    16 OpenLayers.Layer.Google = OpenLayers.Class(OpenLayers.Layer.EventPane,  
    17                                            OpenLayers.Layer.FixedZoomLevels, { 
     18OpenLayers.Layer.Google = OpenLayers.Class( 
     19    OpenLayers.Layer.EventPane,  
     20    OpenLayers.Layer.FixedZoomLevels, { 
    1821     
    1922    /**  
    2023     * Constant: MIN_ZOOM_LEVEL 
    …… 
    6265     */ 
    6366    type: null, 
    6467 
     68    /** 
     69     * APIProperty: sphericalMercator 
     70     * {Boolean} Should the map act as a mercator-projected map? This will 
     71     * cause all interactions with the map to be in the actual map projection, 
     72     * which allows support for vector drawing, overlaying other maps, etc.  
     73     */ 
     74    sphericalMercator: false,  
     75 
    6576    /**  
    6677     * Constructor: OpenLayers.Layer.Google 
    6778     *  
    …… 
    7485        OpenLayers.Layer.FixedZoomLevels.prototype.initialize.apply(this,  
    7586                                                                    arguments); 
    7687        this.addContainerPxFunction(); 
     88        if (this.sphericalMercator) { 
     89            OpenLayers.Util.extend(this, OpenLayers.Layer.SphericalMercator); 
     90            this.initMercatorParameters(); 
     91        }     
    7792    }, 
    7893     
    7994    /**  
    …… 
    151166        this.mapObject.checkResize();   
    152167    }, 
    153168 
    154  
    155169    /** 
    156170     * APIMethod: getZoomForExtent 
    157171     *  
    …… 
    199213        if (moBounds != null) { 
    200214            var sw = moBounds.getSouthWest(); 
    201215            var ne = moBounds.getNorthEast(); 
    202             olBounds = new OpenLayers.Bounds(sw.lng(),  
    203                                              sw.lat(),  
    204                                              ne.lng(),  
    205                                              ne.lat() ); 
     216            if (this.sphericalMercator) { 
     217                sw = this.forwardMercator(sw.lng(), sw.lat()); 
     218                ne = this.forwardMercator(ne.lng(), ne.lat()); 
     219            } else { 
     220                sw = new OpenLayers.LonLat(sw.lng(), sw.lat());  
     221                ne = new OpenLayers.LonLat(ne.lng(), ne.lat());  
     222            }     
     223            olBounds = new OpenLayers.Bounds(sw.lon,  
     224                                             sw.lat,  
     225                                             ne.lon,  
     226                                             ne.lat ); 
    206227        } 
    207228        return olBounds; 
    208229    }, 
    …… 
    220241    getMapObjectBoundsFromOLBounds: function(olBounds) { 
    221242        var moBounds = null; 
    222243        if (olBounds != null) { 
    223             var sw = new GLatLng(olBounds.bottom, olBounds.left); 
    224             var ne = new GLatLng(olBounds.top, olBounds.right); 
    225             moBounds = new GLatLngBounds(sw, ne); 
     244            var sw = this.sphericalMercator ?  
     245              this.inverseMercator(olBounds.bottom, olBounds.left) :  
     246              new OpenLayers.LonLat(olBounds.bottom, olBounds.left); 
     247            var ne = this.sphericalMercator ?  
     248              this.inverseMercator(olBounds.top, olBounds.right) :  
     249              new OpenLayers.LonLat(olBounds.top, olBounds.right); 
     250            moBounds = new GLatLngBounds(new GLatLng(sw.lat, sw.lon), 
     251                                         new GLatLng(ne.lat, ne.lon)); 
    226252        } 
    227253        return moBounds; 
    228254    }, 
    229      
    230255 
    231  
    232  
    233  
    234256    /**  
    235257     * Method: addContainerPxFunction 
    236258     * Hack-on function because GMAPS does not give it to us 
    …… 
    396418     * {Float} Longitude of the given MapObject LonLat 
    397419     */ 
    398420    getLongitudeFromMapObjectLonLat: function(moLonLat) { 
    399         return moLonLat.lng();   
     421        return this.sphericalMercator ?  
     422          this.forwardMercator(moLonLat.lng(), moLonLat.lat()).lon : 
     423          moLonLat.lng();   
    400424    }, 
    401425 
    402426    /** 
    …… 
    409433     * {Float} Latitude of the given MapObject LonLat 
    410434     */ 
    411435    getLatitudeFromMapObjectLonLat: function(moLonLat) { 
    412         return moLonLat.lat();   
     436        var lat = this.sphericalMercator ?  
     437          this.forwardMercator(moLonLat.lng(), moLonLat.lat()).lat : 
     438          moLonLat.lat();  
     439        return lat;   
    413440    }, 
    414441     
    415442    /** 
    …… 
    423450     * {Object} MapObject LonLat built from lon and lat params 
    424451     */ 
    425452    getMapObjectLonLatFromLonLat: function(lon, lat) { 
    426         return new GLatLng(lat, lon); 
     453        var gLatLng; 
     454        if(this.sphericalMercator) { 
     455            var lonlat = this.inverseMercator(lon, lat); 
     456            gLatLng = new GLatLng(lonlat.lat, lonlat.lon); 
     457        } else { 
     458            gLatLng = new GLatLng(lat, lon); 
     459        } 
     460        return gLatLng; 
    427461    }, 
    428462 
    429463  // Pixel 

  • lib/OpenLayers/Layer/Yahoo.js

    old new  
    5757     * {YahooMapType} 
    5858     */ 
    5959    type: null, 
     60     
     61    /** 
     62     * APIProperty: sphericalMercator 
     63     * {Boolean} Should the map act as a mercator-projected map? This will 
     64     * cause all interactions with the map to be in the actual map projection, 
     65     * which allows support for vector drawing, overlaying other maps, etc.  
     66     */ 
     67    sphericalMercator: false,  
    6068 
    6169    /**  
    6270     * Constructor: OpenLayers.Layer.Yahoo 
    …… 
    6977        OpenLayers.Layer.EventPane.prototype.initialize.apply(this, arguments); 
    7078        OpenLayers.Layer.FixedZoomLevels.prototype.initialize.apply(this,  
    7179                                                                    arguments); 
     80        if(this.sphericalMercator) { 
     81            OpenLayers.Util.extend(this, OpenLayers.Layer.SphericalMercator); 
     82            this.initMercatorParameters(); 
     83        } 
    7284    }, 
    7385     
    7486    /** 
    …… 
    294306     * {Float} Longitude of the given MapObject LonLat 
    295307     */ 
    296308    getLongitudeFromMapObjectLonLat: function(moLonLat) { 
    297         return moLonLat.Lon; 
     309        return this.sphericalMercator ?  
     310            this.forwardMercator(moLonLat.Lon, moLonLat.Lat).lon : 
     311            moLonLat.Lon; 
    298312    }, 
    299313 
    300314    /** 
    …… 
    307321     * {Float} Latitude of the given MapObject LonLat 
    308322     */ 
    309323    getLatitudeFromMapObjectLonLat: function(moLonLat) { 
    310         return moLonLat.Lat; 
     324        return this.sphericalMercator ?  
     325            this.forwardMercator(moLonLat.Lon, moLonLat.Lat).lat : 
     326            moLonLat.Lat; 
    311327    }, 
    312328 
    313329    /** 
    …… 
    321337     * {Object} MapObject LonLat built from lon and lat params 
    322338     */ 
    323339    getMapObjectLonLatFromLonLat: function(lon, lat) { 
    324         return new YGeoPoint(lat, lon); 
     340        var yLatLong; 
     341        if(this.sphericalMercator) { 
     342            var lonlat = this.inverseMercator(lon, lat); 
     343            yLatLong = new YGeoPoint(lonlat.lat, lonlat.lon); 
     344        } else { 
     345            yLatLong = new YGeoPoint(lat, lon); 
     346        } 
     347        return yLatLong; 
    325348    }, 
    326349 
    327350  // Pixel 

  • lib/OpenLayers/Layer/MultiMap.js

    old new  
    77 * @requires OpenLayers/Layer/FixedZoomLevels.js 
    88 *  
    99 * Class: OpenLayers.Layer.MultiMap 
     10 * Note that MultiMap does not fully support the sphericalMercator 
     11 * option. See Ticket #953 for more details. 
    1012 *  
    1113 * Inherits: 
    1214 *  - <OpenLayers.Layers.EventPane> 
    …… 
    6971        OpenLayers.Layer.EventPane.prototype.initialize.apply(this, arguments); 
    7072        OpenLayers.Layer.FixedZoomLevels.prototype.initialize.apply(this,  
    7173                                                                    arguments); 
     74        if (this.sphericalMercator) { 
     75            OpenLayers.Util.extend(this, OpenLayers.Layer.SphericalMercator); 
     76            this.initMercatorParameters(); 
     77            this.RESOLUTIONS.unshift(10);  
     78        }     
    7279    }, 
    7380     
    7481    /** 
    …… 
    201208     * {Float} Longitude of the given MapObject LonLat 
    202209     */ 
    203210    getLongitudeFromMapObjectLonLat: function(moLonLat) { 
    204         return moLonLat.lon; 
     211        return this.sphericalMercator ?  
     212            this.forwardMercator(moLonLat.lon, moLonLat.lat).lon : 
     213            moLonLat.lon; 
    205214    }, 
    206215 
    207216    /** 
    …… 
    214223     * {Float} Latitude of the given MapObject LonLat 
    215224     */ 
    216225    getLatitudeFromMapObjectLonLat: function(moLonLat) { 
    217         return moLonLat.lat; 
     226        return this.sphericalMercator ?  
     227            this.forwardMercator(moLonLat.lon, moLonLat.lat).lat : 
     228            moLonLat.lat; 
    218229    }, 
    219230 
    220231    /** 
    …… 
    228239     * {Object} MapObject LonLat built from lon and lat params 
    229240     */ 
    230241    getMapObjectLonLatFromLonLat: function(lon, lat) { 
    231         return new MMLatLon(lat, lon); 
     242        var mmLatLon; 
     243        if(this.sphericalMercator) { 
     244            var lonlat = this.inverseMercator(lon, lat); 
     245            mmLatLon = new MMLatLon(lonlat.lat, lonlat.lon); 
     246        } else { 
     247            mmLatLon = new MMLatLon(lat, lon); 
     248        } 
     249        return mmLatLon; 
    232250    }, 
    233251 
    234252  // Pixel 

  • lib/OpenLayers.js

    old new  
    8888            "OpenLayers/Tile/Image.js", 
    8989            "OpenLayers/Tile/WFS.js", 
    9090            "OpenLayers/Layer/Image.js", 
     91            "OpenLayers/Layer/SphericalMercator.js", 
    9192            "OpenLayers/Layer/EventPane.js", 
    9293            "OpenLayers/Layer/FixedZoomLevels.js", 
    9394            "OpenLayers/Layer/Google.js", 

  • examples/spherical-mercator.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <style type="text/css"> 
     4        #map { 
     5            width: 100%; 
     6            height: 512px; 
     7            border: 1px solid gray; 
     8        } 
     9    </style> 
     10 
     11    <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script> 
     12    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAeDjUod8ItM9dBg5_lz0esxTk5UTxNMOJaMwpeYJby65YwI0-cxSmHf2_ZfIP7bDb_moMph5qZy25YA" type="text/javascript"></script> 
     13    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script> 
     14 
     15    <script src="../lib/OpenLayers.js"></script> 
     16    <script type="text/javascript"> 
     17  
     18        // make map available for easy debugging 
     19        var map; 
     20 
     21        // avoid pink tiles 
     22        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; 
     23        OpenLayers.Util.onImageLoadErrorColor = "transparent"; 
     24 
     25        function init(){ 
     26            var options = { 
     27                projection: "EPSG:900913", 
     28                units: "m", 
     29                maxResolution: 156543.0339, 
     30                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
     31                                                 20037508, 20037508.34) 
     32            }; 
     33            map = new OpenLayers.Map('map', options); 
     34 
     35            // create Google Mercator layers 
     36            var gmap = new OpenLayers.Layer.Google( 
     37                "Google Streets", 
     38                {'sphericalMercator': true} 
     39            ); 
     40            var gsat = new OpenLayers.Layer.Google( 
     41                "Google Sattelite", 
     42                {type: G_SATELLITE_MAP, 'sphericalMercator': true} 
     43            ); 
     44            var ghyb = new OpenLayers.Layer.Google( 
     45                "Google Hybrid", 
     46                {type: G_HYBRID_MAP, 'sphericalMercator': true} 
     47            ); 
     48 
     49            // create Virtual Earth layers 
     50            var veroad = new OpenLayers.Layer.VirtualEarth( 
     51                "Virtual Earth Raods", 
     52                {'type': VEMapStyle.Road, 'sphericalMercator': true} 
     53            );  
     54            var veaer = new OpenLayers.Layer.VirtualEarth( 
     55                "Virtual Earth Aerial", 
     56                {'type': VEMapStyle.Aerial, 'sphericalMercator': true} 
     57            );  
     58            var vehyb = new OpenLayers.Layer.VirtualEarth( 
     59                "Virtual Earth Hybrid", 
     60                {'type': VEMapStyle.Hybrid, 'sphericalMercator': true} 
     61            );  
     62 
     63            // create Yahoo layer 
     64            var yahoo = new OpenLayers.Layer.Yahoo( 
     65                "Yahoo Street", 
     66                {'sphericalMercator': true} 
     67            ); 
     68            var yahoosat = new OpenLayers.Layer.Yahoo( 
     69                "Yahoo Sattelite", 
     70                {'type': YAHOO_MAP_SAT, 'sphericalMercator': true} 
     71            ); 
     72            var yahoohyb = new OpenLayers.Layer.Yahoo( 
     73                "Yahoo Hybrid", 
     74                {'type': YAHOO_MAP_HYB, 'sphericalMercator': true} 
     75            ); 
     76 
     77            // create OSM layer 
     78            var mapnik = new OpenLayers.Layer.TMS( 
     79                "OpenStreetMap", 
     80                "http://tile.openstreetmap.org/", 
     81                { 
     82                    type: 'png', getURL: osm_getTileURL, 
     83                    displayOutsideMaxExtent: true 
     84                } 
     85            ); 
     86 
     87            // create WMS layer 
     88            var wms = new OpenLayers.Layer.WMS( 
     89                "World Map", 
     90                "http://world.freemap.in/tiles/", 
     91                {'layers': 'factbook-overlay', 'format':'png'}, 
     92                { 
     93                    'reproject': false, 'opacity': 0.4, 
     94                    'isBaseLayer': false,'wrapDateLine': true 
     95                } 
     96            ); 
     97 
     98            // create a vector layer for drawing 
     99            var vector = new OpenLayers.Layer.Vector("Editable Vectors"); 
     100             
     101            map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb, 
     102                           yahoo, yahoosat, yahoohyb, mapnik, wms]); 
     103            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     104            map.addControl(new OpenLayers.Control.EditingToolbar(vector)); 
     105            map.zoomToMaxExtent() 
     106        } 
     107 
     108        function osm_getTileURL(bounds) { 
     109            var res = this.map.getResolution(); 
     110            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); 
     111            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); 
     112            var z = this.map.getZoom(); 
     113            var limit = Math.pow(2, z); 
     114             
     115            if (y < 0 || y >= limit) { 
     116                return OpenLayers.Util.getImagesLocation() + "404.png"; 
     117            } else { 
     118                x = ((x % limit) + limit) % limit;             
     119                return this.url + z + "/" + x + "/" + y + "." + this.type; 
     120            } 
     121        } 
     122         
     123    </script> 
     124  </head> 
     125  <body onload="init()"> 
     126    <h3>OpenLayers Spherical Mercator Example</h3> 
     127    <div id="map"></div> 
     128  </body> 
     129</html> 

  • examples/google-factbook-tc.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <style type="text/css"> 
     4        #map { 
     5            width: 100%; 
     6            height: 512px; 
     7            border: 1px solid gray; 
     8        } 
     9    </style> 
     10 
     11    <!-- this gmaps key generated for http://openlayers.org/dev/ --> 
     12    <!--<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>--> 
     13    <!-- dev.openlayers.org key --> 
     14    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAeDjUod8ItM9dBg5_lz0esxTk5UTxNMOJaMwpeYJby65YwI0-cxSmHf2_ZfIP7bDb_moMph5qZy25YA" type="text/javascript"></script> 
     15    <!-- Localhost key --> 
     16    <!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>--> 
     17    <script src="../lib/OpenLayers.js"></script> 
     18    <script type="text/javascript"> 
     19        <!-- 
     20        var map, gmap, merc; 
     21 
     22        function init(){ 
     23            var options = { 
     24                projection: "EPSG: 54004", 
     25                units: "m", 
     26                maxResolution: 156543.0339, 
     27                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
     28                                                 20037508, 20037508.34) 
     29            }; 
     30            map = new OpenLayers.Map('map', options); 
     31 
     32            gmap = new OpenLayers.Layer.GoogleMercator("Google", {'minZoomLevel': 4}); 
     33            var twms = new OpenLayers.Layer.WMS( "World Map",  
     34         "http://world.freemap.in/tiles?",  
     35                 {layers: 'factbook-overlay', 'format':'png'}, {'reproject': false, isBaseLayer: false} ); 
     36            map.addLayers([gmap, twms]); 
     37                 map.addLayer(twms); 
     38            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     39            map.zoomToMaxExtent() 
     40             
     41        } 
     42 
     43    // --> 
     44 
     45    </script> 
     46  </head> 
     47  <body onload="init()"> 
     48    <h1>OpenLayers With Google Layer Example</h1> 
     49    <div id="map"></div> 
     50  </body> 
     51</html> 

  • examples/google-factbook.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <style type="text/css"> 
     4        #map { 
     5            width: 100%; 
     6            height: 512px; 
     7            border: 1px solid gray; 
     8        } 
     9    </style> 
     10 
     11    <!-- this gmaps key generated for http://openlayers.org/dev/ --> 
     12    <!--<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>--> 
     13    <!-- dev.openlayers.org key --> 
     14    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAeDjUod8ItM9dBg5_lz0esxTk5UTxNMOJaMwpeYJby65YwI0-cxSmHf2_ZfIP7bDb_moMph5qZy25YA" type="text/javascript"></script> 
     15    <!-- Localhost key --> 
     16    <!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>--> 
     17    <script src="../lib/OpenLayers.js"></script> 
     18    <script type="text/javascript"> 
     19        <!-- 
     20        var map, gmap, merc; 
     21 
     22        function init(){ 
     23            var options = { 
     24                projection: "EPSG: 54004", 
     25                units: "m", 
     26                maxResolution: 156543.0339, 
     27                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
     28                                                 20037508, 20037508.34) 
     29            }; 
     30            map = new OpenLayers.Map('map', options); 
     31 
     32            gmap = new OpenLayers.Layer.GoogleMercator("Google", {'minZoomLevel': 4}); 
     33            var twms = new OpenLayers.Layer.WMS( "World Map",  
     34         "http://world.freemap.in/cgi-bin/mapserv?",  
     35                 {map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true', 
     36                         layers: 'factbook', 'format':'png'}, {'reproject': false} ); 
     37            map.addLayers([gmap, twms]); 
     38            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     39            map.zoomToMaxExtent() 
     40             
     41        } 
     42 
     43    // --> 
     44 
     45    </script> 
     46  </head> 
     47  <body onload="init()"> 
     48    <h1>OpenLayers With Google Layer Example</h1> 
     49    <div id="map"></div> 
     50  </body> 
     51</html> 

  • examples/multimap-mercator.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <style type="text/css"> 
     4        #map { 
     5            width: 100%; 
     6            height: 512px; 
     7            border: 1px solid gray; 
     8        } 
     9    </style> 
     10 
     11 
     12    <script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script> 
     13 
     14    <script src="../lib/OpenLayers.js"></script> 
     15    <script type="text/javascript"> 
     16  
     17        var map, ve, merc, vector; 
     18 
     19        function init(){ 
     20            var options = { 
     21                projection: "EPSG:900913", 
     22                units: "m", 
     23                maxResolution: 156543.0339, 
     24                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
     25                                                 20037508, 20037508) 
     26            }; 
     27            map = new OpenLayers.Map('map', options); 
     28 
     29            ve = new OpenLayers.Layer.MultiMap( 
     30                "multimap", 
     31                {'sphericalMercator': true} 
     32            );  
     33            merc = new OpenLayers.Layer.WMS("World Map", 
     34                                            "http://world.freemap.in/tiles/", 
     35                                            {'layers': 'factbook-overlay', 
     36                                             'format':'png'}, 
     37                                            {'reproject': false, 
     38                                             'opacity': 0.4, 
     39                                             'isBaseLayer': false, 
     40                                             'wrapDateLine': true}); 
     41 
     42            // create a vector layer for drawing 
     43            vector = new OpenLayers.Layer.Vector("Editable Vectors"); 
     44             
     45            map.addLayers([ve, merc, vector]); 
     46            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     47            map.addControl(new OpenLayers.Control.EditingToolbar(vector)); 
     48            map.zoomToMaxExtent() 
     49        } 
     50         
     51    </script> 
     52  </head> 
     53  <body onload="init()"> 
     54    <h3>OpenLayers VE Mercator Example</h3> 
     55    <div id="map"></div> 
     56  </body> 
     57</html>