Ejemplo 3

Visualizador con pestañas y otras herramientas avanzadas y acceso a distintos servicios, algunos definidos por el usuario, con diferentes sistemas de coordenadas.

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', {srs: "EPSG:4230"});
        
        var wms_1 = new IDEE_API.WMS.IDEEBase({layers: ["IGNBaseTodo"]});
        mapa.addWMS(wms_1);
        
        var wms_2 = new IDEE_API.WMS.GoogleMaps();
        mapa.addWMS(wms_2);
        
        var wms_3 = new IDEE_API.WMS.Cartociudad();
        mapa.addWMS(wms_3);
        
        var wms_4 = new IDEE_API.WMS("Hidrografia",
          "http://www.ign.es/wms-inspire/ign-base",
          {layers: ["RedHidrografica", "RedHidrografica_S"],
          transparent: true,
          format: "image/png",
          srsList: ["EPSG:23030"],
          tiled: false});
        mapa.addWMS(wms_4);
        
        var wms_5 = new IDEE_API.WMS("Catastro",
          "http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx",
          {layers: ["Catastro"],
          transparent: true,
          version: "1.1.1",
          format: "image/png",
          srsList: ["EPSG:25830"],
          tiled: false});
        mapa.addWMS(wms_5);
        
        var extent = new IDEE_API.Bounds(-3.90, 40.30, -3.50, 40.55, "EPSG:4258");
        mapa.setExtent(extent);
        
        var scaleBar = new IDEE_API.Tool.ScaleBar("left", "big");
        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();
        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();
        mapa.addTools([toolbar, scaleBar, navBar, mouse, loading, overMap, distance, area, nom]);
        
        var tab1 = new IDEE_API.Tool.Tab("Catastro + IGN-Base", [wms_1, wms_5]);
        var tab2 = new IDEE_API.Tool.Tab("GoogleMaps + Hidrografia IGN-Base", [wms_2, wms_4]);
        var tab3 = new IDEE_API.Tool.Tab("Cartociudad", [wms_3]);
        mapa.addTools([tab3, tab2, tab1]);
      }
    </script>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>