UTFGrid en leaflet

En la actualidad la mayoría de los servidores sirven los mapas en forma de tiles (o teselas). Estos “tiled maps” están formados por un mosaico de imágenes raster de 256 x 256 pixeles llamados “tiles”.

Cada nivel de zoom esta formado por un set de tiles, a mayor zoom mas teselas se necesitan para formar la imagen total. El servidor no sirve los mapas “on the fly”, sino que las teselas se generan con antelación para poder servirlas al cliente según se desplaza o hace zoom por el mapa.

tiled:map

La imagen del mapa se divide en tiles de 256×256 pixeles

Continue reading

Utilizar los servicios de ArcGIS Online en un mapa hecho con Leaflet

Hay muchos datos públicos que se encuentran en ArcGIS Online o en ArcGIS server, por lo que para poder incluirlos en tu aplicación web necesitas, o bien usar la API de JavaScript para ArcGIS, o si estas habituado a usar LeafletJS , utilizar el plugin Esri-Leaflet. La API de Javascript es un framework que utiliza el kit de herramientas DOJO, lo que puede hacer su uso algo más complicado, como siempre, dependiendo de lo que necesite tu aplicación  podrás usar uno u otro. En este caso vamos a usar la librería Esri-Leaflet.js

Esri-Leaflet

Esri Leaflet permite usar los mapas base de Esri, y los feature services, mapas de tiles, dinámicos y de imágenes que estén alojados en ArcGIS online o ArcGIS server. En este post os mostraremos como añadir a un mapa creado con leaflet: basemaps, mapas de tiles, mapas dinámicos (que muestran datos en tiempo real) y  capas con datos vectoriales .

Continue reading

Haciendo mapas con Angular y leaflet, 2ª parte

En el anterior post os mostraba como crear mapas sencillos con angular gracias a la directiva Leaflet, ahora os mostraré como añadir un selector de capas desde el que añadir capas de un WMS.

La directiva Leaflet de momento solo funciona con el src web mercator, así que hay que utilizar wms que tengan el EPGS3857 entre sus opciones disponibles.

En este ejemplo vamos a utilizar el wms del Instituto Geográfico Nacional, primero hacemos un GetCapabilities para ver las características del servicio:

Continue reading

Haciendo mapas con Angular y Leaflet

AngularJS es un framework de JavaScript basado en el patrón MVC (Modelo-Vista-Controlador) que permite separar la parte visual de la aplicación de las estructuras de datos, permitiendo reutilizar código con facilidad (y todo ello desde el front end). La directiva leaflet de angular, creada por David Rubert aka @tombatossals, permite incluir mapas interactivos controlados por la librería LeafletJS dentro del código HTML.

Una directiva en Angular es la forma de extender el DOM añadiendo un componente de HTML creado específicamente por nosotros y que sirve para modificar el modelo (es simplemente una función que devuelve un elemento del DOM para darle una funcionalidad extra). 

Continue reading

Selección por rectángulo en CartoDB

CartoDB funciona con PostGIS así que podemos usar los mismos comandos, salvo alguna pequeña diferencia que luego veremos.

Primero hay que crear un polígono rectangular que nos sirva para hacer la selección de aquellos puntos contenidos dentro de el. Usamos ST_MakeEnvelope, que crea un rectángulo a partir de unas x/y mínimas y máximas:

ST_MakeEnvelope(double precision xmin, double precision ymin, double precision xmax, double precision ymax, integer srid=unknown);

Continue reading

Como añadir un mapa base con una imágen satélite a leaflet

La primera opción que se le ocurre a todo el mundo es añadir la capa de Google, aunque no esta del todo claro que para los chicos de Google sea legal que usemos sus imágenes en un mapa hecho con Leaflet , y no con la API de Google Maps. De cualquier manera, se puede hacer gracias a un pluggin desarrollado por Pavel Shramov .

Primero descarga el fichero: Google.js

Incluye los scripts de la API de Google Maps y el pluggin en tu html:

<script src=”http://maps.google.com/maps/api/js?v=3&sensor=false”></script>
<script src=”Google.js”></script>

Continue reading

Visualizar edificios 3D con OSM Buildings

OSM Buildings en una pequeña librería de Javascript que permite extruir las geometrías 2D de OpenStreetMap en 3D y visualizarlas en mapas interactivos. OSM Buildings no genera un verdadero mapa en 3D como sería el caso de Three.js, lo que hace es generar una perspectiva 3D en un mapa 2D.

http://osmbuildings.org/

OSMbuildings funciona tanto para OpenLayers como para Leaflet.js. En este ejemplo usaremos la librería de Leaflet para crear un mapa al que añadiremos los edificios en 3D como capa extra.

Continue reading

Tutorial: Visualización de imágenes Landsat8 con Opticks

En este ejemplo vamos a trabajar con un software libre y open source llamado Opticks. Características:

  • Soporta los siguientes formatos: NITF 2.0/2.1, GeoTIFF, ENVI, ASPAM/PAR, CGM, DTED, Generic RAW, ESRI Shapefile, HDF5, AVI, MPEG, JPEG, GIF, PNG, BMP
  • Muchos controles del display de la imagen: colormap, histograma, etc.
  • Capacidad para procesar imágenes >16GB
  • Soporta datasets > 1TB
  • Soporta el procesado de datos en varios interlineados: BIP, BSQ o BIL
  • Se pueden añadir extensiones para conseguir nuevas capacidades (como la extensión para programar con IDL, o Python)

Opticks. Remote sensing and imagery analysis software platform

Continue reading

Story maps: Usando los mapas para contar una historia

Este fin de semana he estado experimentando con una nueva librería  open source, creada por los chicos de CartoDB, que permite contar una historia con un mapa online. Ahora mismo, la tendencia en todo este mundo de los mapas web son los story maps, sobre todo orientados al mundo del periodismo. En lugar de sea el usuario el que pro-activamente tenga que buscar la información que ofrecen los datos del mapa, es la propia aplicación la que se encarga de guiarle y de contarle la historia que hay detrás de esos datos.

Continue reading