@types/mapbox-gl

What is @types/mapbox-gl?

@types/mapbox-gl provides TypeScript type definitions for the Mapbox GL JS library, which is used for creating interactive, customizable maps in web applications.

What are @types/mapbox-gl's main functionalities?

Creating a Map

This feature allows you to create a new map instance with specified options such as container, style, center, and zoom level.

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40],
  zoom: 9
});

Adding a Marker

This feature allows you to add a marker to the map at a specified longitude and latitude.

const marker = new mapboxgl.Marker()
  .setLngLat([-74.5, 40])
  .addTo(map);

Adding a Popup

This feature allows you to add a popup to the map with specified text and location.

const popup = new mapboxgl.Popup({ offset: 25 })
  .setText('Hello, Mapbox!')
  .setLngLat([-74.5, 40])
  .addTo(map);

Geolocation Control

This feature allows you to add a geolocation control to the map, enabling the map to track the user's location.

const geolocateControl = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});
map.addControl(geolocateControl);

Navigation Control

This feature allows you to add navigation controls (zoom and rotation) to the map.

const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');

Other packages similar to @types/mapbox-gl

@types/leaflet

@types/leaflet provides TypeScript type definitions for the Leaflet library, which is another popular library for interactive maps. Leaflet is known for its simplicity and performance, especially on mobile devices. It offers similar functionalities such as map creation, markers, popups, and controls.

@types/google-maps

@types/google-maps provides TypeScript type definitions for the Google Maps JavaScript API. Google Maps is widely used and offers extensive features including detailed maps, satellite imagery, street view, and various services like geocoding and directions. It is more feature-rich compared to Mapbox GL but can be more complex to use.

@types/openlayers

@types/openlayers provides TypeScript type definitions for the OpenLayers library, which is used for displaying map data in web browsers. OpenLayers is highly customizable and supports a wide range of map types and data sources. It is more flexible but can be more complex to set up compared to Mapbox GL.

README

Installation

npm install --save @types/mapbox-gl

Summary

This package contains type definitions for Mapbox GL JS (https://github.com/mapbox/mapbox-gl-js).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/mapbox-gl.

Additional Details

• Last updated: Fri, 02 Dec 2022 19:03:02 GMT
• Dependencies: @types/geojson
• Global values: mapboxgl

Credits

These definitions were written by Dominik Bruderer, Karl-Aksel Puulmann, Dmytro Gokun, Liam Clarke, Vladimir Dashukevich, André Fonseca, makspetrov, Michael Bullington, Olivier Pascal, and Marko Schilde.