---

Instructions

This example shows how to customize the display of the navigation panel.

Source code

The JavaScript code for this demo is listed below.

	
  var mapview;
  var navPan;
  function showMap()
  { 
    var baseURL  = "http://"+document.location.host+"/mapviewer";
    var mapCenterLon = -122.45;
    var mapCenterLat =  37.7706;
    var mapZoom      =  4;       
    var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
    mapview = new MVMapView(document.getElementById("map"), baseURL);
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));   
    mapview.setCenter(mpoint);   
    mapview.setZoomLevel(mapZoom);
  
    var nav = new MVNavigationPanel() ;
    nav.setZoomLevelInfoTips({0:"Country", 3:"State", 5:"County", 7:"City", 9:"Street"}) ;
    navPan = new MVMapDecoration(nav,0,0,null,null,4,4) ;
    mapview.addMapDecoration(navPan) ;
  
    mapview.display(); 
  }

  
  var showPanningButtons = true ;
  var showSlider = true ;
  var showZoomingButtons = true ;
  function switchPanelComponent(component, checkBox)
  {
    if(navPan)
      mapview.removeMapDecoration(navPan) ;
    if(component=="panning")
      showPanningButtons = checkBox.checked ;
    if(component=="slider")
      showSlider = checkBox.checked ;
    if(component=="zooming")
      showZoomingButtons = checkBox.checked ;
    var nav = new MVNavigationPanel(panningButtons, showSlider, showZoomingButtons) ;
    nav.setZoomLevelInfoTips({0:"Country", 3:"State", 5:"County", 7:"City", 9:"Street"}) ;
    navPan = new MVMapDecoration(nav,0,0,null,null,4,4) ;
    mapview.addMapDecoration(navPan) ;
  }