Code Combat – Quienes somos – Quienes somos

View Github Repository Open presentation in a new window

Delawen

See all presentation from Delawen

Code Combat – Quienes somos – Quienes somos

1 0

codeCombat-LeafletOpenLayers

Comparativa amena y práctica donde cada ponente defenderá una de las dos librerías, enfrentándose y peleando por demostrar qué librería es mejor. A lo largo de la presentación no sólo se irán desgranando las características, sino que se mostrarán también

On Github Delawen / codeCombat-LeafletOpenLayers

Code Combat

Leaflet - OpenLayers

Quienes somos

Alejandro Díaz - @alediaztorres

Desarrollador GIS Miembro de

Quienes somos

María Arias de Reyna - @delawen

Desarrolladora GIS Miembro de

planteamiento del enfrentamiento

  • Dos librerías
  • Una lista de funcionalidades
  • Que gane el mejor

Tipos de Capas

Nos interesa:
  • Capas Raster
  • Capas Vectoriales
Puntos extra:
  • Variedad de tipos
  • Simplicidad a la hora de crearlas
  • Flexibilidad en los estilos

LeafLet

Capas Raster

Código HMTL

<div id="mapRasterLayer" class="map" style="height: 300px">
</div>

Código javascript

function initmap() {
    // set up the map
    map = new L.Map('mapRasterLayer');
    // create the tile layer with correct attribution
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
    map.setView(new L.LatLng(41.9793006, 2.8199439), 14);
    map.addLayer(osm);
}

LeafLet

Capas Raster

LeafLet

Capas Vectoriales

Código HMTL

<div id="mapVectorLayer" class="map" style="height: 300px">
</div>

Código javascript

