Industry - Coordinator View

<header data-dialog="inertcontainer">

    <h1 class="u-visuallyhidden" id="header-document">Program Finder</h1>

    <nav class="quicklinks" aria-label="quicklinks" data-menu="inertcontainer">
        <a href="#main">Go to page content</a>
    </nav>

    <div class="header header-map">
        <a class="backlink" href="#" aria-label="back to homepage">
            <div class="backlink-x-icon">
                <svg aria-hidden="true">
                    <use xlink:href="#icon-arrowleft"></use>
                </svg>
            </div>
        </a>
        <div class="header-x-text">
            <h2 class="header-x-title">Hospitality, Tourism, and Recreation</h2>
        </div>
    </div>

</header>

<main id="main">

    <div data-dialog="inertcontainer">

        <div class="background l-viewportheight">

            <div class="l-bottombumper  u-hidden-mindesktop">
                <div class="mobilemappane mobilemappane-highschool ">

                    <div class="brandvoice brandvoice-sidebar">
                        <h3>Hospitality, Tourism, and Recreation</h3>
                    </div>

                    <div class="mobilemappane-x-select">
                        <button class="buttonselect" type="button">
                            <span class="buttonselect-x-top">
                                <span class="buttonselect-x-title">Culinary Arts</span>
                                <span class="buttonselect-x-pointer">
                                    <svg>
                                        <use xlink:href="#icon-pointerdown"></use>
                                    </svg>
                                </span>
                            </span>
                            <span class="buttonselect-x-subtitle">Provide intellectual, psychosocial, and physical care and development of children.</span>
                        </button>
                    </div>

                    <h4 class="mobilemappane-x-heading"><strong>9 Colleges</strong> have this degree programs</h4>

                    <div class="mobilemappane-x-cards">
                        <div class="l-cards">
                            <a class="card card-highschool" href="#" target="_blank">
                                <div class="card-x-map" id="card-x-map1"></div>
                                <div class="card-x-body">
                                    <div class="card-x-title">Anaheim Union High School District</div>
                                    <div class="card-x-subtitle">2 High Schools</div>
                                </div>
                            </a>
                            <a class="card card-highschool" href="#" target="_blank">
                                <div class="card-x-map" id="card-x-map2"></div>
                                <div class="card-x-body">
                                    <div class="card-x-title">Capistrano USD and Laguna Beach USD</div>
                                    <div class="card-x-subtitle">10 High Schools</div>
                                </div>
                            </a>
                            <a class="card card-highschool" href="#" target="_blank">
                                <div class="card-x-map" id="card-x-map3"></div>
                                <div class="card-x-body">
                                    <div class="card-x-title">Brea Olinda Unified School District</div>
                                    <div class="card-x-subtitle">1 High Schools</div>
                                </div>
                            </a>
                            <a class="card card-highschool" href="#" target="_blank">
                                <div class="card-x-map" id="card-x-map4"></div>
                                <div class="card-x-body">
                                    <div class="card-x-title">Brea Olinda Unified School District</div>
                                    <div class="card-x-subtitle">10 High Schools</div>
                                </div>
                            </a>
                            <a class="card card-highschool" href="#" target="_blank">
                                <div class="card-x-map" id="card-x-map5"></div>
                                <div class="card-x-body">
                                    <div class="card-x-title">Brea Olinda Unified School District</div>
                                    <div class="card-x-subtitle">10 High Schools</div>
                                </div>
                            </a>
                            <a class="card card-highschool" href="#" target="_blank">
                                <div class="card-x-map" id="card-x-map6"></div>
                                <div class="card-x-body">
                                    <div class="card-x-title">Brea Olinda Unified School District</div>
                                    <div class="card-x-subtitle">10 High Schools</div>
                                </div>
                            </a>
                            <a class="card card-highschool" href="#" target="_blank">
                                <div class="card-x-map" id="card-x-map7"></div>
                                <div class="card-x-body">
                                    <div class="card-x-title">Brea Olinda Unified School District</div>
                                    <div class="card-x-subtitle">10 High Schools</div>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>

                <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 cardmap1 = L.map('card-x-map1', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([33.6412, -117.9188], 10);
                    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
                        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                    }).addTo(cardmap1);
                    // Create the map marker.
                    var icon = L.divIcon({
                        className: 'mapmarker',
                        iconSize: null,
                        iconAnchor: [11, 11],
                    });
                    var marker1 = L.marker([33.6412, -117.9188], {
                        icon: icon
                    }).addTo(cardmap1);
                    var cardmap2 = L.map('card-x-map2', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([33.6412, -117.9188], 10);
                    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
                        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                    }).addTo(cardmap2);
                    var marker2 = L.marker([33.6412, -117.9188], {
                        icon: icon
                    }).addTo(cardmap2);
                    var cardmap3 = L.map('card-x-map3', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([33.6412, -117.9188], 10);
                    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
                        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                    }).addTo(cardmap3);
                    var marker3 = L.marker([33.6412, -117.9188], {
                        icon: icon
                    }).addTo(cardmap3);
                    var cardmap4 = L.map('card-x-map4', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([33.6412, -117.9188], 10);
                    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
                        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                    }).addTo(cardmap4);
                    var marker4 = L.marker([33.6412, -117.9188], {
                        icon: icon
                    }).addTo(cardmap4);
                    var cardmap5 = L.map('card-x-map5', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([33.6412, -117.9188], 10);
                    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
                        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                    }).addTo(cardmap5);
                    var marker5 = L.marker([33.6412, -117.9188], {
                        icon: icon
                    }).addTo(cardmap5);
                    var cardmap6 = L.map('card-x-map6', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([33.6412, -117.9188], 10);
                    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
                        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                    }).addTo(cardmap6);
                    var marker6 = L.marker([33.6412, -117.9188], {
                        icon: icon
                    }).addTo(cardmap6);
                    var cardmap7 = L.map('card-x-map7', {
                        zoomControl: false,
                        attributionControl: false
                    }).setView([33.6412, -117.9188], 10);
                    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
                        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
                    }).addTo(cardmap7);
                    var marker7 = L.marker([33.6412, -117.9188], {
                        icon: icon
                    }).addTo(cardmap7);
                </script>
            </div>

            <div class="l-map u-hidden-maxdesktop">
                <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="map1" class="l-map-x-map"></div>

            </div>

        </div>

    </div>

</main>

<footer class="footer footer-industry l-containerxaxis" data-dialog="inertcontainer" data-menu="inertcontainer">
    <div class="footer-x-sponsors">
        <h3>Sponsors:</h3>
        <ul>
            <li>LAOCRC<span class="footer-x-bullet">&bull;</span></li>
            <li>Strong Workforce</li>
        </ul>
    </div>
    <img src="../../assets/images/footer-logo.svg" alt="California Community Colleges logo" width="272" height="34">
</footer>

<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('map1', {
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    mainmap.zoomControl.setPosition('bottomright');
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
        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.941650, -117.842385], {
        icon: icon
    }).addTo(mainmap);
    var marker2 = L.marker([33.856388, -117.963304], {
        icon: icon
    }).addTo(mainmap);
    var popup1 = L.popup({
        className: 'mappopup',
        autoClose: false
    }).setContent('<a href="#">Brea Olinda Unified School District</a><div class="mappopup-x-text">10 High Schools</div>');
    var popup2 = L.popup({
        className: 'mappopup',
        autoClose: false
    }).setContent('<a href="#">Anaheim Union High School District</a><div class="mappopup-x-text">10 High Schools</div>');
    // 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>