Stanford Searchable Map

<!DOCTYPE html> <html lang='en'> <head> <title>Stanford Searchable Map</title> <meta charset='utf-8' /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content='' name='description' /> <meta content='' name='author' /> <link rel="shortcut icon" type="image/ico" href="https://www.stanford.edu/favicon.ico" />  <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/custom.css?092624"/>    <link href="https://web.stanford.edu/su-identity/css/su-identity.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" type="text/css"> <link href="css/chardinjs.css" rel="stylesheet"> <link href="css/printgm.css" rel="stylesheet">    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/custom.js"></script> <script type="text/javascript" src="js/google-geolocation.js"></script> <script src="js/chardinjs.min.js"></script> <script type="text/javascript" src="//maps.google.com/maps/api/js?libraries=places&key=AIzaSyCLCTVEoOl4KMj7LYHewx75YQG9a15TbOk"></script> <script type="text/javascript" src="js/stan_cm_js.cfm"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-R8SR6GF7RW"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-R8SR6GF7RW'); (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-67559572-1', 'auto'); ga('send', 'pageview'); </script> <script> var obj; var device = { is_android: function() { return navigator.userAgent.match(/Android/i); }, is_blackberry: function() { return navigator.userAgent.match(/BlackBerry/i); }, is_iphone: function() { return navigator.userAgent.match(/iPhone/i); }, is_ipad: function() { return navigator.userAgent.match(/iPad/i); }, is_ipod: function() { return navigator.userAgent.match(/iPod/i); }, is_ios: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, is_windows_phone: function() { return navigator.userAgent.match(/IEMobile/i); }, is_mobile: function() { return (device.is_android() || device.is_blackberry() || device.is_ios() || device.is_windows_phone() ); } }; /*function printMap(){ var content = window.document.getElementById("map_canvas"); // get you map details var newWindow = window.open(); // open a new window newWindow.document.write(content.innerHTML); // write the map into the new window newWindow.print(); } */ function printMap2(){ /*$('#printarea').fadeIn(1000); $('.searchBlock').fadeOut(1000); $('#printarea').removeClass('hide');*/ //window.print(); var content = window.document.getElementById("map_canvas"); // get you map details var newWindow = window.open('Print_Map', 'Print Map', 'height=800, width=800'); // open a new window newWindow.document.write(content.innerHTML); // write the map into the new window newWindow.document.close(); newWindow.print(); } var activeDirectionType = 0; /* // added to allow selection of direction type before entering addresses. // // add all the elements inside modal which you want to make focusable const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; const modal = document.querySelector('#myModal'); // select the modal by it's id const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal const focusableContent = modal.querySelectorAll(focusableElements); const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal document.addEventListener('keydown', function(e) { let isTabPressed = e.key === 'Tab' || e.keyCode === 9; if (!isTabPressed) { return; } if (e.shiftKey) { // if shift key pressed for shift + tab combination if (document.activeElement === firstFocusableElement) { lastFocusableElement.focus(); // add focus for the last focusable element e.preventDefault(); } } else { // if tab key is pressed if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab firstFocusableElement.focus(); // add focus for the first focusable element e.preventDefault(); } } }); firstFocusableElement.focus(); */ $(document).ready(function(){ /*$('#cancelprinting').on('click', function(){ $('#printarea').fadeOut(1000); $('.searchBlock').fadeIn(1000); }); /*Add ESC key to cancel printing when pressed $(document).keyup(function(e){ if(e.keyCode==27 && $('#printarea').css('display') == 'block'){ $('#printarea').fadeOut(1000); $('.searchBlock').fadeIn(1000); } });*/ $(document).on('click', '#take_a_tour', function(e) { $('#infoLinkBlock').popover('hide'); $('#watch_video_modal').modal('show'); $('#iframe_video_holder').html('<iframe width="100%" height="360" src="//www.youtube.com/embed/C8CVygm8iDQ" frameborder="0"></iframe>'); }); /*******************Set Cookie to check the first time user********************/ /* * */ expiry = new Date(); //expiry.setTime(new Date().getTime()+(10*60*1000)); // ten minutes expiry.setTime(new Date().getTime()+ 31536000000)// (525600*60*1000) == one year // set a new cookie if authenticated. document.cookie = "visited" + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; /*******Tutorial overlay to load ********/ var url = window.location.href; if(url.indexOf('?id=') == -1){ $('.introLogoBlock').removeClass('hide'); // $('body').chardinJs('start'); $('.searchBlock').css('z-index', '99999999999'); $('.searchBlock').css('pointer-events', 'none'); $('.searchBlock').css('z-index', '10'); $('.introLogoBlock').addClass('hide'); $('.searchBlock').css('pointer-events', 'all'); $('.topright').css('pointer-events', 'all'); $('#searchButton').css('pointer-events','all'); //$('#searchButton').addClass('chardinjs-helper-layer'); // $('#searchButton').css('pointer-events','none'); // $('.topright').css('pointer-events', 'none'); $('body').on('chardinJs:stop', function(){ $('.searchBlock').css('z-index', '10'); $('.introLogoBlock').addClass('hide'); $('.searchBlock').css('pointer-events', 'all'); $('.topright').css('pointer-events', 'all'); $('#searchButton').css('pointer-events','all'); }); $('.stanfordLogo').on('click', function(){ $('body').chardinJs('stop'); }); $('.stanfordMapWelcomeButton').on('click', function(){ $('body').chardinJs('stop'); }); } $("#questionsBlock").on('click', function(){ $('.introLogoBlock').removeClass('hide'); $('body').chardinJs('start'); $('.searchBlock').css('z-index', '99999999999'); $('.searchBlock').css('pointer-events', 'none'); //$('#searchButton').addClass('chardinjs-helper-layer'); $('#searchButton').css('pointer-events','none'); $('.topright').css('pointer-events', 'none'); $('body').on('chardinJs:stop', function(){ $('.searchBlock').css('z-index', '10'); $('.introLogoBlock').addClass('hide'); $('.searchBlock').css('pointer-events', 'all'); $('.topright').css('pointer-events', 'all'); $('#searchButton').css('pointer-events','all'); }); $('.stanfordLogo').on('click', function(){ $('body').chardinJs('stop'); }); $('.stanfordMapWelcomeButton').on('click', function(){ $('body').chardinJs('stop'); }); }); $(document).on('click', '#get_curr_loc', function(e) { e.preventDefault(); var GeoMarker = new GeolocationMarker(map); GeoMarker.setCircleOptions({fillColor: '#808080'}); google.maps.event.addListenerOnce(GeoMarker, 'geolocation_error', function(){ $('#current_location_note').css('display', 'block'); }); google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() { map.setCenter(this.getPosition()); map.fitBounds(this.getBounds()); console.log(this.getPosition().lat()); set_driv_orig(this.getPosition().lat(), this.getPosition().lng()) }); }); $('[data-toggle="popover"]').popover(); $('[data-toggle="tooltip"]').tooltip(); /*Click on the anywhere to close the Popover bubbles*/ $('body').on('click', function (e) { $('#mapLegendBlock, #relativeLinkBlock, #selfTourBlock, #bugReportBlock, #infoLinkBlock').each(function () { //the 'is' for buttons that trigger popups //the 'has' for icons within a button that triggers a popup if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('hide'); } }); }); /******************************************************/ /*******************SHOW THE BUG**********************/ $('#bugReportBlock').each(function(){ $(this).addClass("floating"); }); /*$(document).on('click', '#reportSubmit', function(e){ e.preventDefault(); var submitData = true; var newJsonData = {}; newJsonData["reportName"] = $("#reportName").val(); newJsonData["reportIssue"] = $("#reportIssue").val(); if ($("#reportIssue").val().length === 0){submitData = false;} newJsonData["reportBrowser"] = navigator.userAgent; newJsonData["reportOS"] = navigator.appVersion; newJsonData["reportCookie"] = navigator.cookieEnabled; //console.log(JSON.stringify(newJsonData)); if (submitData){ $.ajax({ type: "POST", url: "notification.cfc", dataType: "json", data: { method: "sendNotification", JSONPacket: JSON.stringify(newJsonData) }, success: function(data){ if(data == 0){ $('#bugReportBlock-form').addClass('hide'); $('#bugReportBlock-thankyou').removeClass('hide'); }else { alert("System Error! cannot report the issue."); } }, error: function(e){ console.log(e); } }); }else{ $("#reportIssue").effect("highlight", {}, 3000); } });*/ $(document).on('click', '#campus_tour_button', function(e){ e.preventDefault(); window.location.href="https://lbre-sites-prod.stanford.edu/Story_Map/campustour/index.html"; }); /*****************************************************/ var currentPanel = $('#currentPanel'); currentPanel.text($('#menuPanel').attr('id')); var currentOpener =$('#currentOpener'); currentOpener.text($('#openerExploreSU').attr('id')); if (device.is_mobile()) { $('#get_curr_loc').css('display', 'block'); } /*tooltip show for menu*/ /*var om = $('#openerMain'); om.tooltip('show'); setTimeout(function(){ om.tooltip('hide'); }, 5000); */ brb = $('#bugReportBlock'); brb.tooltip('show'); setTimeout(function(){ brb.tooltip('hide'); }, 5000); $(document).on('click', '#get_dir', function(e) { e.preventDefault(); set_driv_dest($("#bldg_addr").text()); $('#myModal').modal('hide'); $('#cm_bgOverlay').addClass('modal-backdrop'); fnOpenDirection(); }); $(document).on('click', '#eateries_get_dir', function(e) { e.preventDefault(); set_driv_dest($("#eateries_addr").val()); $('#myModal').modal('hide'); $('#cm_bgOverlay').addClass('modal-backdrop'); fnOpenDirection(); }) $(document).on('click', '#info_modal_get_dir', function(e) { e.preventDefault(); var latlng = $("#info_modal_lat").val() + ", " + $("#info_modal_lng").val(); set_driv_dest(latlng); $('#myModal').modal('hide'); $('#cm_bgOverlay').addClass('modal-backdrop'); fnOpenDirection(); }); //reverse directions $(document).on('click', '#rev_addr', function(e) { e.preventDefault(); //Get the values var fromVal = $("#orig").val(); var toVal = $("#dest").val(); //Set the values $("#orig").val(toVal); $("#dest").val(fromVal); reverse_orig_dest(); }); //get directions $(document).on('click', '#searchdir', function(e) { e.preventDefault(); map_driv_dir(activeDirectionType); }); //search clear button $("#search_address").keyup(function(){ $("#searchclear").toggle(Boolean($(this).val())); }); $("#searchclear").toggle(Boolean($("#search_address").val())); $("#searchclear").click(function(){ $("#search_address").val('').focus(); $(this).hide(); }); //end search clear button /*close the slide panel when search box is on focus*/ $('#search_address').focus(function(){ var panel = $('.slide-panel'); var px_to_close = $('.slidepanelclose').css('margin-left'); panel.removeClass('visible'); $(this).css("text-indent", "0%"); }); $('#openerMain').on('click', function() { var panel = $('.slide-panel'); panel.addClass('visible'); panel.css('margin-left','0px'); map.getStreetView().setVisible(false); $('#cm_bgOverlay').addClass('modal-backdrop'); //$('#cover').css('display','block'); $('#' + currentPanel.text()).show(); $('#openerExploreSU').removeAttr('style'); $('#openerDirection2').removeAttr('style'); $('#openerSearch2').removeAttr('style'); $('#' + currentOpener.text()).css('opacity', '1.0'); $('#search_address').css("text-indent", "90%"); $('#openerExploreSU').focus(); return false; }); $('#openerMain').on('mouseenter', function() { /*tooltip show for menu*/ var that = $(this); that.tooltip('show'); setTimeout(function(){ that.tooltip('hide'); }, 1000); }); $('#openerExploreSU').on('click', function() { var panel = $('.slide-panel'); panel.addClass('visible'); currentPanel.text($('#menuPanel').attr('id')); currentOpener.text($(this).attr('id')); $('#menuPanel').show(); $('#searchPanel').hide(); $('#directionPanel').hide(); $(this).find("img").css('opacity', '1.0'); $('#openerDirection2 img').removeAttr('style'); $('#openerSearch2').removeAttr('style'); return false; }); $(".tabbutton").click(function(e){ $(".tabbutton").attr("aria-selected",false); $(this).attr("aria-selected",true); }); $('.cm-searchResult').on('click', function() { var panel = $('.slide-panel'); panel.addClass('visible'); currentPanel.text($('#searchPanel').attr('id')); currentOpener.text($(this).attr('id')); $('#menuPanel').hide(); $('#searchPanel').show(); $('#directionPanel').hide(); $(this).find("img").css('opacity', '1.0'); $('#openerDirection2 img').removeAttr('style'); $('#openerExploreSU img').removeAttr('style'); return false; }); function fnOpenDirection(){ var panel = $('.slide-panel'); panel.addClass('visible'); currentPanel.text($('#directionPanel').attr('id')); currentOpener.text($(this).attr('id')); $('#menuPanel').hide(); $('#searchPanel').hide(); $('#directionPanel').show(); $('#openerDirection2 img').css('opacity', '1.0'); $('#openerExploreSU img').removeAttr('style'); $('#openerSearch2 img').removeAttr('style'); return false; } $('#openerDirection2').on('click', function() { var panel = $('.slide-panel'); panel.addClass('visible'); currentPanel.text($('#directionPanel').attr('id')); currentOpener.text($(this).attr('id')); $('#menuPanel').hide(); $('#searchPanel').hide(); $('#directionPanel').show(); $(this).find("img").css('opacity', '1.0'); $('#openerExploreSU img').removeAttr('style'); $('#openerSearch2 img').removeAttr('style'); return false; }); $('#openerSearch2').on('click', function() { currentOpener.text($(this).attr('id')); }); $('#closeButton2, #cm_bgOverlay').on('click', function() { var panel = $('.slide-panel'); var px_to_close = $('.slidepanelclose').css('margin-left'); panel.removeClass('visible'); // $('#openerExploreSU img').css('opacity', '1.0'); // $('#openerDirection2 img').removeAttr('style'); // $('#openerSearch2 img').removeAttr('style'); $('#cm_bgOverlay').removeClass('modal-backdrop'); $("#search_address").css('text-indent', '0%'); return false; }); $('#relativeLinkBlock').popover({ animate: false, html: true, placement: 'bottom', trigger: 'manual', title: function(){return $('#relativeLinkBlock-title').html();}, content: function (){return $('#relativeLinkBlock-content').html();} }).click(function(){ $(this).popover('toggle'); }); $('#selfTourBlock').popover({ animate: false, html: true, placement: 'bottom', trigger: 'manual', title: function(){return $('#selfTourBlock-title').html();}, content: function (){return $('#selfTourBlock-content').html();} }).click(function(){ $(this).popover('toggle'); }); $('#infoLinkBlock').popover({ animate: false, html: true, placement: 'bottom', trigger: 'manual', title: function(){return $('#infoLinkBlock-title').html();}, content: function (){return $('#infoLinkBlock-content').html();} }).click(function(){ $(this).popover('toggle'); }); $('#mapLegendBlock').popover({ animate: false, html: true, placement: 'bottom', trigger: 'manual', title: function(){return $('#mapLegendBlock-title').html();}, content: function (){return $('#mapLegendBlock-content').html();} }).click(function(){ $(this).popover('toggle'); }); $('#bugReportBlock').popover({ animate: false, html: true, placement: 'right', trigger: 'manual', title: function(){return $('#bugReportBlock-title').html();}, content: function (){return $('#bugReportBlock-content').html();} }).click(function(){ $(this).popover('toggle'); }); $('#close').click(function(){ $('#current_location_note').css('display','none'); }); $('#skipcontent').click(function(){ $('#closeButton2').click(); $('#openerMain').focus(); }); }); $('input:checkbox').click( function(){ $(this).parent('label').toggleClass('highlight', this.checked); }); //google.maps.event.addDomListener(window, 'load', initialize); </script> <style> html{ margin:0; padding:0; overflow: hidden; } body { background-color: #f2f1eb; /*#fbfbf9*/ color: #696969; font-family: "Source Sans Pro", Arial, sans-serif; font-size: 14px; line-height: 1.6; overflow: hidden; -ms-content-zoom-chaining: none; -ms-touch-action: none; } /*google info box text*/ .gm-style { font-family: "Source Sans Pro", Arial, sans-serif; } /* For carousel settings */ .slider-size { height: 225px; /* This is your slider height */ } .carousel { width:80%; margin:0 auto; /* center your carousel if other than 100% */ } /* end - For carousel settings */ #search_address{ z-index: 1001; } .searchbar-container{ padding-left: 0px; /*padding-top: 2px; padding-bottom: 2px;*/ margin-left: -10px; z-index: 2000; /*height: 0px;*/ } .table { display: flex; } .tcolumn { margin-bottom: 1em; width: 250px; } .trow { /*border: 1px black solid;*/ height: 3em; margin: auto; width: 100%; } /* For desktop and larger screen devices */ @media(min-width: 1025px) { /*.navbar .navbar-form { width: 450px; padding-left:0px; }*/ #search_address { width: 600px; text-indent: 90%; } .ui-menu{ width: 600px; } .container { width: 100%; padding-left : 10px; } .popover{ min-width: 250px; max-width: 500px; } .slidepanelclose{ margin-left: -317px; } .topright2{ float:none !important; position: absolute !important; margin-left: 39% !important; } /*margin: 0 0 0px 10px;*/ .community{ left: 33%; } .stanfordMapWelcome { width: 750px; margin-top: 40px; margin-left: -280px; } } /* For iPad and tablet screen devices */ @media(min-width: 768px) and (max-width: 1024px) { /*.navbar .navbar-form { width: 450px; padding-left:0px; }*/ #search_address { width: 400px; text-indent: 90%; } .ui-menu{ width: 400px; } .container { width: 100%; padding-left : 10px; } .popover{ min-width: 250px; max-width: 500px; } .slidepanelclose{ margin-left: -317px; } .tooltip{ display:none !important; } .community{ left: 24%; } .stanfordMapWelcome { width: 750px; margin-top: 40px; margin-left: -350px; } } /*For iPhone 6/6 Plus and Larger Android devices*/ @media only screen and (min-device-width: 375px) and (max-width: 767px) { /*.navbar .navbar-form { width: 300px; padding-left:0px; }*/ #search_address { width: 180px; } .ui-menu{ width: 300px; } /*.container { width: 100%; padding-left : 10px; }*/ .slidepanelclose{ margin-left: -317px; } .popover{ min-width: 250px; max-width: 320px; } .tooltip{ display:none !important; } .community{ left: 2%; } .stanfordMapWelcome { width: 400px; margin-top: 40px; margin-left: -200px; } .login { z-index: 2000; } } /*For iPhone 4/5 or Android devices*/ /*@media only screen and (min-device-width:320px) and (max-width: 374px) and (orientation: landscape) {*/ @media only screen and (min-device-width:320px) and (max-device-width:480px) { /*.navbar .navbar-form { width: 210px; padding-left:0px; padding-right:0px; }*/ #search_address { width: 130px; } .ui-menu{ width: 250px; } .popover{ min-width: 250px; max-width: 320px; } /* For carousel settings */ .slider-size { height: 125px; } .carousel { width:100%; } .tooltip{ display:none !important; } .slide-panel{ width: 270px !important; /*margin-left:-317px; */ } .slidepanelclose{ margin-left: -270px; } .betaText { font-size: 1.6em !important; } .circle { margin-left: 110px !important; margin-top: -95px !important; } .stanfordMapWelcome { width: 300px; margin-left: -133px; margin-top: 25px; } } .searchBlock{ position: absolute; z-index: 10; margin-top : 5px; margin-left: 20px; /* margin-left: 25%; */ } .topright{ float: right; margin: 0 0 0px 10px; line-height: 1.5; } .topright2{ float: right; /*margin: 0 0 0px 10px;*/ } .blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .bar-link { color: #f2f1eb; font-size: 20px; font-weight: 300; margin-left: 15px; text-decoration: none; } .bar-link:hover{ background-color: #820000; color: #f2f1eb; text-decoration: none; border-radius:5px 5px 5px 5px; } .bar-link:visited { color: #f2f1eb; text-decoration: none; } /*Overriding Bootstrap btn class, the panel opener button*/ .menubtn{ padding: 7px 10px; } /*Overriding Bootstrap btn class for search result button */ .searchresultbtn{ padding: 6px 12px; font-size:1.2em; } /*refresh button icon css*/ #refreshbtn{ padding: 6px 12px; } /*Overriding Bootstrap Accordion-moz-binding*/ .panel{ border-style: none; } .panel-heading{ background-color: #f2f1eb !important; } .panel-heading.accordion-toggle:after { bottom : 36px !important; font-size: 18pt !important; } /*Overriding the jQuery UI autocomplete classes*/ .ui-autocomplete { position: absolute; top: 100%; left: 0; z-index: 2000; float: left; display: none; min-width: 160px; _width: 160px; padding: 4px 0; margin: 2px 0 0 0; list-style: none; background-color: #ffffff; border-color: #ccc; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; max-height: 80%; overflow-y: scroll; overflow-x: hidden; } .ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; } .ui-menu .ui-menu { margin-top: -3px; } .ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; } .ui-menu .ui-menu-item a { text-decoration:none; display:block; padding:.2em .4em; line-height:1.5; font-size:1.5em; zoom:1; } .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item:hover, .ui-menu .ui-menu-item:active, .ui-menu .ui-menu-item a.ui-state-active{ background-color:#8C1515; color:#FFFFFF; -webkit-text-fill-color: #FFFFFF; /*Code for Safari*/ -moz-text-decoration-color: #8C1515; /* Code for Firefox */ font-weight: normal; margin: -1px; } /*End of overriding*/ /*For slide panel */ .slide-panel { width:315px; height:100%; padding:0px; background:#f2f1eb; /* margin-left:-317px; */ z-index:2000; position: absolute; left: 0px; top: 0px; box-shadow: 2px -2px 2px 0px #d0d0d0; -webkit-box-shadow: 2px -2px 2px 0px #d0d0d0; -moz-box-shadow: 2px -2px 0px 2px #d0d0d0; } .cm-navbar{ padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px; } /* For Slide panel Nav bar main menu right */ .cm-navbar .right { display: block; margin-left: 70px; height: 70px; width: auto; /*border-bottom-width:1px; border-bottom-color: #b1b1b1; border-bottom-style: solid;*/ } .cm-navbar .rightBottom { display: block; margin-left: 70px; height: 30px; width: auto; border-bottom-width:1px; border-bottom-color: #b1b1b1; border-bottom-style: solid; } /* For Slide panel Nav bar main menu left (has background picture) */ .cm-navbar .left { width: 70px; height: 100px; background-image: url("images/new/hoover2.png"); float: left; border-bottom-width:1px; border-bottom-color: #b1b1b1; border-bottom-style: solid; } .cm-searchResult{ position: absolute; right:12px; } .cm-buttons{ position: absolute; right:0px; padding: 10px } .cm-button-effect{ opacity: 0.8; filter: alpha(opacity=70); } .cm-button-effect .changed{ opacity: 1.0; filter: alpha(opacity=100); } .cm-button-effect:hover{ opacity: 1.0; filter: alpha(opacity=100); } .tabclass:hover{ background:#FFFFFF; } #openerSearch { float:right; margin:85px -50px 0px 0px; border-radius:0px 5px 5px 0px; background:#8C1515; border:none; /*border-color:#8C1515;*/ visibility:hidden; } .scrollPanelPadding{ padding-left: 10px; } .ScrollPanel{ height: calc(100% - 170px); overflow:auto; overflow-x:hidden; position: relative; } .directionBox{ padding : 2px; } /*override the box shadow for input box*/ .form-control{ box-shadow: none; -webkit-appearance: none; -moz-box-shadow: none; } /*override to 0px*/ .col-md-12{ padding-left: 0px; padding-right: 0px; } /*header fixed in modal */ .modal-body.suModal-Body { max-height: calc(100vh - 210px); overflow-y: auto; } .modal-header, .modal-footer { padding-top:4px; padding-bottom: 4px; } .modal-header .close { margin-top: 0; } #searchclear { position: absolute; right: 50px; top: 3px; bottom: 0; /*height: 20px;*/ margin: auto; font-size: 20px; cursor: pointer; color: #ccc; z-index:1001; } /*print button css start*/ .custom-control-container { margin: 5px; } .custom-control { cursor: pointer; direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: "Roboto", Arial, sans-serif; -webkit-user-select: none; font-size: 11px !important; background-color: rgb(255, 255, 255); padding: 1px 6px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; min-width: 28px; font-weight: 500; } .custom-control:hover { font-weight: 900 !important; } /*print button css end*/ #maplink { padding:10px 15px 12px 10px; position:absolute; right:0; top:0; background:#F8F8F8; border:1px solid #9A9A9A; border-top-style:none; z-index:100; width:300px; margin:0; } #maplink_box { font-size:.9em; width:280px; margin-top:3px; } #maplink_close { z-index:200; cursor:pointer; right:5px; top:5px; position:absolute; background:transparent url("//www.google.com/intl/en_ALL/mapfiles/iwcimgs0.png") no-repeat scroll -24px 0; height:12px; width:12px; } #srch_add_btn_group { display: flex; } /* accordion expand/collapse */ .panel-heading.accordion-toggle:after { /* symbol for "opening" panels */ font-family:'Glyphicons Halflings'; /* essential for enabling glyphicon */ content:"\e259"; /* adjust as needed, taken from bootstrap.css */ float: right; position: relative; bottom: 23px; font-size: 15pt; /* adjust as needed */ color: grey; /* adjust as needed */ } .panel-heading.accordion-toggle.collapsed:after { /* symbol for "collapsed" panels */ content:"\e258"; /* adjust as needed, taken from bootstrap.css */ } .panel-heading:hover { cursor: pointer; } .panel-heading:hover h4 { text-decoration: none; } /* accordion expand/collapse */ /*get direction swap button*/ .table tbody>tr>td.vert-align{ vertical-align: middle; } .table tbody>tr>td.no-border-top{ border-top: none; } /* well*/ .well.padding5{ padding:5px; } /* well*/ .panel-body.panel-body-explore{ padding:10px; } .msg { color: white; } </style> <style> /* Base for label styling */ [type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; left: -9999px; } [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { position: relative; padding-left: 25px; cursor: pointer; } /* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 4px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.3) } /* checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: "\2713"; position: absolute; top: 0; left: 4px; font-size: 14px; color: #8C1515; transition: all .2s; } /* checked mark aspect changes */ [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } /* disabled checkbox */ [type="checkbox"]:disabled:not(:checked) + label:before, [type="checkbox"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd; } [type="checkbox"]:disabled:checked + label:after { color: #999; } [type="checkbox"]:disabled + label { color: #aaa; } /* accessibility */ [type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before { border: 1px solid blue; } /* hover style just for information */ label:hover:before { border: 1px solid #4778d9!important; } /*dotted line for btn */ .btn-link.btn-link-su { color: #2c2d29; text-decoration-style: dotted; } .btn-link.btn-link-su:hover, .btn-link.btn-link-su:focus, .btn-link.btn-link-su:active { color:#8c1515; } #within_bldg a, .sucmlinks{ border-bottom: 1px dotted #696969; text-decorcation : none; } /*extra padding for tab in bldg info*/ .tab-content { padding: 10px; > .tab-pane { display: none; } > .active { display: block; } } .modal-backdrop { opacity:0.5 !important; /*height:1500px; width:1500px;*/ height: 100% !important; height: 100vh !important; width: 100% !important; width: 100vw !important; } /*.chardinjs-overlay{ height: 100% !important; height: 100vh !important; width: 100% !important; width: 100vw !important; }*/ .form-control-feedback.pt-events-auto {pointer-events: auto;} .form-group.no-margin-bottom {margin-bottom: 0px;} .betaText{ color: #FFFFFF; line-height: 1.0; font-size: 1.5em; display: none; } #bugReportBlock { position: absolute; z-index: 13; /*margin-top : 80px;*/ bottom: 0; margin-left: 10px; display: block; height: 50px; width: 50px; margin-bottom: 120px; background: url('images/new/start_tour.png') no-repeat center; background-size: contain; } /*#bugReportBlock { position: absolute; z-index: 13; margin-top : 80px; margin-left: 10px; display: block; height: 50px; width: 50px; margin-bottom: 120px; background: url('images/new/bug-report.png') no-repeat center; background-size: contain; display: none; }*/ /* ============================================== floating ============================================== */ .floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(30%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(30%); } 100% { -webkit-transform: translateY(0%); } } #cover{ position:absolute; /* absolute position (so we can position it where we want)*/ bottom:0px; /* position will be on bottom */ left:0px; width:100%; height: 100%; /* styling below */ background-color:black; opacity:0.6; /* transparency */ filter:alpha(opacity=60); /* IE transparency */ z-index: 15; } #current_location_note { position: absolute; z-index: 9999999; bottom: 0; margin-bottom:30px; left: 0; right: 0; color: #FFFFFF; background: #4D4F53; text-align: center; line-height: 2.5; overflow: hidden; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; display: none; } #current_location_note a{ color: #FFFFFF; font-weight: bold; text-decoration: underline; } /*@-webkit-keyframes slideDown { 0%, 100% { -webkit-transform: translateY(50px); } 10%, 90% { -webkit-transform: translateY(0px); } } @-moz-keyframes slideDown { 0%, 100% { -moz-transform: translateY(50px); } 10%, 90% { -moz-transform: translateY(0px); } } */ .cssanimations.csstransforms #current_location_note { -webkit-transform: translateY(50px); -webkit-animation: slideUp 2.5s 1.0s 1 ease forwards; -moz-transform: translateY(50px); -moz-animation: slideUp 2.5s 1.0s 1 ease forwards; } .cssanimations.csstransforms #close { display: none; } /*.slide-panel:target, .slide-panel:target + #cover{ display:block; opacity:0.2; }*/ .container-fluid, .row ,.col-md-12, su_map { height: 100% } #map_canvas { width:100%; height:100%; } .introLogoBlock{ position: absolute; z-index: 99999999; top: 40%; left: 50%; } .stanfordLogo { position: absolute; z-index: 99999999; /*bottom: 0;*/ display: block; margin-left: -50px; margin-top: -50px; height: 100px; width: 100px; background: url('images/new/stanford_logo_g1.png') no-repeat center; background-size: contain; } .circle { display:block; background: #FFFFFF; margin-left: 200px; margin-top: -175px; -moz-border-radius: 50px; -webkit-border-radius: 50px; width:10px; height:10px; border-radius: 50px; z-index: 99999999; } .stanfordMapWelcome{ position: absolute; z-index: 99999999; color: #FFFFFF; } .stanfordMapWelcomeButton{ position: absolute; z-index: 99999999; margin-left: -60px; margin-top: 100px; width:150px; } .stanfordMapWelcomeButton .btn{ background-color:#8c1515; border-color: #761212; margin-top: 20px; } .highlight-suggestion{ padding:.2em .4em; line-height:1.5; font-size:1.5em; zoom:1; } .custom-control-container { height:110px; } .inMapButton{ margin-bottom: 3px; } .form-control .txtarea{ color: #b7b5b5; } .covid-content { height: 160px; width: 320px; font-size: 14px; } .covid-content hr { margin-top: 5px; margin-bottom: 5px; } .login-content { cursor: pointer; } .overlay { background-image: url("images/walk-dist-15e.png"); background-repeat: no-repeat; background-size: 200px 200px; /*background-color: rgba(255,255,255,0.50); border:1px dashed red; */ height:205px; border-radius:0%; width:200px; line-height:200px; text-align:center; zoom: 200%; display: none; } #covid img{ max-width: 15px; } /* .overlay { background-color: rgba(255,255,255,0.70); border:1px dashed red; height:200px; border-radius:50%; width:200px; line-height:200px; text-align:center; zoom: 200%; position: relative; } .overlay-inner { background-color: rgba(238,130,238,0.70); top:10%; left:10%; border:1px dashed red; height:80%; border-radius:50%; width:80%; line-height:150%; text-align:center; position: relative; }*/ .skip-to-main-content-link { position: absolute; border-radius: 6px; left: -66%; padding: 1em; background-color: white; color: white; opacity: 0; } .skip-to-main-content-link:focus { z-index: 9999; left: 6%; transform: translateX(-50%); opacity: 1; } </style> </head> <body>  <style> #map_canvas { height:100% !important; } </style>  <div class='container-fluid' > <div class='row'> <div class='col-md-12 su_map'> <div id="maplink" style="display: none;"> <div id="maplink_close" onclick="tog_share(); return false;"></div> <div> Copy and paste link: </div> <div><input id="maplink_box"/> </div> <div> Tip: Easily create your custom maps with <a href="http://mapmaker.stanford.edu/" target="_blank" class="sucmlinks">Stanford's Custom Map Maker <span class="glyphicon glyphicon-lock" aria-label="Locked" aria-hidden="true" style="font-size:12px"></span> </a> </div> </div> <div class='introLogoBlock hide'> <div class='stanfordLogo'></div> <div class='stanfordMapWelcome'> <p style="color: #ffffff"> Are you looking for additional POI layers? Be sure to log in for our community version. </p> </div> <div class='stanfordMapWelcomeButton'> <a class="btn btn-primary login" href="secure/login.cfm" onclick="return false;" >Stanford Login</a> </div> <div class='stanfordMapWelcomeButton' style="margin-top: 150px; margin-left: -88px;"> <button class="btn btn-primary">Continue Without Login</button> </div> </div> <div id="current_location_note">Stanford Map could not determine your precise location. Please turn <b>ON</b> your location services. <button id="close">[Close]</button></div> <div id='map_canvas' class='printmap' ></div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span></button> <div class="modal-title" id="myModalLabel">Building Information</div> </div> <div class="modal-body suModal-Body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div id="watch_video_modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="modal-title">Take A Tour Video</div> </div> <div class="modal-body centered" id="iframe_video_holder"> </div> </div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Stanford Searchable Map