Using QGIS to gather, visualize, analyze, edit, process and export Geo Data is fun. I only discovered QGIS fairly recently. And now of course I see it popping up everywhere. I read about Leaflet, DataWrapper, OpenStreetMap, CartoDB, MapWarper, MapShaper, ArcGIS – and somehow everywhere I turn QGIS pops up again. As a great tool for working with geo data in many different formats, bringing data together from different sources and preparing data for visualization and use in (web) applications. I guess I will be seeing more of QGIS in times to come.
In this brief article I want to describe – primarily as a note to myself – how I can work with CartoDB data in QGIS. And how OpenStreetMap is preconfigured.
CartoDB (a software as a service cloud computing platform that provides GIS, web mapping, and spatial data science tools) provides a number of base maps that can easily be used in geo applications including tools such as QGIS and programming libraries such as Leaflet.
CartoDB basemaps can easily be added in QGIS – to provide map layers.
To add a Carto(DB) base map to the QGIS project, simply expand the node for XYZ Tiles in the browser. Right click on the node and select the New Connection option in the context menu. Then edit the connection details:
- Provide a name that makes sense to you
- Provide the URL. For example: http://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png
- Change the zoomlevel – if you so desire – to a maximum of 20
Click on OK.
The connection is added. It can now be added as a layer in the current project – either from the right mouse menu or through a double click.
The result: the map shows up. Ready for manipulation, analysis etc.
To see one other basemap in action, I add the map with the style light_only_labels. This only contains the labels in the base map – the names of cities.
http://basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png
When only this layer is shown, this is what it looks like:
And on a different zoom level:
OpenStreetMap – an open source project with data that anyone can use – is preconfigured in QGIS. Under XYZ Tiles the connection is predefined at installation time.
Add the OpenStreetMap layer to the project and it will show up.
Now we can build other layers on top of this and have them displayed in the context of the actual geographical structure of the world,
Add GeoJSON layer based on a remote GeoJSON file
For example: in this article I discussed creating a map using d3.js and GeoJSON and I introduced a GeoJSON file with the office locations in the Netherlands of the Conclusion ecosystem.
From the Layer menu, pick Add Layer | Add Vector Layer. In the popup window, select Protocol for Source Type and provide the URL to the source – in this case the Raw content URL to the document in GitHub.
Click on Add,. Then close the window.
A new layer has been added and the features from the GeoJSON file show up on top of the map layer:
With a little bit of tweaking, I can get custom markers and labels displayed (with content derived from the properties in the features in the GeoJSON file) for each office:
This is done through the layer properties dialog
With some help from ChatGPT:
In QGIS (Quantum GIS), you can combine a vector layer based on a GeoJSON source with a layer based on OpenStreetMap (OSM) and export them as a single image. This is a common task in GIS to create composite maps that include various layers of geographic information.
- Go to
Project > Import/Export > Export Map to Image. - In the dialog that opens, you can set the output resolution, dimensions, and other settings.
- Choose a location to save the image file and click
Export.
Here is the resulting image:
Resources
OpenStreetMap – https://www.openstreetmap.org/ –
Leaflet – https://leafletjs.com/ – the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need.
StackExchange thread on CartoDB and QGIS – https://gis.stackexchange.com/questions/290494/adding-cartodb-voyager-basemap-to-qgis-and-mapinfo
CartoDB – GitHub Repo with basemap styles – https://github.com/CartoDB/basemap-styles (indicating 75K free mapview usages per month) . This identifies the structure of the CartoDB URLs and the values for style that can be provided:
light_all,
dark_all,
light_nolabels,
light_only_labels,
dark_nolabels,
dark_only_labels,
rastertiles/voyager,
rastertiles/voyager_nolabels,
rastertiles/voyager_only_labels,
rastertiles/voyager_labels_under