Converting geo-data with QGIS to be used in Leaflet

<h3 class="entry-title">Converting geo-data with QGIS to be used in Leaflet</h3>
Posted on



Recently I was looking to update the data used in the Cuenca Bus Map application with the data I discovered that is offered by the City of Cuenca, Ecuador in their GIS geoportal. However, upon further inspection it became apparent that the data was not quite ready to be used with the Leaflet mapping library.

If you take a look at the snippet of GeoJSON below, you should notice that the coordinates array has a list of location points in a different projection than the standard WGS84, also known as EPSG4326.

{
    "type": "FeatureCollection",
    "totalFeatures": 2,
    "features": [
        {
            "type": "Feature",
            "id": "dmt_linea10.fid--105443ca_17ddd836332_-536",
            "geometry": {
                "type": "MultiLineString",
                "coordinates": [
                    [
                        [
                            723778.6389,
                            9688273.9147
                        ],
                        [
                            723910.9308,
                            9687951.1224
                        ],
                        [
                            724011.4727,
                            9687797.6637
                        ]
                        ...
                    ]
                ]
            },
            "geometry_name": "geom",
            "properties": {
                "linea": 10,
                "ruta": "LA FLORIDA",
                "empresa": "RICAURTE",
                "tiempo_cic": 0,
                "intervalo": 20,
                "flota": 0,
                "trayecto": "Ida",
                "fre_hpico": 20,
                "fre_dia_ti": 20,
                "fre_dia_sa": 15,
                "fre_dia_do": 30,
                "longitud": 21.53
            }
        }
    ],
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:EPSG::32717"
        }
    }
}

In fact the feature object includes the projection as a under the crs property:

{"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::32717" } }}

According to EPSG.io the projection 32717 is Between 84°W and 78°W, southern hemisphere between 80°S and equator, onshore and offshore. Ecuador. Peru.and is measured in Meters.

WGS84 is a standard maintained by the United States National Geospatial Intellegence Agency, and is the standard used by GPS and many of the different map providers. That being said, EPSG4326 is a coordinate system as projected on a sphere, common map providers like Google Maps, OpenStreetMaps and so on actually use EPSG3857 where the coordinates are projected from the sphere/ellipsoid to a flat surface

With all that taken into account, there are at least two different options for getting the new data into the format expected.

  • Include the library, Proj4Leaflet, to convert the data on the fly on the client side every time the page loads.
  • Convert the data into the expected format using QGIS.

Rather than simply including an additional JavaScript library and configuring the project to use the new coordinate system I wanted to learn a bit about the capabilities of QGIS. As it turns out, it is rather straightforward to convert the data.

  • Download the Geodata in any of the different formats offered by the server
  • Drag and Drop the data file into QGIS
  • Right Click on Layer -> Export As -> Change CRS -> Save File
Screengrab of converting GeoJSON from one CRS to another using QGIS



Resources