Category Archives: Web Mapping

Leaflet with browserify: basic tutorial

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

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

Use Overpass API to get OSM data

Overpass API

Have you ever needed very specific data from openstreetmap and don’t want to download the whole state or country? The solution is Overpass API.

The Overpass API (formerly known as OSM Server Side Scripting, or OSM3S) is a read-only API that serves up custom selected parts of the OSM map data. It acts as a database over the web: the client sends a query to the API and gets back the data set that corresponds to the query.

We are going to try the Overpass QL as query language. The whole query source code is divided in statements. We set the type of element that we want: node, way, relation or area. and then filter by tag. Like this


Continue reading

Create a FeatureCollection object from a PostGIS query

Usually to render spatial data on a web map you need GeoJSON data  of the type “FeatureCollection”, and if you have your data on a  PostGIS database you can do a query to get  the geometries on GeoJSON format with the ST_AsGeoJSON(geom) function. Something like this:

SELECT loc_id, loc_name, ST_AsGeoJSON(geom, 4) as geojson FROM locations;

This will return a different row for every feature that should be on the collection, so after run that query you need a function to iterate over every result to insert loc_id and loc_name as properties of every feature and push them to the array of features.

But there is a more efficient way of doing it with this single trick query:

SELECT row_to_json(fc)
FROM ( SELECT 'FeatureCollection' As type, array_to_json(array_agg(f)) As features
   FROM (SELECT 'Feature' As type
    , ST_AsGeoJSON(lg.geom, 4)::json As geometry
    , row_to_json((SELECT l FROM (SELECT loc_id, loc_name) As l
      )) As properties
   FROM locations As lg ) As f ) As fc;

Continue reading

Georeferencing a scanned map with QGIS

Some times you need to have vector data that haven’t been digitized yet, like some old maps with building footprints or street lines. We can scan a map, georeference it in QGIS, and then digitize those features to create new vector layers. Scanned maps don’t contain spatial reference information, so to digitize we need to reference the raster in a specific coordinate system.

In this example we will georeference a map of the city of Barcelona with the layout of the old medieval walls (XIII-XIV) with QGIS.

Continue reading

Getting vector data from OpenStreetMap

Let’s say that we need the Barcelona’s subway lines in geojson for our project, and we decided to use OpenStreetMap data. There is plenty of ways for getting OSM data, the most common is using their API, or the  geofabrik download page,  but this time we gonna use metro-extracts from mapzen.

We look for Barcelona. There is a lot of file formats there:



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.


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 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