Adrián BarabinoViajes · tips

Programación

¿Y por qué no OpenStreetMap y OpenLayers en vez de Google Maps?

3 min de lecturaAdrián Barabino

Hace un par de meses, en el curso de Desarrollo Web Online en mejorando.la aprendí cual era la competencia abierta de Google Maps, esta se llama OpenStreetMap, que no se compara con Bing Maps ni con Google Maps… es libre y mejor!

Hasta el momento no me había surgido la necesidad de usarlo, por el simple hecho de que Google Maps lo tiene casi todo, pero es bueno aclararlo, casi. La necesidad surgió al querer agregar un nuevo lugar a mi sitio Brote Colectivo, el cual en el panel al seleccionar al lugar en el mapa, guardo las coordenadas y estas las mando a la base de datos, para después “renderearlo” al público, con cualquier lugar no tuve drama, pero esta vez necesitaba agregar un pub de Pico Truncado, un pueblo petrolero de 15 mil habitantes, el cual no aparece bien en Google Maps, ya que no se muestran sus calles, y esto me había pasado antes con otro pueblo, pero lo dejé pasar, en esta ocasión opté por solucionarlo.

Bien, me puse a buscar como se veía el pueblo en otros mapas, en bing se veía, pero por el simple prejuicio de que es de Microsoft, con solo buscar “Bing Maps API”, a los segundos opté por buscar otra opción, y ahí me acordé de OpenStreetMap que era libre, y se veía perfectamente, y al rato ya estaba probandolo, en menos de 30 minutos ya tenía exactamente lo que usaba antes con Google Maps, pero ahora con OpenStreetMap y OpenLayers.

¿Qué es OpenLayers?

OpenLayers es la forma fácil de poder usar los mapas de OpenStreetMap en un sitio web utilizando JavaScript, pudiendo hacer uso de Marcadores, entre otras herramientas que Google Maps provee igual, para decirlo más fácil, Open Layers es el API de OpenStreetMap para usarlo en web. Ni hablar de que es completamente libre y gratis.

Ejemplo de uso

<!doctype html>
<html>
<head>
<title>USando OpenLayers</title>

http://openlayers.org/dev/OpenLayers.js

      var map;

      function iniciar_mapa() {
         var map = new OpenLayers.Map('mapa');
            var proj4326 = new OpenLayers.Projection("EPSG:4326");
            var projmerc = new OpenLayers.Projection("EPSG:900913");
            var layerOSM = new OpenLayers.Layer.OSM("Street Map");
            map.addLayers([layerOSM]);
            var lonLat = new OpenLayers.LonLat( -69.2260, -51.62534 )
              .transform(
              new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
              map.getProjectionObject() // to Spherical Mercator Projection
            );

            var zoom=13;

            var markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
            markers.addMarker(new OpenLayers.Marker(lonLat));
            map.setCenter (lonLat, zoom);

            var capa_de_marcadores;
            var marcador;
            var contador_clics = 0;

            map.events.register("click", map, function(e) {
                markers.destroy();
              if(contador_clics>0){
                capa_de_marcadores.removeMarker(marcador);
              };
                var position = this.events.getMousePosition(e);
                var lonlat = map.getLonLatFromPixel(position);
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                OpenLayers.Util.getElement("lat").innerHTML = lonlatTransf.lat;
                OpenLayers.Util.getElement("lng").innerHTML = lonlatTransf.lon;
                var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject());
                capa_de_marcadores = new OpenLayers.Layer.Markers( "Markers" );
                marcador = new OpenLayers.Marker(lonlat);

                capa_de_marcadores.addMarker(marcador);
                map.addLayer(capa_de_marcadores);
                contador_clics++;
            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
          };



</head>
<body onload="iniciar_mapa();">

Latitud: <span id=”lat”> </span><br> Longitud: <span id=”lng”> </span><br> </body> </html>

 Ejemplo en funcionamiento–

¿Qué hace este código?

Lo siguiente, muestra un mapa, que comienza en Rio Gallegos, con un marcador allí, y que al hacer clic en un lugar del mapa, guardará la posición dentro de los <span> con id Lat y Lng, En mi caso en especial, yo lo que hago es guardar esto en un value de un formulario, para guardar esos valores del lugar.

Conclusión

Estamos en una época donde Google hace un tiempo ya dejó de brindar su servicio Google Apps de forma gratis, y donde el uso de Google Maps está limitado y además en algunos casos no es lo suficientemente útil, creo que cada vez hay que optar más por alternativas libres, de las cuales se puede aprender bastante y contribuir en ellas.

También te puede interesar

Más lecturas cerca de este destino o tema.

DevelopmentCómo Integrar AFIP en PHP gratis con la Librería afip-php-libre04 Jul 2024 · Leer artículoDevelopmentCómo insertar datos en base de datos usando JS y PHP30 Jun 2022 · Leer artículoGeneralNIC.ar implementa nuevo sistema20 Ago 2013 · Leer artículoGeneralBrote Colectivo y su desarrollo en vivo por GitHub08 Jun 2013 · Leer artículoProgramaciónLista de To-Do con LocalStorage07 May 2013 · Leer artículoGeneralSimulador de Internet Explorer 6 para nostálgicos07 May 2013 · Leer artículoDiseñoSistema de Soporte via Chat con PHP y AJAX12 Abr 2013 · Leer artículoDiseño#DarkSide40 Pink Floyd celebra los 40 años de su disco con un sitio web HTML524 Mar 2013 · Leer artículo

4 respuestas

  1. José Avatar
    José

    Tu ejemplo me viene fantástico para un programita mío y también me encanta OpenStreetMap, he intentado colocarle un icono y no he podido, tienes alguna sugerencia? muchas gracias de antemano.

    Responder
    1. AdrianBarabino Avatar
      AdrianBarabino

      Hola José,

      En la documentación de OpenLayers podes encontrar más info.

      Así sería el ejemplo:

      var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));

      Saludos!

      Responder
      1. José Avatar
        José

        Perfecto Adrian muchas gracias, dejo el código completo por si a alguien le interesa:

        <!doctype html>
