Map Site using JavaScript and Mapbox Source Code Free Download

Introduction

This mini project is entitled Online Map Website. This is a web-based application project developed in HTML, CSS, and JavaScript. This is a simple Online Map Site where users can explore places and check directions of places between Point A and Point B (Origin to Destination) with travel instructions. The site has been possible using the Mapbox which provides the map for the site, Geoencoding API, and Directions API. This application was also developed with Bootstrap Framework and Fontawesome Icons for some user interfaces. It consists of simple and user-friendly functionalities.

About the Online Map Website

I developed this project using the following:

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

This Online Map Website is accessible to anyone. The system displays a map that covers the whole page of the browser's window page. This contains a Search Location, Direction Button, Directions Form, Direction Form, Direction preview on the map, and Pinned Searched Place Location. When browsing the site, the map will view the area using the default coordinates. The direction form is not available first when loading the and will be only available when the user clicks the 'Direction' button at the upper-right of the map. By clicking the said button, the Geocoding API or Search Places Input field will be hidden and replaced with the Direction Form. Direction Input Fields are also provided by the Mapbox API that allows users to check the direction details between 2 places.

Features

• Map Display
• Search Places
• Pin the Search Result Location
• Display the Details of Pinned Location (From Search Result)
• Get Direction
• Displays the Direction Instruction
• Map Navigation Controls

The source code was developed only for educational purposes only to help new programmers and give them an idea of how to implement Mapbox Map APIs in their current or future projects. You can download the source code for free and modify it the way you wanted.

System Snapshots of some Features

Site's Interface

Direction Instruction Panel

Searched Location Result

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 9.
13. Save the file.
14. Browse the Online Map Website in a browser. i.e. file:///C:/User/Downloads/direction_map/index.html in your browser.

DEMO VIDEO

That's it. You can now explore the features and functionalities of this Online Map Website 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 :)