{"id":31900747,"url":"https://github.com/gishub4/solid-map-gl","last_synced_at":"2025-10-13T12:27:09.477Z","repository":{"id":45817562,"uuid":"442135769","full_name":"GIShub4/solid-map-gl","owner":"GIShub4","description":"Solid JS Components Library for Mapbox \u0026 MapLibre 🌏","archived":false,"fork":false,"pushed_at":"2025-08-22T04:28:36.000Z","size":3702,"stargazers_count":126,"open_issues_count":9,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-22T05:24:25.585Z","etag":null,"topics":["gis","map","mapbox","mapbox-gl","mapbox-gl-js","maplibre","maps","solidjs","webgl"],"latest_commit_sha":null,"homepage":"https://gis-hub.gitbook.io/solid-map-gl/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GIShub4.png","metadata":{"files":{"readme":".github/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":"2021-12-27T11:07:23.000Z","updated_at":"2025-08-22T04:27:18.000Z","dependencies_parsed_at":"2023-02-17T05:01:11.035Z","dependency_job_id":"2e3f7ada-d136-43dc-a452-25b86fb59b79","html_url":"https://github.com/GIShub4/solid-map-gl","commit_stats":{"total_commits":362,"total_committers":4,"mean_commits":90.5,"dds":0.03038674033149169,"last_synced_commit":"7f6b16d7b198063f671cf4374d3603090f098ea2"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/GIShub4/solid-map-gl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIShub4%2Fsolid-map-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIShub4%2Fsolid-map-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIShub4%2Fsolid-map-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIShub4%2Fsolid-map-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GIShub4","download_url":"https://codeload.github.com/GIShub4/solid-map-gl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIShub4%2Fsolid-map-gl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015060,"owners_count":26085643,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["gis","map","mapbox","mapbox-gl","mapbox-gl-js","maplibre","maps","solidjs","webgl"],"created_at":"2025-10-13T12:27:07.102Z","updated_at":"2025-10-13T12:27:09.468Z","avatar_url":"https://github.com/GIShub4.png","language":"TypeScript","readme":"[![Banner](https://assets.solidjs.com/banner?project=solid-map-gl\u0026background=tiles\u0026type=Mapping%20Plugin)](https://gis-hub.gitbook.io/solid-map-gl)\n\n# **_Solid Map GL_** for Mapbox \u0026 MapLibre\n\n[![npm](https://img.shields.io/npm/v/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)\n[![downloads](https://img.shields.io/npm/dt/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)\n[![licence](https://img.shields.io/npm/l/solid-map-gl?color=blue)](LICENSE/)\n[![size](https://img.shields.io/bundlephobia/min/solid-map-gl)](https://bundlephobia.com/package/solid-map-gl)\n[![treeshaking](https://img.shields.io/badge/treeshaking-supported-success)](https://bundlephobia.com/package/solid-map-gl)\n![ts](https://img.shields.io/badge/types-included-blue?logo=typescript\u0026logoColor=white)\n\n[SolidJS](https://www.solidjs.com/) Component Library for [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) and [MapLibre GL.](https://maplibre.org/projects/maplibre-gl-js/) Both libraries render interactive maps from vector tiles and Map styles using WebGL. This project is intended to be as close as possible to the [Mapbox GL JS API.](https://docs.mapbox.com/mapbox-gl-js/api/)\n\n## [Documentation \u0026 Examples](https://gis-hub.gitbook.io/solid-map-gl)\n\n[![Gallery](/docs/header.png)](https://gis-hub.gitbook.io/solid-map-gl)\n\n## [Getting Started](https://gis-hub.gitbook.io/solid-map-gl/start)\n\n### Installation\n\n```shell\npnpm add mapbox-gl solid-map-gl\nyarn add mapbox-gl solid-map-gl\nnpm  i   mapbox-gl solid-map-gl\n```\n\n#### Use with [Solid Start](https://github.com/solidjs/solid-start)\n\n```shell\npnpm create solid \u0026\u0026 pnpm i\npnpm add mapbox-gl solid-map-gl\npnpm dev\n```\n\n## [Components](https://gis-hub.gitbook.io/solid-map-gl/components)\n\n| Component                                                                   | Description                                                                                                            |\n| --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| [MapGL](https://gis-hub.gitbook.io/solid-map-gl/components/mapgl)           | Represents map on the page                                                                                             |\n| [Source](https://gis-hub.gitbook.io/solid-map-gl/components/source)         | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |\n| [Layer](https://gis-hub.gitbook.io/solid-map-gl/components/layer)           | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources`                                |\n| [Layer3D](https://gis-hub.gitbook.io/solid-map-gl/components/layer3d)       | Component for [BabylonJS](https://www.babylonjs.com/) or [ThreeJS](https://threejs.org/)                               |\n| [Atmosphere](https://gis-hub.gitbook.io/solid-map-gl/components/atmosphere) | Specify the Atmosphere                                                                                                 |\n| [Light](https://gis-hub.gitbook.io/solid-map-gl/components/light)           | Specify the Light Source                                                                                               |\n| [Terrain](https://gis-hub.gitbook.io/solid-map-gl/components/terrain)       | Specify the Terrain                                                                                                    |\n| [Image](https://gis-hub.gitbook.io/solid-map-gl/components/image)           | Adds an image to the map style                                                                                         |\n| [Popup](https://gis-hub.gitbook.io/solid-map-gl/components/popup)           | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup)                                    |\n| [Marker](https://gis-hub.gitbook.io/solid-map-gl/components/marker)         | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)                                  |\n| [Control](https://gis-hub.gitbook.io/solid-map-gl/components/control)       | Represents the map's control                                                                                           |\n| [Camera](https://gis-hub.gitbook.io/solid-map-gl/components/camera)         | Map's camera view                                                                                                      |\n| [Draw](https://gis-hub.gitbook.io/solid-map-gl/components/draw)             | Draw Control view                                                                                                      |\n\n## Usage with [Mapbox](https://docs.mapbox.com/mapbox-gl-js/guides/)\n\nPass the _Mapbox access token_ via `\u003cMapGL\u003e options` or `.env` file as `VITE_MAPBOX_ACCESS_TOKEN`\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Component, createSignal } from \"solid-js\";\nimport MapGL, { Viewport, Source, Layer } from \"solid-map-gl\";\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nconst App: Component = () =\u003e {\n  const [viewport, setViewport] = createSignal({\n    center: [-122.45, 37.78],\n    zoom: 11,\n  } as Viewport);\n\n  return (\n    \u003cMapGL\n      options={{ style: \"mb:light\" }}\n      viewport={viewport()}\n      onViewportChange={(evt: Viewport) =\u003e setViewport(evt)}\n    \u003e\n      \u003cSource\n        source={{\n          type: \"geojson\",\n          data: \"https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson\",\n        }}\n      \u003e\n        \u003cLayer\n          style={{\n            type: \"circle\",\n            paint: {\n              \"circle-radius\": 8,\n              \"circle-color\": \"red\",\n            },\n          }}\n        /\u003e\n      \u003c/Source\u003e\n    \u003c/MapGL\u003e\n  );\n};\n\nrender(() =\u003e \u003cApp /\u003e, document.getElementById(\"app\")!);\n```\n\n## Usage with [MapLibre](https://maplibre.org/maplibre-gl-js-docs/api/)\n\nInstall MapLibre package and placeholder Mapbox package\n\n```shell\npnpm add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0\nyarn add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0\nnpm  i   solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0\n```\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Component, createSignal } from \"solid-js\";\nimport MapGL, { Viewport } from \"solid-map-gl\";\nimport * as maplibre from 'maplibre-gl'\nimport 'maplibre-gl/dist/maplibre-gl.css'\n\nconst App: Component = () =\u003e {\n  const [viewport, setViewport] = createSignal({\n    center: [-122.45, 37.78],\n    zoom: 11,\n  } as Viewport);\n\n  return (\n    \u003cMapGL\n      mapLib={maplibre} // \u003c- Pass MapLibre package here\n      options={{ style: 'https://demotiles.maplibre.org/style.json' }}\n      viewport={viewport()}\n      onViewportChange={(evt: Viewport) =\u003e setViewport(evt)}\n    /\u003e\n  );\n};\n\nrender(() =\u003e \u003cApp /\u003e, document.getElementById(\"app\")!);\n```\n\n## Roadmap\n\n- [x] Basic Mapbox GL Functionality\n- [x] Include Map Controls\n- [x] Include Fog, Sky, and Terrain\n- [x] Include Popup and Markers\n- [x] Minify bundle \u0026 reduce size\n- [x] Add basemap switching\n- [x] Include event handling\n- [x] Sync Maps\n- [x] Add MapLibre support\n- [x] Add debug functionality\n- [x] Add draw functionality\n- [x] Add 3D library support\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgishub4%2Fsolid-map-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgishub4%2Fsolid-map-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgishub4%2Fsolid-map-gl/lists"}