Tag Archives: LeafletJS

Leaflet with browserify: basic tutorial

This post will will show you how to build a very simple application that uses leaflet js with browserify.
http://browserify.org/

why do you want to do that?

Browserify will let us use node modules on the browser side (and there is like 255000 total packages to choose on npm) , on NPM you will find lot’s of client-side packages like JQuery, and of course, our one and only LeafletJS. Also, it let you separate your own code on modules, making it more easy to maintain especially when you end up with a very large JavaScript project.

Continue reading

Turf: GIS en la web

Los chicos de mapbox nos han traído un regalito muy especial este fin de año, una nueva librería de javascript llamada Turf.  Turf permite hacer operaciones geospaciales  (geoprocesamiento) directamente desde el navegador (#inabrowserbaby).

Turf es ligero, rápido y opensource (chupate esa ArcgisOnline)


Continue reading

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