API de Google Maps. Institut Cartogràfic i Geològic de Catalunya

Si utilizas la API de Google Maps, añade mapas y fotos aéreas del ICGC

Pruebe el siguiente mapa interactivo, hecho con la API de Google Maps y cartografía del ICGC.

Tilecache ICC - Google Maps JavaScript API v3

Para utilizar la API de Google Maps son necesarios unos mínimos conocimientos de HTML y javascript.

A continuación se explica la conexión con los servidores ICGC en caché para Google Maps (EPSG:3857), pero también existe la posibilidad de utilizar el estándar WMS (ver los geoservicios disponibles), que ofrece más capas pero puede resultar más lento.

API Google Maps v2 y 3

Para utilizar cartografía del ICGC con la API v2 y 3 debe añadirse el siguiente código:

Código ejemplo v2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Tilecache ICC - Google Maps JavaScript API v3</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=
ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
      type="text/javascript"></script>
    <script type="text/javascript"> 

            var mapBounds = new GLatLngBounds(new GLatLng(-90,-180), new GLatLng( 90, 180));
            var map;
            
      function initialize() {
          if (GBrowserIsCompatible()) {
        
                // Capes Tilecache
                map = new GMap2(document.getElementById("map_canvas")); 
                map.setCenter(new GLatLng(41.5580, 1.5906), 10);
                map.setUIToDefault();
                map.removeMapType(G_PHYSICAL_MAP);         

                var copyCollection = new GCopyrightCollection('ICC');
                var copyright = new GCopyright(1, mapBounds, 7, "© Institut Cartogràfic de 
Catalunya");
                copyCollection.addCopyright(copyright);                
                
                // topo3857
                topo= new GTileLayer(copyCollection,8,18,{
                tileUrlTemplate: 'http://mapcache.icc.cat/map/bases_noutm/tiles/1.0.0/topo_EPSG3857/{Z}/{X}/{Y}.jpeg?origin=nw',
                isPng:true,opacity:1.0});                                
                
                // Opcio 1: mapa ICC + mapa Google
                /*tilelayers_topo = [G_NORMAL_MAP.getTileLayers()[0],topo];                        
        tilelayers_topo[1].getCopyright = function(a,b) {
            var c= copyCollection.getCopyrightNotice(a,b);
            if (!c) {
              c = G_NORMAL_MAP.getTileLayers()[0].getCopyright(a,b);
          }
          return c;
        }*/
        
        // Opcio 2: Només mapa ICC
        tilelayers_topo = [topo];    
                
                mapICC_Topo = new GMapType(tilelayers_topo, G_NORMAL_MAP.getProjection(), 
"TopoICC",{ errorMessage:"No ICC data available" });
                
                map.addMapType(mapICC_Topo);
                map.setMapType(mapICC_Topo);                 
                
                map.removeMapType(G_HYBRID_MAP);
                map.removeMapType(G_NORMAL_MAP);
                map.removeMapType(G_SATELLITE_MAP);
                map.removeMapType(G_PHYSICAL_MAP);
                
     }
    } 
 
    </script>
  </head>

  <body onload="initialize()">
   <div id="container">
      <div id="main-content">
        <div id="message-page">
               <div id="map_canvas" style="width: 600px; height: 600px;  border: 
1px solid #000066;"></div>          
        </div>
      </div>
   </div>   
  </body>
</html>

Código ejemplo v3

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Tilecache ICC - Google Maps JavaScript API v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ca">
</script>
<script type="text/javascript">

  function initialize() {
    var myLatlng = new google.maps.LatLng(41.5580, 1.5906);
    var minZoomLevel = 7;
    var maxZoomLevel = 18;

    var myOptions = {
      zoom: minZoomLevel,
      scaleControl: true,
      mapTypeControl: false,
      center: myLatlng,
      mapTypeControlOptions: {
        mapTypeIds: ['topoICC']
      }     
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    

    // Capes Tilecache
    var topo3857 = new google.maps.ImageMapType({
           getTileUrl: function(coord, zoom) {
              return "http://mapcache.icc.cat/map/bases_noutm/tiles/1.0.0/topo_EPSG3857/"+ zoom +"/"+ coord.x +"/"+coord.y+".jpeg?origin=nw";
           },
           tileSize: new google.maps.Size(256, 256),
           maxZoom:maxZoomLevel,
           minZoom:minZoomLevel,
           isPng: true,
           name: 'TopoICC',
       credit: 'ICC'

        });
        
      map.mapTypes.set('topoICC', topo3857);
      map.setMapTypeId('topoICC');
      map.setZoom(10);        

        
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:600px; height:600px"></div>
</body>
</html>

Funcionalidades adicionales API v2

Ejemplo

[3,6 kB]

Incorporación de elementos puntuales

En el ejemplo, se ha utilizado un fichero XML muy sencillo que contiene información de vértices geodésicos, con 3 campos paraa cada elemento:

id: identificador (se mostrará al pasar el ratón sobre la marca)
lon: longitud del vértice
lat: latitud del vértice

El formato es el siguiente:

<vertexs>
  <vertex id="242157001" lon="0.22733467460" lat="40.73414065000"/>
  <vertex id="265136001" lon="1.17817339502" lat="41.18116683890"/>
  ...

Para leer el fichero XML con la versión 2 de la API debe añadirse el siguiente código:

 GDownloadUrl("vertexs.xml", function(fitxer) {
  var xmlDoc = GXml.parse(fitxer);
  var marques = xmlDoc.getElementsByTagName("vertex");
  for (var i = 0; i < marques.length; i++) 
  {
    var lat = parseFloat(marques[i].getAttribute("lat"));
    var lng = parseFloat(marques[i].getAttribute("lon"));
    var punt = new GLatLng(lat,lng);
    var id = marques[i].getAttribute("id");           
    crearMarca(punt, id);           
  }                    
});   
                                            
function crearMarca(punt, id){
  var mMarca = new GMarker(punt, {title:id});                    
  map.addOverlay(mMarca);
}

Control de niveles de zoom y ámbito de visualización

Para controlar los niveles de zoom y que el ámbito de visualización esté centrado sobre Catalunya debe añadirse el siguiente código:

//restringir els nivells de zoom i l'àmbit de visualització
map._restricter = new TRestricter(map);
map._restricter.zoomLevels(8, 18); 
map._restricter.restrict(new GLatLng(40.39906517977678, 0.3013917803764343), new 
GLatLng(42.87707112391955, 3.4215089678764343));

Funcionalidades adicionales API v3

Ejemplo

[3,3 kB]

Incorporación de elementos puntuales

En el ejemplo, se ha utilizado un fichero XML muy sencillo que contiene información de vértices geodésicos, con 3 campos para cada elemento:

id: identificador (se mostrará al pasar el ratón por encima de la marca)
lon: longitud del vértice
lat: latitud del vértice

El formato es el siguiente:

<vertexs>
  <vertex id="242157001" lon="0.22733467460" lat="40.73414065000"/>
  <vertex id="265136001" lon="1.17817339502" lat="41.18116683890"/>
  ...

Para leer el fichero XML com la versión 3 de la API debe añadirse el siguiente código:

 downloadUrl("vertexs.xml", function(data) {
        var xmlDoc = xmlParse(data);
      var markers = xmlDoc.getElementsByTagName("vertex");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lon")));
        var id = markers[i].getAttribute("id");
        var marker = new google.maps.Marker({position: latlng, map: map, title:id});
      }  
     });

Control de niveles de zoom y ámbito de visualización

Para controlar los niveles de zoom y que el ámbito de visualización esté centrado sobre Catalunya debe añadirse el siguiente código:

//restringir els nivells de zoom i l'àmbit de visualització
    var minZoomLevel = 8;
    var maxZoomLevel = 18;

   // Bounds for Catalunya
   var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(40.39906517977678, 0.3013917803764343), 
     new google.maps.LatLng(42.87707112391955, 3.4215089678764343));

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (allowedBounds.contains(map.getCenter())) return;

     // Out of bounds - Move the map back within the bounds

     var c = map.getCenter();
         x = c.lng();
         y = c.lat();
         maxX = allowedBounds.getNorthEast().lng();
         maxY = allowedBounds.getNorthEast().lat();
         minX = allowedBounds.getSouthWest().lng();
         minY = allowedBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
     if (map.getZoom() > maxZoomLevel) map.setZoom(maxZoomLevel);
   });