Leaflet-based Web Mapping
Overview
Sharing maps on proprietary platforms can be costly and often comes with storage limitations. To ensure open and sustainable access, I used the QGIS2Web plugin to export maps as Leaflet-based interactive web maps, then customized them with JavaScript, HTML, and CSS.
This example from my "GIS for Community Archival Access" project showcases a georeferenced 1910 map of the Rosemount area (Weston, York, Ontario) for the Weston Historical Society. I implemented a click-based transparency toggle that allows community members to compare the historical map with the present landscape. In addition, I added a dismissible info panel and customized the default layer panel to improve usability. The final map was hosted independently on GitHub Pages and shared with community members, demonstrating both technical adaptability and commitment to accessible public history.
Software
QGIS (v3.4), Leaflet, GitHub Pages
Data
- Georeferenced historical maps
- OpenStreetMap base map
Clicking on the historical map toggles between full visibility, partial transparency, or complete invisibility, allowing users to juxtapose the 1910 landscape with the present. Explore the interactive map directly here or use this link.
Skills used
Georeferencing historical maps; Exporting interactive maps with QGIS2Web; Customizing Leaflet with JavaScript; HTML/CSS editing for layout and styling; Developing interactive effects (e.g., transparency toggle); Designing custom user interface elements (dismissible info panel, edited layer panel); Hosting interactive maps independently on GitHub Pages.