« »

Ejemplo sencillo de openstreetmap + openlayers

May
15
member
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


date Posted on: Saturday, May 15, 2010 at 17:45 pm
Category 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.



13 Respuestas to “Ejemplo sencillo de openstreetmap + openlayers”

  1. Pablo

    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:

    @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]

    April 17th, 2011 at 11:44 am
     
  2. Yeiler

    Hola a todos, quería preguntar si existe alguna forma de lograr que Openlayers pueda cargar un mapa directamente desde el disco de la computadora sin que este sea servido por la web. Me sería de mucha ayuda si me pudieran ayudar ya que me urge esta información para la tesis de mi carrera.

    [Responder]

    sucotronic Reply:

    @Yeiler, hola Yeiler, échale un ojo a este artículo de la wiki de openstreetmap donde hay un ejemplo que te puede servir: http://wiki.openstreetmap.org/wiki/OpenLayers_Local_Tiles_Example

    [Responder]

    May 31st, 2012 at 4:26 am
     
  3. Marco

    Hola, quiero hacer una consulta, como puedo poner un punto simple o un icono pequeño en el mapa para mostrar una ubicacion, de lo mas sencillo, agradeceria la ayuda…

    [Responder]

    sucotronic Reply:

    @Marco, con el ejemplo que he puesto debería ser suficiente, pero puedes echar un ojo a este ejemplo en la página de openlayers que solo muestra marcadores estáticos en un mapa.

    [Responder]

    November 27th, 2012 at 4:37 am
     
  4. AnzOne

    Gracias por el tutorial; ¿Como haría para descargar el mapa de un determinado país para poderlo colocar en mi propio servidor y no consumir los recursos de OSM?

    Gracias de antemano.

    [Responder]

    sucotronic Reply:

    @AnzOne, hay por la red varios tutoriales. Puedes echarle un ojo a este que tiene todos los detalles de la instalación y la puesta en marcha.

    [Responder]

    AnzOne Reply:

    @sucotronic, Gracias y por responder tan rápido, ya había buscado previamente y ese no lo había visto parece que esta bien completo.
    Me tocará hacerle con una distro GNU/Linux porque en windows ha de ser -como casi siempre- más complicado de configurar tantos archivos.

    Para presentar el mapa le estoy haciendo a través de este ejemplo http://leafletjs.com/examples/geojson.html geoson y leaflet.

    ¿Tienes algúna idea de como solicitar las tile desde el servidor local?
    Disculpas por preguntar tanto pero las comunidades de OSM en español son escasas; cuando termine todo haré una referencia de como hacerle.

    [Responder]

    sucotronic Reply:

    @AnzOne, no entiendo a que te refieres con lo de “solicitar las tiles desde el servidor local”, ¿acceder a las tiles generadas en tu máquina?

    February 17th, 2014 at 20:15 pm
     
  5. ArreaMami

    Muchas gracias por esta publicación de un ejemplo sencillo pero muy práctico! me ha servido de mucho para entender más como trabaja open layer!
    Un saludo crack!;-)

    [Responder]

    August 31st, 2014 at 17:35 pm
     
  6. Luciana

    Quería consultarte, si dado un origen y un destino se puede marcar el camino con una flecha indicando el sentido del mismo?
    Muchas Gracias

    [Responder]

    July 21st, 2015 at 17:41 pm
     
  7. Jose

    Amigo como podría descargar esa librería para utilizarla de manera offline,en la pagina de OpenLayers aparecen dos métodos de descargas al descargarlos me extrae dos archivos js con los siguientes nombres ol,ol-debug cual de ellos es OpenLayers.js?o cual de ellos utilizo

    [Responder]

    August 3rd, 2017 at 16:00 pm
     

Escribe un comentario


a trastear un poco is powered by WordPress
Theme is Coded&Designed by Wordpress Themes at ricdes