• Imprimeix

Google Maps API

If using Google Maps API, add ICGC maps and aerial photos

Test the following interactive map, made with Google Maps API and ICGC cartography.

Tilecache ICC - Google Maps JavaScript API v3

To use Google Maps API, basic knowledge of HTML and Javascript is required.

Below is an explanation of the connection to cache ICGC servers for Google Maps (EPSG:3857), but WMS standard can also be used (view the geoservices available), which offers more layers but it can be slower.

 

Google Maps API v2 & v3

To use ICC cartography with the API v2 & v3, embed the following code:

Example code 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>

Example code 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>

Additional features for API v2

 

Adding punctual items

In the example, it has been used a very simple XML file that contains geodetic survey points with 3 fields for each item:

  • id: ID (shown when the mouse is over the mark)
  • lon: survey point longitude
  • lat: survey point latitude

 

XML format:

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

 

To read the XML file with the API v2 insert the following code:

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

 

Zoom levels and view boundary control

To control zoom levels and focus view boundary over Catalonia, insert the following code:

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

Additional features for API v3

Adding punctual items

In the example, it has been used a very simple XML file that contains geodetic survey points with 3 fields for each item:

  • id: ID (shown when the mouse is over the mark)
  • lon: survey points longitude
  • lat: survey points latitude

 

XML format:

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

 

To read the XML file with the API v3 insert the following code:

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

 

Zoom levels and view boundary control

To control zoom levels and focus view boundary over Catalonia, insert the following code:

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