Building Interactive Maps with OpenStreetMap and Leaflet
An interactive map is the final stage of a data pipeline.
From Stored Places to Visible Markers
An interactive map is the final stage of a data pipeline. The location information begins in a SQLite database, geodump.py extracts the relevant fields, and the extracted values are written into where.js as executable JavaScript. where.html loads that file, and the browser uses the data to render the interactive map. Understanding this path makes it easier to see both how the map works and where to look when a location is missing.
The Location Record Shape
where.js represents geographic data as a list of lists. Each inner list describes one location and contains exactly three elements: the location name, its latitude, and its longitude. The position of each element matters. The first element identifies the place, the second gives the latitude, and the third gives the longitude. The outer list groups all of the locations together.
What geodump.py Changes
The database and the browser do not use the location data in the same form. geodump.py performs the conversion between them. It extracts the location name, latitude, and longitude from database records, then formats those values as nested arrays in where.js. Because the result is executable JavaScript code, the browser can load it as map data rather than treating it as an unrelated text report.
Following One Location
Trace the representation of one location through the conversion step.
- 1Start with the database record
The record supplies three relevant values: a location name, a latitude, and a longitude.
- 2Extract the geographic fields
geodump.pytakes those values from the database record. - 3Format the result
The values are placed in one inner list, with the name first, latitude second, and longitude third.
- 4Write the JavaScript file
The inner list becomes part of the nested-array data in
where.js.
One database location becomes one nested JavaScript array that the browser can use as map data.
How the Browser Uses where.js
After geodump.py has produced where.js, the browser-side part of the pipeline begins. where.html loads the JavaScript file, and the map process reads the location arrays. For each inner list, the name identifies the place while the latitude and longitude identify its geographic position. Leaflet can then use those coordinates to represent the location as a visible map marker in the interactive map.
In this illustrative example, the outer array contains one location. The inner array connects the name Library with its latitude and longitude. A Leaflet-based map can use the coordinate pair to place the location and the name to identify it.
When Locations Do Not Appear
A missing marker can result from a problem at different points in the pipeline. Begin with the browser and work backward. First open where.html in a browser. If the expected map or locations do not appear, inspect the developer console for errors. Then verify that where.js exists in the same directory as the HTML file. These checks distinguish a browser-loading problem from a missing generated data file.
Common mistake Looking only at the map instead of checking the developer console.
What it looks likeThe page appears empty, so the problem is assumed to be the map itself.
Why it failsThe console can reveal errors that explain why the browser did not load or process the map data.
Do this insteadOpen the developer console as an early troubleshooting step.
Common mistake Placing where.js in a different directory from where.html.
What it looks likewhere.html is opened, but the generated data file is stored elsewhere.
Why it failsThe documented visualization setup requires
where.jsto exist in the same directory as the HTML file.Do this insteadVerify that where.js is present beside where.html.
Common mistake Misreading the order inside a location array.
What it looks likeTreating the first element as latitude instead of the location name.
Why it failsEach inner list is ordered as name, latitude, and longitude.
Do this insteadRead element positions in that order.
Trace the Pipeline
A location is stored in the database with a name, latitude, and longitude. Describe the four stages that carry it to the browser map, and state what you would check first if the location were not visible.
Hints
- Start with the SQLite database and identify the program that extracts the fields.
- Remember the order of values inside one
where.jslocation list. - For troubleshooting, begin with
where.htmland the developer console.
- 1The complete flow is SQLite database to
geodump.pytowhere.jstowhere.htmland the browser map.geodump.pyextracts location names, latitudes, and longitudes and formats them as executable JavaScript.where.jsstores the data as a list of lists, with each inner list ordered as name, latitude, and longitude. Leaflet uses the geographic coordinates to represent locations on the interactive map. If nothing appears, openwhere.htmlin a browser, check the developer console, and confirm thatwhere.jsis in the same directory.
Key Takeaways
geodump.pyconverts database location records into executable JavaScript data.where.jsstores geographic information as nested arrays containing name, latitude, and longitude.- The pipeline runs from SQLite through Python and JavaScript into
where.htmland the browser map. - Leaflet uses the latitude and longitude values to represent locations visually.
- For missing locations, check the developer console and verify that
where.jsis besidewhere.html.