March 28, 2016

Map navigation UI for the new Family Online Safety Institute website.

Project Link: FOSI GRID

The redesign of the FOSI GRID website required that users should be able to navigate the site’s content and data through an interactive map, side navigation, and search bar. For the interactive map navigation I created custom geospatial data from Natural Earth’s 1:50m data and used Leaflet.JS, a popular open-source web mapping library. Region polygon data was made using MAPublisher, and admin0 & admin1 polygons were created using PostGIS. To make data loading fast I used TopoJSON to store 10 different layers: region polygons, countries grouped by region, and states / provinces grouped by country. When data is added to the map it is converted from TopoJSON to GeoJSON. This cut down drastically on AJAX requests and the website’s initial load time. Coordination between the project’s two Ruby on Rails developers was necessary to link the CMS database with the map’s UI interactions.

Technologies Used: - Leaflet.JS - Natural Earth Data - TopoJSON - GeoJSON - MAPublisher - PostGIS - Mapshaper

fosi-grid-01.png fosi-grid-02.png fosi-grid-03.png fosi-grid-04.png fosi-grid-05.png fosi-grid-06.png fosi-grid-07.png

Back to the Portfolio