{"id":13426193,"url":"https://github.com/mapbox/mapbox-gl-leaflet","last_synced_at":"2025-03-15T21:30:46.244Z","repository":{"id":18133865,"uuid":"21214930","full_name":"mapbox/mapbox-gl-leaflet","owner":"mapbox","description":"binding from Mapbox GL JS to the Leaflet API","archived":false,"fork":false,"pushed_at":"2023-06-06T04:45:24.000Z","size":170,"stargazers_count":527,"open_issues_count":16,"forks_count":154,"subscribers_count":137,"default_branch":"master","last_synced_at":"2025-03-07T11:37:24.340Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mapbox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2014-06-25T19:05:45.000Z","updated_at":"2025-03-07T02:32:16.000Z","dependencies_parsed_at":"2024-06-18T12:36:28.346Z","dependency_job_id":"6842973e-d289-4d4c-b3f9-5c8af1f6160c","html_url":"https://github.com/mapbox/mapbox-gl-leaflet","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fmapbox-gl-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fmapbox-gl-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fmapbox-gl-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapbox%2Fmapbox-gl-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mapbox","download_url":"https://codeload.github.com/mapbox/mapbox-gl-leaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243792288,"owners_count":20348610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-07-31T00:01:28.621Z","updated_at":"2025-03-15T21:30:45.911Z","avatar_url":"https://github.com/mapbox.png","language":"JavaScript","readme":"**Note: this tool is experimental and is not actively supported by Mapbox. For support, please open an issue in this repository.**\n\n## Mapbox GL Leaflet\n\n[![build status](https://secure.travis-ci.org/mapbox/mapbox-gl-leaflet.png)](http://travis-ci.org/mapbox/mapbox-gl-leaflet)\n\nThis is a binding from [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) to the familiar\n[Leaflet](http://leafletjs.com/) API.\n\n## Code example\n```javascript\n// replace with your Mapbox API Access token. Only include a token if you will be using Mapbox tiles.\nvar token =\"pk.XXXX\";\n\nvar map = L.map('map').setView([38.912753, -77.032194], 15);\nL.marker([38.912753, -77.032194])\n    .bindPopup(\"Hello \u003cb\u003eLeaflet GL\u003c/b\u003e!\u003cbr\u003eWhoa, it works!\")\n    .addTo(map)\n    .openPopup();\nvar gl = L.mapboxGL({\n    accessToken: token,\n    style: 'mapbox://styles/mapbox/bright-v8'\n}).addTo(map);\n```\nNote that you can use any vector tile source useable by mapbox-gl. For instance, you can use [OSM2VectorTiles](http://osm2vectortiles.org/) with:\n```javascript\nvar gl = L.mapboxGL({\n\tstyle: 'https://api.maptiler.com/maps/topo/style.json?key=\u003cYOUR_MAPTILER_API_KEY\u003e'\n}).addTo(map);\n```\n\nOnce you have created the leaflet layer, the mapbox-gl map object can be accessed using\n```javascript\ngl.getMapboxMap()....\n// add a source to the mapbox-gl layer\ngl.getMapboxMap().addSource({...})\n```\n\n## Get your Mapbox token\nCreate a mapbox account, then head to [https://www.mapbox.com/studio/](https://www.mapbox.com/studio/) and copy your access token that was automatically created for you. The access token should start with \"pk.\".\n\n## Live examples\n[Basic example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/basic.html)\n\n[Cluster example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/cluster.html)\n\n[Map events example](http://rawgit.com/mapbox/mapbox-gl-leaflet/master/examples/events.html)\n\nCode for these examples is hosted in the [examples folder](https://github.com/mapbox/mapbox-gl-leaflet/tree/master/examples)\n\n## Installation\nAdd a script tag referencing mapbox-gl-leaflet after adding leaflet and mapbox-gl-js in your website:\n```html\n\u003c!-- Leaflet --\u003e\n\u003clink rel=\"stylesheet\" href=\"leaflet.css\" /\u003e\n\u003cscript src=\"leaflet.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Mapbox GL --\u003e\n\u003clink href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' /\u003e\n\u003cscript src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'\u003e\u003c/script\u003e\n\n\u003cscript src=\"leaflet-mapbox-gl.js\"\u003e\u003c/script\u003e\n```\nYou can also use Unpkg as a CDN using:\n```html\n\u003cscript src=\"https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js\"\u003e\u003c/script\u003e\n```\n\n## Motivation\nThis project makes it possible to easily add a mapbox-gl-js layer in your Leaflet map. When using mapbox-gl-leaflet, you won't be able to use some of the mapbox-gl-js features.\nHere are the main differences between a \"pure\" mapbox-gl-js map and a Leaflet map using mapbox-gl-leaflet:\n- No rotation / bearing / pitch support\n- Slower performances: When using mapbox-gl-leaflet, mapbox-gl-js is set as not interactive. Leaflet receives the touch/mouse events and updates the mapbox-gl-js map behind the scenes. Because mapbox-gl-js doesn't redraw as fast as Leaflet, the map can seem slower.\n\nOn the bright side, the mapbox-gl-leaflet binding will allow you to use all the leaflet features and plugins.\n\nIf you only need the mapbox-gl-js features ([adding a map with a mapbox-style, adding a GeoJSON, etc.](https://www.mapbox.com/mapbox-gl-js/examples/)), you are probably better off using it directly.\n\n## API Reference\n[API Reference](API.md)\n\n## Bug Reports \u0026 Feature Requests\nPlease use the [issue tracker](https://github.com/mapbox/mapbox-gl-leaflet/issues) to report any bugs or file feature requests.\nYou can fork this [jsfiddle template](https://jsfiddle.net/fnicollet/9w9er53v/) to reproduce a bug, then share the URL of your fork in the GitHub issue.\n\n## Licence\nISC © [Mapbox](https://github.com/mapbox)\n","funding_links":[],"categories":["JavaScript","Clients"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapbox%2Fmapbox-gl-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmapbox%2Fmapbox-gl-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapbox%2Fmapbox-gl-leaflet/lists"}