---
title: "React JS Examples | React"
description: "Explore interactive React JS map examples and tutorials."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# React JS Examples

 [![Map in React JS point data from geojson data](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## Points from geojson - React

Tutorials Sdk-js

Add GeoJSON points to React JS maps with MapTiler.](https://docs.maptiler.com/react/sdk-js/geojson-points/)

 [![Map in React JS with Material UI](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## Map with Material UI

Tutorials Sdk-js

Create React JS maps with Material UI and MapTiler.](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/)

 [![3D Map in React js with geocoding control](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## 3D Terrain Map

Tutorials Sdk-js

Create 3D terrain maps with geocoding in React JS.](https://docs.maptiler.com/react/sdk-js/3d-map/)

 [![MapTiler SDK JS geocoding component how to search places using React JS](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## Geocoding component - React

Tutorials Sdk-js Geocoding

Search places using Geocoding control component in React JS.](https://docs.maptiler.com/react/sdk-js/geocoding-component/)

 [![Map in React js with geocoding control](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## Geocoding control - React

Tutorials Sdk-js Geocoding

Add geocoding control to React JS maps using MapTiler.](https://docs.maptiler.com/react/sdk-js/geocoding-control/)

 [![Map in React JS create a heatmap](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## Heatmap in React JS

Tutorials Sdk-js

Create heatmap visualizations in React JS maps using MapTiler.](https://docs.maptiler.com/react/sdk-js/heatmap/)

 [![React JS with MapTiler maps](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## Learn the basics - React

Tutorials Sdk-js

Create React JS components for MapTiler SDK JS maps.](https://docs.maptiler.com/react/)

 [![Map in React js with popup and sidebar](https://docs.maptiler.com/assets/img/example-card.webp)

![SDK JS](https://docs.maptiler.com/assets/img/logos/sdk-js.svg)

## Popup and sidebar - React

Tutorials Sdk-js

Create popups and sidebars in React JS maps.](https://docs.maptiler.com/react/sdk-js/popup-sidebar/)

 [![How to display MapLibre GL JS map using React JS](https://docs.maptiler.com/assets/img/example-card.webp)

![MapLibre](https://docs.maptiler.com/assets/img/logos/maplibre.svg)

## Learn the basics - React

Tutorials Maplibre-gl-js

Create React JS components for MapLibre GL JS maps.](https://docs.maptiler.com/react/maplibre-gl-js/how-to-use-maplibre-gl-js/)

 [![Get Started with React JS and MapLibre GL JS](https://docs.maptiler.com/assets/img/example-card.webp)

![MapLibre](https://docs.maptiler.com/assets/img/logos/maplibre.svg)

## Get started - React

Tutorials Maplibre-gl-js

Display maps in React JS with MapLibre GL JS.](https://docs.maptiler.com/react/maplibre-gl-js/get-started/)

 [![MapLibre GL JS geocoding control how to search places using React JS](https://docs.maptiler.com/assets/img/example-card.webp)

![MapLibre](https://docs.maptiler.com/assets/img/logos/maplibre.svg)

## Geocoding control - React

Tutorials Maplibre-gl-js Geocoding

Search places using Geocoding control in React JS maps.](https://docs.maptiler.com/react/maplibre-gl-js/geocoding-control/)

Reset filter Founds X results.