Role: Senior Web Designer
slaveryimages.orgProject Toolkit
Slavery Images is an educational resource, a visual record of the African Slave Trade and Slave Life in the Early African Diaspora.
In my role as Senior Web Designer, I:
Using Leaflet.js and JavaScript and PHP, I created an interactive map connected to the MySQL database. Using the coordinates related to the images in the database pins were plotted on the map using clustured markers.
My main design and development contribution to the project was the site's dynamic pages and Search features. I worked on the "Search Results" page which featured a paginated image grid of clickable pictures from the Slavery Images MYSQL database. I also created a simple search box, incorporated into the site's main navigation. This allowed a user to search using an image's project ID or a keyword that would search through titles and descriptions in the database.
I designed and developed the individual search result page which featured the clicked image and a listing of the image's metadata in a page that featured an embedded leaflet map indicating the real world coordinates related to the historical image.
I designed and worked on the advanced search which allows a user to create a more complex search criteria by combining actual columns from the database. The search form allows for the addition of up to 10 rows and works using a JavaScript Ajax request and PHP to query the database.