Map

<div class="l-map">

    <nav class="sidebar sidebar-desktop ">

        <div class="sidebar-x-options">
            <div class="brandvoice brandvoice-sidebar">
                <h3>Hospitality, Tourism, and Recreation</h3>
            </div>
            <button class="sidebaroption sidebaroption-is-active" type="button">
                <span class="sidebaroption-x-title">Child Development or Early Care and Education</span>
                <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
            </button>
            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-title">Family and Consumer Sciences, General</span>
                <span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
            </button>
            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-title">Food Processing and Related Technology</span>
                <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
            </button>
            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-title">Gerontology</span>
                <span class="sidebaroption-x-body">Work with older adults.</span>
            </button>
            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-title">Hospitality</span>
                <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
            </button>
            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-title">Natural Resources</span>
                <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
            </button>
            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-title">Nutrition, Foods, and Culinary Arts</span>
                <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
            </button>
            <button class="sidebaroption" type="button">
                <span class="sidebaroption-x-title">Public Relations</span>
                <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
            </button>
        </div>

    </nav>

    <div id="l-map-x-map" class="l-map-x-map">
        <button class="button button-inverse l-map-x-clearlocationfilter" type="button">Clear Location Filter</button>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
    $('.sidebaroption').click(function() {
        $('.sidebaroption').removeClass('sidebaroption-is-active');
        $(this).addClass('sidebaroption-is-active');
    });
</script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<script>
    var mainmap = L.map('l-map-x-map', {
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    mainmap.zoomControl.setPosition('bottomright');
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(mainmap);
    // Create the map marker.
    var icon = L.divIcon({
        className: 'mapmarker',
        iconSize: null,
        iconAnchor: [11, 0],
    });
    // Add the marker to map.
    var marker1 = L.marker([33.6711, -117.9102], {
        icon: icon
    }).addTo(mainmap);
    var marker2 = L.marker([33.5527184, -117.6659786], {
        icon: icon
    }).addTo(mainmap);
    var popup1 = L.popup({
        className: 'mappopup',
        autoClose: false
    }).setContent('<a href="#">Orange Coast College</a>');
    var popup2 = L.popup({
        className: 'mappopup',
        autoClose: false
    }).setContent('<a href="#">Saddleback College</a>');
    // Add a popup to marker
    marker1.bindPopup(popup1).openPopup();
    marker2.bindPopup(popup2).openPopup();
    var group = new L.featureGroup([marker1, marker2]);
    mainmap.fitBounds(group.getBounds().pad(0.5));
</script>