React Map Gl

Overview:

The Urbica React Mapbox GL JS is a React component library that provides a seamless integration with Mapbox GL JS, a JavaScript library for interactive map rendering using WebGL. This project aims to closely resemble the Mapbox GL JS API and was inspired by the uber/react-map-gl project.

Features:

• MapGL: Represents a map on the page.
• MapContext: Utilizes the React Context API to provide access to the map instance.
• Source: Specifies the geographic features to be rendered on the map.
• Layer: Specifies the style for the sources.
• Filter: Sets a filter to an existing layer.
• CustomLayer: Allows rendering directly into the map’s GL context.
• Image: Adds an image to the map style.
• Popup: A React component for Mapbox GL JS Popup.
• Marker: A React component for Mapbox GL JS Marker.
• FeatureState: Sets the state of a geographic feature rendered on the map.
• AttributionControl: Represents the map’s attribution information.
• LanguageControl: Adds support for switching the language of the map style.
• FullscreenControl: Contains a button for toggling the map in and out of fullscreen mode.
• GeolocateControl: Geolocates the user and tracks their current location on the map.
• NavigationControl: Contains zoom and rotation controls for the map.

Installation:

To install the Urbica React Mapbox GL JS, follow these steps:

If you are using npm:

npm install @urbica/react-map-gl

If you are using yarn:

yarn add @urbica/react-map-gl

Optional Dependencies: If you want to use the LanguageControl component, install the following packages:

If you are using npm:

npm install mapbox-gl

npm install @mapbox/mapbox-gl-language

If you are using yarn:

yarn add mapbox-gl

yarn add @mapbox/mapbox-gl-language

Summary:

Overall, the Urbica React Mapbox GL JS is a powerful React component library that seamlessly integrates with Mapbox GL JS. It provides a wide range of components to create interactive and customizable maps. The library closely resembles the Mapbox GL JS API and offers additional features like custom layers and language switching.