Añadiendo OpenLayers a Blogger

Integración de OpenLayers en Blogger.

Si bien la forma más sencilla pasa por colocar una etiqueta iframe para llamar a una página externa, donde tengamos alojada la aplicación desarrollada en OL, la incorporación de un artilugio o widget facilita en gran medida la tarea, aunque este debe ser modificado para poder incorporar las capas que deseemos asi como los controles que creamos necesarios y que nos facilita la librería OpenLayers. El proceso de integración de los mapas es sencillo, teniendo que añádir nada más una etiqueta div en nuestros post donde se configuran los parameros de anchura, altura, coordenadas del centro del Mapa y el nivel de zoon deseado apelando a la clase slippymap sobre la que se basa este widget la extesión para incrustrar en MediaWiki Openlayers y desarrollada por el grupo de OpenStreetMap.

El widget original puede ser descargado aqui.

Una personalización del mismo incorporando otras capas

<br /><style><br />.slippymap img { padding: 0px !important; border: none !important;}<br /></style><br /><!-- bring in the OpenLayers javascript library --><br /><script src="http://openlayers.org/api/OpenLayers.js"></script><br /><!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. --><br /><script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script><br /><br /><script type="text/javascript"><!--<br />// Blogger Slippy Map 0.1.1<br />var i = 0;<br />var lat = 54;<br />var lon = 0;<br />var z = 4;<br />var style = "width:300px; height:200px;";<br />var element1, element2, element3, text;<br />var tags = document.getElementsByTagName("div");<br /><br /> for ( var j=0; j < tags.length; j++ ) {<br /><br /> if ( tags[j].className == "slippymap" ) {<br /><br /> i++;<br /><br /> if ( tags[j].getAttribute("lat") ) {<br /> lat = tags[j].getAttribute("lat");}<br /> if ( tags[j].getAttribute("lon") ) {<br /> lon = tags[j].getAttribute("lon");}<br /> if ( tags[j].getAttribute("z") ) {<br /> z = tags[j].getAttribute("z");}<br /> if ( tags[j].getAttribute("style") ) {<br /> style = tags[j].getAttribute("style");}<br /><br /> element1 = document.createElement("div");<br /> element1.setAttribute("class","tempmap");<br /> element1.setAttribute("style","margin-bottom:-35px;");<br /> <!-- define a DIV into which the map will appear --><br /> element2 = document.createElement("div");<br /> element2.setAttribute("id", "map" + i);<br /> element2.setAttribute("style", style <br /> + " border-style:solid; border-width:1px; border-color:#000;");<br /> element1.appendChild(element2);<br /> element2 = document.createElement("br");<br /> element1.appendChild(element2);<br /> element2 = document.createElement("span");<br /> element2.setAttribute("class","tempmap")<br /> element2.setAttribute("style",<br /> "font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");<br /> text = document.createTextNode("Data by ");<br /> element2.appendChild(text);<br /> element3 = document.createElement("a");<br /> element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat <br /> + "&lon=" + lon + "&zoom=" + z );<br /> element3.setAttribute("title","See this map on OpenStreetMap.org");<br /> text = document.createTextNode("OpenStreetMap");<br /> element3.appendChild(text);<br /> element2.appendChild(element3);<br /> element3 = document.createElement("br");<br /> element2.appendChild(element3);<br /> element3 = document.createElement("a");<br /> element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");<br /> element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");<br /> text = document.createTextNode("CC-BY-SA-2.0");<br /> element3.appendChild(text);<br /> element2.appendChild(element3);<br /> element1.appendChild(element2);<br /> tags[j].appendChild(element1);<br /><br /> eval("var lat"+ i + "=" + lat + "; var lon"<br /> + i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i<br /> + "; function lonLatToMercator(ll) { var lon = ll.lon * 20037508.34 / 180; "<br /> + "var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / "<br /> + "(Math.PI / 180); lat = lat * 20037508.34 / 180; return new "<br /> + "OpenLayers.LonLat(lon, lat); } ;"<br /> + "if (typeof window.addEventListener == 'function') { "<br /> + "window.addEventListener('load', init, false);} else if (typeof "<br /> + "window.attachEvent == 'object') { window.attachEvent('onload', "<br /> + "init);} else { var oldonload = window.onload ; if (typeof "<br /> + "window.onload != 'function') { window.onload = init;} else { "<br /> + "window.onload = function() { oldonload(); init(); } } };"<br /> + "function init() { map" + i + " = new OpenLayers.Map('map" + i <br /> + "', { controls:[ new OpenLayers.Control.Navigation()"<br /> + ", new OpenLayers.Control.PanZoom(), new OpenLayers.Control"<br /> + ".LayerSwitcher()], maxExtent: new OpenLayers.Bounds(-20037508.34, "<br /> + "-20037508.34, 20037508.34, 20037508.34), maxResolution:156543.0399, "<br /> + "units:'meters', projection: 'EPSG:900913' } ); var mapnik = new "<br /> + "OpenLayers.Layer.OSM.Mapnik('Mapnik'); map" + i + ".addLayer(mapnik);"<br /> + " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "<br /> + "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"<br /> + ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "<br /> + "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i <br /> + ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "<br /> + "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i <br /> + ".setCenter (lonLat" + i + ", zoom" + i + "); } ");<br /> }<br /> }<br />--></script><br />

Un ejemplo del widget original

Otro

Estos ejemplos acceden a capas del tipo OSM, asi como nos amos de vacaciones habrá que tirar de GPS para poder utilizarlos. La personalización realizada se fundamenta en las capas alojadas en la IDE española asi como en alguna de nuestro servidor de Mapas.

Ejemplo