Prospector Libraries Map

<html lang="en-US"> <head> <title>Prospector Libraries Map</title> <style> div { width: 75%; margin: auto; } p { font-family: arial, serif; } h3 { font-family: arial, serif; } td { font-color: black; padding-right: 30px; } a:link { color: black; text-decoration: none; } a:visited { color: black; text-decoration: none; } a:hover { color: black; text-decoration: none; } a:active { color: black; text-decoration: none; } </style> </head> <body> <div> <p> <table align="right" border="0" role="presentation"> <tbody> <tr cellpadding="0"> <td><a href="https://www.coloradovirtuallibrary.org/resource-sharing/swift/"><strong>SWIFT</strong></a></td> <td><a href="https://prospectorhome.coalliance.org/prospectornews/web/help"><strong>Help</strong></a></td> <td><a href="https://prospectorhome.coalliance.org/prospectornews/web"><strong>News</strong></a></td> <td><a href="https://prospectorhome.coalliance.org/prospectornews/web/about"><strong>About</strong></a></td> <td><a href="https://maps.coalliance.org"><strong>Map</strong></a></td> <td><a href="https://prospector.coalliance.org/search~S0"><strong>Classic</strong></a></td> <td><a href="https://encore.coalliance.org"><strong>Home</strong></a></td> </tr> </tbody> </table> </p> <p> </p> <p><img src="./ProspLogo_w_dots.png" alt="Prospector Logo with dots and a green bar"></p> <h1>Prospector Libraries</h1> <p>Prospector is a unified catalog of academic, public and special libraries in Colorado and Wyoming. Through Prospector you have access to 30 million books, journals, DVDs, CDs, videos and other materials held in these libraries. With a single search you can identify and borrow materials from the collections and have them delivered to your local library.</p> <p> </p> </div> <script> var isIE = false; </script>  <script> var mapLibsReady = 0; var sheetID = '1Ks-c_tbHqxXlozoq3otEYW62J0y15nLwdvBGgktvv8M'; var sheet = 'directory_public_libraries_1706301824'; var range = 'A2:O'; var key = 'AIzaSyCj1-j1HCbB56Z4P03wNbM6PcwKVRoF2S4'; // The other key: // var key = 'AIzaSyAFexxVsNLAZS00MPrJRyyhSOz7lcVpIQ4'; // get data from Google spreadsheet // sheet needs to be shared > viewable by anyone with the link function init() { // wait to fetch data until all the other scripts have loaded if ( ++ mapLibsReady < 2 ) { // console.log('mapLibsReady is ' + mapLibsReady); return; } fetch(`https://sheets.googleapis.com/v4/spreadsheets/${sheetID}/values/${sheet}!${range}?key=${key}`) .then(res => res.json()) .then(data => { const newData = data.values; // add data from newData as objects to array mapData mapData = []; for (let i = 0; i < newData.length; i++) { var location = {}; location.system = newData[i][0]; location.libType = newData[i][1]; location.orgLegal = newData[i][2]; location.libName = newData[i][3]; location.address = newData[i][4]; location.city = newData[i][5]; location.state = newData[i][6]; location.zip = newData[i][7]; location.county = newData[i][8]; location.phone = newData[i][9]; location.type = newData[i][10]; location.webSite = newData[i][11]; location.lat = parseFloat(newData[i][12]); location.long = parseFloat(newData[i][13]); location.typeCode = newData[i][14]; mapData.push(location); } // pass array of object to mapLibReadyHandler mapLibReadyHandler(mapData); }); } function mapLibReadyHandler(mapData) { var mapElement = document.getElementById('map_element'); var map = new google.maps.Map(mapElement, { center: { lat: 39.3, lng: -105.5 }, zoom: 7, streetViewControl: false }); var iw = new google.maps.InfoWindow(); var iconColors = [ // main colors [ {r:109,g:162,b:200}, // 0: Public; light blue rgb(109, 162, 200) {r:206,g:184,b:255}, // 1: Non-partic; light purple rgb(206, 184, 255) {r:205,g:98,b:113}, // 2: Academic; light red rgb(205, 98, 113) {r:239,g:198,b:177}, // 3: Correctional; light orange rgb(239, 198, 177) // {r:126,g:122,b:121} // 4: Non-partic; grey rgb(126, 122, 121) ], // spiderfied colors [ {r:109,g:162,b:200}, // light blue rgb(109, 162, 200) {r:206,g:184,b:255}, // light purple rgb(206, 184, 255) {r:205,g:98,b:113}, // light red rgb(205, 98, 113) {r:239,g:198,b:177}, // light orange rgb(239, 198, 177) // {r:126,g:122,b:121} // grey rgb(126, 122, 121) ], ]; var iconOpacity = [ 1, .7 ]; function iwClose() { iw.close(); } google.maps.event.addListener(map, 'click', iwClose); var oms = new OverlappingMarkerSpiderfier(map, { markersWontMove: true, markersWontHide: true, keepSpiderfied: true, nearbyDistance: 15 }); var white = { r: 255, g: 255, b: 255 }; for (var i = 0, len = mapData.length; i < len; i ++) { addMarkerWithData(mapData[i]); } function addMarkerWithData(markerData) { var loc = new google.maps.LatLng(markerData.lat, markerData.long); var marker = new google.maps.Marker({ position: loc, title: markerData.system, draggable: true, optimized: ! isIE // makes SVG icons work in IE }); google.maps.event.addListener(marker, 'click', iwClose); google.maps.event.addListener(marker, 'spider_format', function(status) { // Set icon color based on status and type, pulled from (array) iconColors. var iconColorKey = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED ? 1 : 0; var iconColor = iconColors[iconColorKey][markerData.typeCode]; var strokeColor = iconColorKey; marker.setIcon( { url: iconWithColours( iconColor, white, status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE ? white : null, strokeColor, ), scaledSize: new google.maps.Size(23, 32) // default 23, 32 } ); }); oms.addMarker(marker, function(e) { // different formats for rows with library names and rows without // this is probably not necessary, since all the libraries in your list have names if( markerData.libName == '') { var marker_desc = '<div class="infowindow"><h5>' + markerData.system + '</h5>'; } else { var marker_desc = '<div class="infowindow"><h5>' + markerData.system + ', ' + markerData.libName + '</h5>'; } // add all the other data to the marker window marker_desc += '<p>System: ' + markerData.system + '</p>'; marker_desc += '<p>Prospector Status: ' + markerData.libType + '</p>'; // marker_desc += '<p>orgLegal: ' + markerData.orgLegal + '</p>'; marker_desc += '<p>Address: ' + markerData.address + '</p>'; marker_desc += '<p>City: ' + markerData.city + '</p>'; marker_desc += '<p>State: ' + markerData.state + '</p>'; marker_desc += '<p>Zip Code: ' + markerData.zip + '</p>'; marker_desc += '<p>County: ' + markerData.county + '</p>'; marker_desc += '<p>Phone: ' + markerData.phone + '</p>'; // marker_desc += '<p>Type: ' + markerData.type + '</p>'; // marker_desc += '<p>Website: ' + markerData.webSite + '</p>'; marker_desc += '<p>Website: <a style="color:blue" href="' + markerData.webSite + '" target=_top">' + markerData.webSite + '</a></p>'; marker_desc += '</div>'; iw.setContent(marker_desc); iw.open(map, marker); }); // end of oms.addMarker function } // evil window.map = map; // for debugging/exploratory use in console window.oms = oms; // ditto } var iconWithColours = (function() { // generate a data: URI for an SVG marker with specified colors and optional '+' motif function processTemplate(str) { var template = str.split('`'); for (var i = 0, len = template.length; i < len; i += 2) { template[i] = encodeURIComponent(template[i]); } return template; } function applyTemplate(template, values) { var result = template.slice(); for ( var i = 1, len = template.length; i < len; i += 2 ) { result[i] = values[result[i]]; } return result.join(''); } var svgTemplate = processTemplate('<svg viewBox="0 0 23 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M22 11c0 1.42-.226 2.585-.677 3.496l-7.465 15.117c-.218.43-.543.77-.974 1.016-.43.246-.892.37-1.384.37-.492 0-.954-.124-1.384-.37-.43-.248-.75-.587-.954-1.017L1.677 14.496C1.227 13.586 1 12.42 1 11c0-2.76 1.025-5.117 3.076-7.07C6.126 1.977 8.602 1 11.5 1c2.898 0 5.373.977 7.424 2.93C20.974 5.883 22 8.24 22 11z" stroke="`stroke`" stroke-width=".8" fill="`fill`" fill-rule="nonzero"/>`plus`</g></svg>'); var plusTemplate = processTemplate('<path d="M17 11.012c0-.607-.51-1.117-1.115-1.117h-3.222v-3.23c0-.63-.533-1.165-1.163-1.165s-1.163.534-1.163 1.166v3.23H7.115C6.51 9.895 6 10.405 6 11.01c0 .607.51 1.117 1.115 1.117h3.222v3.204c0 .632.533 1.166 1.163 1.166s1.163-.534 1.163-1.166V12.13h3.222c.606 0 1.115-.51 1.115-1.118z" fill="`fill`"/>'); var rgbTemplate = processTemplate('rgb(`r`,`g`,`b`)'); return function(fill, stroke, plus) { var svg = applyTemplate( svgTemplate, { fill: applyTemplate(rgbTemplate, fill), stroke: plus ? 'red' : 'black', plus: plus ? applyTemplate(plusTemplate, { fill: applyTemplate(rgbTemplate, plus) }) : '', } ); return 'data:image/svg+xml,' + svg; } })(); </script>  <script async defer src="https://maps.google.com/maps/api/js?key=AIzaSyAFexxVsNLAZS00MPrJRyyhSOz7lcVpIQ4&v=3&callback=init"> </script> <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js?spiderfier_callback=init"> </script> <style> #map_element { background-color: lightblue; display: flex; justify-content: center; align-items: center; } .lds-dual-ring { display: inline-block; width: 80px; height: 80px; } .lds-dual-ring:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #map_key { width: 75%; display: flex; padding: 10px 0; } #map_key div { flex-grow: 1; } #map_key img { float: left; margin-right: 5px; } #map_key div { width: 20%; } #map_key svg { width: 20px; float: left; margin-right: 10px; } #map_key p { max-width: 90%; text-align: left; font-size:.9em; } </style> <div style="height:750px;width:75%;" id="map_element"> <div class="lds-dual-ring">   </div> </div> <div id="map_key"> <div> <svg viewBox="0 0 23 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M22 11c0 1.42-.226 2.585-.677 3.496l-7.465 15.117c-.218.43-.543.77-.974 1.016-.43.246-.892.37-1.384.37-.492 0-.954-.124-1.384-.37-.43-.248-.75-.587-.954-1.017L1.677 14.496C1.227 13.586 1 12.42 1 11c0-2.76 1.025-5.117 3.076-7.07C6.126 1.977 8.602 1 11.5 1c2.898 0 5.373.977 7.424 2.93C20.974 5.883 22 8.24 22 11z" stroke="black" stroke-width=".8" fill="rgb(109, 162, 200)" fill-rule="nonzero"></path></g></svg> <p> Public Libraries </p> </div> <div> <svg viewBox="0 0 23 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M22 11c0 1.42-.226 2.585-.677 3.496l-7.465 15.117c-.218.43-.543.77-.974 1.016-.43.246-.892.37-1.384.37-.492 0-.954-.124-1.384-.37-.43-.248-.75-.587-.954-1.017L1.677 14.496C1.227 13.586 1 12.42 1 11c0-2.76 1.025-5.117 3.076-7.07C6.126 1.977 8.602 1 11.5 1c2.898 0 5.373.977 7.424 2.93C20.974 5.883 22 8.24 22 11z" stroke="black" stroke-width=".8" fill="rgb(205, 98, 113)" fill-rule="nonzero"></path></g></svg> <p> Academic Institutions </p> </div> <div> <svg viewBox="0 0 23 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M22 11c0 1.42-.226 2.585-.677 3.496l-7.465 15.117c-.218.43-.543.77-.974 1.016-.43.246-.892.37-1.384.37-.492 0-.954-.124-1.384-.37-.43-.248-.75-.587-.954-1.017L1.677 14.496C1.227 13.586 1 12.42 1 11c0-2.76 1.025-5.117 3.076-7.07C6.126 1.977 8.602 1 11.5 1c2.898 0 5.373.977 7.424 2.93C20.974 5.883 22 8.24 22 11z" stroke="black" stroke-width=".8" fill="rgb(239, 198, 177)" fill-rule="nonzero"></path></g></svg> <p> Correctional Facilities </p> </div> <div> <svg viewBox="0 0 23 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M22 11c0 1.42-.226 2.585-.677 3.496l-7.465 15.117c-.218.43-.543.77-.974 1.016-.43.246-.892.37-1.384.37-.492 0-.954-.124-1.384-.37-.43-.248-.75-.587-.954-1.017L1.677 14.496C1.227 13.586 1 12.42 1 11c0-2.76 1.025-5.117 3.076-7.07C6.126 1.977 8.602 1 11.5 1c2.898 0 5.373.977 7.424 2.93C20.974 5.883 22 8.24 22 11z" stroke="black" stroke-width=".8" fill="rgb(206, 184, 255)" fill-rule="nonzero"></path></g></svg> <p> Not Participating </p> </div> </div> <hr> </div> </body> </html>

CINXE.COM

Prospector Libraries Map