Icon Color

by designworksinteractive

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/v1.2.1/assembly.min.css">

  
    <div id='map'></div>
</body>

CSS

body {
	font-family: 'Open Sans', sans-serif;
	font-weight:normal;
	font-style: normal;
	font-size: 18px;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}
/* -- MAP -- */
#map { position:absolute; top:0; bottom:0; width:100%; }
/* -- POP-UP-- */

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidGJhZGlnaXRhbCIsImEiOiJmemJTVmNJIn0.C8fpv9gpoW17kCr0nNNn5w';
var sw = new mapboxgl.LngLat(-180, -80);
var ne = new mapboxgl.LngLat(180, 80);
var llb = new mapboxgl.LngLatBounds(sw, ne);
var geoJsonfile; 
var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/tbadigital/cih86eiul000o95m4k0iylwvv', //stylesheet location
	center: [0, 0], // starting position
	maxZoom: 19,
	minZoom: 2,
	zoom: 2
});
map.addControl(new mapboxgl.Navigation({position:'top-right'}));

map.on('style.load', function () {
  map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586]
                },
                "properties": {
                    "title": "Mapbox DC",
                    "marker-symbol": "monument"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-122.414, 37.776]
                },
                "properties": {
                    "title": "hotel name",
                    "marker-symbol": "harbor"
                }
            }]
        }
    });
	    map.addLayer({
	        "id": "markers",
	        "type": "symbol",
	        "source": "markers",
	        "layout": {
	        	"icon-image":"marker-24",
	        	"icon-size":1,
	        	"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-field": "{title}",
	          "text-offset": [0, 0.6],
	          "text-anchor": "top",
	        	"icon-allow-overlap":true
	        }
	    });
});