<html>
<head>
<title>USando OpenLayers</title>
<style>
#OpenLayers_Control_MaximizeDiv,#OpenLayers_Control_Attribution_7 {
	display:none;
}
</style>
http://openlayers.org/api/OpenLayers.js

      var map;

      function iniciar_mapa() {
         	var map = new OpenLayers.Map('mapa');
            var proj4326 = new OpenLayers.Projection("EPSG:4326");
            var projmerc = new OpenLayers.Projection("EPSG:900913");
            var layerOSM = new OpenLayers.Layer.OSM("Street Map");
            map.addLayers([layerOSM]);
            var lonLat = new OpenLayers.LonLat( -69.2260, -51.62534 )
              .transform(
              new OpenLayers.Projection("EPSG:4326"), // transform from 
              map.getProjectionObject() // to Spherical Mercator Projection
            );

            var zoom=13;

            var markers = new OpenLayers.Layer.Markers( "Markers" );
			map.addLayer(markers);

			var size = new OpenLayers.Size(45,45);
			var offset = new OpenLayers.Pixel(-(size.w/2),-size.h);
			var icon = new OpenLayers.Icon('http://files.softicons.com/download/web-icons/vista-map-markers-icons-by-icons-land/png/48x48/MapMarker_PushPin1__Pink.png',size, offset);
			markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
			markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));
            markers.addMarker(new OpenLayers.Marker(lonLat,icon));
            map.setCenter (lonLat, zoom);

            var capa_de_marcadores;
            var marcador;
            var contador_clics = 0;

            map.events.register("click", map, function(e) {
                markers.destroy();
              if(contador_clics>0){
                capa_de_marcadores.removeMarker(marcador);
              };
                var position = this.events.getMousePosition(e);
                var lonlat = map.getLonLatFromPixel(position);
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                OpenLayers.Util.getElement("lat").innerHTML = lonlatTransf.lat;
                OpenLayers.Util.getElement("lng").innerHTML = 
lonlatTransf.lon;
                var lonlat = lonlatTransf.transform(proj4326, 
map.getProjectionObject());
                capa_de_marcadores = new OpenLayers.Layer.Markers( "Markers" );
                marcador = new OpenLayers.Marker(lonlat,icon);

                capa_de_marcadores.addMarker(marcador);
                map.addLayer(capa_de_marcadores);
                contador_clics++;
            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
          };



</head>
<body onload="iniciar_mapa();">

  Latitud: <span id="lat"> </span><br>
  Longitud: <span id="lng"> </span><br>
</body>
</html>

        http://liveweave.com/KCF6YS

        Responder
        1. AdrianBarabino Avatar
          AdrianBarabino

          Gracias por el aporte José, te corregí una linea que daba error, pero ahí está perfecto.
          Saludos!

          Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *