« Insertar imágenes en html directamente Backgammon »
sucotronic
Posted on: Saturday, May 15, 2010 at 17:45 pm
programación.
Puedes seguir las respuestas de esta entrada a traves de l feed RSS 2.0.
Puedes dejar una respuesta, o trackback desde tu propio sitio.
Ejemplo sencillo de openstreetmap + openlayers
May
15
sucotronic
Es usual ver muchos mapas de Google incrustados en cientos de sitios web, pero para aquellos que no quieran caer en las garras de este gigante (o por cualquier otra razón) es posible utilizar la alternativa libre y colaborativa Openstreetmap junto con la librería javascript para visualizar mapas Openlayers.
Y para que se vea lo bien que funciona esta combinación aquí os dejo un ejemplo al que le sigue el código que lo hace funcionar:
El código que muestra el mapa y ejecuta las acciones de los botones es el siguiente:
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
var map;
function crearMapa() {
if (document.getElementById('basicMap').innerHTML == ""){
// apaño para modificar el estilo de texto de la atribución
var S = document.createElement('style');
S.type = 'text/css';
var T = '.olControlAttribution {bottom: 0 !important;}';
T = document.createTextNode(T)
S.appendChild(T);
document.body.appendChild(S);
// Creación de un mapa
map = new OpenLayers.Map("basicMap");
// Creación de la capa que muestra el mapa de openstreetmap
var mapnik = new OpenLayers.Layer.OSM();
// Muestra imagenes pixeladas mientras se hace zum
mapnik.transitionEffect = "resize";
// Añadir la capa al mapa
map.addLayer(mapnik);
//web para sacar coordenadas
//http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php
// Centrar el mapa transformando las coordenadas
map.setCenter(new OpenLayers.LonLat(-0.878563,41.652603)
.transform(
new OpenLayers.Projection("EPSG:4326"), // de WGS 1984
new OpenLayers.Projection("EPSG:900913") // a Proyección Esférica Mercator
), 13 // Nivel de zum
);
}else{
alert("¡El mapa ya ha sido creado!");
}
}
function mostrarPopup() {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"La pilarica",
new OpenLayers.LonLat(-0.878756,41.656717)
.transform(
new OpenLayers.Projection("EPSG:4326"), // de WGS 1984
new OpenLayers.Projection("EPSG:900913")),
null,
"<img src=\"http://t1.gstatic.com/images?q=tbn:KWchVEJywTCKcM:http://upload.wikimedia.org/wikipedia/commons/5/58/Basilica_del_Pilar_ZaragozaAragon%28Spain%29.jpg\" alt=\"pilarica\" />",
null,
true
));
}
</script>
<button onclick="crearMapa();"> CREAR MAPA </button> <button onclick="mostrarPopup();"> Mostrar LA PILARICA </button>
<div style="width: 550px;height: 300px;margin: 0;" id="basicMap"></div>
Fuente: openstreetmap.org wiki
Posted on: Saturday, May 15, 2010 at 17:45 pm programación. Puedes seguir las respuestas de esta entrada a traves de l feed RSS 2.0.
Puedes dejar una respuesta, o trackback desde tu propio sitio.
Hola!
Quería hacerte una consulta:
Estoy empezando con openlayers, hasta el momento creo que me desenvuelvo bien, creo mapas con capas en diversos formatos, alguna herramienta, controles, vectores, etc…
El problema que tengo es que, una vez hecho esto, me he dado cuenta de que no sé publicar los mapas. Todo lo que tengo hecho lo tengo en mi localhost con tomcat, etc.
De momento descarto la opción de contratar un hosting con java para publicarlos, y estaba intentando ver cómo integrar el mapa en blogspot o similares, no he conseguido hacerlo.
He visto este post y veo que se puede, pero intento utilizar tu código como ejemplo, pero no me carga el mapa, tan solo los botones, debe haber algo que hago mal, porque no funciona la funcion crearmapa() al activar el botón.
¿Hay que hacer algo más para publicar openlayers en blosgpot?
Gracias!
Un saludo
[Responder]
sucotronic Reply:
April 17th, 2011 at 16:38 pm
@Pablo, en algunos sitios las funciones javascript quedan invalidadas, desconozco si blogspot tiene algo que afecte a la api de openlayers. De todos modos te recomiendo usar firefox e instalar el complemento firebug para tener la consola de javascript a mano y poder ver que tipo de error te sucede.
[Responder]