Election Map Project using JavaScript and Mapbox Free Source Code

Introduction

This simple project is entitled Election Map Site. This is a web-based application project developed in HTML, CSS, and JavaScript. This simple site provides an online platform where the voters or any individuals can check the electoral votes in a country. The application also helps to determine who wins in each region of the country. It was developed using Mapbox for the map and Bootstrap Framework for the user interface. It consists of simple and user-friendly features and functionalities.

About the Election Map Site

I developed this project using the following:

• HTML
• CSS
• JavaScript
• jQuery
• Bootstrap
• Mapbox

This Election Map Site project does not require any user registration or login. This project is for educational and demo purposes only. The site displays a panel that shows the list of the candidate and the total number of votes. Also, users can explore the number of votes of the candidates per the country's region. The user can simply click the area of the region on the map and the results and information will be shown in the upper right side panel of the map. On this site, you can also determine easily the candidate that gains the highest votes in each region by the color-filled each region.

For demo purposes only, I also added an Update Function in each region result to show you how the site changes when the data updates.

Features

• Map Display
• Result Table Panel
• Vote Results per Region Panel
• Update Total Votes per Region Form

The source code was developed only for educational purposes only. You can download the source code for free and modify it the way you wanted.

System Snapshots of some Features

Map Panel Preview

Total Result Table Preview

Overall Preview of the Interface

How to Run ??

Requirements

• Download the provided source code zip file. (download button is located below)

System Installation/Setup

1. Extract the downloaded source code zip file.
2. Open your preferred browser such as Chrome Browser.
3. Browse and signup at the https://account.mapbox.com/.
4. Copy your Default Public Token from your Mapbox Access Tokens.
5. Open the map.js file in the extracted source code folder in a text editor and paste the Mapbox Access Token at the mapboxgl.accessToken located at line 2.
6. Going back to the Mapbox Site, click the Create a Map in Studion button on the dashboard page.
7. Click the Upload Style.
8. Upload the style.json file.
9. After the successful upload, the site will redirect the page to your style editor page.
10. Click the Publish button.
11. Copy the site-provided Style URL of the uploaded style.
12. Go back to your text editor at the same file (map.js), and paste the copied style URL as the value of the 'style' object at line 5.
13. Save the file.
14. Browse the Election Map Site in a browser. i.e. file:///C:/User/Downloads/election_map/index.html in your browser.

DEMO VIDEO

That's it. You can now explore the features and functionalities of this Election Map Site in JS using Mapbox. I hope this will help you with what you are looking for and you'll find something useful for your future projects.

Explore more on this website for more Free Source Codes and Tutorials.

Enjoy :)