Adding custom marker

Switch to another map style. See the example: https://docs.mapbox.com//mapbox-gl-js/example/setstyle/

by jscastro76

HTML

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



<div id="map"></div>
<div id="menu">
    <input
        id="streets-v11"
        type="radio"
        name="rtoggle"
        value="streets"
        checked="checked"
    />
    <label for="streets-v11">streets</label>
    <input id="light-v10" type="radio" name="rtoggle" value="light" />
    <label for="light-v10">light</label>
    <input id="dark-v10" type="radio" name="rtoggle" value="dark" />
    <label for="dark-v10">dark</label>
    <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
    <label for="outdoors-v11">outdoors</label>
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
    <label for="satellite-v9">satellite</label>
</div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 13,
        center: [4.899, 52.372]
    });

    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');
		
    map.addSource('roads3',{
        'type':'geojson',
        'data': 
    });

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setStyle('mapbox://styles/mapbox/' + layerId);
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchLayer;
    }