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.
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&v=2&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
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
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); });