Leaflet Map Prototype

A responsive map prototype using Bootstrap and Leaflet.js to add user interactivity (popups, markers, filtering portions of the map etc.)

Screenshots

Category

Data visualisation/interactive maps

Purpose

Prototype that showcases UK's bilateral relations with EU's member states.

User needs

Developed as a prototype after a Foreign Affairs Committee request to have complimentary material for one of their reports. The map works as a simple to use, single page app and allows users to interact with it by clicking on different sections to reveal information, filter out portions of the map, create heatmaps, and make use of additional content (images, videos).

File structure

Main file index.html with all dependencies (css, js, geojson data) in separate folder

index.html
|_map_dependencies

Dependencies

Built with HTML, CSS, Javascript and the following dependencies

• leaflet.js
• Bootstrap
• Geojson map data pulled from GeoJSON Maps of the globe

Developed by

Kostas Koutoupis (@kkoutoup) for the Web and Publications Unit (WPU) of the Chambers and Committee Office (CCT), House of Commons, October 2018