The map was implemented using the Map Box API. We used the map box API to have a map and a way to populate it with markers. The map is updated as new reports are filled out on the site. These reports update data in a local JSON file. The data from this JSON file is retrieved when the map is loaded onto the site. The map is then updated with all the entries from the report submission. A marker will show up at the submission location and clicking the marker will trigger a pop-up with the title, date and description of the hate crime.
*Due to difficulty implementing a forward geocoding API into our JavaScript implementation (could not find a API that was implemented with JS and PHP), the site currently populates the map at a default location. Without geocoding, a user would have to write the latitude and longitude themselves. In the future a different implementation may be necessary to allow for geocoding.
Link to zipped code package: https://drive.google.com/file/d/1LQlv2CN1kli5g7fIVrF8_zSiOtpqIsMh/view?usp=sharing
In order to run independently, utilize a localhost application such as MAMP and direct the web server to the correct folder containing the items above.
The StopAAPIHate website was built entirely through HTML, CSS, and JavaScript code. PHP was also utilized in order to connect backend to frontend information, especially with the report form and mapping aspects.
We were unable to host our website live, due to restrictions on our database implementation, however, we hope to do so in the future.