Ejemplo 6

Visualizador con pestañas y otras herramientas avanzadas y acceso a distintos servicios. Además permite cambiar el tipo de capa de GoogleMaps mostrada y cargar un fichero GeoRSS, mostrando mediante popups la información asociada a cada elemento.

Componente Web:


Código fuente:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <script type="text/javascript" language="javascript" src="http://idee.unizar.es/IDEE_API/IDEE_API.js"></script>
    <script type="text/javascript" language="javascript" src="http://idee.unizar.es/IDEE_API/styles/red.js"></script>
    <script>
      document.write('<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></s'+'cript>');
    </script>
    <style type="text/css">
      #map {
        width: 750px;
        height: 500px;
        top: 5px;
        left: 5px;
        border: 1px solid black;
      }
    </style>
  </head>
  <script type="text/javascript" language="javascript">
    var mapa;
      function init() {
        mapa = new IDEE_API.Map('map');
        
        var wms_1 = new IDEE_API.WMS("IDEZar",
          "http://idezar.zaragoza.es/IDEZar_Base_Tiled/WMSTileCache",
          {version: "1.1.1",
          layers: ["base"],
          transparent: false,
          format: "image/png",
          srsList: ["EPSG:23030"],
          isWMSC: true,
          maxExtent: new IDEE_API.Bounds(651500, 4590500, 694100, 4645000, "EPSG:23030"),
          resolutions:
            ["53.125201382285255","26.562600691142627","14.062553307075499",
            "6.718775468936064","3.7500142152201517","1.7187565153092277",
            "0.9375035538050343","0.5000018953626857","0.26375099980381617",
            "0.131875499901908"]
        });
        mapa.addWMS(wms_1);
        
        var wms_2 = new IDEE_API.WMS.GoogleMaps({type: "G_NORMAL_MAP"});
        mapa.addWMS(wms_2);
        
        var scaleBar = new IDEE_API.Tool.ScaleBar();
        var navBar = new IDEE_API.Tool.NavBarInfo();
        var mouse = new IDEE_API.Tool.MouseWheelZoom();
        var loading = new IDEE_API.Tool.LoadingMap();
        var toolbar = new IDEE_API.Tool.DefaultToolBar("", "", true, 250);
        var overMap = new IDEE_API.Tool.OverviewMap();
        var area = new IDEE_API.Tool.Area();
        var distance = new IDEE_API.Tool.Distance();
        var nom = new IDEE_API.Tool.Nomenclator();
        var googleSelector = new IDEE_API.Tool.GoogleLayerSwitcher(wms_2, 25, 25, "left");
        mapa.addTools([toolbar, navBar, mouse, loading, overMap, nom, distance, area, scaleBar, googleSelector]);
        
        var tab1 = new IDEE_API.Tool.Tab("IDEZar", [wms_1]);
        var tab2 = new IDEE_API.Tool.Tab("GoogleMaps", [wms_2]);
        mapa.addTools([tab2, tab1]);
        mapa.setInitialTab(tab2);
        
        var extent = new IDEE_API.Bounds(-1.02, 41.59, -0.81, 41.73, "EPSG:4258");
        mapa.setExtent(extent);
        
        var myGeoRSS = new IDEE_API.File.GeoRSS("temp/GeoRSS/incidencias_Zaragoza.xml", "EPSG:23030");
        mapa.loadGeoRSS(myGeoRSS);
      }
    </script>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>