Continúo con la serie de Mashups con Open Data Euskadi. En este caso cargo en Google Maps los datos obtenidos a través de un WMS (Web Map Service).
El mapa resultante muestra zonas que soportan o han soportado actividades o instalaciones potencialmente contaminantes del suelo en la Comunidad Autónoma del País Vasco.
Los datos:
Obtenidos de Open Data Euskadi (Geo Euskadi):
“Mapa del Inventario de suelos que soportan o han soportado actividades o instalaciones potencialmente contaminantes del suelo en la Comunidad Autónoma del País Vasco a escala 1:25.000 (año 2008).
La metodología utilizada para la elaboración del inventario se ha basado principalmente en la recopilación de información de las fuentes documentales municipales y supramunicipales, visitas de campo y entrevistas personales con técnicos y técnicas municipales con la finalidad, todo ello, de identificar y localizar las actividades potencialmente contaminantes del suelo y obtener datos sobre ellas.”
Código completo:
Para la visualización de datos superponemos la capa de datos con la llamada oportuna al WMS como se ve en el código:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var map;
//Define custom WMS tiled layer
var SLPLayer = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
var proj = map.getProjection();
var zfactor = Math.pow(2, zoom);
// get Long Lat coordinates
var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));
//corrections for the slight shift of the SLP (mapserver)
var deltaX = 0;
var deltaY = 0;
//create the Bounding box string
var bbox = (top.lng() + deltaX) + "," +
(bot.lat() + deltaY) + "," +
(bot.lng() + deltaX) + "," +
(top.lat() + deltaY);
//base WMS URL
var url = "http://www.geo.euskadi.net/WMS_INGURUMENA?";
url += "&REQUEST=GetMap"; //WMS operation
url += "&SERVICE=WMS"; //WMS service
url += "&VERSION=1.1.1"; //WMS version
url += "&LAYERS=4"; //WMS layers
url += "&FORMAT=image/png"; //WMS format
url += "&BGCOLOR=0xFFFFFF";
url += "&TRANSPARENT=TRUE";
url += "&SRS=EPSG:4326"; //set WGS84
url += "&BBOX=" + bbox; // set bounding box
url += "&WIDTH=256"; //tile size in google
url += "&HEIGHT=256";
url += "&STYLES=default";
return url; // return URL for the tile
},
tileSize: new google.maps.Size(256, 256),
isPng: true
});
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(43.034768, -2.620239),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//add WMS layer
map.overlayMapTypes.push(SLPLayer);
//Show logo
var logoDiv = document.createElement('DIV');
logoDiv.innerHTML = '<a href="http://clevermaps.info" target="_blank"><img src="http://clevermaps.s3.amazonaws.com/images/cleverMapsLogoBlack.png" style="width: 250px" border=0/></a>';
logoDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoDiv);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
#1 por Juan Carlos el 18 febrero, 2013 - 4:47 pm
Hola,
He visto tu ejemplo de emplear la api de google con los WMS de geoEuskadi. Está genial.
Sin embargo la información sale desplazada. Intentaré averiguar cuál es la razón, quizás sea un problema de la configuración del WMS de geoeuskadi, puesto que hasta la fecha lo hemos empleado sobre todo 25830 y 23030.
Estaría muy bien dar con el problema, porque de esta forma cualquier información de los WMS de geoeuskadi saldrá desplazada. Intentaré averiguar si es problema del WMS de http://www.geo.euskadi.net
un saludo.
#2 por belensaez el 19 febrero, 2013 - 9:47 am
Muchas gracias Juan Carlos. Me alegra te haya gustado el ejemplo. Saludos, Belén.
#3 por Juan Carlos el 20 febrero, 2013 - 12:53 pm
Hola Belén,
Al final pasé la consulta a http://www.geo.euskadi.net
Al parecer la transformación del WMS a latitud, longitud (4326) era errónea y por eso se desplazaba.
Han republicado el servicio WMS de INGURUMENA, y ahora cuadra perfectamente.
Aunque para ello previamente debes poner a 0 los valores de deltaX y deltaY.
Tu mashup ha colaborado en mejorar el servicio de geoeuskadi.
un saludo.
#4 por belensaez el 21 febrero, 2013 - 9:25 am
Un placer haber sido de ayuda. El mapa y el código en el post han sido actualizado con los valores de deltaX y deltaY a 0.
Saludos.