function initmap() {
    // set up the map
    map = new L.Map('mapVectorLayer');
    // create the tile layer with correct attribution
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
    map.setView(new L.LatLng(41.9793006, 2.8199439), 14);
    map.addLayer(osm);
    // Add vector features
    var circle = L.circle([41.9793006, 2.8199439], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(map);
}

LeafLet

Capas Vectoriales

OpenLayers

Capas Raster

Código HMTL

<div id="map" style="width:100%;height:330px" class="smallmap"></div>

Código javascript

function init() {
			    var map = new OpenLayers.Map({
			        div: "map"
			    });
			    var osm = new OpenLayers.Layer.OSM();
			    map.addLayers([osm]);
			    map.setCenter(
		                new OpenLayers.LonLat(2.8199439, 41.9793006)
				.transform(new OpenLayers.Projection("EPSG:4326"),
		                    map.getProjectionObject()), 12);
			}

OpenLayers

Capas Raster

OpenLayers

Capas Vectoriales

Código HMTL

<div id="map" style="width:100%;height:330px" class="smallmap"></div>

Código javascript

function init() {
		    var map = new OpenLayers.Map("map");
		    var feature = new OpenLayers.Feature.Vector(
		                    new OpenLayers.Geometry.Point(
		                        313914.7189699, 5157879.2777324
		                    ), {type: 40});
	              var layer = new OpenLayers.Layer.Vector('Points', {
	                styleMap: new OpenLayers.StyleMap({
	                    pointRadius: "${type}", // based on feature.attributes.type
	                    fillColor: "#FF6666",fillOpacity: 0.3
	                })});
		    layer.addFeatures([feature]);
	            map.addLayer(layer);
	}

OpenLayers

Capas Vectoriales

Puntuación

  • Capas Vectoriales: 
    • Empate
  • Capas Raster: 
    • Empate
  • Variedad: 
    • OpenLayers
  • Simplicidad: 
    • Empate
  • Estilos: 
    • OpenLayers
  • Ganador: OpenLayers

Habilidades de Interacción

Nos interesa:
  • Interacción con el mapa
    • Click
    • Arrastre
    • ...
  • Interacción con las capas
    • Selección de Feature
    • Arrastre de Feature
    • ...
Puntos extra:
  • Extensiones modularizables

Puntuación

  • Interacción mapa: 
    • Empate
  • Interacción capas: 
    • Empate
  • Modularizable:
    •  Empate
  • Ganador: Empate

Map Controls

Nos interesa:
  • Simplicidad de uso
  • Controles básicos
    • zoom
    • escala
    • ...
  • Controles avanzados
Puntos extra:
  • Controles extensibles

LeafLet

Código HMTL

        <div id="mapControls" class="map" style="height: 300px">
        </div>

Código javascript

    function initmap() {
                // Creamos el mapa, el zoom (+/-) viene por defecto
                map = new L.Map('mapControls');
                // Modificamos el centro del mapa
                map.setView(new L.LatLng(41.9793006, 2.8199439), 14);
                // Create the tile layer url
                var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                // el control de atribución viene por defecto,
                // pero lo podemos personalizar de la siguiente forma
                var attrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors. Imagery © 2011 CloudMade';
                // Creamos la capa con el mapa de OSM
                var osm = new L.TileLayer(osmUrl, {attribution: attrib});
                // Añadimos la capa al mapa
                map.addLayer(osm);
                // Creamos una capa con un círculo al que se le puede hacer clic
                var circle = L.circle([41.9793006, 2.8199439], 500, {
                    color: 'red',
                    fillColor: '#f03',
                    fillOpacity: 0.5
                }).bindPopup("Clic").addTo(map);
                var cmUrl = 'http://{s}.tile.cloudmade.com/36c9ef9aa99742b48650db1124bf483f/{styleId}@2x/256/{z}/{x}/{y}.png';
                var midnight  = L.tileLayer(cmUrl, {styleId: 999, attribution: attrib}).addTo(map);
                var baseLayers = {
                    "OpenStreetMap": osm,
                    "Night View": midnight
                };
                var overlays = {
                    "Circle": circle
                };
                // Añadimos el intercambiador de capas
                L.control.layers(baseLayers, overlays).addTo(map);
                // Añadimos la escala
                L.control.scale().addTo(map);
            }

LeafLet

Map Controls

OpenLayers

Código HMTL

        <div id="map" style="width:100%;height:330px" class="smallmap"></div>

Código javascript

    function init() {
			   //zoom y selector de capas vienen por defecto
			   // atribution viene por defecto para OSM, pero vamos a añadirlos explícitamente para otra capa
			    var map = new OpenLayers.Map("map");
			                var options = {attribution: {
			                        title: "Provided by OSGeo",
			                        href: "http://www.osgeo.org/"
			                    }};
			    map.addLayer(new OpenLayers.Layer.WMS("OpenLayers WMS",
			              "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers:'basic'}, options));
			    map.setCenter([2.8199439, 41.9793006], 12);
			    var vectors = new OpenLayers.Layer.Vector("vector",  {
		                styleMap: new OpenLayers.StyleMap({
		                    pointRadius: "${type}", // based on feature.attributes.type
		                    fillColor: "#FF6666",
				    fillOpacity: 0.3})}
				);
		            map.addLayer(vectors);
		            var feature = new OpenLayers.Feature.Vector(
		                 new OpenLayers.Geometry.Point(2.8199439, 41.9793006),
					{type:40});
		            vectors.addFeatures([feature]);
		
		            var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
		                hover: true, highlightOnly: false,
		                eventListeners: {featurehighlighted: report}
		            });
		
		            var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,{clickout: true});
		
		            map.addControl(highlightCtrl);
		            map.addControl(selectCtrl);
		            highlightCtrl.activate();
			    selectCtrl.activate();
			   map.addControls([new OpenLayers.Control.ScaleLine()]);
			}

OpenLayers

Map Controls

Puntuación

  • Simplicidad de uso: 
    • Empate
  • Controles básicos: 
    • Empate
  • Controles avanzados: 
    • OpenLayers
  • Extensibles: 
    • Empate
  • Ganador: OpenLayers

Compatibilidad entre Navegadores

Nos interesa:
  • Soporte en escritorio
  • Soporte en movilidad
Puntos extra:
  • Soporte en navegadores antiguos
  • Uso de HTML5 

Puntuación

  • Escritorio: 
    • Empate
  • Movilidad: 
    • Empate
  • Navegadores Antiguos: 
    • OpenLayers
  • Uso de HTML5: 
    • Leaflet
  • Ganador: Empate

Módulos (Extensiones) y Personalización

Nos interesa:
  • Acepta extensiones
  • Acepta cambios en el estilo
Puntos extra:
  • Repositorio extensiones de terceras partes
  • CSS3

PunTuación

  • Extensiones: 
    • Empate
  • Estilo: 
    • Empate
  • Repositorio: 
    • Leaflet
  • CSS3: 
    • Leaflet
  • Ganador: Leaflet

Resumen

  • Tipos de Capas: OpenLayers
  • Habilidades de Interacción: Empate
  • Controles del Mapa: OpenLayers
  • Compatibilidad entre Navegadores: Empate
  • Módulos (Extensiones) y Personalización: Leaflet
Conclusión: Empate 
(con OpenLayers a la cabeza)