Ejemplo 5

Visualizador con pestañas y otras herramientas avanzadas y acceso a distintos servicios. Además permite cargar distintos ficheros KML, 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/grey.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:4258", maxExtent: new IDEE_API.Bounds(-179, -89, 179, 89, "EPSG:4258")});
        
        var wms_1 = new IDEE_API.WMS.IDEEBase();
        mapa.addWMS(wms_1);
        
        var wms_2 = new IDEE_API.WMS.GoogleMaps({type: "G_PHYSICAL_MAP"});
        mapa.addWMS(wms_2);
        
        var wms_3 = new IDEE_API.WMS.Cartociudad();
        mapa.addWMS(wms_3);
        
        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();
        mapa.addTools([toolbar, navBar, mouse, loading, overMap, nom, distance, area, scaleBar]);
        
        var tab1 = new IDEE_API.Tool.Tab("IGN-Base", [wms_1]);
        var tab2 = new IDEE_API.Tool.Tab("GoogleMaps", [wms_2]);
        var tab3 = new IDEE_API.Tool.Tab("Cartociudad", [wms_3]);
        mapa.addTools([tab3, tab2, tab1]);
        
        var extent = new IDEE_API.Bounds(-11.10, 35.50, 16.40, 53.50, "EPSG:4258");
        mapa.setExtent(extent);
        
        var myKML = new IDEE_API.File.KML("temp/KML/European-road-trip.kml", "EPSG:4230");
        mapa.loadKML(myKML);
        
        var myKML2 = new IDEE_API.File.KML("temp/KML/Sundials.kml");
        mapa.loadKML(myKML2);
      }
    </script>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>