Instructions

This demo shows the use of MVCustomMapTileLayer to display external custom map tiles served directly from a web based map tile server. It uses the DigitalGlobe service and jImageConnect API.

The evaluation key used here is geo-contrained to San Francisco County, California. So you will get error messages or blank tiles if you zoom out or pan outside the area. Sign up for a regular evaluation key from DigitalGlobe in order to use this service's functionality in your own prototype or application.

In order to let the javascript map client know how to assemble and display map tiles, you must provide the map tile layer definition that defines map coordinate system, zoom levels and tiling rules when creating the MVCustomMapTileLayer object for the external map tile layer.

Map tile layer definition is defined as a javascript object as follows. Please refer to the API doc for more information.

  var mapConfig = 
    {mapTileLayer:"custom_DG_tiles",
     format:"JPEG",
     coordSys:{
              srid:54004,type:"PROJECTED",distConvFactor:1.0, 
              minX:-2.0037508E7,minY:-2.0037508E7,maxX:2.0037508E7,maxY:2.0037508E7}
    };
    ...
    // since the zoom levels are defined by DigitalGlobe get the definition
    // from the jImageConnect object
    mapConfig.zoomLevels = JIObj.getZoomLevels();  

The javascript map client calculates the map tiles that are needed to display the map and their positioning based on the map tile layer definition information. It then calls a tileURLProvider function defined by the application to get the URLs of the map tiles that it needs. In this example, the tileURLProvider function is the anonymous function that in turn calls DigitalGlobe's implementation of getTileURL in their jImageConnect library, i.e. JIObj.getTileUrl(viewableAoi, level, 'a'). Please refer to the API doc for more details on the Oracle Maps MVCustomMapTileLayer interface and DigitalGlobe's documentation for details on the jImageConnect API.

var dgBasemap = new MVCustomMapTileLayer(mapConfig, 
          function (tx,ty,tw,th,level) { 
             var viewableAoi = new AreaOfInterest({'top':(ty+th), 'left':tx, 'bottom':ty, 'right':(tx+tw)});
             return(JIObj.getTileUrl(viewableAoi, level, 'a'))
             }
        );

Source code

  
  var mapConfig = 
    {mapTileLayer:"custom_DG_tiles",
     format:"JPEG",
     coordSys:{
              srid:54004,type:"PROJECTED",distConvFactor:1.0, 
              minX:-2.0037508E7,minY:-2.0037508E7,maxX:2.0037508E7,maxY:2.0037508E7}
    };

  var baseURL  = "http://"+document.location.host+"/mapviewer";

  var JIObj = new jImageConnect(
  {'key':'cb53ivIuHW1QCdsM8AVame8cHIQi3bUR',
   'clientId':'2576000995', 
   'objectName':'JIObj', 'appId':'020100S'});
  mapConfig.zoomLevels = JIObj.getZoomLevels();
  
  
  function showMap() 
  { 
  
    var mapview = new MVMapView(document.getElementById("map"), baseURL);
    var dgBasemap = new MVCustomMapTileLayer(mapConfig, function (tx,ty,tw,th,level) { 
          var viewableAoi = new AreaOfInterest({'top':(ty+th), 'left':tx, 'bottom':ty, 'right':(tx+tw)});
          return(JIObj.getTileUrl(viewableAoi, level, 'a'))});
  
    mapview.addMapTileLayer(dgBasemap);
    mapview.setCenter(MVSdoGeometry.createPoint(-122.5,37.75,8307));
    mapview.setZoomLevel(10);
    mapview.addNavigationPanel() ;    
    mapview.display();
  }