Skip to content


Repository files navigation


Scroll-driven historical story map of Hartford County, Connecticut town borders, with narrative text and ability to insert tile layers and GeoJSON layers


Embedded inside On The Line book

  • set iframe height 600px


  • Thanks @ilyankou for coding the add/remove tiles and layers with the scrolling interface
  • Learn more about related Leaflet Storymap code templates in

Historical sources

Boundaries shown here are NOT exact, but approximated from the best available digital sources:

Also consulted other digital map repositories:

But did not find any sources that added new info for this purpose, with possible exception of 1842 Morse map described in known issues section.

For historical background, start with:

Known tech issues

  • appears as "not secure" in browsers because several UConn MAGIC WMS historical map layers are on non-secure (http) server. Requested that MAGIC update to https several times.

Known border issues

The following borders are based on best estimates from available digital sources, and do not include detailed archival research. If you have better information, please share.

  • unclear borders between West Hartford, Farmington, Avon, and Bloomfield in 1840s-50s. See NYPL 1842 Morse map ( that displays smaller initial boundary for Bloomfield, but cannot use until georectification is improved.
  var map1842 = new L.tileLayer.wms("", {
     attribution: '1842 <a href="">NYPL Map Warper</a>'
  controlLayers.addBaseLayer(map1842, '1842 map');
  • for more detail on borders between Newington, Wethersfield, Farmington, and Berlin, see Charles Burpee, "Chapter LVI: Frontier Parish Confusions," History of Hartford County, volume 2 (1928), pp. 1160-1174,

  • on border between Wethersfield and Glastonbury prior to 1873, see Glastonbury town statement from that year,

  • town boundaries on the edges of Hartford County from 1639 to 1806 are based on Atlas of Historical County Boundaries Project, but boundaries inside the county outline are estimated

Also, note that borders and historical maps may not match precisely due to the original source and the georectification process.

How it works

  • All of the narrative text and map data are stored in open-source formats (csv and GeoJSON), separate from the open-source Leaflet Javascript mapping code (index.html, script.js, and style.css), for historical preservation and future platform migration.
  • The narrative text and zoom points are stored in map.csv (editable in any spreadsheet tool), then converted into map.geojson with the tool, which is read by the script.js code. Make all edits to narrative, zoom, layers in map.geojson
  • Boundary layers were edited in QGIS, saved for any future edits in Esri GIS format (in qgis folder), and exported into GeoJson files (in layer folder), and referenced by year in map.csv
  • Background map tile layers are listed in script.js, and referenced by year in map.csv. Historical map tile layers are hosted on a WMS server at UConn Libraries MAGIC.
  • Selected images are stored in the img folder and referenced in map.csv
  • The storymap title can be modified in index.html
  • The code uses jQuery to imitate "click" in legend control layers radio button to change tile layers. In this version, the legend is hidden in style.css, with option to display if desired.
  • Note: If for some reason the last chapter doesn't get active (the case for big screen sizes), replace value of areaTop in script.js from -100 to -200 or more.
  • Learn more about related Leaflet Storymap code templates in


scroll-driven Leaflet historical story map, with narrative text and individual tile layers and GeoJSON layers







No releases published


No packages published