---
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 %}
