Ejemplo II: Uso de Leaflet
Visualización de los monumentos de la ciudad sobre la cartografía base de Zaragoza mediante el acceso al WMS-C (servicio de mapas tileado) de IDEZar (en ETRS89 UTM30N) y al API Zaragoza (en WGS84) (en WGS84)
Código Fuente
<html> <head> <meta charset="utf-8"> <title>Visor Leaflet WMS-C</title> <!-- Configuracion leaflet --> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> <link rel="stylesheet" href="//www.zaragoza.es/cont/plantillas/mapa/leaflet/MarkerCluster.css"/> <link rel="stylesheet" href="//www.zaragoza.es/cont/plantillas/mapa/leaflet/MarkerCluster.Default.css"/> <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> <!-- Plugin para realizar peticiones ajax --> <script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/leaflet.ajax.min.js"></script> <!-- Plugin para clusterizar la informacion vectorial --> <script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/leaflet.markercluster.js"></script> <!-- Plugin para cargar WMTS --> <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script> <!-- Plugin para cargar WMS no tileados --> <script src="http://ptv-logistics.github.io/Leaflet.NonTiledLayer/NonTiledLayer.js"></script> <script src="http://ptv-logistics.github.io/Leaflet.NonTiledLayer/NonTiledLayer.WMS.js"></script> <!-- Plugin para realizar transformación de coordenadas --> <script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/proj4.js" type="text/javascript"></script> <script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/proj4leaflet.js" type="text/javascript"></script> <script src="//www.zaragoza.es/cont/plantillas/js/jquery-1.10.2.min.js"></script> <!-- Estilos de cluster --> <style type="text/css"> label{font-weight:bold !important} #campos-plus{display:none} .cluster { background: #2d84c8; border-radius: 50%; text-align: center; color: white; font-weight: 700; border: 1px solid #2d84c8; font-family: monospace; } .cluster:before { content: ' '; position: absolute; border-radius: 50%; z-index: -1; top: 1px; left: 1px; right: 1px; bottom: 1px; border: 1px solid white; } .digits-1 { font-size: 14px; height: 28px; width: 28px; line-height: 28px; margin-top: -14px; margin-left: -14px; } .digits-2 { font-size: 16px; height: 34px; width: 34px; line-height: 35px; margin-top: -17px; margin-left: -17px; } .digits-2:before { border-width: 2px; } .digits-3 { font-size: 18px; height: 48px; width: 47px; line-height: 47px; border-width: 3px; margin-top: -24px; margin-left: -24px; } .digits-3:before { border-width: 3px; } .digits-4 { font-size: 18px; height: 58px; width: 58px; line-height: 57px; border-width: 4px; margin-top: -29px; margin-left: -29px; } .digits-4:before { border-width: 4px; } </style> <script> function cargarInfovectorialLeafLet(map, url) { var markers; var geojson; $.getJSON(url, function(data) { geojson = L.geoJson(data, { onEachFeature: function(feature, layer) { var txt = ""; if (feature.properties.date) { txt += feature.properties.date; } if (feature.properties.category) { txt += ((txt!="")?' ':'') + '<em>' + feature.properties.category + '</em>'; } if (feature.properties.title) { txt += ((txt!="")?'<br/>':'') + '<strong>' + feature.properties.title + '</strong><br/>'; } if (feature.properties.description) { txt += feature.properties.description; } if (txt != "") { layer.bindPopup(txt); } } }); markers = L.markerClusterGroup({ maxClusterRadius: 120, iconCreateFunction: function(cluster) { // get the number of items in the cluster var count = cluster.getChildCount(); // figure out how many digits long the number is var digits = (count + '').length; // return a new L.DivIcon with our classes so we can // style them with CSS. Take a look at the CSS in // the <head> to see these styles. You have to set // iconSize to null if you want to use CSS to set the // width and height. return new L.DivIcon({ html: count, className: 'cluster digits-' + digits, iconSize: null }); } }); markers.addLayer(geojson); map.addLayer(markers); }); } //Definición de UTM30N ETRS89 var crsETRS89 = L.CRS.proj4js('EPSG:25830', '+proj=utm +zone=30 +ellps=GRS80 +units=m +no_defs', new L.Transformation(1, -4590500.0, -1, 694100.0), { resolutions: [53.125201382285255, 26.562600691142627, 14.062553307075499, 6.718775468936064, 3.7500142152201517, 1.7187565153092277, 0.9375035538050343, 0.5000018953626857, 0.26375099980381617, 0.131875499901908], //Origen de servicio tileado origin:[651500.0, 4590500.0] }); //Configuracion de mapa para visualizar servicio de IDEZar var IDEZarConfig = { crs: crsETRS89, zoom: 2, minZoom:0, maxZoom: 9 }; </script> </head> <body> <div id="mapa-leaflet-wmsc" style="height:100%;width:100%"></div> <script> var mapWMSC = L.map('mapa-leaflet-wmsc',{ center: [41.655, -0.877], //Centro de zaragoza en coordenadas geograficas //Configuracion del mapa inicial para visualizar la capa base IDEZar crs: IDEZarConfig.crs, zoom: IDEZarConfig.zoom, minZoom:IDEZarConfig.minZoom, maxZoom: IDEZarConfig.maxZoom}); var idezarWMSC = L.tileLayer.wms( "http://idezar.zaragoza.es/IDEZar_Base_Tiled/WMSTileCache", { crs: crsETRS89, layers: 'base_25830', format: 'image/png', transparent: false, version: '1.1.0', attribution: '© <a href="http://idezar.zaragoza.es">IDEZar</a> contributors, ' + ' © <a href="http://www.zaragoza.es/">Ayuntamiento de Zaragoza</a>', //Definicion de los limites de zoom minZoom: IDEZarConfig.minZoom, maxZoom: IDEZarConfig.maxZoom, //Propiedad necesaria para que se visualice el servcio continuousWorld: true }); mapWMSC.addLayer(idezarWMSC); //Carga de info vectorial var consulta = "http://www.zaragoza.es/api/recurso/turismo/monumento.geojson?srsname=wgs84&rows=2000&fl=id,title,description,geometry"; cargarInfovectorialLeafLet(mapWMSC, consulta); </script> </body> </html>