1. Taller OSM FLISOL 2014 Asu Creacin de mapas usando OSM Jose Alberto Gonzalez von Schmeling @josego85py Mail: josego85@gmail.com Blog: Proyectos Beta proyectosbeta.net @proyectosbeta

2. OSM (OpenStreetMap) Que es OSM? Funciona como la Wikipedia, es colaborativo, voluntario, gratis y libre. Se puede conocer, editar, descargar datos, etc Para editar se necesita registrarse Para usarlo no se necesita registro. Licencia ODbl (Open Database License) 3. Licencia ODbl Compartir: copiar, distribuir y usar los datos. Crear: elaborar nuevos anlisis empleando la base de datos. Adaptar: modificar, transformar y enriquecer la base de datos. Atribucin: debes atribuir cualquier uso pblico de la base de datos, o anlisis resultante de la base de datos, haciendo referencia a la fuente. 4. Ventajas de usar OSM Licencia libre (incluye uso comercial). Se pueden imprimir los mapas. Se pueden corregir los mapas. 5. Herramientas para el Taller Para crear un mapa vamos a utilizar: Eclipse o el editor favorito de ustedes Leaftlet (versin estable 0.7.2) OSM (Mapa libre) Apache 2 Php 5 (opcional) 6. Leafleat es una librera JavaScript opensource para crear mapas interactivos en un entorno mvil. Ha sido desarrollado por Vladimir Agafonkin de CloudMade con un equipo de colaboradores especializados. http://leafletjs.com/ 7. Quines lo usan? 8. Ventajas de Leaflet sobre OpenLayers Sencillo y rpido de aprender (con un estilo de cdigo moderno) Facilidad de uso Su look and feel (botones y layer swicther, por ejemplo) Ms ligero Soporte mvil Rendimiento 9. Ventajas de OpenLayers sobre Leaflet Openlayers soporta todos los protocolos WebGIS Documentacin ms rica y mejor soporte de la comunidad (Enlace a tutoriales de OpenLayers) Herramientas de edicin Proyecto ms maduro y testado Ms controles de mapa (barra de edicin , medicin, etc) Mejor integracin de proyecciones con Proj4js. Soporte de WMTS 10. Algunas de las ventajas de Leaflet son Sencillo y rpido de aprender Facilidad de uso Caractersticas bsicas pero que funcionan a la perfeccin Soporte mvil HTML 5 y CSS3 Funciona tanto en los modernos como en los viejos navegadores web Ampliable con plugins API bien documentada 11. Primeros pasos con Leaflet Vamos a crear nuestro propio mapa con la API de Leaflet, para ello incluiremos en la cabecera de una pgina web la librera JavaScript leaflet.js y la hoja de estilo leaflet.css y: 12. Clase Central - L.map v_mapa = L.map('mapa').setView([v_latitud, v_longitud], v_zoom); L.map es la clase central de la API. Se usa para crear y manipular el mapa. . 13. Agregar Layers // Humanitarian Style. L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/ {y}.png', { maxZoom: 18, attribution: 'Data u00a9 OpenStreetMap Contributors Tiles u00a9 HOT' }).addTo(v_mapa); 14. Un control de escala L.control.scale().addTo(v_mapa); 15. Usando GeoJson 16. Cambiar icono 17. Mover icono 18. Ejemplos 19. Ejemplos