---
description: List of example links run in SolidJS playground
---

# ⚙ Examples

{% tabs %}
{% tab title="Map" %}

- [Static Map](https://stackblitz.com/edit/solid-map-gl-static?embed=1&file=src%2Findex.tsx)
- [Interactive Map](https://stackblitz.com/edit/solid-map-gl-interactive?embed=1&file=src%2Findex.tsx)
- [Change Vector 'Base Map'](https://stackblitz.com/edit/solid-map-gl-vector-base?embed=1&file=src%2Findex.tsx)
- [Toggle Dark Theme Map](https://stackblitz.com/edit/solid-map-gl-dark-theme?embed=1&file=src%2Findex.tsx)
- [Change Projection](https://stackblitz.com/edit/solid-map-gl-projection?embed=1&file=src%2Findex.tsx)
- [Display Mouse Coordinates](https://stackblitz.com/edit/solid-map-gl-mouse?embed=1&file=src%2Findex.tsx)
- [Sync Maps](https://stackblitz.com/edit/solid-map-gl-sync?embed=1&file=src%2Findex.tsx)
- [Swipe Maps](https://stackblitz.com/edit/solid-map-gl-swipe?embed=1&file=src%2Findex.tsx)
- [Map Context](https://stackblitz.com/edit/solid-map-gl-fit-bounds?embed=1&file=src%2Findex.tsx)
- [Use MapLibre](https://stackblitz.com/edit/solid-map-gl-use-maplibre?embed=1&file=src%2Findex.tsx)
- ~~Debug Maps~~
  {% endtab %}

{% tab title="Source" %}

- [Add GeoJSON Source](https://stackblitz.com/edit/solid-map-gl-geojson?embed=1&file=src%2Findex.tsx)
- [Add GeoJSON URL Source](https://stackblitz.com/edit/solid-map-gl-url?embed=1&file=src%2Findex.tsx)
- [Updating GeoJSON Source](https://stackblitz.com/edit/solid-map-gl-update?embed=1&file=src%2Findex.tsx)
- [Add Vector Source](https://stackblitz.com/edit/solid-map-gl-vector?embed=1&file=src%2Findex.tsx)
- [Add Raster Source](https://stackblitz.com/edit/solid-map-gl-raster?embed=1&file=src%2Findex.tsx)
- [Change Raster 'Base Map'](https://stackblitz.com/edit/solid-map-gl-toggle-raster?embed=1&file=src%2Findex.tsx)
- [Add Image Source](https://stackblitz.com/edit/solid-map-gl-image-source?embed=1&file=src%2Findex.tsx)
- [Add Image](https://stackblitz.com/edit/solid-map-gl-image?embed=1&file=src%2Findex.tsx)
- [Add Video](https://stackblitz.com/edit/solid-map-gl-video?embed=1&file=src%2Findex.tsx)
- [Use ProtoMaps](https://stackblitz.com/edit/solid-map-gl-protomaps?file=src%2Findex.tsx)
  {% endtab %}

{% tab title="Layer" %}

- [Add Heatmap](https://stackblitz.com/edit/solid-map-gl-heatmap?embed=1&file=src%2Findex.tsx)
- [Add Custom Layer](https://stackblitz.com/edit/solid-map-gl-custom-layer?embed=1&file=src%2Findex.tsx)
- [Dynamic Pattern](https://stackblitz.com/edit/solid-map-gl-pattern?embed=1&file=src%2Findex.tsx)
  {% endtab %}

{% tab title="Overlay" %}

- [Dynamic Controls / Traffic / Geocoder](https://stackblitz.com/edit/solid-map-gl-controls?embed=1&file=src%2Findex.tsx)
- [Dynamic Marker / Popup](https://stackblitz.com/edit/solid-map-gl-marker-popup?embed=1&file=src/index.tsx)
  {% endtab %}

{% tab title="3D" %}

- [3D Overlays](https://stackblitz.com/edit/solid-map-gl-3d-overlay?embed=1&file=src%2Findex.tsx)
- [Add Hillshade](https://stackblitz.com/edit/solid-map-gl-hillshade?embed=1&file=src%2Findex.tsx)
- [Add Globe](https://stackblitz.com/edit/solid-map-gl-globe?embed=1&file=src%2Findex.tsx)
- [Query Elevation](https://stackblitz.com/edit/solid-map-gl-query-elevation?embed=1&file=src%2Findex.tsx)
- [Add 3D Layer with BabylonJS](https://stackblitz.com/edit/solid-map-gl-3d-babylon?embed=1&file=src%2Findex.tsx)
- [Add 3D Layer with ThreeJS](https://stackblitz.com/edit/solid-map-gl-3d-three?embed=1&file=src%2Findex.tsx)

- ~~Camera Transition~~
  {% endtab %}
  {% endtabs %}