https://github.com/brazilsinghrittik/map

Geospatial data may be published and shared very effectively using web maps. It might be challenging to divide and manage the web services you require while simultaneously learning how to manage, display, and serve your data online if you're new to programming and web development.
https://github.com/brazilsinghrittik/map

html html-css-javascript mapbox mapbox-api mapbox-gl-js openstreetmap

Last synced: about 1 month ago
JSON representation

Geospatial data may be published and shared very effectively using web maps. It might be challenging to divide and manage the web services you require while simultaneously learning how to manage, display, and serve your data online if you're new to programming and web development.

• Host: GitHub
• URL: https://github.com/brazilsinghrittik/map
• Owner: brazilsinghrittik
• License: gpl-3.0
• Created: 2024-07-28T17:34:47.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-28T19:02:44.000Z (4 months ago)
• Last Synced: 2024-09-30T10:04:07.331Z (about 2 months ago)
• Topics: html, html-css-javascript, mapbox, mapbox-api, mapbox-gl-js, openstreetmap
• Language: HTML
• Homepage: https://raw.githack.com/brazilsinghrittik/map/main/webmap.html
• Size: 31.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Brazil Singh's map

## Use Mapbox to Create Custom Web Maps

![Brazil Singh Map](https://github.com/user-attachments/assets/4224ee14-8c77-41f6-8c5b-4d45d149f85f)

Here is the link to test the map: [Click Here](https://raw.githack.com/brazilsinghrittik/map/main/webmap.html)

### Establish a Connection with Mapbox Resources

Linking the Mapbox JavaScript library and CSS stylesheet into your HTML code is the first step in using Mapbox to generate an online map. Doing this is easy. All we have to do is open an HTML page and include the link to these resources in the  section. The most recent versions of the JavaScript library and CSS stylesheet can be found [here](https://docs.mapbox.com/mapbox-gl-js/guides/install/).

### Here is the code of body you can use

 

 ~~~

 

        

        

        


        

            mapboxgl.accessToken = 'your access token';

            const map = new mapboxgl.Map({

                container: 'map',

                style: 'mapbox://styles/mapbox/streets-v11',

                center: [-111, 32],

                zoom: 1

            });


            map.addControl(

                new MapboxDirections({

                    accessToken: mapboxgl.accessToken

                }), 'top-left'

            );

            map.addControl(new mapboxgl.NavigationControl()); 

        

    

~~~

### Here is the Header Section

~~~

 

        Brazil Singh Map

        

        

        

        

            body { margin: 0; padding: 0; }

            #map { position: absolute; top: 0; bottom: 0; width: 100% }

        

~~~

Or you can copy and run on your vs code and play with the setting for practice purposes!

~~~

    

        Brazil Singh Map

        

        

        

        

            body { margin: 0; padding: 0; }

            #map { position: absolute; top: 0; bottom: 0; width: 100% }

        

    

    

        

        

        


        

            mapboxgl.accessToken = 'pk.eyJ1IjoiYnJhemlsc2luZ2giLCJhIjoiY2x6NXJtd2ptNGtyNDJtcjR1NWpsYnp0dSJ9.YpnJcw63msNCxqBrw09RuA';

            const map = new mapboxgl.Map({

                container: 'map',

                style: 'mapbox://styles/mapbox/streets-v11',

                center: [-111, 32],

                zoom: 1

            });


            map.addControl(

                new MapboxDirections({

                    accessToken: mapboxgl.accessToken

                }), 'top-left'

            );

            map.addControl(new mapboxgl.NavigationControl());

        

    

~~~