first commit

.gitignore

@@ -0,0 +1 @@
+/node_modules

README.md

@@ -0,0 +1,62 @@
+# 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.
+
+**Requires [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) and [fontawesome](https://fontawesome.com/).**
+
+### Installing
+
+```
+npm install mapbox-gl-fontawesome-markers
+```
+
+### Usage in your application
+
+
+**When using modules**
+
+```js
+import mapboxgl from 'mapbox-gl';
+import FontawesomeMarkers from "mapbox-gl-fontawesome-markers";
+```
+
+**When using a CDN**
+
+```html
+<script src='comingsoon'></script>
+```
+
+### Example usage
+
+```js
+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
+```

dist/index.js

@@ -0,0 +1,34 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.FontawesomeMarker = factory());
+})(this, (function () { 'use strict';
+
+    const DEFAULT_TOP_OFFSET = 7;
+    const DEFAULT_FONT_SIZE = 12;
+
+    class FontawesomeMarker extends mapboxgl.Marker {
+        constructor(options, legacyOptions) {
+            super(options, legacyOptions);
+
+            const {
+                icon,
+                iconColor = '#FFF',
+                scale = 1
+            } = options;
+
+            if (icon) {
+                const top = scale * DEFAULT_TOP_OFFSET;
+                const fontSize = `${DEFAULT_FONT_SIZE * scale}px`;
+                const iconElementString = `<i style="color:${iconColor};font-size: ${fontSize};position: absolute; left: 50%; transform: translate(-50%, 0); top: ${top}px;" class="${options.icon}"></i>`;
+                this._element.insertAdjacentHTML('beforeend', iconElementString);
+
+                // remove the default circle from the marker
+                this._element.querySelector('circle').remove();
+            }
+        }
+    }
+
+    return FontawesomeMarker;
+
+}));

example/common/map-with-markers.js

@@ -0,0 +1,57 @@
+const markers = [
+    {
+        lngLat:[-73.97, 40.775699],
+        icon: 'fa-solid fa-pizza-slice',
+        color: 'purple',
+    },
+    {
+        lngLat:[-73.96, 40.775699],
+        icon: 'fa-solid fa-hand-spock',
+        color: 'green',
+        iconColor: 'lightyellow'
+    },
+    {
+        lngLat:[-73.95, 40.775699],
+        icon: 'fa-solid fa-hippo',
+        color: 'red',
+        scale: 1.25
+    },
+    {
+        lngLat:[-73.94, 40.775699],
+        icon: 'fa-solid fa-road',
+        color: 'purple',
+        iconColor: 'orange',
+        scale: 1.5
+    },
+    {
+        lngLat:[-73.93, 40.775699],
+        icon: 'fa-regular fa-face-grimace',
+        color: 'purple',
+        scale: 2,
+        rotation: 45
+    },
+]
+
+mapboxgl.accessToken = 'pk.eyJ1IjoiY2hyaXN3aG9uZ21hcGJveCIsImEiOiJjbDl6bzJ6N3EwMGczM3BudjZmbm5yOXFnIn0.lPhc5Z5H3byF_gf_Jz48Ug';
+const map = new mapboxgl.Map({
+    container: 'map',
+    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
+    style: 'mapbox://styles/mapbox/dark-v11',
+    zoom: 12,
+    center: [-73.969799, 40.775699]
+});
+
+map.on('load', () => {
+    // Set the default atmosphere style
+    map.setFog({});
+
+
+    markers.forEach((options) => {
+        const popup = new mapboxgl.Popup({ offset: 32 }).setText(options.icon);
+
+        new FontawesomeMarker(options)
+        .setLngLat(options.lngLat)
+        .setPopup(popup)
+        .addTo(map);
+    })
+});

example/node-browserify/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

example/node-browserify/README.md

@@ -0,0 +1,11 @@
+# Browserify Example
+
+This example imports `mapbox-gl-fontawesome-markers` as an npm package from `/node_modules` along with `mapboxgl` and `@fortawesome/fontawesome-free`
+
+## How to use
+
+Install Dependencies: `npm install`
+
+Build the bundle: `npm run build`
+
+Serve `index.html` using a local web server and load it in your browser.

example/node-browserify/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Display a globe on a webpage</title>
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>