UESPWiki:Oblivion Map Design/Test2

The UESPWiki – Your source for The Elder Scrolls since 1995
Jump to: navigation, search

A more complete example of the Oblivion map with additional features. Contains source code obtained from the excellent Goggle Maps API Tutorial.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Oblivion Test Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdCxcZPL1FlURx_ZuWGDXPBQgXfZEq_9lK90U8L4elbuzKplcARR3-FuKzQZL-QHw0_mnLYqOXQ7VxA"
      type="text/javascript"></script>
</head>
<body onunload="GUnload()">
   <div id="map" style="width:800px; height:600px;"></div>
   <script type="text/javascript">
    //<![CDATA[
    var OorImage = "outofrange.jpg";

    if (GBrowserIsCompatible()) {

        function CustomGetTileUrl(a,z) {
           if (z >= 9 && z <= 16) {
                var MaxX = Math.floor(133/Math.pow(2, 16-z));
                var MaxY = Math.floor(129/Math.pow(2, 16-z));
                                
                if (a.x < MaxX && a.y < MaxY && a.x >= 0 && a.y >= 0) {
                        return "zoom" + z + "/tamriel-"+a.x+"-"+a.y+"-"+z+".jpg"; 
                }
           }
           return OorImage;
        };

      // ===== The Mercator map, exactly like that in the "custommaptile" example =====
      var tilelayers = [new GTileLayer(new GCopyrightCollection("Tamriel: uesp.net"),9,16)];
      tilelayers[0].getCopyright = function(a,b) {
           return {prefix:"Tamriel: ", copyrightTexts:["uesp.net"]};
      }

      tilelayers[0].getTileUrl = CustomGetTileUrl;
      var custommap = new GMapType(tilelayers, G_NORMAL_MAP.getProjection(), "Mercator",{errorMessage:"No Data Available"});

      // ====== Create the Euclidean Projection for the flat map ======
      // == Constructor ==
      function EuclideanProjection(a){
        this.pixelsPerLonDegree=[];
        this.pixelsPerLonRadian=[];
        this.pixelOrigo=[];
        this.tileBounds=[];
        var b=256;
        var c=1;
        for(var d=0;d<a;d++){
          var e=b/2;
          this.pixelsPerLonDegree.push(b/360);
          this.pixelsPerLonRadian.push(b/(2*Math.PI));
          this.pixelOrigo.push(new GPoint(e,e));
          this.tileBounds.push(c);
          b*=2;
          c*=2
        }
      }
 
      // == Attach it to the GProjection() class ==
      EuclideanProjection.prototype=new GProjection();
  
      // == A method for converting latitudes and longitudes to pixel coordinates == 
      EuclideanProjection.prototype.fromLatLngToPixel=function(a,b){
        var c=Math.round(this.pixelOrigo[b].x+a.lng()*this.pixelsPerLonDegree[b]);
        var d=Math.round(this.pixelOrigo[b].y+(-2*a.lat())*this.pixelsPerLonDegree[b]);
        return new GPoint(c,d)
      };

      // == a method for converting pixel coordinates to latitudes and longitudes ==
      EuclideanProjection.prototype.fromPixelToLatLng=function(a,b,c){
        var d=(a.x-this.pixelOrigo[b].x)/this.pixelsPerLonDegree[b];
        var e=-0.5*(a.y-this.pixelOrigo[b].y)/this.pixelsPerLonDegree[b];
        return new GLatLng(e,d,c)
      };

      // == a method that checks if the y value is in range, and wraps the x value ==
      EuclideanProjection.prototype.tileCheckRange=function(a,b,c){
        var d=this.tileBounds[b];
        if (a.y<0||a.y>=d) {
          return false;
        }
        if(a.x<0||a.x>=d){
          a.x=a.x%d;
          if(a.x<0){
            a.x+=d;
          }
        }
        return true
      }

      // == a method that returns the width of the tilespace ==      
      EuclideanProjection.prototype.getWrapWidth=function(zoom) {
        return this.tileBounds[zoom]*256;
      }

      // ===== Create a Map Type that uses the Euclidean projection =====
      var tilelayers2 = [new GTileLayer(new GCopyrightCollection("Tamriel: uesp.net"),9,16)];
      tilelayers2[0].getCopyright = function(a,b) {return {prefix:"Tamriel: ©", copyrightTexts:["uesp.net"]}; }

      tilelayers2[0].getTileUrl = CustomGetTileUrl;
      var custommap2 = new GMapType(tilelayers2, new EuclideanProjection(17), "Euclidean", {errorMessage:"No Data Available"});

      // == Open a map with these two custom map types ==
      var map = new GMap2(document.getElementById("map"), {mapTypes:[custommap2]});
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(89.85, -179.63), 11, custommap2);

      // Add a move listener to restrict the bounds range
      GEvent.addListener(map, "move", function() {
                checkBounds();
      });

          // The allowed region which the whole map must be within
      var allowedBounds = new GLatLngBounds(new GLatLng(89.62,-179.9999), new GLatLng(89.9999, -179.25));
      
      // If the map position is out of range, move it back
      function checkBounds() {
        // Perform the check and return if OK
        if (allowedBounds.contains(map.getCenter())) {
          return;
        }
        // It`s not OK, so find the nearest allowed point and move there
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        if (X > 0.0)   {X = AminX;}  //Avoid wrapping
        if (Y < 0.0)   {Y = AmaxY;}
        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}
        map.setCenter(new GLatLng(Y,X));
      }

      //  ======== Add a map overview ==========
      map.addControl(new GOverviewMapControl(new GSize(200,200)));

      //  ======== A function to adjust the positioning of the overview ========
      function positionOverview(x,y) {
        var omap=document.getElementById("map_overview");
        omap.style.left = x+"px";
        omap.style.top = y+"px";
        
        // == restyling ==
        omap.firstChild.style.border = "1px solid gray";

        omap.firstChild.firstChild.style.left="4px";
        omap.firstChild.firstChild.style.top="4px";
        omap.firstChild.firstChild.style.width="190px";
        omap.firstChild.firstChild.style.height="190px";
      }

      //  ======== Cause the overview to be positioned AFTER IE sets its initial position ======== 
      setTimeout("positionOverview(800,0)",1);
      
    }      
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
    </script>
</body></html>
Retrieved from "https://en.uesp.net/w/index.php?title=UESPWiki:Oblivion_Map_Design/Test2&oldid=52708"