mapbox-gl-fontawesome-markers

Adds Fontawesome icons to Mapbox GL JS default Map Markers.

This package extends mapboxgl.Marker, adding two new options: icon and iconColor. icon is any fontawesome icon class (e.g. fa-solid fa-pizza-slice) and iconColor is any html or hex color code. The fontawesome icon specified in icon will be added to the marker in place of the default white circle.

All built-in mapboxgl.Marker options are still available, so you can still set the color, scale, rotation, etc as usual.

Live Demo on Github Pages

Requires mapbox-gl-js and fontawesome.

Installing

npm install mapbox-gl-fontawesome-markers

Usage in your application

When using modules

import mapboxgl from 'mapbox-gl';
import FontawesomeMarkers from "mapbox-gl-fontawesome-markers";

When using a CDN

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js'></script>

Example usage

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

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

const marker = new FontawesomeMarker({
    icon: 'fa-solid fa-pizza-slice',
    iconColor: 'steelblue',
    color: '#fa7132'
})
  .setLngLat([40, -74.50])
  .addTo(map);

Development

Install dependencies, build the bundle and load an example

npm install
npm run build
# serve `/example/static-html/index.html` using a local webserver