Ejemplo I: Uso de Leaflet
Visualización de los aparcamientos públicos de la ciudad sobre la cartografía base de Zaragoza mediante el acceso al WMS de Cartociudad (en ETRS89 UTM30N) y al API Zaragoza (en WGS84)
Código Fuente
<html> <head> <meta charset="utf-8"> <title>Visor Leaflet WMS</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 WMS no tileados --> <!-- Versión 0.7.3 del plugin ptv-logistics/Leaflet.NonTiledLayer Repositorio: https://github.com/ptv-logistics/Leaflet.NonTiledLayer/tree/v0.7.3 --> <script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/NonTiledLayer.js"></script> <script src="//www.zaragoza.es/cont/plantillas/mapa/leaflet/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-wms" style="height:100%;width:100%;"></div> <script> var mapWMS = L.map('mapa-leaflet-wms',{ center: [41.654, -0.818], //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 cartociudadWMS = new L.NonTiledLayer.WMS("http://www.cartociudad.es/wms/CARTOCIUDAD/CARTOCIUDAD", { crs: IDEZarConfig.crs, maxZoom: IDEZarConfig.maxZoom, opacity: 1.0, layers: ['Callejero','FondoUrbano'], format: 'image/png', transparent: false, version:'1.3.0', pane: mapWMS.getPanes().tilePane, zIndex: 50, }); mapWMS.addLayer(cartociudadWMS); //Carga de info vectorial var consulta = "http://www.zaragoza.es/api/recurso/urbanismo-infraestructuras/equipamiento/aparcamiento-publico.geojson?rf=html&srsname=wgs84"; cargarInfovectorialLeafLet(mapWMS, consulta); </script> </body> </html>