Mapbox GL Fontawesome Markers Demo
44 |
45 | Reload to regenerate markers
46 | 
12 |
13 |
14 | **Requires [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) and [fontawesome](https://fontawesome.com/).**
15 |
16 | ### Installing
17 |
18 | ```
19 | npm install mapbox-gl-fontawesome-markers
20 | ```
21 |
22 | ### Usage in your application
23 |
24 | **When using modules**
25 |
26 | ```js
27 | import mapboxgl from 'mapbox-gl';
28 | import FontawesomeMarker from "mapbox-gl-fontawesome-markers";
29 | ```
30 |
31 | **When using a CDN**
32 |
33 | ```html
34 |
35 | ```
36 |
37 | ### Example usage
38 |
39 | ```js
40 | mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
41 |
42 | const map = new mapboxgl.Map({
43 | container: 'map',
44 | style: 'mapbox://styles/mapbox/streets-v11',
45 | center: [40, -74.50],
46 | zoom: 9
47 | });
48 |
49 | const marker = new FontawesomeMarker({
50 | icon: 'fa-solid fa-pizza-slice',
51 | iconColor: 'steelblue',
52 | color: '#fa7132'
53 | })
54 | .setLngLat([40, -74.50])
55 | .addTo(map);
56 | ```
57 |
58 | ## Development
59 |
60 | Install dependencies, build the bundle and load an example
61 |
62 | ```
63 | npm install
64 | npm run build
65 | # serve `/example/static-html/index.html` using a local webserver
66 | ```
67 |
--------------------------------------------------------------------------------
/example/common/map-with-markers.js:
--------------------------------------------------------------------------------
1 |
2 | const icons = [
3 | 'fa-solid fa-pizza-slice',
4 | 'fa-solid fa-hand-spock',
5 | 'fa-solid fa-hippo',
6 | 'fa-solid fa-road',
7 | 'fa-regular fa-face-grimace',
8 | 'fa-solid fa-fire',
9 | 'fa-solid fa-bicycle',
10 | 'fa-brands fa-android',
11 | 'fa-solid fa-sliders',
12 | 'fa-solid fa-flask',
13 | 'fa-solid fa-person',
14 | 'fa-solid fa-bath',
15 | 'fa-solid fa-earth-americas',
16 | 'fa-solid fa-gamepad',
17 | 'fa-solid fa-bug',
18 | 'fa-solid fa-fish',
19 | 'fa-solid fa-anchor',
20 | 'fa-solid fa-user-secret',
21 | 'fa-solid fa-microchip',
22 | 'fa-solid fa-robot',
23 | 'fa-brands fa-react',
24 | 'fa-solid fa-virus',
25 | 'fa-solid fa-medal',
26 | 'fa-solid fa-chair',
27 | 'fa-solid fa-plug',
28 | 'fa-brands fa-square-js',
29 | 'fa-regular fa-lightbulb',
30 | 'fa-brands fa-linux'
31 | ]
32 |
33 | const colors = ["#d9ed92", "#b5e48c", "#99d98c", "#76c893", "#52b69a", "#34a0a4", "#168aad", "#1a759f", "#1e6091", "#184e77"]
34 | const iconColors = ['crimson', 'darkslategray', 'indigo', 'midnightblue', 'paleturquoise', 'silver', 'darkgreen', 'whitesmoke', 'orange', 'yellow']
35 |
36 | mapboxgl.accessToken = 'pk.eyJ1IjoiY2hyaXN3aG9uZ21hcGJveCIsImEiOiJjbDl6bzJ6N3EwMGczM3BudjZmbm5yOXFnIn0.lPhc5Z5H3byF_gf_Jz48Ug';
37 | const map = new mapboxgl.Map({
38 | container: 'map',
39 | // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
40 | style: 'mapbox://styles/mapbox/dark-v11',
41 | zoom: 7,
42 | center: [-77.587241, 39.153318]
43 | });
44 |
45 | map.on('load', () => {
46 | // Set the default atmosphere style
47 | map.setFog({});
48 |
49 |
50 | icons.forEach((icon) => {
51 | const popup = new mapboxgl.Popup({ offset: 32 }).setText(icon);
52 |
53 | const lngLatFC = turf.randomPoint(1, { bbox: [-79.530448, 38.342557, -75.644034, 39.954844] })
54 |
55 | const colorIndex = Math.floor(Math.random() * colors.length);
56 | const color = colors[colorIndex]
57 | const iconColor = iconColors[colorIndex]
58 | const scale = (Math.random() * (1.0000 - 2.0000) + 2.0000).toFixed(4)
59 |
60 | new FontawesomeMarker({
61 | icon,
62 | color,
63 | iconColor,
64 | scale
65 | })
66 | .setLngLat(lngLatFC.features[0].geometry.coordinates)
67 | .setPopup(popup)
68 | .addTo(map);
69 | })
70 | });
71 |
--------------------------------------------------------------------------------