Cartographic visualizations using LeafletJS

Definition of problem

Solution:

Wiki Loves Monument contest

• Big database with national heritage objects
• A lot of them in small cities and villages
• It's some kind of geocaching game
• Lots of objects (~80k)

How does it look?

New problems:

• Spatial visualization of the list
• Visualizing knowledge about object (has a photo, has been located)
• For objects without GPS coords, where to look for them (possible location)

Solution:

Own Map

Data sources:

• Wikipedia List
• Wikipedia Commons georeferenced images
• OpenStreetMap heritage objects
• OtwareZabytki data

Solution:

1. Gather data Wikipedia (Python + BeautifulSoup)
2. Gather data from OpenStreetMap (Overpass API, osmtogeojson)
3. Gather data from Otwarte Zabytki (another Soup)
4. Store data in Mongo Database)
5. Analyze data (Python, Nominatim)
6. Create a map (Leaflet JS and Python REST services)

Overpass / Overpass Turbo

Overpass API is a powerfull API to fetch data from OSM. Overpass Turbo - is an Overpass API integrated with a map for polishing your queries. Overpass database is optimized for quering. Results are returned as XML or as JSON. Query might be written using XML or QL language.

[out:json];
area
  ["boundary"="administrative"]
  ["name"="Warszawa"]
  ["type"="boundary"]->.boundaryarea;
(
  node(area.boundaryarea)
  ["amenity"="fuel"]; /* find fuel stations in Warsaw */
);
out;
            

Response data

                  {"type": "node",
                  "id": 81701702,
                  "lat": 52.2382697,
                  "lon": 20.9553151,
                  "tags": {
                    "amenity": "fuel",
                    "brand": "Bliska",
                    "fuel:biodiesel": "yes",
                    "fuel:diesel": "yes",
                    "fuel:octane_95": "yes",
                    "name": "Bliska",
                    "operator": "Orlen"
                  }},
            

Nominatim

• Geocoding service using OpenStreetMap data - converts string query to objects from OSM
• nominatim.openstreetmap.org has a limits on its usage, and remember to set specific User-Agent and to cache results on your side
• OSM has more than 5M address points, and grows ~500k quaterly
• OSM has all teritory administration borders, so use them in your searches - either as query arguments (city, county, state) or filter results if you you have any hints where to look

Let's create the map

                var map = new L.Map('map', {
                    center: [52.232,21.021],
                    zoom: 13,
                    loadingControl: true,
                });
                var baseLayer = new L.TileLayer(
                        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',  
                        { attribution: 'Map data © 2014 OpenStreetMap contributors',}
                );
                map.addLayer(baseLayer);
            

Add features / plugins

• LocateControl if you want to locate the user
• Hash if you want to keep current map state in URL
• MarkerCluster if you have a lot (>1k) of markers on the map
• TileLayer GeoJSON if you need to load data dynamically
• ... and lots more

Why TileLayer

Nice hacks

• Use smaller maxNativeZoom for GeoJSON layer than maxZoom of base layer, to reduce reloading of markes
• Use CDN for your map. There are companies that are providing great service for free, sufficient to cover this use case
• Use L.geoJson() if you can afford to download all points at once

Nice hacks

• Use GeoJSON LINT if your GeoJSON object is not behaving as expected
• MongoDB has a good support for spatial queries including $geoWithin and $near
• If you have a lot of data to show, generate transparent tiles and use them as a overlay layer
• Use a custom style for Mapnik or use Maperitive to generate tiles for your map

Result

Result

Overpass example - OSM24.EU

Mapnik/Tile Mill example