• Imprimeix

API de Google Maps

Si utilitzes l'API de Google Maps, afegeix mapes i fotos aèries de l'ICGC.

Proveu el següent mapa interactiu, fet amb l'API de Google Maps i cartografia de l'ICGC.

Tilecache ICC - Google Maps JavaScript API v3

Per a utilitzar l'API de Google Maps són necessaris uns mínims coneixements d'HTML i javascript.

A continuació s'explica la connexió amb els servidors ICGC en caché per a Google Maps (EPSG:3857), però també hi ha la possibilitat d'utilitzar l'estàndard WMS (vegeu els serveis WMS de cartografia raster disponibles), que ofereix més capes però pot resultar més lent.

API Google Maps v2 i v3

Per a utilitzar cartografia de l'ICGC amb l'API v2 o v3 cal afegir el següent codi:

Codi exemple 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>

Codi exemple 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>

Funcionalitats addicionals API v2

 

Incorporació d'elements puntuals

A l'exemple, s'ha utilitzat un fitxer XML molt senzill que conté informació de vèrtexs geodèsics, amb 3 camps per a cada element:

  • id: identificador (es mostrarà en passar el ratolí per sobre de la marca)
  • lon: longitud del vèrtex
  • lat: latitud del vèrtex

 

El format és el següent:

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

 

Per a llegir el fitxer XML amb la versió 2 de l'API cal afegir el següent codi:

 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 nivells de zoom i àmbit de visualització

Per controlar els nivells de zoom i que l'àmbit de visualització estigui centrat sobre Catalunya cal afegir el següent codi:

//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));

 

Funcionalitats addicionals API v3

Incorporació d'elements puntuals

A l'exemple, s'ha utilitzat un fitxer XML molt senzill que conté informació de vèrtexs geodèsics, amb 3 camps per a cada element:

  • id: identificador (es mostrarà en passar el ratolí per sobre de la marca)
  • lon: longitud del vèrtex
  • lat: latitud del vèrtex

 

El format és el següent:

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

 

Per llegir el fitxer XML amb la versió 3 de l'API cal afegir el següent codi:

 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 nivells de zoom i àmbit de visualització

Per controlar els nivells de zoom i que l'àmbit de visualització estigui centrat sobre Catalunya cal afegir el següent codi:

//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);
   });