CINXE.COM
EarthCam - Webcam Network
<!DOCTYPE html> <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--> <!--[if !IE]><!--> <html lang="en"> <!--<![endif]--> <head> <title>EarthCam - Webcam Network</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="webcam, webcams, network camera, construction, construction webcams, cam, cams, mobile, live camera, live cities, city cams, pictures, photos, photo, digital camera, netcam, internet camera, webcast, livecam, livecams, streaming video, ip camera, live camera, streaming, video, live images, web camera, webcam sites, city cams, outdoor cams, travel, picture, mobile cameras, moblog" /> <meta name="description" content="Webcam Network | EarthCam. EarthCam is the leading network of live streaming webcams for tourism and entertainment. Explore unique and interesting locations around the world with 4K streaming technology. EarthCam provides complete infrastructure services to manage, host and maintain live streaming video solutions for its consumers and corporate clients. " /> <meta property="og:title" content="EarthCam - Webcam Network" /> <meta property="og:description" content="EarthCam is the leading network of live streaming webcams for tourism and entertainment. Explore unique and interesting locations around the world with 4K streaming technology. EarthCam provides complete infrastructure services to manage, host and maintain live streaming video solutions for its consumers and corporate clients. " /> <meta property="og:image" content="https://static.earthcam.com/images/socialnetworking/social-media-thumbnail.jpg?2" /> <meta property="og:image" content="https://static.earthcam.com/images/socialnetworking/social-media-thumbnail.jpg?2" /> <meta name="apple-itunes-app" content="app-id=853926670" /> <meta name="vtest" content="hellomyoldfriend" /> <link rel="manifest" href="/manifest.json"> <link rel="apple-touch-icon" href="https://static.earthcam.com/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://static.earthcam.com/touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://static.earthcam.com/touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://static.earthcam.com/touch-icon-ipad-retina.png"> <!-- new favicon --> <!-- <link rel="icon" type="image/png" href="/images/EarthCam_Tab_32x32.png"> --> <link rel="icon" type="image/png" href="/images/ECCOM_32x32-01.png"> <link rel="image_src" href="https://static.earthcam.com/images/socialnetworking/social-media-thumbnail.jpg?2" /> <link rel="alternate" type="application/rss+xml" title="EarthCam RSS" href="https://www.earthcam.com/rss.php" /> <!--=== Global Head ===--> <!-- Meta --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="" name="description"> <meta content="" name="author"> <!-- Font-Awesome --> <link rel="stylesheet" href="https://static.earthcam.com/css/font-awesome-4.7.0/css/font-awesome.min.css?20250207a"> <!-- Web Fonts --> <!--<link rel="shortcut" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">--> <!-- CSS Global Compulsory --> <link rel="stylesheet" href="https://static.earthcam.com/includes/bootstrap-5.3.1/css/bootstrap.min.css?20250207a" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > <link rel="stylesheet" href="https://static.earthcam.com/js/jquery-ui-1.12.1.custom/jquery-ui.min.css?20250207a" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > <!-- CSS Header and Footer --> <link rel="stylesheet" href="https://static.earthcam.com/css/site-global.css?20250207a" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > <link rel="stylesheet" href="https://static.earthcam.com/css/header.v5.css?20250207a" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > <link rel="stylesheet" href="https://static.earthcam.com/css/footer.v5.css?20250207a" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > <!-- Site CSS Fixes --> <!-- <link href="https://www.earthcam.com/css/cssloader.php" rel="stylesheet"> --> <!-- CSS Implementing Plugins (Global) --> <!-- CSS Theme --> <!-- CSS Customization (Global) --> <!--=== End Global Head ===--> <!-- CSS Implementing Plugins (Page) --> <!--<link rel="stylesheet" href="https://static.earthcam.com/includes/Unify-v1.8/assets/plugins/parallax-slider/css/parallax-slider.css">--> <!--EXAMPLE--> <!-- CSS Page Style --> <!--<link rel="stylesheet" href="/css/frontpage.v5.css">--> <!-- CSS Customization --> <!--<link rel="stylesheet" href="/myearthcam/css/home.css">--> <!--EXAMPLE--> <!-- Global JS --> <!-- Global Includes --> <!-- cookiebot --> <style type="text/css" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > /* Branding on the banner */ a#CybotCookiebotDialogPoweredbyCybot, div#CybotCookiebotDialogPoweredByText { display: none !important; } /* Branding on the Privacy trigger */ #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo { display: none !important; } /* cat toggles, banner*/ #CybotCookiebotDialogBodyLevelWrapper { display: none; } @media screen and (min-width: 1280px) { /* button & layout tweaks */ #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton { width: 150px !important; } #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton { padding: 0.3em !important; } #CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogBodyLevelButtonCustomize, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { font-size: 12px !important; } /* banner text */ #CybotCookiebotDialogBodyContentText, #CybotCookiebotDialogBodyContentTitle, #CybotCookiebotDialogBodyEdgeMoreDetailsLink { font-size: 12px !important; } /* remove logo div */ #CybotCookiebotDialogHeader { display: none !important; } #CybotCookiebotDialog.CybotEdge { padding: 18px !important; } } </style> <!-- data-widget-enabled="true" data-georegions="{'region':'REGION_ID','cbid':'YOUR_DOMAIN_GROUP_ID'}" data-georegions="{'region':'US','cbid':'8db089af-5219-4f9e-bff2-5f722c528847'}" --> <!-- EU version - dotcom primary --> <!-- <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="58cbeadf-93cf-43c5-8ac4-600e4d1f182c" data-blockingmode="auto" data-georegions="{'region':'US','cbid':'8db089af-5219-4f9e-bff2-5f722c528847'}" type="text/javascript"> </script> --> <!-- non-EU, testing --> <!-- <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="8db089af-5219-4f9e-bff2-5f722c528847" data-blockingmode="auto" type="text/javascript"></script> --> <!--/cookiebot --> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" data-cookieconsent="ignore" src="https://static.earthcam.com/js/jquery.3.7.0.min.js?20250207a"></script> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" data-cookieconsent="ignore" language="JavaScript" src="https://static.earthcam.com/js/jquery-ui-1.13.1/jquery-ui.min.js?20250207a"></script> </script> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" data-cookieconsent="ignore" src="https://static.earthcam.com/includes/bootstrap-5.3.1/js/bootstrap.bundle.min.js?20250207a"></script> <!-- Includes popper by default now --> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" type="text/javascript" src="https://static.earthcam.com/js/clickTracker.js?20250207a"></script> <!-- File End --> <!-- LEAFLET --> <link href="/includes/leaflet-1.6/leaflet.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/includes/leaflet-1.6/leaflet.js"></script> <!-- LEAFLET MARKER CLUSTER --> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" /> <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script> <!-- LEAFLET PLUGINS: Zoom Home--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="/js/leaflet_plugins/leaflet.zoomhome.css"/> <script src="/js/leaflet_plugins/leaflet.zoomhome.min.js"></script> <!-- LEAFLET PLUGINS: Globe Mini --> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> <script type ='text/javascript' src="/js/leaflet_plugins/Control.GlobeMiniMap.js"></script> <!-- LEAFLET COUNTRY SELECT --> <script type ='text/javascript' src="/js/leaflet_plugins/Leaflet.CountrySelect.js"></script> <!-- LEAFLET SUB GROUP --> <script type ='text/javascript' src="/js/leaflet_plugins/leaflet.featuregroup.subgroup.js"></script> <!-- LEAFLET GEOSEARCH --> <link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.0.5/dist/geosearch.css"/> <script src="https://unpkg.com/leaflet-geosearch@3.0.5/dist/geosearch.umd.js"></script> <!-- LEAFLET FULL SCREEN --> <link rel="stylesheet" href="/js/leaflet_plugins/leaflet.fullscreen-1.6.0/Control.FullScreen.css" /> <script src="/js/leaflet_plugins/leaflet.fullscreen-1.6.0/Control.FullScreen.js"></script> <script type ='text/javascript' src="/js/leaflet_plugins/USstates.js"></script> <style type="text/css" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > .bodyContainer { background-color: #fff; } .borderContainer{ background-color: #FFFFFF; } .mainContainer{ background-color: #FFFFFF; } .pageTitle { padding-top: 10px; border: 0; } label { display: inline-block; max-width: ""; margin-bottom: 0px; font-weight: 500; } .leaflet-control-layers-overlays { text-align: left; } .thumbnail { min-width: 256px; min-height: 144px; background: transparent url('https://cdn.dribbble.com/users/24447/screenshots/1201310/inkling_spinner.gif') center no-repeat; } .leaflet-countryselect { min-width: 320px; display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } #map_canvas { /* live: */ height: 650px; width: 1284px; max-width: 100%; /* testing */ /*width: 100%; height: 100%;*/ /*height: 100%;*/ /*height: 400px; width: 75%; */ } #outside-map-container { /* testing */ /* width:1025px; */ /* live: */ /*width: 1284px; height: 704px; margin: 0 auto;*/ /* experimental */ width: 100%; height: 100%; min-width: 325px; min-height: 350px; } #map_canvas > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div { /* min-width: 50px */ /* width: 200px; */ width: initial !important; text-align: center; margin-left: auto; margin-right: auto; } .dropdown-container { /*display: flex;*/ display: flex; /*justify-content: space-between;*/ justify-content: center; } /* .marker-cluster div { margin-left:0px; }*/ .country-container { margin: 10px 10px 10px 0px; } .state-container { margin: 10px 30px 10px 0px; } .leaflet-geosearch-bar { font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } .leaflet-geosearch-bar form { min-width: 320px; display: block; width: 100%; left: -38px; height: 34px; padding: 6px 12px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .leaflet-geosearch-bar form input { font: 400 14px Arial; padding-bottom: 5px } .leaflet-control-geosearch a.reset { background-color: transparent; color: #555555; font-size: 16px; padding-top: 4px; } .leaflet-control-zoomhome-home { height: 35px !important; } .leaflet-control-zoomhome-home { padding-top: 8px; padding-bottom: 4px; } .leaflet-bar a, .leaflet-bar a:hover { width: 30px; } .leaflet-marker-icon.leaflet-custom-icon { border: solid white 2px; } .marker-cluster { color: white; } .marker-cluster-small { background-color: rgba(186, 186, 183, 0.6); } .marker-cluster-small div { background-color: rgba(135, 135, 135, 0.6); } .marker-cluster-medium { background-color: rgba(139, 188, 155, 0.6); } .marker-cluster-medium div { background-color: rgba(38, 139, 79, 0.6); } .marker-cluster-large { background-color: rgba(82, 133, 179, 0.6); } .marker-cluster-large div { background-color: rgba(31, 100, 163, 0.6); } #affiliate_learn_more > h4 { font-weight: 400; } @media screen and (max-width: 1149px) { .dropdown-container { display: none; } #map_canvas { width: 100%; height: 450px; } .pageTitle { font-size: 14px; padding-left: 5px; } #affiliate_learn_more { padding-left: 5px; } } /*@media screen and (max-width: 499px) { #map_canvas { width: 95%; height: 400px; } }*/ </style> </head> <body> <!-- Branch of Dot Com --> <div class="bodyContainer"> <!-- Header --> <!-- CSS set in prototypeGlobalCSS --> <div class="container-fluid center sticky" id="header-container"> <div class="row"> <!-- Header --> <!--<div class="col-xs-12 header"> <!--<div class="row header"> <div class="flexGroup" style="width:100%;"> <!-- Icons for links to social media -> <span style="display: none" class="hidden-xs verticalCenter socialIcons"><div class="verticalCenter" style="margin-top: 5px;">Follow Us:</div> <a href="https://www.facebook.com/earthcaminc"><i class="fa fa-facebook" alt="Facebook" title="Facebook"></i></a> <a href="https://www.twitter.com/earthcam"><i class="fa fa-twitter" alt="Twitter" title="Twitter"></i></a> <a href="https://instagram.com/earthcam/"><i class="fa fa-instagram" alt="Instagram" title="Instagram"></i></a> <a href="https://www.linkedin.com/company/earthcam-inc-"><i class="fa fa-linkedin" alt="LinkedIn" title="LinkedIn"></i></a> <a href="https://www.youtube.com/user/earthcam"><i class="fa fa-youtube-play" alt="Youtube" title="Youtube"></i></a> <a href="https://www.earthcam.com/mobile/"><i class="fa fa-phone" alt="Phone App" title="Mobile applications on your phone"></i></a> <a href="https://www.earthcam.com/rss.php"><i class="fa fa-rss" alt="RSS Feed" title="RSS Feed"></i></a> <a href="https://www.earthcam.com/newsletter/signup.php"><i class="fa fa-envelope" alt="Newsletter" title="Sign up for our newsletter"></i></a> </span> <!-- Link icons in dropdown for mobile -> <span style="display: none" class="hidden-sm hidden-md hidden-lg verticalCenter socialIcons"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle header-dropdown" type="button" id="linkMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Follow Us <i class="fa fa-caret-down noMarg"></i></button> <ul class="dropdown-menu header-dropdown" aria-labelledby="linkMenu"> <li class="row no-gutters"> <div class="col-xs-12 text-center"> <a class="dropdown-item" href="https://www.facebook.com/earthcaminc"><i class="fa fa-facebook" alt="Facebook" title="Facebook"></i></a> <a class="dropdown-item" href="https://www.twitter.com/earthcam"><i class="fa fa-twitter" alt="Twitter" title="Twitter"></i></a> <a class="dropdown-item" href="https://instagram.com/earthcam/"><i class="fa fa-instagram" alt="Instagram" title="Instagram"></i></a> <a class="dropdown-item" href="https://www.linkedin.com/company/earthcam-inc-"><i class="fa fa-linkedin" alt="LinkedIn" title="LinkedIn"></i></a> </div> <div class="col-xs-12 text-center"> <a class="dropdown-item" href="https://www.youtube.com/user/earthcam"><i class="fa fa-youtube-play" alt="Youtube" title="Youtube"></i></a> <a class="dropdown-item" href="https://www.earthcam.com/mobile/"><i class="fa fa-phone" alt="Phone App" title="Mobile applications on your phone"></i></a> <a class="dropdown-item" href="https://www.earthcam.com/rss.php"><i class="fa fa-rss" alt="RSS Feed" title="RSS Feed"></i></a> <a class="dropdown-item" href="https://www.earthcam.com/newsletter/signup.php"><i class="fa fa-envelope" alt="Newsletter" title="Sign up for our newsletter"></i></a> </div> </li> </ul> </div> </span> </div>--> <!--<div class="col-xs-12" style="padding-right: 0px;"> <div class="flexgroup"> <!-- Search Bar -> <span class="searchbox"> <form id="searchBarSubmission" action="/search/ft_search.php?_sbox=1&s1=1&term="> <input type="text" class="form-control open" id="search-bar" name="term" placeholder="Search" value=""/> <span style="display: inline;"> <i class="fa fa-search text-center" alt="Search" id="searchClick"></i> </span> </form> <form> input </form> </span> <!--Earthcam.net Link-> <span class="earthcamNetButton"> <form action="https://www.earthcam.net"> <button type="submit" class="btn btn-default" href="https://www.earthcam.net">Earthcam.net</button> </form> </span> </div> </div> </div>-> </div>--> <!-- "underheader content" --> <div id="underheader-container" class="col-12 underheader "> <div class="row underheader"> <!-- Logo and Hamburger Icon --> <div id="leftHeaderSide" class="verticalCenter flexGroup col-lg-4 col-md-6 col-7" style="text-align: left;float: left;"> <span style="display: flex; align-items: center;"><i id="header-toggle" class="fa fa-bars fa-2x sidebar-toggle" alt="Click here for sidebar"></i></span> <div id="siteLogo"> <!-- regular --><a data-tracking="header-logo" href="https://www.earthcam.com"><img class="sitelogoimg" src="https://static.earthcam.com/images/holiday_logos/com_logo.svg" title="EarthCam" alt="EarthCam" border="0" /></a> <!-- **** Remember to update the logo link for the homepage index, so it does not have a link ***--> </div> </div> <!-- Search Bar --> <!--<span class="searchbox"> <form id="searchBarSubmission" action="/search/ft_search.php?_sbox=1&s1=1&term=" style="float:right;"> <input type="text" class="form-control open" id="search-bar" name="term" placeholder="Search" value=""/> <span style="display: inline;"> <i class="fa fa-search text-center" alt="Search" id="searchClick"></i> </span> </form> </span>--> <!-- Important Links --> <div id="topNav" class="center col-5 col-md-6 col-lg-8"> <div class="navbar-header"> <div class="nav navbar-right"> <div id="searchbar2" class="searchbox" style="margin-left: auto; margin-right: 10px;"> <form class="searchBarSubmission" action="/search/ft_search.php?_sbox=1&s1=1&term=" style=""> <input type="text" id="headerSearch" class="form-control search-bar" name="term" placeholder="Search" value=""/> <button id="submitSearchSmall" class="btn btn-secondary searchClick" style="display: inline;"> <i class="fa fa-search text-center" alt="Search"></i><span class="searchText">Search</span> </button> <!--<div id="dropButtonContainer" class="dropdown" style="width: 40px;"> <button id="dropButton" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a data-tracking="header" class="top" href="/halloffame/"><li>Hall of Fame</li></a> <a data-tracking="header" href="/myearthcam/"><li>My EarthCam</li></a> <!--<li><a href="/add_request.php"><i class="fa fa-plus-square" alt="Add a cam" title="Add a cam"></i> Add a Cam</a></li>-> <a href="https://www.earthcam.net" target="_blank"><li data-tracking="header" id="earthcamButton">EarthCam.net</li></a> </div> </div>--> </form> </div> <!--<button id="navbar-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded='true'> <span class="fa fa-bars"></span> </button>--> </div> </div> <!-- larger full size--> <div class="collapse navbar-collapse navbar-right show" id="myNavbar"> <ul class="nav navbar-nav"> <li id="searchbar"> <span class="searchbox"> <form class="searchBarSubmission" action="/search/ft_search.php?_sbox=1&s1=1&term=" style="float:right;"> <input type="text" class="form-control search-bar" name="term" placeholder="Search" value=""/> <button id="submitSearchLarge" class="btn btn-secondary searchClick" style="display: inline;"> <i class="fa fa-search text-center" alt="Search"></i> Search </button> </form> </span> </li> <li><a data-tracking="header" class="top" href="/halloffame/"><i class="fa fa-star" alt="Hall of Fame" title="Hall of Fame"></i> Hall of Fame</a></li> <li><a data-tracking="header" href="/myearthcam/"><i class="fa fa-video-camera" alt="My Earthcam" title="My Earthcam"></i> My EarthCam</a></li> <!--<li><a href="/add_request.php"><i class="fa fa-plus-square" alt="Add a cam" title="Add a cam"></i> Add a Cam</a></li>--> <li data-tracking="header" id="earthcamButton"><a href="https://www.earthcam.net" target="_blank">EarthCam.net</a></li> <!--<li><a href="#" class="adjust"><i class="fa fa-list" alt="Change video format" title="Change video format"></i></a></li>--> </ul> </div> </div> </div> </div> </div> </div> <div class="container-fluid " id="side-content-wrapper"> <div id="scrim"></div> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <!--<li class="brand"><i class="fa fa-bars sidebar-toggle" alt="Click here for sidebar"></i></li>--> <li><a data-tracking="sidebar" href="/network/">EarthCam Network</a></li> <!--<li><a href="/search/adv_search.php?lang=en&redirect=yes&title=&restrict=1&url=myearthcam.com&city=&state=&zip=&country=">EarthCam Community</a></li>--> <!--<li><a href="#">Featured</a></li>--> <!--<li><a href="/search/adv_search.php?cat[]=ANI">Animals and Zoo</a></li>--> <!--<li><a href="/search/adv_search.php?cat[]=ENT">Entertainment</a></li>--> <!--<li><a href="/search/adv_search.php?cat[]=UNU">Weird and Bizarre</a></li>--> <!--<li><a href="/topten.php">Top 10 Cams</a></li>--> <!--<li><a href="https://www.constructioncamtv.com">Construction</a></li>--> <!--<li><a href="#">Watch It Again</a></li>--> <li><a data-tracking="sidebar" href="/network/map.php">Webcams of the World</a></li> <!--<li><a data-tracking="sidebar" href="/network/map.php?region=North America">North America</a></li> <li><a data-tracking="sidebar" href="/network/map.php?region=South America">South America</a></li> <li><a data-tracking="sidebar" href="/network/map.php?region=Europe">Europe</a></li> <li><a data-tracking="sidebar" href="/network/map.php?region=Africa">Africa</a></li> <li><a data-tracking="sidebar" href="/network/map.php?region=Asia">Asia</a></li>--> <!--<li><a data-tracking="sidebar" href="/mapsearch/">World Map</a></li>--> <!--<li><a href="/search/ft_search.php?newcams">New Webcams</a></li>--> <!--<li><a data-tracking="sidebar" href="/search/advanced_search.php">Advanced Search</a></li>--> <br /> <!--<li><a data-tracking="sidebar" href="/company/credits.php">Media Usage</a></li> <li><a data-tracking="sidebar" href="/mobile/">Mobile Apps</a></li>--> <li><a data-tracking="sidebar" href="https://www.earthcam.net" target='_blank'>EarthCam.net</a></li> <li><a data-tracking="sidebar" href="https://www.earthcam.net/construction/" target='_blank'>Construction</a></li> <!--<li><a data-tracking="sidebar" href="https://www.earthcam.net/technology/">Technology</a></li> <li><a data-tracking="sidebar" href="https://www.vrsitetour.com">360 VR Site Tour</a></li>--> <li><a data-tracking="sidebar" href="https://www.earthcam.net/timelapse/" target='_blank'>Time-Lapse</a></li> <br /> <li><a data-tracking="sidebar" href="https://www.earthcamtv.com" target='_blank'><i class="fa fa-television" alt="EarthCam TV" title="EarthCam TV"></i> EarthCam TV</a></li> <br /> <li><a data-tracking="sidebar" href="/myearthcam"><i class="fa fa-video-camera" alt="My Earthcam" title="My Earthcam"></i> My EarthCam</a></li> <br /> <li><a data-tracking="sidebar" href="/halloffame"><i class="fa fa-star" alt="Hall of Fame" title="Hall of Fame"></i> Hall of Fame</a></li> <br /> <!--<li><a data-tracking="sidebar" href="/company/join_network.php"><i class="fa fa-flag" alt="Join Network" title="Join Network"></i> Join Network</a></li> <br /> <li><a data-tracking="sidebar" href="/add_request.php"><i class="fa fa-plus-square" alt="Add a cam" title="Add a cam"></i> Add A Cam</a></li> <br />--> <li><a data-tracking="sidebar" href="https://www.earthcamhq.com" target='_blank'><i class="fa fa-home" alt="EarthCam HQ" title="EarthCam HQ"></i> EarthCam HQ</a></li> <br /> <!--<li><a data-tracking="sidebar" href="/company/contact.php"><i class="fa fa-envelope-o" alt="Contact Us" title="Contact Us"></i> Contact Us</a></li> <br /> <li><a data-tracking="sidebar" href="/faq.php"><i class="fa fa-question-circle" alt="Contact Us" title="Contact Us"></i> FAQs</a></li> <br />--> <span class="verticalCenter socialIcons" style="top: 0%;"> <div class="verticalCenter social-text-adjust">Follow Us:</div> <div style="margin-bottom: 10px;"> <a data-tracking="sidebar" class="icon" href="https://www.facebook.com/earthcaminc" target='_blank'><i class="fa fa-facebook" alt="Facebook" title="Facebook"></i></a> <!-- <a data-tracking="sidebar" class="icon" href="https://www.twitter.com/earthcam" target='_blank'><i class="fa fa-twitter" alt="Twitter" title="Twitter"></i></a> --> <a data-tracking="sidebar" class="icon" href="https://www.twitter.com/earthcam" target='_blank'><img src="/includes/font-awesome/x-twitter.svg" style="height: 14px; margin-top: -2px;"></img></a> <a data-tracking="sidebar" class="icon" href="https://instagram.com/earthcam/" target='_blank'><i class="fa fa-instagram" alt="Instagram" title="Instagram"></i></a> <a data-tracking="sidebar" class="icon" href="https://www.linkedin.com/company/earthcam-inc-" target='_blank'><i class="fa fa-linkedin" alt="LinkedIn" title="LinkedIn"></i></a> <a data-tracking="sidebar" class="icon" href="https://www.youtube.com/user/earthcam" target='_blank'><i class="fa fa-youtube-play" alt="Youtube" title="Youtube"></i></a> <a data-tracking="sidebar" class="icon" href="https://www.earthcam.com/mobile/" target='_blank'><i class="fa fa-mobile" alt="Mobile App" title="Mobile applications on your phone"></i></a> <a data-tracking="sidebar" class="icon" href="https://www.earthcam.com/rss.php" target='_blank'><i class="fa fa-rss" alt="RSS Feed" title="RSS Feed"></i></a> <!--<a data-tracking="sidebar" class="icon" href="https://www.earthcam.com/newsletter/signup.php" target='_blank'><i class="fa fa-envelope" alt="Newsletter" title="Sign up for our newsletter"></i></a>--> </div> </span> </ul> </div> </div> <!--<script src="/js/jquery.3.2.1.min.js?"></script>--> <script type="text/javascript" src='https://static.earthcam.com/js/localStorageTest.js?20250207a' nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" ></script> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > var cache = {}; var autocomplete_chosen = false; var autocomplete_partial = ""; //Beta search vars are set here storage = lsTest(); if( storage && window.localStorage.getItem('old_search') ) jQuery('.searchBarSubmission').attr('action', '/search/ft_search.php?_sbox=1&s1=1&term='); function checkAutocompleteSearchLogger() { if (autocomplete_chosen == true) { if (typeof ECNClickTracker != "undefined") { ECNClickTracker("Search Auto Complete", autocomplete_partial, jQuery("#headerSearch").val()); // console.warn("Search", "autocomplete", autocomplete_partial, jQuery("#headerSearch").val() ); } if (typeof gtag != "undefined") { // console.warn("gtag - event logged"); gtag('event', 'search_auto_complete', { 'search_term' : autocomplete_partial }); } } } jQuery(document).ready(function () { var autoTimer; var doneAutoInterval = 500; var searching = false; function focusBar(){ if(window.innerWidth >= 1202) jQuery("#searchbar").find("input.search-bar").trigger( 'focus' ); else jQuery("#searchbar2").find("input.search-bar").trigger( 'focus' ); } //focusBar(); //Makes sure the dropdown and collapse always work, no matter what is running on the page jQuery(".dropdown-toggle").dropdown(); //jQuery(".selected").attr("href", "#"); jQuery(".sidebar-toggle, #scrim").on( 'click', function(e){ jQuery("#side-content-wrapper").toggleClass("toggled"); jQuery(".underheader").toggleClass("toggled"); jQuery(".mainContainer").toggleClass("toggled"); jQuery("#footer-container").toggleClass("toggled"); if (typeof ECNClickTracker != "undefined") { ECNClickTracker("Side Bar", 'toggle'); // console.warn("Search", "autocomplete", autocomplete_partial, jQuery("#headerSearch").val() ); } if (typeof gtag != "undefined") { // console.warn("gtag - event logged"); gtag('Side Bar', 'toggle', { 'click' : 'click' }); } } ); jQuery(".searchClick").on('click touchend', function(e){ e.preventDefault(); if (window.innerWidth >= 661) { checkAutocompleteSearchLogger(); jQuery(this).closest(".searchBarSubmission").submit(); } else { target = jQuery(this).closest(".searchBarSubmission").find(".search-bar"); if (target.hasClass("open") && (target.val().trim())){ checkAutocompleteSearchLogger(); jQuery(this).closest(".searchBarSubmission").submit(); } else if (searching == false) { target.addClass("open"); jQuery("#topNav, #searchbar2").addClass("open"); jQuery("#leftHeaderSide").addClass("close"); focusBar(); searching = true; } } }); jQuery(".search-bar").on( 'focusout', function(e){ if(searching == true){ if(e.relatedTarget != null && e.relatedTarget.id == "submitSearchSmall"){ checkAutocompleteSearchLogger(); // console.warn("BREAK | performing search"); // return false; jQuery(".searchClick").trigger( 'click' ); } else { target.removeClass("open"); jQuery("#topNav, #searchbar2").removeClass("open"); jQuery("#leftHeaderSide").removeClass("close"); } searching = false; } }) var url_address = "https://www.earthcam.com/api/dotcom-search/html/autocomplete_updated?term="; var sUrl = "https://www.earthcam.com/search/ft_search.php?"; var elem = jQuery(".search-bar").autocomplete({ delay: 250, maxResults: 5, minLength: 3, source: function(request, response){ maxResults = this.options.maxResults; if(typeof cache[request.term] === 'undefined'){ jQuery.ajax({ datatype: "json", url: url_address+request.term, success:function(data){ autocomplete_partial = jQuery("#headerSearch").val().toLowerCase(); data = JSON.parse(data); results = data['results']; array = jQuery.map(results, function(elem){ return elem; }); var items = jQuery.ui.autocomplete.filter(array, request.term); items = items.slice(0, maxResults); cache[ request.term ] = items; response(items); autocomplete_chosen = false; } }); } else{ response(cache[request.term]); } }, select: function(event,ui) { autocomplete_chosen = true; location.href = sUrl + 'term=' + ui.item.label; // console.log("autocomplete selected"); // console.warn(event); // console.warn(ui); } }); jQuery.ui.autocomplete.prototype._resizeMenu = function () { var ul = this.menu.element; ul.outerWidth(this.element.outerWidth()); } //Re-renders passed-in values to make sure bold (<b>) tags are recognized correctly jQuery('.ui-autocomplete-input').each(function(i, el) { elemAutocomplete = jQuery(el).data("ui-autocomplete") || jQuery(el).data("autocomplete") || jQuery(el).data("uiAutocomplete"); if (elemAutocomplete) { elemAutocomplete._renderItem = function (ul, item) { var newText = String(item.value).replace( new RegExp(this.term, "gi"), "<b>$&</b>"); return jQuery("<li></li>") .data("item.autocomplete", item) .append("<div>" + newText + "</div>") .appendTo(ul); }; } } ); /*jQuery(".search-bar").keyup(function(){ clearTimeout(autoTimer); term = jQuery(this).val(); console.log("Keyup term:"+term); if(term.length >= 4){ autoTimer = setTimeout('getAutocomplete(term)', doneAutoInterval); } });*/ fixed = false; jQuery(window).on( 'scroll', function(){ if (jQuery(this).scrollTop() > 90 && fixed == false){ jQuery("#underheader-container").addClass("fixed-top"); jQuery("#side-content-wrapper").addClass("fixed-top"); if( window.innerWidth <= 1400 ) { jQuery(".mainContainer").addClass("fixed-top"); //Commented out to fix strange behavior with switch to fixedheader } //jQuery(".mainContainer").css("margin-top", "0px"); //Commented out to fix strange behavior with switch to fixedheader fixed = true; } else if (jQuery(this).scrollTop() <= 90 && fixed == true){ jQuery("#underheader-container").removeClass("fixed-top"); jQuery("#side-content-wrapper").removeClass("fixed-top"); jQuery(".mainContainer").removeClass("fixed-top"); //Commented out to fix strange behavior with switch to fixedheader //jQuery(".mainContainer").css("margin-top", "0px"); fixed = false; } }); }); /*function getAutocomplete(term){ var queryUrl = "/includes/autocomplete.php?term="+term; var array = ""; console.log("Begin"); jQuery("#headerSearch").autocomplete({ maxResults: 10, source: function(request, response){ response([request.term]); } }); //Local cache check (cuts down a bit on database and function calls) /*if (term in cache){ console.log("Cache term: "+term); console.log("cache"); jQuery("#headerSearch").autocomplete({ source: cache[ term ] }); console.log("cache end"); } else{ console.log("data"); jQuery.ajax({ datatype: "json", url: queryUrl, success:function(data){ data = JSON.parse(data); console.log(data); array = jQuery.map(data, function(elem){ return elem; }); console.log("Data outer term:"+term); } }).done(function(){ jQuery("#headerSearch").autocomplete({ maxResults: 10, source: function(request, response){ var results = $.ui.autocomplete.filter(array, request.term); cache[ request.term ] = results; results = results.slice(0, this.options.maxResults); console.log(results); console.log("Data Term:"+request.term); response(results); } }); }); }/ console.log("End"); }*/ // jQuery(".header input").focus(function(e){ $(".header .input-group").addClass("full"); }); // jQuery(".header input").focusout(function(e){ $(".header .input-group").removeClass("full"); }); </script> <!-- Content --> <div class="container-fluid mainContainer"> <div class="row"> <div class="col-12"> <p class="pageTitle" style="text-align: left;">Travel the globe with EarthCam's live webcams!</p> </div> </div> <div class="row pad-top pad-bot"> <div class="col-12"> <!-- MAP CONTENT CONTAINER --> <div class="row"> <div id="outside-map-container"> <div class="dropdown-container"> <div class="state-container"></div> <div class="country-container"></div> <div class="search-container"></div> </div> <div id="map_canvas" style=""></div> </div><!--/outside--> </div><!--/row--> <!--/CONTENT CONTAINER --> </div> </div> <div class="row pad-top pad-bot" id="affiliate_learn_more"> <h4><a href="http://www.earthcam.net/tourism/" target="_blank">Click here</a> to learn how you can become an EarthCam affiliate and share your unique destination.</h4> </div> </div> <!--<div id="height_kluge" style="clear: both; height: 50px;"></div>--> <!-- Footer --> <!-- CSS set in prototypeGlobalCSS --> <div class="container-fluid" id="footer-container"> <div class="row footer"> <div class="col-xl-6 col-12 footerItem"> <div class="row"> <div class="col-4 cat"> <h4>Company</h4> <hr class="catHeader" /> <br> <a href="/company/aboutus.php" data-tracking="footer">About Us</a> <hr /> <a href="/company/mediapriorityaccess/" data-tracking="footer">Media Usage</a> <hr /> <!--<a href="/eventarchives/" data-tracking="footer">Event Archives</a> <hr />--> <a href="/press/" data-tracking="footer">Press Releases</a> <hr /> <a href="/inthenews.php" data-tracking="footer">In The News</a> <hr /> <a href="/company/privacy.php" data-tracking="footer">Privacy Policy</a> <hr /> <a href="/company/contact.php" data-tracking="footer">Contact Us</a> </div> <div class="col-4 cat"> <h4>Directory</h4> <hr class="catHeader" /> <br> <a href="/add_request.php" data-tracking="footer">Add a Cam</a> <hr /> <a href="/search/advanced_search.php" data-tracking="footer">Advanced Search</a> <hr /> <a href="/sitemap.php" data-tracking="footer">Site Map</a> <hr /> <a href="/company/join_network.php" data-tracking="footer">Join Network</a> <hr /> <!--<a href="/mapsearch/">World Map</a>--> <a href="/network/map.php" data-tracking="footer">World Map</a> <hr /> <a href="/faq.php" data-tracking="footer">FAQs</a> <!--<hr /> <a href="/halloffame/" data-tracking="footer">Hall Of Fame</a>--> </div> <div class="col-4 cat"> <h4>Explore</h4> <hr class="catHeader" /> <br> <a href="https://www.earthcam.net" target="_blank" rel="noopener" data-tracking="footer">EarthCam.net</a> <hr /> <span class="reduced"><a href="https://www.earthcamtv.com/" target="_blank" rel="noopener" data-tracking="footer">ECTV</a></span><span class="full"><a href="https://www.earthcamtv.com" target="_blank">EarthCamTV</a></span> <hr /> <a href="/myearthcam/" data-tracking="footer">My EarthCam</a> <hr /> <!--<a href="/network/" data-tracking="footer">EarthCam Network</a> <hr />--> <a href="https://www.earthcamhq.com" target="_blank" rel="noopener" data-tracking="footer">EarthCam HQ</a> <hr /> <a href="/mobile/" data-tracking="footer">Mobile Apps</a> <hr /> <!--<span class="reduced"><a href="https://www.constructioncamtv.com" target="_blank" rel="noopener" rel="noopener" data-tracking="footer">CCTV</a></span><span class="full"><a href="https://www.constructioncamtv.com/" target="_blank" rel="noopener">ConstructionCamTV</a></span>--> <a href="https://www.youtube.com/channel/UC6qrG3W8SMK0jior2olka3g" data-tracking="footer" target='_blank'>YouTube</a> </div> </div> </div> <div class="col-xl-3 col-md-6 col-12 ad-footer footerItem" style="text-align: center"> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-0216312167859868" data-ad-slot="3299928495"> </ins> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb"> (adsbygoogle=window.adsbygoogle || []).push({}); </script> </div> <div class="col-xl-3 col-md-6 col-12 footerItem" style="text-align: center"> <!--<img src="/images/holiday_logos/com_logo.svg" alt="Earthcam" title="Earthcam" style="max-width: 200px;"></img> <br/> <br/> <p> Earthcam is the global leader in providing webcam content, technology, and services. Founded in 1996, EarthCam provides live streaming video, time-phase construction and photography documentation for corporate and government clients in major cities around the world. <br> <br> Subscribe to our monthly newsletter and stay up to date with the latest news. </p> <form action="/newsletter/signup.php" method="get"> <div class="input-group"> <input action="/newsletter/signup.php" type="text" class="form-control" id="email" name="email" placeholder="Email Address" style="color: black;" /> <div class="input-group-btn"> <button class="btn btn-inverse" type="submit"> Subscribe </button> </div> </div> </form>--> <a href="https://www.earthcamtv.com/apps/" data-tracking="footer"><img src="/images/footer/ECTV_300x250.jpg" alt="Get Earthcam TV" title="Get Earthcam TV" /></a> <div style="clear:left; height: 10px;"></div> <!-- <h3 class="blueTitle"><span style="font-family: Arial Black;">EarthCam</span> Connect</h3> <div style="clear:left; height: 15px;"></div> --> <div style="text-align:center;"> <div style="margin-left: auto; margin-right: auto; width: 140px; display: inline-block;"> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/facebook',1);return false;" href="https://www.facebook.com/earthcaminc" target="_blank" rel="noopener"><img style="margin-left: 0px;" class="social_icon" src="/images/header/facebook-icon_body.png" width="30" height="30" alt="Facebook" title="Facebook" border="0" /></a> <!-- <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/twitter',1);return false;" href="http://www.twitter.com/earthcam" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/twitter-icon_body.png" width="30" height="30" alt="Twitter" title="Twitter" border="0" /></a> --> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/twitter',1);return false;" href="https://www.twitter.com/earthcam" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/x-icon_body.jpg" width="30" height="30" alt="Twitter" title="Twitter" border="0" /></a> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/instagram',1);return false;" href="https://instagram.com/earthcam/" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/instagram-icon_body.png" width="30" height="30" alt="Instagram" title="Instagram" border="0" /></a> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/linkedin',1);return false;" href="https://www.linkedin.com/company/earthcam-inc-" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/linkedin-icon.png" width="30" height="30" alt="LinkedIn" title="LinkedIn" border="0" /></a> </div> <div style="margin-left: auto; margin-right: auto; width: 140px; display: inline-block;"> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/threads',1);return false;" href="https://threads.net/@earthcam" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/Threads_icon.jpg" width="30" height="30" alt="Threads" title="Threads" border="0" /></a> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/youtube',1);return false;" href="https://www.youtube.com/user/earthcam" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/youtube-icon_body.png" width="30" height="30" alt="YouTube" title="YouTube" border="0" /></a> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/mobileapps');return false;" href="https://www.earthcam.com/mobile/" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/Apps-Icon_body.png" width="30" height="30" alt="Mobile Applications on your phone" title="Mobile Applications on your phone" border="0" /></a> <a onclick="javascript: gaRecordInternal(this, 'Homepage', '/internal/homepage/social/rss',1);return false;" href="https://www.earthcam.com/rss.php" target="_blank" rel="noopener"><img class="social_icon" src="/images/header/RSSFeed-icon_body.png" width="30" height="30" alt="RSS Feed" title="RSS Feed" border="0" /></a> <!--<a onclick="javascript:pageTracker._trackPageview('/internal/homepage/social/newslettersignup'); gaRecordInternal(this, 'Homepage', '/internal/homepage/social/newslettersignup');return false;" href="http://www.earthcam.com/newsletter/signup.php"><img class="social_icon" src="/images/header/Newsletter-icon_body.png" width="30" height="30" alt="Sign up for our free monthly Newsletter" title="Sign up for EarthCam messages" border="0" /></a>--> </div> </div> </div> </div> <div class="row footerBottom"> <div class="col-md-6 copyright">Copyright 1996-2025 EarthCam, Inc. All Rights Reserved</div> <div class="col-md-6 rightItem">EarthCam - Where The World Watches The World ®</div> </div> <!--<div class="row subfooter"> <div class="col-md-6 text-center"> <p>漏 2017 EarthCam, Inc. All Rights Reserved. | <a href="#">Terms of Use</a></p> </div> <div class="col-md-6 text-center"> <p>Where The World Watches The World 庐</p> </div> </div>--> </div> <div id="topScroll" class="text-center" style="display: none;"> <i class="fa fa-chevron-up fa-2x"></i> </div> <script type="text/javascript" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > jQuery(document).ready(function(){ jQuery("#topScroll").on( 'click', function() { if (typeof ECNClickTracker != "undefined") { ECNClickTracker("Scroll Up Arrow Blue", 'site', 'click'); // console.warn("Search", "autocomplete", autocomplete_partial, jQuery("#headerSearch").val() ); } if (typeof gtag != "undefined") { // console.warn("gtag - event logged"); gtag('event', 'Scroll Up Arrow Blue', { "click" : "click" }); } jQuery('html, body').animate({ scrollTop: 0 }, 1000); return false; }); jQuery(window).on( 'scroll', function(){ if (jQuery(this).scrollTop() > 100){ jQuery("#topScroll").fadeIn(200); } else{ jQuery("#topScroll").fadeOut(200); } }); // event tracking for anchor tags /*jQuery('a,area').each(function(index){ if(typeof jQuery(this).data("tracking") != "undefined"){ jQuery(this).on( 'click', function(){ //console.log("internalTracker called from jquery onclick a"); internalTracker(jQuery(this)); return false; }); } });*/ }); </script> <!-- GA 4: local site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-090EYW9131"></script> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-090EYW9131'); </script> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" type="text/javascript" nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb"> /* GA3 GOOGLE ANALYTICS */ /*(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-274246-1', 'auto'); // Replace with your property ID. // ga('send', 'pageview'); // ---------------------------- jQuery(document).ready(function(){ // event tracking for anchor tags jQuery('a,area').each(function(index){ if(typeof jQuery(this).data("tracking") != "undefined"){ jQuery(this).on('click', function(){ // console.log("internalTracker called from jquery onclick a"); internalTracker(jQuery(this)); return false; }); } }); }); //------------------- function ECNClickTracker(cCategory, cAction, cLabel, cValue) { try { // OLD SYNTAX // var pageTracker=_gat._getTracker("UA-274246-1"); // pageTracker._trackEvent(cCategory, cAction, cLabel, cValue); // ga('send', 'event', cCategory, cAction,cLabel,cValue); } catch(err){} } function internalTracker(anchor,openlink){ // console.warn(anchor,openlink); var external; if (openlink == false || openlink == "undefined") { external = -1; } else if (typeof anchor.attr("target") != "undefined" && anchor.attr("target").toLowerCase() == "_blank") { external = 1; } else { external = 0; } // gaRecordInternal(anchor.attr("href"), anchor.data("tracking"), external); gaRecordInternal(anchor.attr("href"), "anchorClicks", anchor.data("tracking"), external); return false; } // gaRecordInternal (this, 'Homepage', '/internal/homepage/social/facebook',1) function gaRecordInternal(uLink, category, action, external) { try { // NEW SYNTAX //ga('send', 'event', 'category', 'action', 'opt_label', opt_value, {'nonInteraction': 1}); // ga('send', 'event', category, action); gtag('event', 'link_click', { 'ec_page_location' : action, }); // ----------------------- // GA 4 event tracking /* https://support.google.com/analytics/answer/11147304#zippy=%2Cglobal-site-tag-websites gtag('event', '<event_name>', { <event_parameters> }); https://stackoverflow.com/questions/52993722/event-tracking-in-google-analytics-using-gtag-js gtag('event', <action>, { 'event_category': <category>, 'event_label': <label>, 'value': <value> }); gtag('event', category, { 'click' : action }); custom search event that was created: gtag('event', 'search', { 'term' : post_params.term.toLowerCase() }); */ /*gtag('event', 'general_event', { 'ec_page_location' : category, 'link_url' : action, }, { 'debug_mode':true } );*/ // ----------------------- // console.warn("gaRecordInternal after ga function call"); if (uLink == -1) { // console.warn("gaRecordInternal false"); return(false); } else if (external == 1) { // console.warn("gaRecordInternal external link"); window.open(uLink, '_blank'); // } else if (uLink.href) { } else if (uLink) { // console.warn("gaRecordInternal local link"); setTimeout('document.location = "' + uLink + '"', 100) // setTimeout('document.location = "' + uLink.href + '"', 100) } } catch(err){} } function gaRecordPageView(linkPath) { // unknown older function: //pageTracker._trackPageview(linkPath); try { // ga('send', 'pageview', linkPath); } catch(err){} } </script> <!-- Global site tag (gtag.js) - Google Ads: 1069879036 --> <!--<script async src="https://www.googletagmanager.com/gtag/js?id=AW-1069879036"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-1069879036'); </script> --> </div> <!--=== JAVASCRIPT ===--> <!-- JS Implementing Plugins (Page) --> <!--<script src="/includes/bootstrap-3.3.7/js/bootstrap.min.js"></script>--> <!-- JS Page Level --> <script nonce="67272b3c52e04581a76f03998a4940c6f541cd7e385e7f5b60e49746f5a623bb" > var js_thirdparty = true; var js_embed_mode = false; // jQuery(document).ready(function() { jQuery(function () { initialize(); //initialize leaflet map /* setInterval(function () { map.invalidateSize(); }, 100); */ }); jQuery(document).on( 'keyup', function (e) { if (e.keyCode == 27) { map.closePopup(); } // esc }); var map; var marker; let ecn_in_network; let ecn_out_of_network; // let flags; let flags = false; let projectbound1; let projectbound2; $.ajax({ url: //"https://daniel.ec5.test/api/mapsearch/get_locations_network.php?r=ecn&a=fetch", "https://www.earthcam.com/api/mapsearch/get_locations_network?r=ecn&a=fetch", dataType: "json", async: false, success: function (data) { ecn_in_network = data.data[0].places; } }); // $.ajax( // { // url: "https://www.earthcam.com/api/mapsearch/get_locations.php?nwx=77.57995914400348nwy=-179.82421875&nex=77.57995914400348&ney=157.67578125000003&sex=-39.639537564366705&sey=157.67578125000003&swx=-39.639537564366705&swy=-179.82421875&zoom=5", // dataType: "json", // async: false, // success: function(data) // { // ecn_out_of_network = data[0].places; // } // }); /* $.ajax({ url: "https://www.earthcam.com/api/mapsearch/basic_locations_flags.php", dataType: "json", async: false, success: function (data) { flags = data[0].places; } }); */ function initialize() { var posn = new L.LatLng(38.548165423046584, -48.51562500000001); // was used for center // let centerCoords = new L.LatLng(30.548165423046584, -18.921875000000001); let centerCoords = new L.LatLng(30.548165423046584, -18.921875000000001); var osmUrl='https://tile.openstreetmap.org/{z}/{x}/{y}.png'; // var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; // var osmUrl = "https://static.earthcam.com/api/map/get_tiles?s={s}&z={z}&x={x}&y={y}&20230208a"; // var osmUrl='https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'; // var osmUrl='https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png'; // OSM attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' var osmAttrib = 'Map data 漏 <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'; var myOptions = { zoom: 2, //3 minZoom: 2, center: centerCoords, maxBounds: [ [90, -180], [-90, 180] ], layers: [ new L.TileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }) //markers, markers2 ], zoomControl: false, closePopUpOnClick: true, fullscreenControl: true, fullscreenControlOptions: { position: "bottomleft" }, noWrap: true }; map = new L.Map("map_canvas", myOptions); // map.doubleClickZoom.disable() // map.scrollWheelZoom.disable(); let fullScreenResetCoords = centerCoords; let fullScreenResetZoom = 2; let mcg = new L.markerClusterGroup({ //animate: false, removeOutsideVisiblebounds: true, chunkedLoading: true, showCoverageOnHover: false, spiderfyDistanceMultiplier: 3, //animateAddingMarkers: false }).addTo(map); group1 = L.featureGroup.subGroup(mcg).addTo(map); // use `L.featureGroup.subGroup(parentGroup)` instead of `L.featureGroup()` or `L.layerGroup()`! //group2 = L.featureGroup.subGroup(mcg).addTo(map); if ( js_thirdparty ) { group2 = L.featureGroup.subGroup(mcg).addTo(map); } group1a = L.featureGroup() /*.addTo(group1)*/; group2a = L.featureGroup() /*.addTo(group2)*/; control = L.control.layers(null, null); //ECN in network cameras as 'markers' var markers = L.markerClusterGroup({ removeOutsideVisiblebounds: true, chunkedLoading: true, showCoverageOnHover: false, spiderfyDistanceMultiplier: 3, //animate: false, //animateAddingMarkers: false }); for (var i = 0; i < ecn_in_network.length; i++) { var a = ecn_in_network[i]; var title = a.name; var ecIcon = L.icon({ className: "leaflet-custom-icon", iconUrl: a.icon.icon, iconSize: [80, 50], //iconAnchor: [7, 24], popupAnchor: [0, 5], shadowUrl: "images/thumbShadow.png", shadowSize: [120, 65], shadowAnchor: [43, 43] }); var marker = L.marker([a.posn[0], a.posn[1]], { icon: ecIcon }); //var marker = L.marker(new L.LatLng(a.posn[0], a.posn[1], {icon: myIcon}), { // title: title // }); var marker_html = '<p><a href="' + ecn_in_network[i].url + '" target="_blank"><img style="" class="thumbnail" src="' + ecn_in_network[i].icon.icon + '" border="0" alt="" /></a></p> <p style="min-width: 256px;"><a style="font-size: 14px;" href="' + ecn_in_network[i].url + '" target="_blank">' + ecn_in_network[i].name + "<br /></a>" + a.location + "</p>"; var popup = L.popup({ closeOnEscapeKey: true }).setContent(marker_html); marker.bindPopup(marker_html, { className: "camera-popup" }); markers.addLayer(marker); marker.addTo(group1a); } //ECN out of network cameras as 'markers2' // var markers2 = L.markerClusterGroup({ // removeOutsideVisiblebounds: true, // chunkedLoading: true, // showCoverageOnHover: false, // spiderfyDistanceMultiplier: 3 // }); // if (ecn_out_of_network){ // for (var i = 0; i <ecn_out_of_network.length; i++) { // var a = ecn_out_of_network[i]; // var title = a.name; // var thumbIcon = L.icon({ // className: 'leaflet-custom-icon', // iconUrl: a.icon, // iconSize: [80,50], // //iconAnchor: [7, 24], // popupAnchor: [0, 5], // shadowUrl: 'images/thumbShadow.png', // shadowSize: [120,65], // shadowAnchor: [43, 43] // }); // var marker2 = L.marker([a.posn[0], a.posn[1]], {icon: thumbIcon}) // var marker_html = '<p><a href="'+ecn_out_of_network[i].url+'" target="_blank"><img class="thumbnail" src="'+ecn_out_of_network[i].icon+'" border="0" alt="" /></a></p> <p><a style="font-size: 14px;" href="'+ecn_out_of_network[i].url+'" target="_blank">'+ecn_out_of_network[i].name+'<br /></a>'+a.location+'</p>'; // var popup = L.popup({closeOnEscapeKey:true}).setContent(marker_html); // marker2.bindPopup(marker_html); // markers2.addLayer(marker2); // marker2.addTo(group2a) // } // } let flagMarkers = new L.FeatureGroup(); let clickedFlag; /* for (let i = 0; i < flags.length; i++) { let a = flags[i]; if (a.posn[0] === null) continue; let zoom = map.getZoom(); let flagIcon = L.icon({ iconUrl: a.icon_url }); let flagMarker = L.marker([a.posn[0], a.posn[1]], { icon: flagIcon }) //.addTo(map) .on("click", function (e) { map.setView(e.latlng, 5); map.on('zoomend', function(e){ projectbound1 = map.project(map.getCenter(), map.getZoom()); if(!ecn_out_of_network || ecn_out_of_network === []){ useGetLocationScript(2) } }) }); let flag_html = "<div>" + a.name + "</div>"; let popup = L.popup({ closeOnEscapeKey: true }).setContent(flag_html); flagMarker.bindPopup(flag_html, { className: "flag-popup" }); flagMarker.on("mouseover", function (e) { this.openPopup(); }); flagMarker.on("mouseout", function (e) { this.closePopup(); }); flagMarkers.addLayer(flagMarker); }*/ // flagMarkers.addTo(map) group1a.addTo(group1); group2a.addTo(group2); control.addOverlay(group1, "EarthCam Network"); control.addOverlay(group2, "Non EarthCam"); // control.addTo(map) // map.removeLayer(group1); // map.removeLayer(group2); // init regular cam clusters map.removeLayer(flagMarkers) useGetLocationScript(2) /* CODE FOR KEEPING FLAG LAYERS: //If Camera ID is being declared remove default Flag Layers if (window.location.href.indexOf("?id=") > -1) { map.removeLayer(flagMarkers) useGetLocationScript(2) } else { map.removeLayer(mcg) } */ //Adds country select var select = L.countrySelect({ title: "Zoom to a Country", exclude: "French Southern and Antarctic Lands" }); select.addTo(map); select.on("change", function (e) { if (e.feature === undefined) { //Do nothing on title return; } var country = L.geoJson(e.feature); if (this.previousCountry != null) { map.removeLayer(this.previousCountry); } this.previousCountry = country; map.addLayer(country); map.fitBounds(country.getBounds()); setTimeout(function(){ group2.clearLayers(); map.removeLayer(mcg); useGetLocationScript(1.5) },300) let zoom = map.getZoom(); //After a country is selected, if users zoom out or reset zoom, remove border and reset drop down selection map.on("zoomend", function (e) { if (zoom >= map.getZoom()) map.removeLayer(country); document.getElementsByClassName( "leaflet-countryselect" )[1].selectedIndex = 0; }); }); //Adds US states selection var states = L.countrySelect({ countries: usStates, title: "Zoom to a US State" }); states.addTo(map); states.on("change", function (e) { if (e.feature === undefined) { //Do nothing on title return; } var country = L.geoJson(e.feature); if (this.previousCountry != null) { map.removeLayer(this.previousCountry); } this.previousCountry = country; map.addLayer(country); map.fitBounds(country.getBounds()); setTimeout(function(){ group2.clearLayers(); map.removeLayer(mcg); useGetLocationScript(1.5) },300) let zoom = map.getZoom(); //After a country is selected, if users zoom out or reset zoom, remove border and reset drop down selection map.on("zoomend", function (e) { if (zoom >= map.getZoom()) map.removeLayer(country); document.getElementsByClassName( "leaflet-countryselect" )[0].selectedIndex = 0; }); }); //adds a zoom reset button //Added different zoom levels for when in fullscreen and not in full screen to eliminate empty space caused by lack of tiles var zoomHome = L.Control.zoomHome({ homeCoordinates: fullScreenResetCoords, homeZoom: fullScreenResetZoom }); zoomHome.addTo(map); map.on("enterFullscreen", function () { fullScreenResetCoords = new L.LatLng( 28.459033019728068, -8.085937500000002 ); fullScreenResetZoom = 3; zoomHome.setHomeCoordinates(fullScreenResetCoords); zoomHome.setHomeZoom(fullScreenResetZoom); if (map.getZoom() > 3) { return; } else map.setView(fullScreenResetCoords, 3); }); map.on("exitFullscreen", function () { fullScreenResetCoords = centerCoords; fullScreenResetZoom = 2; zoomHome.setHomeCoordinates(fullScreenResetCoords); zoomHome.setHomeZoom(fullScreenResetZoom); }); //adds a layer selector on the top right for each data set // var cameras = { // "ECN cams": markers, // "Non-ECN cams": markers2, // } //L.control.layers( null, cameras).addTo(map) //adds mini 3d globe var miniMap = new L.Control.GlobeMiniMap({ //uncomment to assign colors // land:'#FFFF00', // water:'#3333FF', // marker:'#000000', topojsonSrc: "/js/leaflet_plugins/world.json" }).addTo(map); //adds geo search function let search = new GeoSearch.GeoSearchControl({ provider: new GeoSearch.OpenStreetMapProvider(), style: "bar", searchLabel: "Enter address...", showMarker: false, autoClose: true }); map.addControl(search); map.on('geosearch/showlocation', function(e){ setTimeout(function(){ group2.clearLayers(); map.removeLayer(mcg); useGetLocationScript(2); }, 300) }) let searchHTML = search.getContainer(); map.on("geosearch/showlocation", function () { map.scrollWheelZoom.enable(); map.dragging.enable(); map.doubleClickZoom.enable(); }); let searchBar = document.querySelector( "#map_canvas > div.leaflet-control-container > div.leaflet-control-geosearch.leaflet-geosearch-bar" ); jQuery(".leaflet-control-geosearch.leaflet-geosearch-bar").on( 'mouseenter mouseleave', function () { map.scrollWheelZoom.enable(); map.dragging.enable(); map.doubleClickZoom.enable(); }); //actual HTML node of the select country & state drop down let selectHTML = select.getContainer(); let statesHTML = states.getContainer(); //Places an element under a new parent. We're putting the country & state dropdown inside of the layer control menu function setParent(el, newParent) { newParent.appendChild(el); } //moving the drop down controls outside of the map let topDropDownDiv = document.getElementsByClassName("dropdown-container")[0]; let countryDiv = document.getElementsByClassName("country-container")[0]; let stateDiv = document.getElementsByClassName("state-container")[0]; let searchDiv = document.getElementsByClassName("search-container")[0]; if ( js_embed_mode == false ) { setParent(statesHTML, stateDiv); setParent(selectHTML, countryDiv); setParent(searchBar, searchDiv); } map.on("zoomend ", function(e) { clickedFlag = map.getBounds(); map.removeLayer(flagMarkers); // map.addLayer(group1); // map.addLayer(group2); map.addLayer(mcg); // map.doubleClickZoom.enable() // map.scrollWheelZoom.enable(); control.addTo(map); //zoomHome.addTo(map); // flag code /* if (map.getZoom() > 2) { clickedFlag = map.getBounds(); map.removeLayer(flagMarkers); // map.addLayer(group1); // map.addLayer(group2); map.addLayer(mcg); // map.doubleClickZoom.enable() // map.scrollWheelZoom.enable(); control.addTo(map); //zoomHome.addTo(map); } else if (map.getZoom() <= 2) { map.addLayer(flagMarkers); ecn_out_of_network = []; map.removeLayer(mcg); // map.doubleClickZoom.disable() // map.scrollWheelZoom.disable(); setTimeout(function() { //if statement below makes sure mcg layer never shows when Flag layers are active if (map.hasLayer(mcg)) { map.removeLayer(mcg); ecn_out_of_network = []; } }, 300); control.remove(map); //zoomHome.remove(map); } */ }); let currZoom = map.getZoom(); function useGetLocationScript(buffer) { let buff = buffer || 1 let coords = map.getBounds().pad(buff); let sw = coords.getSouthWest(); let se = coords.getSouthEast(); let ne = coords.getNorthEast(); let nw = coords.getNorthWest(); let zoom = map.getZoom(); $.ajax({ url: "https://www.earthcam.com/api/mapsearch/get_locations?nwx=" + // "https://daniellaravel.ec2.test/api/mapsearch/get_locations.php?nwx=" + //"https://daniel.ec5.test/api/mapsearch/get_locations.php?nwx=" + nw.lat + "&nwy=" + nw.lng + "&nex=" + ne.lat + "&ney=" + ne.lng + "&sex=" + se.lat + "&sey=" + se.lng + "&swx=" + sw.lat + "&swy=" + sw.lng + "&zoom=" + zoom, dataType: "json", async: false, success: function(data) { ecn_out_of_network = data[0].places; // markers2 = L.markerClusterGroup({ // removeOutsideVisiblebounds: true, //removes clusters/markers too far from the viewport for performance // chunkedLoading: true, //prevents browser timeouts when loading 1000s of clusters/markers // showCoverageOnHover: false // }); // group2.clearLayers() // map.removeLayer(group1) // map.removeLayer(group2) for (var i = 0; i < ecn_out_of_network.length; i++) { var a = ecn_out_of_network[i]; var title = a.name; var thumbIcon = L.icon({ className: "leaflet-custom-icon", iconUrl: a.icon, iconSize: [80, 50], //iconAnchor: [7, 24], popupAnchor: [0, 5], shadowUrl: "images/thumbShadow.png", shadowSize: [120, 65], shadowAnchor: [43, 43] }); var marker2 = L.marker([a.posn[0], a.posn[1]], { icon: thumbIcon }); var marker_html = '<p><a href="' + ecn_out_of_network[i].url + '" target="_blank"><img class="thumbnail" src="' + ecn_out_of_network[i].icon + '" border="0" alt="" /></a></p> <p><a style="font-size: 14px;" href="' + ecn_out_of_network[i].url + '" target="_blank">' + ecn_out_of_network[i].name + "<br />" + a.location + "</a></p>"; var popup = L.popup({ closeOnEscapeKey: true }).setContent(marker_html); marker2.bindPopup(marker_html, { className: "camera-popup" }); marker2.addTo(group2); } // map.addLayer(group1); // map.addLayer(group2); map.addLayer(mcg); if(!projectbound2){ projectbound2 = map.project(map.getCenter(), map.getZoom()); } projectbound1 = projectbound2 } }); } map.on("dragend", function(e){ // if(!map.hasLayer(flagMarkers)){ projectbound2 = map.project(map.getCenter(), map.getZoom()); let absX = Math.abs(projectbound1.x - projectbound2.x) let absY = Math.abs(projectbound1.y - projectbound2.y) let zoomLVL = map.getZoom() let comparisonVal = zoomLVL <= 5 ? 800 : 2000 if (ecn_out_of_network.length > 0 && absX > comparisonVal || absY > comparisonVal){ projectbound1 = projectbound2 group2.clearLayers(); // map.removeLayer(group1); // map.removeLayer(group2); map.removeLayer(mcg) useGetLocationScript(2) } // } }) map.on("movestart zoomstart load", function(e){ if(!projectbound1 || projectbound1 === undefined){ projectbound1 = map.project(map.getCenter(), map.getZoom()); } }) map.on("moveend", function(e) { // if(!map.hasLayer(flagMarkers)){ projectbound2 = map.project(map.getCenter(), map.getZoom()); let absX = Math.abs(projectbound1.x - projectbound2.x) let absY = Math.abs(projectbound1.y - projectbound2.y) // if (ecn_out_of_network === undefined && map.getZoom()>2){ group2.clearLayers(); map.removeLayer(mcg); useGetLocationScript(2); if (ecn_out_of_network.length === 0){ useGetLocationScript(8) } // } /* else if (ecn_out_of_network.length === 0 && !map.hasLayer(flagMarkers)) { group2.clearLayers(); map.removeLayer(mcg); useGetLocationScript(2); } */ // } }); } </script> <!--EXAMPLE--> <!--=== End JAVASCRIPT ===--> </body> </html>