<header aria-labelledby="header-banner" 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>
<h2 class="u-visuallyhidden" id="header-banner">Header</h2>
<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>
<div class="distance-filter">
<form class="distance-filter-x-form">
<legend class="distance-filter-x-legend">Find Nearby Programs</legend>
<div class="distance-filter-x-use-location">
<button class="button button-secondary" type="button">Use My Location</button>
</div>
<div class="distance-filter-x-location">
<div class="forminput forminput-is-error">
<div class="u-display-flex u-flex-justify-content-between u-flex-align-items-baseline">
<label class="forminput-x-label" for="location">Or, enter city or ZIP Code in California</label>
</div>
<div class="forminput-x-input">
<input type="text" id="location" placeholder="Zip Code">
<div class="distance-filter-x-clear">
<button class="button button-secondary" type="button">Clear</button>
</div>
</div>
<p class="forminput-x-error">Please enter a zip code within California.</p>
</div>
</div>
<div class="distance-filter-x-distance">
<div class="forminput forminput-select-inline">
<div class="u-display-flex u-flex-justify-content-between u-flex-align-items-baseline">
<label class="forminput-x-label" for="distance">Within</label>
</div>
<div class="forminput-x-input">
<select id="distance">
<option>10</option>
<option>25</option>
<option>50</option>
<option selected>75</option>
<option>100</option>
</select>
<svg aria-hidden="true">
<use xlink:href="#icon-triangle-down"></use>
</svg>
</div>
</div>
</div>
<div class="distance-filter-x-submit">
<button class="button" type="submit">Apply</button>
</div>
<div class="distance-filter-x-success">
<svg class="distance-filter-x-successicon">
<use xlink:href="#icon-success"></use>
</svg>
</div>
</form>
</div>
</header>
<main id="main" tabindex="-1">
<div data-dialog="inertcontainer">
<!-- Document content here -->
<div class="background l-viewportheight">
<div class="l-bottombumper u-hidden-mindesktop">
</div>
<div class="l-map u-hidden-maxdesktop">
<nav class="sidebar sidebar-desktop ">
<div class="sidebar-x-options">
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sidebaroption sidebaroption-is-active">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for functional and esthetic purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-dropdown-inner">
<nav class="sidebar sidebar-desktop ">
<div class="sidebar-x-empty">
<div class="sidebar-x-emptytext1 l-flex">
<img src="../../assets/images/thinking-face.png" alt="thinking face" />
<div class="sidebar-x-emptybody">
<p>
<strong>
No results found for this location. Try searching in a wider area.
</strong>
</p>
<p>
Program Finder currently doesn’t cover every county, but we’re
expanding across California! If you don’t see results for your area,
check back soon.
</p>
</div>
</div>
</div>
</nav>
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201">
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>0 Colleges</b> have this program </span>
</label>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox">
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>0 High School Districts</b> have this program </span>
</label>
</div>
</div>
</div>
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sidebaroption">
<button class="sidebaroption-x-button" type="button" id="architecture-and-architectural-technology" aria-expanded="true" aria-controls="dropdown-architecture-and-architectural-technology">
<div class="sidebaroption-x-header">
<h3 class="sidebaroption-x-title">Architecture and Architectural Technology</h3>
<span class="sidebaroption-x-plus"><svg aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg></span>
<span class="sidebaroption-x-minus"><svg aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg></span>
</div>
<span class="sidebaroption-x-body"><span class="u-visuallyhidden">,</span>Plan, organize, and enclose space for
functional and esthetic
purposes.</span>
</button>
<div class="sidebaroption-x-dropdown" id="dropdown-architecture-and-architectural-technology" style="display: none">
<div class="sidebaroption-x-dropdown-inner">
<label class="sidebaroption-x-collegecount">
<input class="sidebaroption-x-togglecollege" type="checkbox" id="collegetoggle0201" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg><b>2 Colleges</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdowncollege" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" trackon="click" href="https://cte.fullcoll.edu/department/architecture-construction?utm_source=Program+Finder">
Fullerton College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>321 E Chapman Ave, Fullerton, CA 92832</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a target="_blank" href="#">
Golden West College
<svg aria-label=",external link">
<use xlink:href="#icon-externallink"></use>
</svg>
</a>
<div>15744 Goldenwest St, Huntington Beach, CA 92647</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
<label class="sidebaroption-x-hscount" style="margin-top: 16px;">
<input class="sidebaroption-x-togglehs" type="checkbox" />
<span><svg aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg><b>2 High School Districts</b>
have this program
</span>
</label>
<div class="sidebaroption-x-listdropdown sidebaroption-x-listdropdownhs" style="display: block;">
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/FJUHSD">Fullerton Joint
Union High School District
</a>
<div>5 High Schools</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
<div class="sidebaroption-x-collegelink ng-tns-c0-4 ng-star-inserted">
<a class="mapmarker3" href="/focus/architecture-and-architectural-technology/districts/HBUHSD">Huntington
Beach Union High School District
</a>
<div>1 High School</div>
<button class="sidebaroption-x-centermap" type="button">
<svg aria-hidden="true">
<use xlink:href="#icon-locate"></use>
</svg>
center on map
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="l-map-x-map" class="l-map-x-map" aria-label="Map that displays schools that contain related programs">
<div class="l-map-x-overlay" aria-hidden="true">
<div class="l-map-x-overlaytext">
<div class="l-map-x-overlay-text-top">
<img src="/assets/images/pointing-left.png">Select an area of interest.
</div>
<div class="l-map-x-overlay-text-bottom">
The map will display schools with related programs.
</div>
</div>
</div>
<div class="l-map-x-legend" aria-label="legend, showing the colors of college and highschool districts map markers">
<label class="l-map-x-legendtext">
<input class="l-map-x-legendtoggle" type="checkbox" id="l-map-collegetoggle" />
<span>
<svg class="l-map-x-legend-icon" aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg>
</span>
<div>College</div>
</label>
<label class="l-map-x-legendtext">
<input class="l-map-x-legendtoggle" type="checkbox" id="l-map-hstoggle" />
<span>
<svg class="l-map-x-legend-icon" aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg>
</span>
<div>High School District</div>
</label>
<label class="l-map-x-legendtext">
<input class="l-map-x-legendtoggle" type="checkbox" id="l-map-businesstoggle" />
<span>
<svg class="l-map-x-legend-icon" aria-hidden="true">
<use xlink:href="#icon-business-noborder"></use>
</svg>
</span>
<div>Business Partner</div>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Dialog content here -->
</main>
<footer class="footer footer-industry l-containerxaxis" aria-label="footer" data-dialog="inertcontainer" data-menu="inertcontainer">
<div class="footer-x-sponsors">
<h3>Sponsors:</h3>
<ul>
<li>LAOCRC • </li>
<li>Strong Workforce</li>
</ul>
</div>
<img src="../../assets/images/footer-logo.svg" alt="California Community Colleges logo" width="272" height="34">
</footer>
<style>
</style>
<!-- Leaflet and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</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>
<!-- END Leaflet and jQuery -->
<!-- Legend JS -->
<script>
$('.l-map-x-legendclose').click(function() {
$(this).parent().fadeOut();
});
</script>
<!-- Sidebar option JS -->
<script>
$('.sidebaroption-x-button').click(function() {
$('.l-map-x-overlay').fadeOut();
$('.sidebaroption-x-dropdown').not($(this).next()).not($(this).parents()).hide();
$('.sidebaroption').not($(this).parent()).removeClass('sidebaroption-is-active');
$(this).parent('.sidebaroption').toggleClass('sidebaroption-is-active');
$(this).next('.sidebaroption-x-dropdown').slideToggle("fast", function() {
$(this).parent().get(0).scrollIntoView({
behavior: "smooth"
});
});
});
</script>
<!-- Map JS -->
<script>
var mainmap = L.map('l-map-x-map', {
attributionControl: false
}).setView([33.6412, -117.9188], 13);
mainmap.zoomControl.setPosition('bottomright');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <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 icon1 = L.divIcon({
className: 'mapmarker mapmarker1',
iconSize: null,
iconAnchor: [12, 12],
html: '<a href="http://www.orangecoastcollege.edu/Pages/home.aspx" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
var icon2 = L.divIcon({
className: 'mapmarker mapmarker2',
iconSize: null,
iconAnchor: [12, 12],
html: '<a href="https://www.saddleback.edu/" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
var icon3 = L.divIcon({
className: 'mapmarker mapmarker3 mapmarker-hs',
iconSize: null,
iconAnchor: [12, 12],
html: '<a href="/components/preview/detail" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
var icon4 = L.divIcon({
className: 'mapmarker mapmarker4 mapmarker-hs',
iconSize: null,
iconAnchor: [12, 12],
html: '<a href="/components/preview/detail" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
// Add the marker to map.
var marker1 = L.marker([33.6711, -117.9102], {
icon: icon1,
keyboard: false
}).addTo(mainmap);
var marker2 = L.marker([33.5527184, -117.6659786], {
icon: icon2,
keyboard: false
}).addTo(mainmap);
var marker3 = L.marker([33.837212, -117.94881], {
icon: icon3,
keyboard: false
}).addTo(mainmap);
var marker4 = L.marker([33.888715, -117.944259], {
icon: icon4,
keyboard: false
}).addTo(mainmap);
var popup1 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Orange Coast College</div><div>2701 Fairview Rd, Costa Mesa, CA 92626</div>');
var popup2 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Saddleback College</div><div>28000 Marguerite Pkwy, Mission Viejo, CA 92692</div>');
var popup3 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Anaheim Union High School District</div><div>7 High Schools</div>');
var popup4 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Fullerton Join Union High School District</div><div>4 High Schools</div>');
// Add a popup to marker
marker1.bindPopup(popup1);
marker2.bindPopup(popup2);
marker3.bindPopup(popup3);
marker4.bindPopup(popup4);
marker1.on('mouseover', function(e) {
this.openPopup();
});
marker2.on('mouseover', function(e) {
this.openPopup();
});
marker3.on('mouseover', function(e) {
this.openPopup();
});
marker4.on('mouseover', function(e) {
this.openPopup();
});
marker1.on('mouseout', function(e) {
this.closePopup();
});
marker2.on('mouseout', function(e) {
this.closePopup();
});
marker3.on('mouseout', function(e) {
this.closePopup();
});
marker4.on('mouseout', function(e) {
this.closePopup();
});
$('.sidebaroption-x-collegelink1').hover(
function() {
marker1.openPopup();
},
function() {
marker1.closePopup();
}
);
$('.sidebaroption-x-collegelink2').hover(
function() {
marker2.openPopup();
},
function() {
marker2.closePopup();
}
);
$('.sidebaroption-x-collegelink3').hover(
function() {
marker3.openPopup();
},
function() {
marker3.closePopup();
}
);
$('.sidebaroption-x-collegelink4').hover(
function() {
marker4.openPopup();
},
function() {
marker4.closePopup();
}
);
var group = new L.featureGroup([marker1, marker2, marker3, marker4]);
mainmap.fitBounds(group.getBounds().pad(0.5));
$('.sidebaroption-x-togglecollege').change(function() {
if ($(this).prop('checked')) {
$('.sidebaroption-x-togglecollege').attr('checked', 'checked');
marker1.setOpacity(1);
marker2.setOpacity(1);
$('.sidebaroption-x-listdropdowncollege').slideDown();
} else {
$('.sidebaroption-x-togglecollege').removeAttr('checked');
marker1.setOpacity(0);
marker2.setOpacity(0);
$('.sidebaroption-x-listdropdowncollege').slideUp();
}
});
$('.sidebaroption-x-togglehs').change(function() {
if ($(this).prop('checked')) {
$('.sidebaroption-x-togglehs').attr('checked', 'checked');
marker3.setOpacity(1);
marker4.setOpacity(1);
$('.sidebaroption-x-listdropdownhs').slideDown();
} else {
$('.sidebaroption-x-togglehs').removeAttr('checked');
marker3.setOpacity(0);
marker4.setOpacity(0);
$('.sidebaroption-x-listdropdownhs').slideUp();
}
});
$('.sidebaroption-x-togglebusiness').change(function() {
if ($(this).prop('checked')) {
$('.sidebaroption-x-togglebusiness').attr('checked', 'checked');
marker3.setOpacity(1);
marker4.setOpacity(1);
$('.sidebaroption-x-listdropdownbusiness').slideDown();
} else {
$('.sidebaroption-x-togglebusiness').removeAttr('checked');
marker3.setOpacity(0);
marker4.setOpacity(0);
$('.sidebaroption-x-listdropdownbusiness').slideUp();
}
});
$('.sidebaroption-x-centermap1').click(function() {
marker1.openPopup();
marker2.closePopup();
marker3.closePopup();
marker4.closePopup();
mainmap.setView([33.6711, -117.9102], 10);
});
$('.sidebaroption-x-centermap2').click(function() {
marker2.openPopup();
marker1.closePopup();
marker3.closePopup();
marker4.closePopup();
mainmap.setView([33.5527184, -117.6659786], 10);
});
$('.sidebaroption-x-centermap3').click(function() {
marker3.openPopup();
marker1.closePopup();
marker2.closePopup();
marker4.closePopup();
mainmap.setView([33.837212, -117.94881], 10);
});
$('.sidebaroption-x-centermap4').click(function() {
marker4.openPopup();
marker1.closePopup();
marker2.closePopup();
marker3.closePopup();
mainmap.setView([33.888715, -117.944259], 10);
});
$(window).resize(function() {
mainmap.invalidateSize();
});
</script>
<script>
$('.distance-filter-x-expand-button').click(function() {
$(this).next().slideToggle();
});
</script>
<header aria-labelledby="header-banner" data-dialog="inertcontainer">
<h1 class="u-visuallyhidden" id="header-document">Program Finder</h1>
{{render '@quicklinks'}}
<h2 class="u-visuallyhidden" id="header-banner">Header</h2>
{{render '@header--mapexample'}}
{{render '@distancefilter--example'}}
</header>
<main id="main" tabindex="-1">
<div data-dialog="inertcontainer">
<!-- Document content here -->
<div class="background l-viewportheight">
<div class="l-bottombumper u-hidden-mindesktop">
{{render '@mobilemappane--collegeexample'}}
</div>
<div class="l-map u-hidden-maxdesktop">
<nav class="{{render '@sidebar--desktop'}}">
<div class="sidebar-x-options">
{{render '@sidebaroption--buttonexample'}}
{{render '@sidebaroption--buttonempty'}}
{{render '@sidebaroption--buttonexample'}}
{{render '@sidebaroption--buttonexample'}}
{{render '@sidebaroption--buttonexample'}}
{{render '@sidebaroption--buttonexample'}}
{{render '@sidebaroption--buttonexample'}}
{{render '@sidebaroption--buttonexample'}}
{{render '@sidebaroption--buttonexample'}}
</div>
</nav>
<div id="l-map-x-map" class="l-map-x-map" aria-label="Map that displays schools that contain related programs">
<div class="l-map-x-overlay" aria-hidden="true">
<div class="l-map-x-overlaytext">
<div class="l-map-x-overlay-text-top">
<img src="/assets/images/pointing-left.png">Select an area of interest.
</div>
<div class="l-map-x-overlay-text-bottom">
The map will display schools with related programs.
</div>
</div>
</div>
<div class="l-map-x-legend" aria-label="legend, showing the colors of college and highschool districts map markers">
<label class="l-map-x-legendtext">
<input class="l-map-x-legendtoggle" type="checkbox" id="l-map-collegetoggle" />
<span>
<svg class="l-map-x-legend-icon" aria-hidden="true">
<use xlink:href="#icon-college-noborder"></use>
</svg>
</span>
<div>College</div>
</label>
<label class="l-map-x-legendtext">
<input class="l-map-x-legendtoggle" type="checkbox" id="l-map-hstoggle" />
<span>
<svg class="l-map-x-legend-icon" aria-hidden="true">
<use xlink:href="#icon-hs-noborder"></use>
</svg>
</span>
<div>High School District</div>
</label>
<label class="l-map-x-legendtext">
<input class="l-map-x-legendtoggle" type="checkbox" id="l-map-businesstoggle"/>
<span>
<svg class="l-map-x-legend-icon" aria-hidden="true">
<use xlink:href="#icon-business-noborder"></use>
</svg>
</span>
<div>Business Partner</div>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Dialog content here -->
</main>
<footer class="footer footer-industry {{render '@l-containerxaxis'}}" aria-label="footer" data-dialog="inertcontainer" data-menu="inertcontainer">
<div class="footer-x-sponsors">
<h3>Sponsors:</h3>
<ul>
<li>LAOCRC • </li>
<li>Strong Workforce</li>
</ul>
</div>
<img src="{{path '/assets/images/footer-logo.svg'}}" alt="California Community Colleges logo" width="272" height="34">
</footer>
<style>
</style>
<!-- Leaflet and jQuery -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</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>
<!-- END Leaflet and jQuery -->
<!-- Legend JS -->
<script>
$('.l-map-x-legendclose').click(function(){
$(this).parent().fadeOut();
});
</script>
<!-- Sidebar option JS -->
<script>
$('.sidebaroption-x-button').click(function(){
$('.l-map-x-overlay').fadeOut();
$('.sidebaroption-x-dropdown').not($(this).next()).not($(this).parents()).hide();
$('.sidebaroption').not($(this).parent()).removeClass('sidebaroption-is-active');
$(this).parent('.sidebaroption').toggleClass('sidebaroption-is-active');
$(this).next('.sidebaroption-x-dropdown').slideToggle("fast", function(){
$(this).parent().get(0).scrollIntoView({behavior: "smooth"});
});
});
</script>
<!-- Map JS -->
<script>
var mainmap = L.map('l-map-x-map', {
attributionControl: false
}).setView([33.6412, -117.9188], 13);
mainmap.zoomControl.setPosition('bottomright');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <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 icon1 = L.divIcon({
className: 'mapmarker mapmarker1',
iconSize:null,
iconAnchor: [12, 12],
html: '<a href="http://www.orangecoastcollege.edu/Pages/home.aspx" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
var icon2 = L.divIcon({
className: 'mapmarker mapmarker2',
iconSize:null,
iconAnchor: [12, 12],
html: '<a href="https://www.saddleback.edu/" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
var icon3 = L.divIcon({
className: 'mapmarker mapmarker3 mapmarker-hs',
iconSize:null,
iconAnchor: [12, 12],
html: '<a href="/components/preview/detail" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
var icon4 = L.divIcon({
className: 'mapmarker mapmarker4 mapmarker-hs',
iconSize:null,
iconAnchor: [12, 12],
html: '<a href="/components/preview/detail" target="_blank" tabindex="-1" aria-hidden="true"></a>'
});
// Add the marker to map.
var marker1 = L.marker([33.6711, -117.9102],{icon: icon1, keyboard: false}).addTo(mainmap);
var marker2 = L.marker([33.5527184, -117.6659786],{icon: icon2, keyboard: false}).addTo(mainmap);
var marker3 = L.marker([33.837212, -117.94881],{icon: icon3, keyboard: false}).addTo(mainmap);
var marker4 = L.marker([33.888715, -117.944259],{icon: icon4, keyboard: false}).addTo(mainmap);
var popup1 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Orange Coast College</div><div>2701 Fairview Rd, Costa Mesa, CA 92626</div>');
var popup2 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Saddleback College</div><div>28000 Marguerite Pkwy, Mission Viejo, CA 92692</div>');
var popup3 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Anaheim Union High School District</div><div>7 High Schools</div>');
var popup4 = L.popup({
className: 'mappopup',
autoClose: false
}).setContent('<div style="font-weight: bold;">Fullerton Join Union High School District</div><div>4 High Schools</div>');
// Add a popup to marker
marker1.bindPopup(popup1);
marker2.bindPopup(popup2);
marker3.bindPopup(popup3);
marker4.bindPopup(popup4);
marker1.on('mouseover', function (e) {
this.openPopup();
});
marker2.on('mouseover', function (e) {
this.openPopup();
});
marker3.on('mouseover', function (e) {
this.openPopup();
});
marker4.on('mouseover', function (e) {
this.openPopup();
});
marker1.on('mouseout', function (e) {
this.closePopup();
});
marker2.on('mouseout', function (e) {
this.closePopup();
});
marker3.on('mouseout', function (e) {
this.closePopup();
});
marker4.on('mouseout', function (e) {
this.closePopup();
});
$('.sidebaroption-x-collegelink1').hover(
function() {
marker1.openPopup();
}, function() {
marker1.closePopup();
}
);
$('.sidebaroption-x-collegelink2').hover(
function() {
marker2.openPopup();
}, function() {
marker2.closePopup();
}
);
$('.sidebaroption-x-collegelink3').hover(
function() {
marker3.openPopup();
}, function() {
marker3.closePopup();
}
);
$('.sidebaroption-x-collegelink4').hover(
function() {
marker4.openPopup();
}, function() {
marker4.closePopup();
}
);
var group = new L.featureGroup([marker1, marker2, marker3, marker4]);
mainmap.fitBounds(group.getBounds().pad(0.5));
$('.sidebaroption-x-togglecollege').change(function(){
if ($(this).prop('checked')) {
$('.sidebaroption-x-togglecollege').attr('checked', 'checked');
marker1.setOpacity(1);
marker2.setOpacity(1);
$('.sidebaroption-x-listdropdowncollege').slideDown();
} else {
$('.sidebaroption-x-togglecollege').removeAttr('checked');
marker1.setOpacity(0);
marker2.setOpacity(0);
$('.sidebaroption-x-listdropdowncollege').slideUp();
}
});
$('.sidebaroption-x-togglehs').change(function(){
if ($(this).prop('checked')) {
$('.sidebaroption-x-togglehs').attr('checked', 'checked');
marker3.setOpacity(1);
marker4.setOpacity(1);
$('.sidebaroption-x-listdropdownhs').slideDown();
} else {
$('.sidebaroption-x-togglehs').removeAttr('checked');
marker3.setOpacity(0);
marker4.setOpacity(0);
$('.sidebaroption-x-listdropdownhs').slideUp();
}
});
$('.sidebaroption-x-togglebusiness').change(function(){
if ($(this).prop('checked')) {
$('.sidebaroption-x-togglebusiness').attr('checked', 'checked');
marker3.setOpacity(1);
marker4.setOpacity(1);
$('.sidebaroption-x-listdropdownbusiness').slideDown();
} else {
$('.sidebaroption-x-togglebusiness').removeAttr('checked');
marker3.setOpacity(0);
marker4.setOpacity(0);
$('.sidebaroption-x-listdropdownbusiness').slideUp();
}
});
$('.sidebaroption-x-centermap1').click(function(){
marker1.openPopup();
marker2.closePopup();
marker3.closePopup();
marker4.closePopup();
mainmap.setView([33.6711, -117.9102], 10);
});
$('.sidebaroption-x-centermap2').click(function(){
marker2.openPopup();
marker1.closePopup();
marker3.closePopup();
marker4.closePopup();
mainmap.setView([33.5527184, -117.6659786], 10);
});
$('.sidebaroption-x-centermap3').click(function(){
marker3.openPopup();
marker1.closePopup();
marker2.closePopup();
marker4.closePopup();
mainmap.setView([33.837212, -117.94881], 10);
});
$('.sidebaroption-x-centermap4').click(function(){
marker4.openPopup();
marker1.closePopup();
marker2.closePopup();
marker3.closePopup();
mainmap.setView([33.888715, -117.944259], 10);
});
$( window ).resize(function() {
mainmap.invalidateSize();
});
</script>
<script>
$('.distance-filter-x-expand-button').click(function (){
$(this).next().slideToggle();
});
</script>
{
"bannertitle": "Hospitality, Tourism & Recreation",
"bannersubtitle": "You like to make people feel at home.",
"lMapContext": {
"modifier": "u-hidden-maxdesktop"
}
}
No notes defined.