<style><!-- [et_pb_line_break_holder] -->#map {<!-- [et_pb_line_break_holder] --> height : 700px;<!-- [et_pb_line_break_holder] --> width : 1000px;<!-- [et_pb_line_break_holder] --> overflow : hidden;<!-- [et_pb_line_break_holder] --> float : left;<!-- [et_pb_line_break_holder] --> border : thin solid #333;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->@media screen and (max-width: 480px) {<!-- [et_pb_line_break_holder] -->#map {<!-- [et_pb_line_break_holder] --> height : 300px;<!-- [et_pb_line_break_holder] --> width : 300px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->#distable {<!-- [et_pb_line_break_holder] --> fontsize:6px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.gm-style-iw div div div table {<!-- [et_pb_line_break_holder] --> /* background: red; */<!-- [et_pb_line_break_holder] --> font-size: xx-small !important;<!-- [et_pb_line_break_holder] --> margin: 0px !important;<!-- [et_pb_line_break_holder] --> padding: 0px !important;<!-- [et_pb_line_break_holder] --> margin-top: 10px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.gm-style-iw div div div table tbody tr td {<!-- [et_pb_line_break_holder] --> padding: 0px !important;<!-- [et_pb_line_break_holder] --> margin: 0px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.gm-style-iw div {<!-- [et_pb_line_break_holder] --> max-width: 221px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>

<div>Click on one of the options to view layout.</div><!-- [et_pb_line_break_holder] --><div id="radio_controls"> <!-- [et_pb_line_break_holder] --><input type="radio" name="layout" value="protected_land" id="protected_land">Protected lands<!-- [et_pb_line_break_holder] --><input type="radio" name="layout" value="headwater" id="headwater"> Headwater<!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --><div id="controls"></div><!-- [et_pb_line_break_holder] --><div id="map"></div>

<script><!-- [et_pb_line_break_holder] --> var layers = [<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/protected_lands/CA_ProtectedLands.kml', layerObj : null, layerName : 'CA_ProtectedLands.kml'},<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/protected_lands/ProvParks.kml', layerObj : null, layerName : 'ProvParks.kml'},<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/protected_lands/Queens_parks.kml', layerObj : null, layerName : 'Queens_parks.kml'},<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/headwaters/Headwaters_1.kml', layerObj : null, layerName : 'Headwaters_1.kml'},<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/headwaters/Headwater_2.kml', layerObj : null, layerName : 'Headwater_2.kml'},<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/headwaters/Headwater_3.kml', layerObj : null, layerName : 'Headwater_3.kml'},<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/headwaters/Headwater_4.kml', layerObj : null, layerName : 'Headwater_4.kml'},<!-- [et_pb_line_break_holder] -->{ src : 'http://webtestplatform.com/landconservancykfla2/kmls/headwaters/Headwater_5.kml', layerObj : null, layerName : 'Headwater_5.kml'}<!-- [et_pb_line_break_holder] --> ];<!-- [et_pb_line_break_holder] --></script>

<script><!-- [et_pb_line_break_holder] --> var map;<!-- [et_pb_line_break_holder] -->var debug = false;<!-- [et_pb_line_break_holder] --> function toggleLayer()<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> layerIndex = this.value;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if (layerIndex == "protected_land" || layerIndex == "headwater"){<!-- [et_pb_line_break_holder] --> for (var i = 0; i < layers.length; i++){<!-- [et_pb_line_break_holder] --> var src = layers[i].src;<!-- [et_pb_line_break_holder] --> if (src.indexOf(layerIndex) >= 0){<!-- [et_pb_line_break_holder] --> layers[i].layerObj.setMap(map);<!-- [et_pb_line_break_holder] --> }else{<!-- [et_pb_line_break_holder] --> layers[i].layerObj.setMap(null);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }else{<!-- [et_pb_line_break_holder] --> console.log("Toggling layer ", layers[layerIndex].layerName);<!-- [et_pb_line_break_holder] --> if (layers[layerIndex].layerObj.getMap() === null)<!-- [et_pb_line_break_holder] --> layers[layerIndex].layerObj.setMap(map);<!-- [et_pb_line_break_holder] --> else<!-- [et_pb_line_break_holder] --> layers[layerIndex].layerObj.setMap(null);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function initMap()<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> map = new google.maps.Map(document.getElementById('map'), {<!-- [et_pb_line_break_holder] --> center : { lat : 44.2312, lng : -76.4860 },<!-- [et_pb_line_break_holder] --> zoom : 9<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> for (var i = 0; i < layers.length; i++)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> kmlsrc = layers[i].src + '?dummy='+(new Date()).getTime();<!-- [et_pb_line_break_holder] --> layers[i].layerObj = new google.maps.KmlLayer(kmlsrc, {<!-- [et_pb_line_break_holder] --> suppressInfoWindows : false,<!-- [et_pb_line_break_holder] --> preserveViewport : true,<!-- [et_pb_line_break_holder] --> map : null<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> buildLegend();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function buildLegend()<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var legend = document.getElementById('controls');<!-- [et_pb_line_break_holder] --> var container, checkbox, label, id;<!-- [et_pb_line_break_holder] --> container = document.createElement('p');<!-- [et_pb_line_break_holder] --> document.getElementById('protected_land').addEventListener('click', toggleLayer);<!-- [et_pb_line_break_holder] --> document.getElementById('headwater').addEventListener('click', toggleLayer);<!-- [et_pb_line_break_holder] --> if (debug){<!-- [et_pb_line_break_holder] --> for (var i = 0; i < layers.length; i++)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> console.log("Adding legend for layer ", layers[i].layerName);<!-- [et_pb_line_break_holder] --> id = 'map_layer_' + i;<!-- [et_pb_line_break_holder] --> checkbox = document.createElement('input');<!-- [et_pb_line_break_holder] --> checkbox.setAttribute('id', id);<!-- [et_pb_line_break_holder] --> checkbox.checked = true;<!-- [et_pb_line_break_holder] --> checkbox.type = 'checkbox';<!-- [et_pb_line_break_holder] --> checkbox.value = i;<!-- [et_pb_line_break_holder] --> checkbox.addEventListener('click', toggleLayer);<!-- [et_pb_line_break_holder] --> label = document.createElement('label');<!-- [et_pb_line_break_holder] --> label.innerText = layers[i].layerName;<!-- [et_pb_line_break_holder] --> label.setAttribute('for', id);<!-- [et_pb_line_break_holder] --> container.appendChild(checkbox);<!-- [et_pb_line_break_holder] --> container.appendChild(label);<!-- [et_pb_line_break_holder] --> legend.appendChild(container);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --></script><!-- [et_pb_line_break_holder] --><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFI9uOd1dvPR8SlPshF31COM1zz5CmNv4&callback=initMap" async defer></script>