Leafletjs vs Open Layers - Mapas Offline con OpenStreetMap y JavaScript

Jul 1, 2015 11:40:00 AM / by daniel.comas

 

Hoy os traemos un artículo con el que podréis ver las diferencias de los dos visores de mapas más potentes que hay en el desarrollo OpenSource en JavaScript.

 

Muchos pensaréis que el mejor visor de mapas es Google Maps, realmente en modo online no tendríamos ningún tipo de dudas pero si lo que queremos es utilizar un modo offline (mapas descargados) no podremos hacerlo de esta forma. Es por eso que después de hacer varias pruebas tanto con Leafletjs y Open Layers 3 este es nuestro veredicto.

 

  

 

Podríamos utilizar las librerías angular para estas dos Leafletjs / OL3 (aunque en el caso de OL3 con la directiva los popups no estan muy bien hechos). En este caso hemos querido hacer unas directivas customizadas para hacer un ejemplo senzillo teniendo la máxima libertad en la utilización de las librerías.

 

 

 

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

<map style="margin-top:70px"></map>

  

angular.module('starter.directives', []).directive( 'map' , function () {
return {
restrict: 'AE',
replace: true,
template: '<div id="map" style="max-width: 800px; width:100%; height: 440px; border: 1px solid #AAA;"></div>',
link: function ($scope, element, attrs) {
var map = L.map( 'map', {
center: [41.36456, 2.13180],
minZoom: 7,
zoom: 15,
maxZoom: 15
});

L.tileLayer( 'tiles/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo( map );

var marker = L.marker([41.36456, 2.13180]);

marker.addTo(map)
.bindPopup('Ingens Networks')
.openPopup();

marker.on('click', function(e) {
alert('Ubicación de Ingens, Ciutat de la Justícia Barcelona!');
});
}
};
})

 

 

 

 

 

<link rel="stylesheet" href="lib/openlayers/ol.css" />
<script src="lib/openlayers/ol.js"></script>
<link rel="stylesheet" href="lib/ol3-popups/ol3-popup.css" />
<script src="lib/ol3-popups/ol3-popup.js"></script>

<open-layers style="margin-top:70px"></open-layers>

 

.directive( 'openLayers' , function () {
return {
restrict: 'AE',
replace: true,
template: '<div style="max-width: 800px;width:100%; height: 440px;" id="map1"></div>',
link: function ($scope, element, attrs) {
var openStreetMapLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
new ol.Attribution({
html: 'All maps © ' +
'<a href="http://www.openseamap.org/">openStreetMap</a>'
}),
ol.source.OSM.ATTRIBUTION
],
crossOrigin: null,
//url: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png' online mode
url: 'tiles/{z}/{x}/{y}.png' //offline mode
})
});

var icon64 = 'data:image/png;base64,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';

var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([2.13180, 41.36456], 'EPSG:4326', 'EPSG:900913')), //We need to change transform in OL if we are using OpenStreetMaps
name: 'Ingens Networks',
id: 1
});

var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 40],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 1,
src: icon64,
}))
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
source: vectorSource
});

var map = new ol.Map({
layers: [
openStreetMapLayer,
vectorLayer
],
target: 'map1',
view: new ol.View({
center: ol.proj.transform([2.13180, 41.36456], 'EPSG:4326', 'EPSG:900913'), //We need to change transform in OL if we are using OpenStreetMaps
maxZoom: 15,
minZoom: 7,
zoom: 15
})
});

vectorSource.forEachFeature(function(feature) {
var domElement = document.createElement('div');
domElement.innerHTML = "<div class='popup'>" + feature.get("name") + "</div><div class='arrow'></div>";

map.addOverlay(new ol.Overlay({
element: domElement,
position: ol.extent.getCenter(feature.getGeometry().getExtent()),
offset: [-50,-90]
}));
});

map.getViewport().addEventListener("click", function(e) {
map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
alert("Ubicación de Ingens, Ciutat de la Justícia Barcelona!");
});
});

}
};
})

 

 

  Pros Contras
 

- API muy fácil de usar

- Buena documentación

- Proyecto opensource activo, muy utilizada y contribuciones constantes 

 - Rendimiento menor (Los tiles - trozos de mapa - se consultan cada vez)
 

- Alto rendimiento (Caché integrada - los tiles se guardan)

- Proyecto opensource activo, muy utilizada y contribuciones constantes

- API compleja (parecído o recuerda mucho a OpenGL)

- Muchas más líneas de código

- Documentación escueta

 

 

Ya os comentamos como coger los mapas de openstreetmaps años atrás os dejo el artículo por si queréis realizar vuestras pruebas! Obtener Mapas Offline

 

 

 

Topics: AngularJS, Framework, Ingens Developments, Ionic, JavaScript, mapas, maps, offline, OpenStreetMap, Programación

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas