├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Mappo
2 | A map web app to find the current location, directions for a particular place, time that would be taken for travelling via different transport. It includes 3D directional view, satellite, zoom in/out functionality, 3D buildings view, and much more
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
18 |
19 |
20 | Mappo
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | mapboxgl.accessToken =
2 | "pk.eyJ1IjoicHJvZ2hlYWQwMCIsImEiOiJja2hmM3U4ZWMwZjF1MnNvNGw1OWxveDg3In0.jqEAisZlXu6KbLAsSvyWDA";
3 |
4 | var map = new mapboxgl.Map({
5 | container: "map",
6 | style: "mapbox://styles/mapbox/streets-v11",
7 | });
8 |
9 | navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {
10 | enableHighAccuracy: true,
11 | });
12 |
13 | function successLocation(position) {
14 | setupMap([position.coords.longitude, position.coords.latitude]);
15 | }
16 |
17 | function errorLocation() {
18 | setupMap([88.3639, 22.5726]);
19 | }
20 |
21 | function setupMap(center) {
22 | const map = new mapboxgl.Map({
23 | container: "map",
24 | style: "mapbox://styles/mapbox/streets-v11",
25 | center: center,
26 | zoom: 15,
27 | });
28 |
29 | const nav = new mapboxgl.NavigationControl();
30 | map.addControl(nav);
31 |
32 | var directions = new MapboxDirections({
33 | accessToken: mapboxgl.accessToken,
34 | });
35 |
36 | map.addControl(directions, "top-left");
37 | }
38 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | #map {
2 | height: 100vh;
3 | width: 100vw;
4 | }
5 |
6 | body {
7 | margin: 0;
8 | }
9 |
--------------------------------------------------------------------------------