#js-map-window { height: 100%; } .gm-style div { font-family: Neue Haas Grotesk W01 Disp, Arial, sans-serif; } .l-two-up--60-40 .l-two-up__col:first-child { width: 74% } .l-two-up--60-40 .l-two-up__col:nth-child(2) { width: 24% } @media screen and (min-width: 55em) { .l-two-up--60-40 .l-two-up__col:first-child { width: 58% } } @media screen and (min-width: 55em) { .l-two-up--60-40 .l-two-up__col:nth-child(2) { width: 40% } } .l-two-up__col--no-margin { margin-bottom: 0; } @media screen and (min-width:55em) { .l-two-up__col--no-margin { margin-bottom: 0; } } .l-two-up--inline { -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; } .gmaps { background: #bbb; height: 94vh; max-height: 500px; min-height: 400px; padding-top: 0; } .gmaps_infodiv { margin: 0; padding: 0; height: 100%; transform: translate(-110%, 0); display: flex; align-items: center; } @media screen and (min-width: 55em) { .gmaps_infodiv { height: 100%; } } .gmaps-controldiv { margin: 10px 5px 10px; z-index: 2; } .gmaps-controldiv ul { margin: 0; } .gmaps-controldiv ul li { list-style: none; list-style-type: none; margin: 0; } @media screen and (min-width: 55em) { .gmaps-controldiv ul li { list-style: none; list-style-type: none; margin: 0 5px 0; } } .gmaps-controldiv__list { display: none; } @media screen and (min-width: 55em) { .gmaps-controldiv__list { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; list-style-type: none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; } } .gmaps-controldiv__list--show { display: block; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; } @media screen and (min-width: 55em) { .gmaps-controldiv__list--show { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; list-style: none; list-style-type: none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; } } .gmaps-controldiv__item { color: rgb(25, 25, 25); font-family: Neue Haas Grotesk W01 Disp, Arial, sans-serif; font-size: 1rem; line-height: 40px; background-color: #FFF; border: 0 solid #FFF; border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: pointer; margin: 0 5px 0; padding: 0 10px 0; text-align: center; list-style: none; z-index: 2; } .gmaps-controldiv__item:active, .gmaps-controldiv__item:hover { color: #FFF; background-color: rgba(229, 93, 37, 1); text-decoration: none; border: 0; } .gmaps-controldiv__item--show { display: block; cursor: context-menu; padding: 0 25px; margin: 0; } .gmaps-controldiv__item--show::after { font-size: 0.8rem; content: ‘\25bc’; padding-left: 0.5rem; } @media screen and (min-width: 55em) { .gmaps-controldiv__item--show { display: none; } } .gmaps-statediv { z-index: 4; margin: 10px 5px 10px; transform: translate(-200%, 0); } @media screen and (min-width: 55em) { .gmaps-statediv { transition: transform 0.25s ease; transform: translate(0, 0); } } .gmaps-statediv__btn-border { background-color: #FFF; border: 0 solid #FFF; border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: default; margin: 0 5px 0; text-align: center; z-index: 5; } .gmaps-statediv__btn-text { color: rgb(25, 25, 25); font-family: Neue Haas Grotesk W01 Disp, Arial, sans-serif; font-size: 1rem; line-height: 40px; padding: 0 10px 0; z-index: 6; } .info-window--orange { background-color: rgba(299, 93, 37, 0.85); text-align: left; margin: 0; transform: translate(0); } @media screen and (min-width: 55em) { .info-window--orange { width: 480px; transform: translate(0); } } @media screen and (min-width: 55em) { .info-window--orange { top: 0; } } .info-window--orange.is-active { transform: translate(110%); } @media screen and (min-width: 55em) { .info-window--orange.is-active { transform: translate(110%); } } h2.info-window__heading { font-size: 1.4rem; margin: 0 0 1rem; } @media screen and (min-width: 55em) { h2.info-window__heading { font-size: 1.8rem; margin: 0 0 1.5rem; } } strong.info-window__strong { display: block; padding: 0 0 0.3rem 0; font-size: 1.2rem; font-weight: bold; line-height: 1; } @media screen and (min-width: 55em) { strong.info-window__strong { padding: 0 0 0.5rem 0; font-size: 1.8rem; } } strong.info-window__stronger { display: block; padding: 0 0 0.3rem 0; font-size: 1.4rem; font-weight: bold; line-height: 1; } @media screen and (min-width: 55em) { strong.info-window__stronger { padding: 0 0 0.5rem 0; font-size: 2.6rem; } } .info-window__desc--large { font-size: 1.2rem; margin-bottom: 1.2rem; } @media screen and (min-width:55em) { .info-window__desc--large { font-size: 1.4rem; margin-bottom: 1.5rem; } } .btn--outline { fill: #FFF; color: #FFF; background-color: rgba(299, 93, 37, 0.85); text-decoration: none; padding: 0.55em 1em; border: 3px solid #FFF; border-radius: 3px; transition: border-color 0.25s ease; } .btn--outline:active, .btn--outline:hover { fill: #FFF; color: #e55d25; background-color: #FFF; text-decoration: none; border-color: #FFF; } @media screen and (min-width: 55em) { .btn--outline { padding: 0.55em 1.2em; } } .share__bit { display: none; } @media screen and (min-width: 55em) { .share__bit { display: inline; white-space: nowrap; vertical-align: middle; } } .share__bit--align { vertical-align: middle; } .share__figure { display: block; fill: #0099cc; margin: 2px auto } @media screen and (min-width:55em) { .share__figure { display: inline-block; margin-right: 5px; vertical-align: middle } } .share__figure--white { fill: #FFF; margin: auto; } .share__figure--white:active, .share__figure--white:hover { fill: #e55d25; } .btn:hover .share__figure--white { fill: #e55d25; } // style options to customize the presentation of the standard Google map styles. var mapStyle = [ { “elementType”: “labels”, “stylers”: [ { “visibility”: “off” } ] }, { “elementType”: “labels.text.stroke”, “stylers”: [{ “visibility”: “off” }] }, { “featureType”: “administrative”, “stylers”: [{ “color”: “#464646” }] }, { “featureType”: “administrative”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#DDDDDD” }] }, { “featureType”: “administrative.country”, “elementType”: “geometry.stroke”, “stylers”: [{ “color”: “#f7f7f7” }, { “weight”: 1 }] }, { “featureType”: “administrative.country”, “elementType”: “labels.text”, “stylers”: [ { “visibility”: “off” }] }, { “featureType”: “administrative.locality”, “elementType”: “labels.icon”, “stylers”: [{ “color”: “#0099cc” }, { “visibility”: “off” }] }, { “featureType”: “administrative.province”, “elementType”: “labels.text.fill”, “stylers”: [{ “color”: “#888b8d” },{ “visibility”: “off” }] }, { “featureType”: “administrative.province”, “elementType”: “geometry.stroke”, “stylers”: [{ “color”: “#f7f7f7” }, { “weight”: 1 }] }, { “featureType”: “landscape.man_made”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#DDDDDD” }] }, { “featureType”: “landscape.natural”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#D4D4D4” }] }, { “featureType”: “landscape.natural.landcover”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#DDDDDD” }] }, { “featureType”: “poi”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#D9D9D9” }] }, { “featureType”: “poi.attraction”, “stylers”: [{ “visibility”: “off” }] }, { “featureType”: “poi.business”, “stylers”: [{ “visibility”: “off” }] }, { “featureType”: “poi.business”, “elementType”: “labels.text.fill”, “stylers”: [{ “color”: “#00B3B9” }] }, { “featureType”: “poi.medical”, “elementType”: “labels.icon”, “stylers”: [{ “color”: “#949494” }] }, { “featureType”: “poi.medical”, “elementType”: “labels.text.fill”, “stylers”: [{ “color”: “#949494” }] }, { “featureType”: “poi.park”, “elementType”: “labels.icon”, “stylers”: [{ “color”: “#00B3B9” }] }, { “featureType”: “poi.park”, “elementType”: “labels.text.fill”, “stylers”: [{ “color”: “#4A4A4A” }] }, { “featureType”: “poi.sports_complex”, “stylers”: [{ “visibility”: “off” }] }, { “featureType”: “road.arterial”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#EDEDED” }, { “weight”: 0.5 }] }, { “featureType”: “road.arterial”, “elementType”: “geometry.stroke”, “stylers”: [{ “visibility”: “off” }] }, { “featureType”: “road.highway”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#EEEEEE” }, { “weight”: 0.25 }] }, { “featureType”: “road.highway”, “elementType”: “geometry.stroke”, “stylers”: [{ “visibility”: “off” }] }, { “featureType”: “road.highway”, “elementType”: “labels.icon”, “stylers”: [{ “saturation”: -100 }, { “lightness”: 45 }] }, { “featureType”: “water”, “elementType”: “geometry.fill”, “stylers”: [{ “color”: “#f7f7f7” }] }, { “featureType”: “water”, “elementType”: “labels.text.fill”, “stylers”: [{ “color”: “#4CD2FF” }, { “visibility”: “off” }] } ]; // Find the DOM element that maps to the gmaps element. var mapEl = document.getElementById(‘js-map-window’); // Find the DOM element that maps to the info window. var infoEl; // Find the DOM element to close the info window. var closeEl; // Keeps track of the selection object that activated the info window. var trackEl; // Location data for non-contiguous states and off-shore insular areas. var AK = {lat: 66.160507, lng: -153.369141}; var HI = {lat: 19.896766, lng: -155.582782}; var PR = {lat: 18.2052265, lng: -67.7072048}; var DC = {lat: 38.907192, lng: -77.036871}; // Location data for Contiguous United States. var US = {lat: 40, lng: -100}; // Creates a map variable. var map; function initMap() { // load the map map = new google.maps.Map(document.getElementById(‘js-map-window’), { center: US, zoom: 4, zoomControl: true, mapTypeControl: false, scaleControl: false, streetViewControl: false, rotateControl: false, fullscreenControl: true, styles: mapStyle }); // set up the style rules and events for google.maps.Data map.data.setStyle(styleFeature); // Create the DIV to hold the control and call the Control() constructor passing in this DIV. var centerControlDiv = document.createElement(‘div’); var centerControl = new CenterControl(centerControlDiv, map); centerControlDiv.classList.add(‘gmaps-controldiv’); centerControlDiv.style.zIndex = “3”; map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); var stateControlDiv = document.createElement(‘div’); var leftControl = new LeftControl(stateControlDiv, map); stateControlDiv.classList.add(‘gmaps-statediv’); stateControlDiv.style.zIndex = “2”; map.controls[google.maps.ControlPosition.TOP_LEFT].push(stateControlDiv); var infoControlDiv = document.createElement(‘div’); var infoControl = new InfoControl(infoControlDiv, map); infoControlDiv.classList.add(‘gmaps_infodiv’); infoControlDiv.style.zIndex = “1”; map.controls[google.maps.ControlPosition.LEFT_CENTER].push(infoControlDiv); // state polygons only need to be loaded once, do them now loadMapShapes(); // Set mouseover event for each feature, then call function. map.data.addListener(‘mouseover’, mouseInToRegion); map.data.addListener(‘mouseout’, mouseOutOfRegion); map.data.addListener(‘click’, mouseClick); // Bind the info window close button so it removes the is-active class // and resets the map marker icons fill opacity. closeEl.addEventListener(‘click’, mouseClose); } // Loads the state boundary polygons from a GeoJSON source. function loadMapShapes() { // load US state outline polygons from a GeoJson file map.data.loadGeoJson(‘https://www.habitat.org/lc/multimedia-files/coh-states-affordability.js’, { idPropertyName: ‘STATE’ }); } // Sets the main color for all features // Check out the docs for Data.StylingFunction function styleFeature(feature) { var color = [0, 0, 73]; // HSL color value var outlineWeight = 0.5; var zIndex = 7; var opacity = 0.5; if (feature.getProperty(‘state’) === ‘hover’) { outlineWeight = 2; zIndex = 8; color = [18, 79, 52]; // HSL color value } else if (feature.getProperty(‘state’) === ‘click’) { outlineWeight = 2; zIndex = 9; color = [18, 79, 52]; // HSL color value opacity = 1; } return { strokeWeight: outlineWeight, strokeColor: ‘#fff’, zIndex: zIndex, fillColor: ‘hsl(’ + color[0] + ‘,’ + color[1] + ‘%,’ + color[2] + ‘%)’, fillOpacity: opacity, }; } // Responds to the mouse-in event on a map shape (state). // @param {?google.maps.MouseEvent} event function mouseInToRegion(event) { // Set value to div element with ID ‘stateInfoText’ created in LeftControl function document.getElementById(‘stateInfoText’).textContent = event.feature.getProperty(‘NAME’); // Checks if the info window is open before returning normal state. if (event.feature.getProperty(‘state’) === ‘click’) { return; } // set the hover state so the setStyle function can change the border. event.feature.setProperty(‘state’, ‘hover’); } // Responds to the mouse-out event on a map shape (state). // @param {?google.maps.MouseEvent} event function mouseOutOfRegion(event) { // Reset div element with ID ‘stateInfoText’ created in LeftControl function to empty document.getElementById(‘stateInfoText’).textContent = ‘’; // Checks if the info window is open before returning normal state. if (event.feature.getProperty(‘state’) === ‘click’) { return; } // else reset the hover state, returning the border to normal event.feature.setProperty(‘state’, ‘normal’); } // Responds to the mouse-out event on a map shape (state). // @param {?google.maps.MouseEvent} event function mouseClick(event) { // Keeps track of the selection object that activated the info window trackEl = event; // Iterate through all features of the loaded geoJSON // Set the click state to normal map.data.forEach(function(feature) { feature.setProperty(‘state’, ‘normal’); }); // Set the click state so the setStyle function can change. event.feature.setProperty(‘state’, ‘click’); // Get other properties from JSON document. var stateName = (event.feature.getProperty(‘NAME’)); var postalCode = (event.feature.getProperty(‘POSTALCODE’)); var housingSpending = (event.feature.getProperty(‘SPENDING’)); var requiredWages = (event.feature.getProperty(‘WAGES’)); var affordableHousing = (event.feature.getProperty(‘SUPPLY’)); var factsheetUrl = (event.feature.getProperty(‘LINK’)); var twitterUrl = (event.feature.getProperty(‘TWITTER’)); if(typeof stateName == ‘undefined’){ alert(“It looks like the GeoJson source for the map is missing, please fill out our general inquiry form for support:\n” + “\nhttps://www.habitat.org/contact/form”); } else { // Use the statename to find the data from the JSON we create. console.log(stateName); console.log(postalCode); console.log(housingSpending); console.log(requiredWages); console.log(affordableHousing); console.log(factsheetUrl); // Update info window content using JSON data. updateInfoWindow(stateName, housingSpending, requiredWages, affordableHousing, factsheetUrl, twitterUrl, infoEl); // Show the info window. infoEl.parentNode.classList.add(‘is-active’); } } // Responds to the click event on the close button function mouseClose(event) { this.parentNode.classList.remove(‘is-active’); trackEl.feature.setProperty(‘state’, ‘normal’); } // The CenterControl adds a control to the map that recenters the map. // This constructor takes the control DIV as an argument. function CenterControl(controlDiv, map) { var controlNav = document.createElement(‘div’); var controlUl = document.createElement(‘ul’); var controlUlTrack = false; var goPuertoRicoUI = document.createElement(‘li’); var goAlaskaUI = document.createElement(‘li’); var goHawaiiUI = document.createElement(‘li’); var goWashingtonUI = document.createElement(‘li’); var goContiguousUSUI = document.createElement(‘li’); // Set CSS for the control border & text controlNav.id = ‘controlNav’; controlUl.id = ‘controlUl’; goPuertoRicoUI.id = ‘goPuertoRicoUI’; goAlaskaUI.id = ‘goAlaskaUI’; goHawaiiUI.id = ‘goHawaiiUI’; goWashingtonUI.id = ‘goWashingtonUI’; goContiguousUSUI.id = ‘goContiguousUSUI’; controlNav.classList.add(‘gmaps-controldiv__item’); controlNav.classList.add(‘gmaps-controldiv__item--show’); controlUl.classList.add(‘gmaps-controldiv__list’); goPuertoRicoUI.classList.add(‘gmaps-controldiv__item’); goAlaskaUI.classList.add(‘gmaps-controldiv__item’); goHawaiiUI.classList.add(‘gmaps-controldiv__item’); goWashingtonUI.classList.add(‘gmaps-controldiv__item’); goContiguousUSUI.classList.add(‘gmaps-controldiv__item’); controlNav.title = ‘Click to explore other U.S. states’; goPuertoRicoUI.title = ‘Click to center the map on ’ + ‘Puerto Rico’; goAlaskaUI.title = ‘Click to center the map on ’ + ‘Alaska’; goHawaiiUI.title = ‘Click to center the map on ’ + ‘Hawaii’; goWashingtonUI.title = ‘Click to center the map on ’ + ‘District of Columbia’; goContiguousUSUI.title = ‘Click to center the map on ’ + ‘contiguous United States’; controlNav.innerHTML = ‘Map Areas’; goPuertoRicoUI.innerHTML = ‘Puerto Rico’; goAlaskaUI.innerHTML = ‘Alaska’; goHawaiiUI.innerHTML = ‘Hawaii’; goWashingtonUI.innerHTML = ‘Washington, D.C.’; goContiguousUSUI.innerHTML = ‘Contiguous US’; controlDiv.appendChild(controlNav); controlDiv.appendChild(controlUl); controlUl.appendChild(goPuertoRicoUI); controlUl.appendChild(goAlaskaUI); controlUl.appendChild(goHawaiiUI); controlUl.appendChild(goWashingtonUI); controlUl.appendChild(goContiguousUSUI); // Setup the click event listeners: Show and Hide drop down menu. controlNav.addEventListener(‘click’, function() { if (controlUlTrack) { controlUlTrack = false; controlUl.classList.remove(‘gmaps-controldiv__list--show’); } else { controlUlTrack = true; controlUl.classList.add(‘gmaps-controldiv__list--show’); } }); // Setup the click event listeners: simply set the map to Puerto Rico. goPuertoRicoUI.addEventListener(‘click’, function() { map.setCenter(PR); map.setZoom(6); controlUlTrack = false; controlUl.classList.remove(‘gmaps-controldiv__list--show’); }); // Setup the click event listeners: simply set the map to Alaska. goAlaskaUI.addEventListener(‘click’, function() { map.setCenter(AK); map.setZoom(4); controlUlTrack = false; controlUl.classList.remove(‘gmaps-controldiv__list--show’); }); // Setup the click event listeners: simply set the map to Hawaii. goHawaiiUI.addEventListener(‘click’, function() { map.setCenter(HI); map.setZoom(6); controlUlTrack = false; controlUl.classList.remove(‘gmaps-controldiv__list--show’); }); // Setup the click event listeners: simply set the map to Washington D.C. goWashingtonUI.addEventListener(‘click’, function() { map.setCenter(DC); map.setZoom(10); controlUlTrack = false; controlUl.classList.remove(‘gmaps-controldiv__list--show’); }); // Setup the click event listeners: simply set the map to Contiguous US. goContiguousUSUI.addEventListener(‘click’, function() { map.setCenter(US); map.setZoom(4); controlUlTrack = false; controlUl.classList.remove(‘gmaps-controldiv__list--show’); }); } // The LeftControl adds a control to the map to display GeoJSON data. // This constructor takes the control DIV as an argument. function LeftControl(controlDiv, state, map) { var stateInfoUI = document.createElement(‘div’); var stateInfoText = document.createElement(‘div’); // Set CSS for the control border stateInfoUI.id = ‘stateInfoUI’; stateInfoUI.classList.add(‘gmaps-statediv__btn-border’); stateInfoUI.title = ‘state or territory of the United States’; // Set CSS for the control text stateInfoText.id = ‘stateInfoText’; stateInfoText.classList.add(‘gmaps-statediv__btn-text’); stateInfoText.innerHTML = ‘’; controlDiv.appendChild(stateInfoUI); stateInfoUI.appendChild(stateInfoText); } function InfoControl(controlDiv, map) { var infoWindowUI = document.createElement(‘section’); var infoWindowButton = document.createElement(‘button’); var infoWindowText = document.createElement(‘div’); // Set CSS for the control border & text infoWindowUI.id = ‘js-info-window’; infoWindowButton.id = ‘js-map-close’; infoWindowText.id = ‘js-info-text’; infoWindowUI.classList.add(‘info-window’); infoWindowUI.classList.add(‘info-window--orange’); infoWindowButton.classList.add(‘info-window__close’); infoWindowButton.title = ‘Click to close the info-window’; infoWindowButton.innerHTML = ‘’; controlDiv.appendChild(infoWindowUI); infoWindowUI.appendChild(infoWindowButton); infoWindowUI.appendChild(infoWindowText); infoEl = infoWindowText; closeEl = infoWindowButton; } // Update a info window and position it over the map. function updateInfoWindow(stateName, housingSpending, requiredWages, affordableHousing, factsheetUrl, twitterUrl, infoEl) { var infoTemplate = ‘

’ + stateName + ‘

’; // Insert the template html into the DOM. infoEl.innerHTML = infoTemplate; }