{"id":15058848,"url":"https://github.com/brazilsinghrittik/map","last_synced_at":"2026-01-31T20:34:03.277Z","repository":{"id":250598962,"uuid":"834905438","full_name":"brazilsinghrittik/map","owner":"brazilsinghrittik","description":"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. ","archived":false,"fork":false,"pushed_at":"2024-07-28T19:02:44.000Z","size":32,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-23T07:09:35.068Z","etag":null,"topics":["html","html-css-javascript","mapbox","mapbox-api","mapbox-gl-js","openstreetmap"],"latest_commit_sha":null,"homepage":"https://raw.githack.com/brazilsinghrittik/map/main/webmap.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brazilsinghrittik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-28T17:34:47.000Z","updated_at":"2024-08-19T00:41:45.000Z","dependencies_parsed_at":"2024-09-24T22:31:49.234Z","dependency_job_id":"0c500deb-5277-45ca-9c3f-c69a362ed1ab","html_url":"https://github.com/brazilsinghrittik/map","commit_stats":null,"previous_names":["brazilsinghrittik/map"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/brazilsinghrittik/map","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brazilsinghrittik%2Fmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brazilsinghrittik%2Fmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brazilsinghrittik%2Fmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brazilsinghrittik%2Fmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brazilsinghrittik","download_url":"https://codeload.github.com/brazilsinghrittik/map/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brazilsinghrittik%2Fmap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28953686,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T18:30:42.805Z","status":"ssl_error","status_checked_at":"2026-01-31T18:30:19.593Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","html-css-javascript","mapbox","mapbox-api","mapbox-gl-js","openstreetmap"],"created_at":"2024-09-24T22:31:43.897Z","updated_at":"2026-01-31T20:34:03.261Z","avatar_url":"https://github.com/brazilsinghrittik.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brazil Singh's map\n## Use Mapbox to Create Custom Web Maps\n![Brazil Singh Map](https://github.com/user-attachments/assets/4224ee14-8c77-41f6-8c5b-4d45d149f85f)\n\nHere is the link to test the map: [Click Here](https://raw.githack.com/brazilsinghrittik/map/main/webmap.html)\n### Establish a Connection with Mapbox Resources\nLinking 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 \u003chead\u003e 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/).\n### Here is the code of body you can use\n \n\n ~~~\n \u003cbody\u003e\n        \u003cscript src=\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js\"\u003e\u003c/script\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css\" type=\"text/css\"\u003e\n        \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n        \u003cscript\u003e\n            mapboxgl.accessToken = 'your access token';\n            const map = new mapboxgl.Map({\n                container: 'map',\n                style: 'mapbox://styles/mapbox/streets-v11',\n                center: [-111, 32],\n                zoom: 1\n            });\n\n            map.addControl(\n                new MapboxDirections({\n                    accessToken: mapboxgl.accessToken\n                }), 'top-left'\n            );\n\n            map.addControl(new mapboxgl.NavigationControl()); \n        \u003c/script\u003e\n\n    \u003c/body\u003e\n~~~\n\n### Here is the Header Section\n~~~\n \u003chead\u003e\n        \u003ctitle\u003eBrazil Singh Map\u003c/title\u003e\n        \u003cmeta name=\"viewport\" content=\"intial-scale=1,maximum-scale=1,user-scalable=no\"\u003e\n        \u003clink href=\"https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css\" rel=\"stylesheet\"\u003e\n        \u003cscript src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'\u003e\u003c/script\u003e\n        \u003cstyle\u003e\n            body { margin: 0; padding: 0; }\n            #map { position: absolute; top: 0; bottom: 0; width: 100% }\n        \u003c/style\u003e\n\u003c/head\u003e\n~~~\n\nOr you can copy and run on your vs code and play with the setting for practice purposes!\n~~~\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eBrazil Singh Map\u003c/title\u003e\n        \u003cmeta name=\"viewport\" content=\"intial-scale=1,maximum-scale=1,user-scalable=no\"\u003e\n        \u003clink href=\"https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css\" rel=\"stylesheet\"\u003e\n        \u003cscript src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'\u003e\u003c/script\u003e\n        \u003cstyle\u003e\n            body { margin: 0; padding: 0; }\n            #map { position: absolute; top: 0; bottom: 0; width: 100% }\n        \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cscript src=\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js\"\u003e\u003c/script\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css\" type=\"text/css\"\u003e\n        \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n        \u003cscript\u003e\n            mapboxgl.accessToken = 'pk.eyJ1IjoiYnJhemlsc2luZ2giLCJhIjoiY2x6NXJtd2ptNGtyNDJtcjR1NWpsYnp0dSJ9.YpnJcw63msNCxqBrw09RuA';\n            const map = new mapboxgl.Map({\n                container: 'map',\n                style: 'mapbox://styles/mapbox/streets-v11',\n                center: [-111, 32],\n                zoom: 1\n            });\n\n            map.addControl(\n                new MapboxDirections({\n                    accessToken: mapboxgl.accessToken\n                }), 'top-left'\n            );\n\n            map.addControl(new mapboxgl.NavigationControl());\n        \u003c/script\u003e\n\n    \u003c/body\u003e\n\u003c/html\u003e\n~~~\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrazilsinghrittik%2Fmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrazilsinghrittik%2Fmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrazilsinghrittik%2Fmap/lists"}