The Growth of a Ukrainian Town

For centuries the town of Khmelnytskyi was just a normal small Ukrainian town. 200 years ago the town consisted of a mere nine streets. Now the city of Khmelnytskyi has thousands of streets and is the administrative center for the whole Khmelnytskyi Raion (district). 

You can learn more about how the city of Khmelnytski grew from such humble beginnings to become a major city in this Khmelnytskyi - History of the City story map. Unfortunately for non-Ukrainian speakers the map is entirely in Ukrainian (and at least for me doesn't work with Chrome's automatic translate tool on desktop or tablet). However if you interested in story maps then this history of Khmelnytski is worth exploring anyway - because it is a fantastic example of a story map created with Leaflet.js.

As you scroll through the text of Khmelnytskyi - History of the City the map automatically updates to visualize the historical developments in the city as they happen. This includes adding and removing lines and polygons to the map to highlight certain streets and areas of the city as they are mentioned. It also includes adding and removing historical vintage map overlays to the modern map to show how the city appeared during different periods of its development. Certain words in the text are highlighted in color. These words are automatic links which relate to features highlighted on the map. Hover over a date in the text and a map from that date will be overlain on the map. However over a place-name and it will be highlighted on the map.

If you want to create a similar story map using Leaflet.js you night also be interested in exploring my own Measles in Europe story map. My map includes similar scroll based actions, where the map moves and updates as you scroll through the text. It also includes highlighted text which also can be hovered over to highlight features on the map. Feel free to re-use and adapt my story map as you see fit. The code for the map can be viewed, adapted and copied on Glitch.