CINXE.COM
Flood Map: Elevation Map, Sea Level Rise Map
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="alternate" href="https://www.floodmap.net" hreflang="en" /> <link rel="alternate" href="https://www.floodmap.net/ru/" hreflang="ru" /> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Flood Map: Elevation Map, Sea Level Rise Map</title> <meta name="description" content="Flood Map shows the map of the area which could get flooded if the water level rises to a particular elevation. Sea level rise map. Bathymetric map, ocean depth. Effect of Global Warming and Climate Change."/> <meta name="keywords" content="flood map, flood water level, elevation map, floodplain map, sea level rise"/> <!-- Load Leaflet from CDN --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <!-- Load Esri Leaflet from CDN --> <script src="https://unpkg.com/esri-leaflet@2.3.2/dist/esri-leaflet.js" integrity="sha512-6LVib9wGnqVKIClCduEwsCub7iauLXpwrd5njR2J507m3A2a4HXJDLMiSZzjcksag3UluIfuW1KzuWVI5n/cuQ==" crossorigin=""></script> <!-- Load Esri Leaflet Geocoder from CDN --> <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.2/dist/esri-leaflet-geocoder.css" integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g==" crossorigin=""> <script src="https://unpkg.com/leaflet-image@latest/leaflet-image.js"></script> <!-- twitter card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Flood Map: Water Level Elevation Map"> <meta name="twitter:description" content="Flood Map shows the map of the area which could get flooded if the water level rises to a particular elevation. It may help flood risk assessment or flood management. Sea level rise map. Bathymetric map, ocean depth."> <meta name="twitter:image" content="https://www.floodmap.net/img/preview.png"> <link rel="image_src" href="/img/preview.png" /> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <!--Leaflet Foolscreen --> <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script> <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' /> <!-- favicon --> <link rel="icon" type="image/png" href="/favicon.png"> <meta name="theme-color" content="#ffffff"> <!-- favicon end --> <!-- Bootstrap --> <link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://apis.google.com/js/platform.js" async defer></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style id="antiClickjack">body{display:none !important;}</style><script type="text/javascript">if (self === top){ var antiClickjack = document.getElementById("antiClickjack"); antiClickjack.parentNode.removeChild(antiClickjack); } else { top.location = self.location; } </script> <style> .footer { position: fixed; left: 0; bottom: 0; width: 100%; font-size:1.2em; background-color: white; text-align: center; color: #337ab7; padding:10px 10px 10px 10px; /* border-top:solid 3px #337ab7; */ } </style> <style> .leaflet-tile-container img { box-shadow: 0 0 1px rgba(0, 0, 0, 0.05); } #basemaps-wrapper { position: absolute; top: 10px; right: 10px; z-index: 400; background: white; padding: 10px; } #basemaps { margin-bottom: 5px; } #previewbox { position: absolute; top: 30%; right: 30%; z-index: 400; background: white; padding: 10px; } </style> <!-- Facebook Pixel Code --> <script> !function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '804263323267397'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=804263323267397&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> <script data-ad-client="ca-pub-6549306531419697" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (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-350192-13', 'auto'); </script> <script> (function () { const handleReady = ({ detail }) => { const { memberInfo } = detail; if (memberInfo) { if (memberInfo.profileImageUrl) $("#userProfile").attr("src", memberInfo.profileImageUrl); ga('set', 'userId', memberInfo.id); ga('send', 'pageview'); } else { ga('send', 'pageview'); } } document.addEventListener('MemberSpace.ready', handleReady); //Event after login const handleMemberInfo = ({ detail }) => { const { memberInfo } = detail; var year = new Date().getFullYear(); if (memberInfo && year < 2023) { var postMemberInfo = { "email": memberInfo.email, "name": memberInfo.name, "customField14339": memberInfo.customSignupFields[0].value, "customField14340": memberInfo.customSignupFields[1].value, "customField14341": memberInfo.customSignupFields[2].value, "customField14342": memberInfo.customSignupFields[3].value, "customField14343": memberInfo.customSignupFields[4].value, "customField14344": memberInfo.customSignupFields[5].value }; try { $.ajax({ type: "POST", url: "https://www.floodmap.net/StripeConnect/PostUpdateCust.aspx", data: postMemberInfo }); } catch (err) { } } } document.addEventListener('MemberSpace.member.info', handleMemberInfo); }()); var MemberSpace = window.MemberSpace || { subdomain: "floodmap", domain: "members.floodmap.net" }; (function (d) { var s = d.createElement("script"); s.src = "https://cdn.memberspace.com/scripts/widgets.js"; var e = d.getElementsByTagName("script")[0]; e.parentNode.insertBefore(s, e); }(document)); </script> </head> <body style="padding-bottom:200px;"> <nav class="navbar navbar-inverse navbar-static-top" > <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" style="padding-top:0px;padding-bottom:0px;" href="/"> <img class="img-responsive" style="height:50px;width:264px;" src="/logo.png"/></a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active" style="color:white;font-weight:bold;font-size:1.5em;"><a href="https://www.floodmap.net/pro/"><b>FloodMap Pro</b></a></li> <li><a href="/Elevation/CountryList/">Cities Elevation Maps</a></li> <li><a href="https://distancecalculator.globefeed.com/Country_Distance_Calculator.asp">Distance Calculator</a></li> <li><a href="/contact/">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active" style="color:white;font-weight:bold;font-size:1.5em;margin-top:6px;"><img class="img-circle" id="userProfile" style="height:40px;width:40px;" src="/img/userprofile.png" /><a href="https://members.floodmap.net/member/sign_in" style="display:inline;">Login</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary" > <div class="panel-heading" > <h3 class="panel-title" style="padding-bottom:10px;"> <b>Flood Map: Elevation Map, Sea Level Rise Map</b> </h3> <iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.floodmap.net&layout=button_count&size=large&width=107&height=28&appId" width="107" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> <a class="twitter-share-button" style="display:inline;" data-size="large" href="https://www.floodmap.net">Tweet</a> <br /> <a id="linkFMPro" style="font-size:1.5em;color:yellow;" href="https://www.floodmap.net/pro/">👉<b> FloodMap Pro</b></a> </div> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <div class="panel panel-primary" style="color:#337ab7;"> <div class="panel-body form-group"> <div class="panel panel-primary"> <div class="panel-body form-group"> <label style="font-size:1.2em;"><input type="radio" name="floodmap" value="floodmap" checked /> FloodMap</label><br> <label style="font-size:1.2em;"><input type="radio" name="floodmap" value="colfloodmap" /><span style="color:blue;">Color </span><span style="color:green;">Flood</span><span style="color:red;">Map</span></label> <label style="font-size:1.2em;"><input type="radio" name="floodmap" value="colelevmap" /><span style="color:blue;">Color </span><span style="color:green;">Elevation</span><span style="color:red;">Map</span></label> <label style="font-size:1.2em;"><span class="badge" style="background-color:yellow;color:red;">NEW!</span> <a style="text-decoration:underline" target="_blank" href="/CurrentFloodForecast/">Current Flood Forecast Map</a></label> <label style="font-size:1.2em;"><span class="badge" style="background-color:yellow;color:red;">NEW!</span> <a style="text-decoration:underline" target="_blank" href="/3DFloodMap/">3D Flood Map and Simulation</a></label> </div> </div> <div id="setElev" class="form-group form-inline" > <label>Elevation/Height/Water Level (-/+):</label> <input class="form-control" type="text" id="elev" style="width:100px;" value="51" /> <button class="btn btn-warning" style="width:100px;" type="button" onclick="setElev(document.getElementById('elev').value);">Set</button> <b><span id="curElev" style="color:red;"></span><span style="color:red;"> meter.</span></b><br /> </div> <div class="panel panel-primary" id="colOpt" style="display:none;"> <div class="panel-body form-group form-inline" > <label for="seaChk" style="font-weight:normal;"><input id="seaChk" name="seaChk" type="checkbox"> Include Sea Depth <span style="font-size:0.8em;">(Suitable for coastal areas and ocean bathymetry only)</span></label> <label style="color:brown;">Color Palette</label><br /> <div class="radio"> <label><input type="radio" name="colorpal" value="rainbow" checked> Rainbow <img class="img-responsive" src="/img/rainbowcolors.png"></label> </div> <div class="radio"> <label><input type="radio" name="colorpal" value="floodmap" > Classic <img class="img-responsive" src="/img/floodmapcolors.png"></label> </div> </div> </div> <span id="clickOnLabel"><b><span style="color:orange;">Click on the Map</span> to get/set the flood water level at the location.</b></span><br /> <br><a href='#' class="btn btn-success" data-toggle='modal' data-target='#myModal'>Generate/Download Map</a> <br><br><a href="/cdn-cgi/l/email-protection#076468697366647347616b6868636a667729696273387472656d6264733a416266737275627427547260606274736e6869742741687527416b6868634a667727577568">✍️ <b>Suggest Features</b></a> </div> </div> </div> <div id="mapPanel" class="col-md-7"> <div style="position:relative;"> <div id="map_canvas" style="width:100%;height:600px;"> </div> <div id="basemaps-wrapper" class="leaflet-bar"> <select id="basemaps" > <option value="OpenStreetMap">OpenStreetMap</option> <option value="OpenTopoMap">OpenTopoMap</option> <option value="Topographic">Topographic</option> <option value="Imagery">Imagery</option> <option value="ImageryClarity">Imagery (Clarity)</option> <option value="ImageryFirefly">Imagery (Firefly)</option> <option value="Streets">Streets</option> <option value="NationalGeographic">National Geographic</option> <option value="Oceans">Oceans</option> <option value="Gray">Gray</option> <option value="DarkGray">Dark Gray</option> <option value="ShadedRelief">Shaded Relief</option> <option value="Physical">Physical</option> </select> </div> <div id="previewbox" style="width:40%;height:40%;display:none;text-align:center;border-radius:4px;overflow:auto;"> <span>For complete and larger view, subscribe to</span><br> <span style="font-size:1.2em; color:crimson;text-align:center;" ><b>FloodMap Pro</b></span><br /> <span style="font-size:1.2em;text-align:center;"><b>Only $9/mo </b></span><br /> <a style="text-align:center;" href="https://members.floodmap.net/member/plans/f54d573b7e" class="btn btn-success active" role="button" aria-pressed="true"><b>Start your 7 day trial</b></a> <br><span>💡 Your card will be charged after your 7 days trial ends. But if you cancel the plan before your 7 days trial ends, your card will not be charged.</span> </div> </div> </div> <div class="col-md-2" > <div class="panel panel-primary" style="border-width:4px;border-color:crimson;"> <div class="panel-body"> <span style="font-size:1.2em; color:crimson;text-align:center;" ><b>FloodMap Pro</b></span><br /> <span style="font-size:1.2em;text-align:center;"><b>Only $9/mo </b></span><br /> <span class="badge" style="color:red;background-color:yellow;">NEW</span><a target="_blank" href="/3DFloodMap/" style="text-decoration:underline"> <b>3D Flood Map and Simulation</b></a><br /> 🗺️ Interactive Color Flood Map<br /> ⛰️ Interactive Elevation Map<br /> 💾 Generate or Download Map<br /> 🔍 Search for a Place and get/set its Elevation.<br /> 🖱️ Click on the map and get/set its Elevation.<br /> 🛰️ Select Map Style like Imagery(Satellite), Oceans etc.<br /> 🌊 Set minus/negative value for ocean depth or bathymetric study.<br /> 🚫 No Ads.<br /> 🖥️ Large Map with Full Screen option.<br /><br /> <a id="signUpBtn" href="https://members.floodmap.net/member/plans/f54d573b7e" class="btn btn-success active" role="button" aria-pressed="true" style="text-align:center;font-size:1.2em;"><b>Start your 7 day trial</b></a><br /> <span>💡 Your card will be charged after your 7 days trial ends. But if you cancel the plan before your 7 days trial ends, your card will not be charged.</span> </div> </div> </div> </div> <div> <p><b>Get Link:</b> <input class="styled" type="text" id="link" style="width:95%"/></p> <p>*"<b>Flood Map</b> application does not show current or historic flood level but it shows all the area below set elevation."</p> <br /> <p><b>Disclaimer: Please note that this elevation flood map on its own is not sufficient for analysis of flood risk since there are many other factors involved. Surface runoff, flow diversion, land type etc. are also responsible for the flood coverage in addition to elevation. But this flood map should help in some extent in the following areas:</b></p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><b>About</b></h3> </div> <div class="panel-body"> <ul> <li>Flood Map may be useful to some extent for flood risk assessment or in flood management, flood control etc.</li> <li>Flood Map may help to provide flood alert/flood warning if flood water level at certain point is rising.</li> <li>Flood Map can help to locate places at higher levels to escape from floods or in flood rescue/flood relief operation.</li> <li>It can also provide floodplain map and floodline map for streams and rivers.</li> <li>Effect of sea level rise or sea level change can be seen on the map. This could be helpful in coastal areas.</li> <li>Global Warmin and Sea Levele Rise are the effects of Climate Change</li> <li>It can help to perform elevation analysis of an area for any purpose like city/town planning, new construction etc.</li> <li>We also think that it can help in planning irrigation system and water management.</li> <li>By setting negative elevation, Bathymetry study is also possible.</li> </ul> <p>The elevation layered on the map is in meters and is from sea level. The elevation is zero for the sea level. Negative elevation means depth below sea level.</p> <p>Data Sources: <a href="https://www.mapzen.com/">Mazpzen</a>, <a title="The National Map" href="https://www.usgs.gov/core-science-systems/national-geospatial-program/national-map">TNM</a>, <a href="https://www.usgs.gov/centers/eros/science/usgs-eros-archive-digital-elevation-shuttle-radar-topography-mission-srtm-1-arc?qt-science_center_objects=0#qt-science_center_objects">SRTM</a>, <a href="https://www.usgs.gov/land-resources/eros/coastal-changes-and-impacts">GMTED</a>, <a href="https://www.ngdc.noaa.gov/mgg/global/global.html">ETOPO1</a></p> <p><b>Notes:</b>Before using this Flood Map application, please note that for various technical or non technical reasons the application is not guaranteed free of bugs or inaccuracies. </p> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><b>Go Directly To the Country for Flood Map</b></h3> </div> <div class="panel-body"> <p>Please select the country to go to its's the flood map.</p> <div class="table-responsive"> <table class="table table-striped"> <tr><td><a title="Flood Map of US" href="/?ct=US">US</a></td><td><a title="Flood Map of Canada" href="/?ct=CA">Canada</a></td><td><a title="Flood Map of Japan" href="/?ct=JP">Japan</a></td><td><a title="Flood Map of France" href="/?ct=FR">France</a></td><td><a title="Flood Map of South Africa" href="/?ct=ZA">South Africa</a></td></tr><tr><td><a title="Flood Map of UK" href="/?ct=GB">UK</a></td><td><a title="Flood Map of Brazil" href="/?ct=BR">Brazil</a></td><td><a title="Flood Map of Germany" href="/?ct=DE">Germany</a></td><td><a title="Flood Map of Indonesia" href="/?ct=ID">Indonesia</a></td><td><a title="Flood Map of Poland" href="/?ct=PL">Poland</a></td><td><a title="Flood Map of Argentina" href="/?ct=AR">Argentina</a></td></tr><tr><td><a title="Flood Map of Iran" href="/?ct=IR">Iran</a></td><td><a title="Flood Map of Italy" href="/?ct=IT">Italy</a></td><td><a title="Flood Map of Mexico" href="/?ct=MX">Mexico</a></td><td><a title="Flood Map of Norway" href="/?ct=NO">Norway</a></td><td><a title="Flood Map of India" href="/?ct=IN">India</a></td><td><a title="Flood Map of New Zealand" href="/?ct=NZ">New Zealand</a></td></tr><tr><td><a title="Flood Map of Australia" href="/?ct=AU">Australia</a></td><td><a title="Flood Map of Russia" href="/?ct=RU">Russia</a></td><td><a title="Flood Map of China" href="/?ct=CN">China</a></td><td><a title="Flood Map of Turkey" href="/?ct=TR">Turkey</a></td><td><a title="Flood Map of Spain" href="/?ct=ES">Spain</a></td><td><a title="Flood Map of Sweden" href="/?ct=SE">Sweden</a></td></tr><tr><td><a title="Flood Map of Venezuela" href="/?ct=VE">Venezuela</a></td><td><a title="Flood Map of Chile" href="/?ct=CL">Chile</a></td><td><a title="Flood Map of Greece" href="/?ct=GR">Greece</a></td><td><a title="Flood Map of Lithuania" href="/?ct=LT">Lithuania</a></td><td><a title="Flood Map of Algeria" href="/?ct=DZ">Algeria</a></td><td><a title="Flood Map of Colombia" href="/?ct=CO">Colombia</a></td></tr><tr><td><a title="Flood Map of Puerto Rico" href="/?ct=PR">Puerto Rico</a></td><td><a title="Flood Map of Peru" href="/?ct=PE">Peru</a></td><td><a title="Flood Map of Philippines" href="/?ct=PH">Philippines</a></td><td><a title="Flood Map of Thailand" href="/?ct=TH">Thailand</a></td><td><a title="Flood Map of Bolivia" href="/?ct=BO">Bolivia</a></td><td><a title="Flood Map of Finland" href="/?ct=FI">Finland</a></td></tr><tr><td><a title="Flood Map of Saudi Arabia" href="/?ct=SA">Saudi Arabia</a></td><td><a title="Flood Map of Morocco" href="/?ct=MA">Morocco</a></td><td><a title="Flood Map of Taiwan" href="/?ct=TW">Taiwan</a></td><td><a title="Flood Map of Congo (Kinshasa)" href="/?ct=CD">Congo (Kinshasa)</a></td><td><a title="Flood Map of Latvia" href="/?ct=LV">Latvia</a></td><td><a title="Flood Map of Madagascar" href="/?ct=MG">Madagascar</a></td></tr><tr><td><a title="Flood Map of South Korea" href="/?ct=KR">South Korea</a></td><td><a title="Flood Map of Cuba" href="/?ct=CU">Cuba</a></td><td><a title="Flood Map of Malaysia" href="/?ct=MY">Malaysia</a></td><td><a title="Flood Map of Tanzania" href="/?ct=TZ">Tanzania</a></td><td><a title="Flood Map of Pakistan" href="/?ct=PK">Pakistan</a></td><td><a title="Flood Map of Belgium" href="/?ct=BE">Belgium</a></td></tr><tr><td><a title="Flood Map of Ecuador" href="/?ct=EC">Ecuador</a></td><td><a title="Flood Map of Kenya" href="/?ct=KE">Kenya</a></td><td><a title="Flood Map of Portugal" href="/?ct=PT">Portugal</a></td><td><a title="Flood Map of Denmark" href="/?ct=DK">Denmark</a></td><td><a title="Flood Map of Ethiopia" href="/?ct=ET">Ethiopia</a></td><td><a title="Flood Map of Nigeria" href="/?ct=NG">Nigeria</a></td></tr><tr><td><a title="Flood Map of Croatia" href="/?ct=HR">Croatia</a></td><td><a title="Flood Map of Egypt" href="/?ct=EG">Egypt</a></td><td><a title="Flood Map of Romania" href="/?ct=RO">Romania</a></td><td><a title="Flood Map of Sudan" href="/?ct=SD">Sudan</a></td><td><a title="Flood Map of Ukraine" href="/?ct=UA">Ukraine</a></td><td><a title="Flood Map of Uruguay" href="/?ct=UY">Uruguay</a></td></tr><tr><td><a title="Flood Map of Zambia" href="/?ct=ZM">Zambia</a></td><td><a title="Flood Map of Estonia" href="/?ct=EE">Estonia</a></td><td><a title="Flood Map of Netherlands" href="/?ct=NL">Netherlands</a></td><td><a title="Flood Map of Greenland" href="/?ct=GL">Greenland</a></td><td><a title="Flood Map of Mozambique" href="/?ct=MZ">Mozambique</a></td><td><a title="Flood Map of Gabon" href="/?ct=GA">Gabon</a></td></tr><tr><td><a title="Flood Map of Ivory Coast" href="/?ct=CI">Ivory Coast</a></td><td><a title="Flood Map of Marshall Islands" href="/?ct=MH">Marshall Islands</a></td><td><a title="Flood Map of Botswana" href="/?ct=BW">Botswana</a></td><td><a title="Flood Map of Central African Republic" href="/?ct=CF">Central African Republic</a></td><td><a title="Flood Map of Congo (Brazzaville)" href="/?ct=CG">Congo (Brazzaville)</a></td><td><a title="Flood Map of Tunisia" href="/?ct=TN">Tunisia</a></td></tr><tr><td><a title="Flood Map of Cameroon" href="/?ct=CM">Cameroon</a></td><td><a title="Flood Map of Fiji" href="/?ct=FJ">Fiji</a></td><td><a title="Flood Map of Hungary" href="/?ct=HU">Hungary</a></td><td><a title="Flood Map of Mauritania" href="/?ct=MR">Mauritania</a></td><td><a title="Flood Map of Micronesia" href="/?ct=FM">Micronesia</a></td><td><a title="Flood Map of Senegal" href="/?ct=SN">Senegal</a></td></tr><tr><td><a title="Flood Map of Zimbabwe" href="/?ct=ZW">Zimbabwe</a></td><td><a title="Flood Map of Austria" href="/?ct=AT">Austria</a></td><td><a title="Flood Map of Iceland" href="/?ct=IS">Iceland</a></td><td><a title="Flood Map of Kazakhstan" href="/?ct=KZ">Kazakhstan</a></td><td><a title="Flood Map of Yemen" href="/?ct=YE">Yemen</a></td><td><a title="Flood Map of Bangladesh" href="/?ct=BD">Bangladesh</a></td></tr><tr><td><a title="Flood Map of Chad" href="/?ct=TD">Chad</a></td><td><a title="Flood Map of Guatemala" href="/?ct=GT">Guatemala</a></td><td><a title="Flood Map of Mali" href="/?ct=ML">Mali</a></td><td><a title="Flood Map of Namibia" href="/?ct=NA">Namibia</a></td><td><a title="Flood Map of Nepal" href="/?ct=NP">Nepal</a></td><td><a title="Flood Map of Panama" href="/?ct=PA">Panama</a></td></tr><tr><td><a title="Flood Map of Uganda" href="/?ct=UG">Uganda</a></td><td><a title="Flood Map of Vietnam" href="/?ct=VN">Vietnam</a></td><td><a title="Flood Map of Afghanistan" href="/?ct=AF">Afghanistan</a></td><td><a title="Flood Map of Guinea" href="/?ct=GN">Guinea</a></td><td><a title="Flood Map of Israel" href="/?ct=IL">Israel</a></td><td><a title="Flood Map of Northern Mariana Islands" href="/?ct=MP">Northern Mariana Islands</a></td></tr><tr><td><a title="Flood Map of U.S. Virgin Islands" href="/?ct=VI">U.S. Virgin Islands</a></td><td><a title="Flood Map of Bahamas" href="/?ct=BS">Bahamas</a></td><td><a title="Flood Map of Dominican Republic" href="/?ct=DO">Dominican Republic</a></td><td><a title="Flood Map of French Polynesia" href="/?ct=PF">French Polynesia</a></td><td><a title="Flood Map of Honduras" href="/?ct=HN">Honduras</a></td> </table> </div> <br /> For more countries see <a href="Elevation/CountryList/"> Countries List for Eleveation of cities with Elevation Maps </a> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><b>Elevation Maps of major Cities/Towns/Villages</b></h3> </div> <div class="panel-body"> <p>Please select the country to get the elevation of Cities/Towns/Villages and elevation map.</p> <div class="table-responsive"> <table class="table table-striped"> <tr><td><a title="Elevation Maps in US" href="/Elevation/CountryElevationMap/?ct=US">US</a></td><td><a title="Elevation Maps in Canada" href="/Elevation/CountryElevationMap/?ct=CA">Canada</a></td><td><a title="Elevation Maps in Japan" href="/Elevation/CountryElevationMap/?ct=JP">Japan</a></td><td><a title="Elevation Maps in France" href="/Elevation/CountryElevationMap/?ct=FR">France</a></td><td><a title="Elevation Maps in South Africa" href="/Elevation/CountryElevationMap/?ct=ZA">South Africa</a></td></tr><tr><td><a title="Elevation Maps in UK" href="/Elevation/CountryElevationMap/?ct=GB">UK</a></td><td><a title="Elevation Maps in Brazil" href="/Elevation/CountryElevationMap/?ct=BR">Brazil</a></td><td><a title="Elevation Maps in Germany" href="/Elevation/CountryElevationMap/?ct=DE">Germany</a></td><td><a title="Elevation Maps in Indonesia" href="/Elevation/CountryElevationMap/?ct=ID">Indonesia</a></td><td><a title="Elevation Maps in Poland" href="/Elevation/CountryElevationMap/?ct=PL">Poland</a></td><td><a title="Elevation Maps in Argentina" href="/Elevation/CountryElevationMap/?ct=AR">Argentina</a></td></tr><tr><td><a title="Elevation Maps in Iran" href="/Elevation/CountryElevationMap/?ct=IR">Iran</a></td><td><a title="Elevation Maps in Italy" href="/Elevation/CountryElevationMap/?ct=IT">Italy</a></td><td><a title="Elevation Maps in Mexico" href="/Elevation/CountryElevationMap/?ct=MX">Mexico</a></td><td><a title="Elevation Maps in Norway" href="/Elevation/CountryElevationMap/?ct=NO">Norway</a></td><td><a title="Elevation Maps in India" href="/Elevation/CountryElevationMap/?ct=IN">India</a></td><td><a title="Elevation Maps in New Zealand" href="/Elevation/CountryElevationMap/?ct=NZ">New Zealand</a></td></tr><tr><td><a title="Elevation Maps in Australia" href="/Elevation/CountryElevationMap/?ct=AU">Australia</a></td><td><a title="Elevation Maps in Russia" href="/Elevation/CountryElevationMap/?ct=RU">Russia</a></td><td><a title="Elevation Maps in China" href="/Elevation/CountryElevationMap/?ct=CN">China</a></td><td><a title="Elevation Maps in Turkey" href="/Elevation/CountryElevationMap/?ct=TR">Turkey</a></td><td><a title="Elevation Maps in Spain" href="/Elevation/CountryElevationMap/?ct=ES">Spain</a></td><td><a title="Elevation Maps in Sweden" href="/Elevation/CountryElevationMap/?ct=SE">Sweden</a></td></tr><tr><td><a title="Elevation Maps in Venezuela" href="/Elevation/CountryElevationMap/?ct=VE">Venezuela</a></td><td><a title="Elevation Maps in Chile" href="/Elevation/CountryElevationMap/?ct=CL">Chile</a></td><td><a title="Elevation Maps in Greece" href="/Elevation/CountryElevationMap/?ct=GR">Greece</a></td><td><a title="Elevation Maps in Lithuania" href="/Elevation/CountryElevationMap/?ct=LT">Lithuania</a></td><td><a title="Elevation Maps in Algeria" href="/Elevation/CountryElevationMap/?ct=DZ">Algeria</a></td><td><a title="Elevation Maps in Colombia" href="/Elevation/CountryElevationMap/?ct=CO">Colombia</a></td></tr><tr><td><a title="Elevation Maps in Puerto Rico" href="/Elevation/CountryElevationMap/?ct=PR">Puerto Rico</a></td><td><a title="Elevation Maps in Peru" href="/Elevation/CountryElevationMap/?ct=PE">Peru</a></td><td><a title="Elevation Maps in Philippines" href="/Elevation/CountryElevationMap/?ct=PH">Philippines</a></td><td><a title="Elevation Maps in Thailand" href="/Elevation/CountryElevationMap/?ct=TH">Thailand</a></td><td><a title="Elevation Maps in Bolivia" href="/Elevation/CountryElevationMap/?ct=BO">Bolivia</a></td><td><a title="Elevation Maps in Finland" href="/Elevation/CountryElevationMap/?ct=FI">Finland</a></td></tr><tr><td><a title="Elevation Maps in Saudi Arabia" href="/Elevation/CountryElevationMap/?ct=SA">Saudi Arabia</a></td><td><a title="Elevation Maps in Morocco" href="/Elevation/CountryElevationMap/?ct=MA">Morocco</a></td><td><a title="Elevation Maps in Taiwan" href="/Elevation/CountryElevationMap/?ct=TW">Taiwan</a></td><td><a title="Elevation Maps in Congo (Kinshasa)" href="/Elevation/CountryElevationMap/?ct=CD">Congo (Kinshasa)</a></td><td><a title="Elevation Maps in Latvia" href="/Elevation/CountryElevationMap/?ct=LV">Latvia</a></td><td><a title="Elevation Maps in Madagascar" href="/Elevation/CountryElevationMap/?ct=MG">Madagascar</a></td></tr><tr><td><a title="Elevation Maps in South Korea" href="/Elevation/CountryElevationMap/?ct=KR">South Korea</a></td><td><a title="Elevation Maps in Cuba" href="/Elevation/CountryElevationMap/?ct=CU">Cuba</a></td><td><a title="Elevation Maps in Malaysia" href="/Elevation/CountryElevationMap/?ct=MY">Malaysia</a></td><td><a title="Elevation Maps in Tanzania" href="/Elevation/CountryElevationMap/?ct=TZ">Tanzania</a></td><td><a title="Elevation Maps in Pakistan" href="/Elevation/CountryElevationMap/?ct=PK">Pakistan</a></td><td><a title="Elevation Maps in Belgium" href="/Elevation/CountryElevationMap/?ct=BE">Belgium</a></td></tr><tr><td><a title="Elevation Maps in Ecuador" href="/Elevation/CountryElevationMap/?ct=EC">Ecuador</a></td><td><a title="Elevation Maps in Kenya" href="/Elevation/CountryElevationMap/?ct=KE">Kenya</a></td><td><a title="Elevation Maps in Portugal" href="/Elevation/CountryElevationMap/?ct=PT">Portugal</a></td><td><a title="Elevation Maps in Denmark" href="/Elevation/CountryElevationMap/?ct=DK">Denmark</a></td><td><a title="Elevation Maps in Ethiopia" href="/Elevation/CountryElevationMap/?ct=ET">Ethiopia</a></td><td><a title="Elevation Maps in Nigeria" href="/Elevation/CountryElevationMap/?ct=NG">Nigeria</a></td></tr><tr><td><a title="Elevation Maps in Croatia" href="/Elevation/CountryElevationMap/?ct=HR">Croatia</a></td><td><a title="Elevation Maps in Egypt" href="/Elevation/CountryElevationMap/?ct=EG">Egypt</a></td><td><a title="Elevation Maps in Romania" href="/Elevation/CountryElevationMap/?ct=RO">Romania</a></td><td><a title="Elevation Maps in Sudan" href="/Elevation/CountryElevationMap/?ct=SD">Sudan</a></td><td><a title="Elevation Maps in Ukraine" href="/Elevation/CountryElevationMap/?ct=UA">Ukraine</a></td><td><a title="Elevation Maps in Uruguay" href="/Elevation/CountryElevationMap/?ct=UY">Uruguay</a></td></tr><tr><td><a title="Elevation Maps in Zambia" href="/Elevation/CountryElevationMap/?ct=ZM">Zambia</a></td><td><a title="Elevation Maps in Estonia" href="/Elevation/CountryElevationMap/?ct=EE">Estonia</a></td><td><a title="Elevation Maps in Netherlands" href="/Elevation/CountryElevationMap/?ct=NL">Netherlands</a></td><td><a title="Elevation Maps in Greenland" href="/Elevation/CountryElevationMap/?ct=GL">Greenland</a></td><td><a title="Elevation Maps in Mozambique" href="/Elevation/CountryElevationMap/?ct=MZ">Mozambique</a></td><td><a title="Elevation Maps in Gabon" href="/Elevation/CountryElevationMap/?ct=GA">Gabon</a></td></tr><tr><td><a title="Elevation Maps in Ivory Coast" href="/Elevation/CountryElevationMap/?ct=CI">Ivory Coast</a></td><td><a title="Elevation Maps in Marshall Islands" href="/Elevation/CountryElevationMap/?ct=MH">Marshall Islands</a></td><td><a title="Elevation Maps in Botswana" href="/Elevation/CountryElevationMap/?ct=BW">Botswana</a></td><td><a title="Elevation Maps in Central African Republic" href="/Elevation/CountryElevationMap/?ct=CF">Central African Republic</a></td><td><a title="Elevation Maps in Congo (Brazzaville)" href="/Elevation/CountryElevationMap/?ct=CG">Congo (Brazzaville)</a></td><td><a title="Elevation Maps in Tunisia" href="/Elevation/CountryElevationMap/?ct=TN">Tunisia</a></td></tr><tr><td><a title="Elevation Maps in Cameroon" href="/Elevation/CountryElevationMap/?ct=CM">Cameroon</a></td><td><a title="Elevation Maps in Fiji" href="/Elevation/CountryElevationMap/?ct=FJ">Fiji</a></td><td><a title="Elevation Maps in Hungary" href="/Elevation/CountryElevationMap/?ct=HU">Hungary</a></td><td><a title="Elevation Maps in Mauritania" href="/Elevation/CountryElevationMap/?ct=MR">Mauritania</a></td><td><a title="Elevation Maps in Micronesia" href="/Elevation/CountryElevationMap/?ct=FM">Micronesia</a></td><td><a title="Elevation Maps in Senegal" href="/Elevation/CountryElevationMap/?ct=SN">Senegal</a></td></tr><tr><td><a title="Elevation Maps in Zimbabwe" href="/Elevation/CountryElevationMap/?ct=ZW">Zimbabwe</a></td><td><a title="Elevation Maps in Austria" href="/Elevation/CountryElevationMap/?ct=AT">Austria</a></td><td><a title="Elevation Maps in Iceland" href="/Elevation/CountryElevationMap/?ct=IS">Iceland</a></td><td><a title="Elevation Maps in Kazakhstan" href="/Elevation/CountryElevationMap/?ct=KZ">Kazakhstan</a></td><td><a title="Elevation Maps in Yemen" href="/Elevation/CountryElevationMap/?ct=YE">Yemen</a></td><td><a title="Elevation Maps in Bangladesh" href="/Elevation/CountryElevationMap/?ct=BD">Bangladesh</a></td></tr><tr><td><a title="Elevation Maps in Chad" href="/Elevation/CountryElevationMap/?ct=TD">Chad</a></td><td><a title="Elevation Maps in Guatemala" href="/Elevation/CountryElevationMap/?ct=GT">Guatemala</a></td><td><a title="Elevation Maps in Mali" href="/Elevation/CountryElevationMap/?ct=ML">Mali</a></td><td><a title="Elevation Maps in Namibia" href="/Elevation/CountryElevationMap/?ct=NA">Namibia</a></td><td><a title="Elevation Maps in Nepal" href="/Elevation/CountryElevationMap/?ct=NP">Nepal</a></td><td><a title="Elevation Maps in Panama" href="/Elevation/CountryElevationMap/?ct=PA">Panama</a></td></tr><tr><td><a title="Elevation Maps in Uganda" href="/Elevation/CountryElevationMap/?ct=UG">Uganda</a></td><td><a title="Elevation Maps in Vietnam" href="/Elevation/CountryElevationMap/?ct=VN">Vietnam</a></td><td><a title="Elevation Maps in Afghanistan" href="/Elevation/CountryElevationMap/?ct=AF">Afghanistan</a></td><td><a title="Elevation Maps in Guinea" href="/Elevation/CountryElevationMap/?ct=GN">Guinea</a></td><td><a title="Elevation Maps in Israel" href="/Elevation/CountryElevationMap/?ct=IL">Israel</a></td><td><a title="Elevation Maps in Northern Mariana Islands" href="/Elevation/CountryElevationMap/?ct=MP">Northern Mariana Islands</a></td></tr><tr><td><a title="Elevation Maps in U.S. Virgin Islands" href="/Elevation/CountryElevationMap/?ct=VI">U.S. Virgin Islands</a></td><td><a title="Elevation Maps in Bahamas" href="/Elevation/CountryElevationMap/?ct=BS">Bahamas</a></td><td><a title="Elevation Maps in Dominican Republic" href="/Elevation/CountryElevationMap/?ct=DO">Dominican Republic</a></td><td><a title="Elevation Maps in French Polynesia" href="/Elevation/CountryElevationMap/?ct=PF">French Polynesia</a></td><td><a title="Elevation Maps in Honduras" href="/Elevation/CountryElevationMap/?ct=HN">Honduras</a></td></tr> </table> </div> <br /> For more countries see <a href="Elevation/CountryList/"> Countries List for Eleveation of cities with Elevation Maps </a> </div> </div> </div> </div> <footer style="text-align:center;"> © 2020 FloodMap.net | <a href="https://www.floodMap.net/termsconditions">Terms & Conditions</a> | <a href="https://www.floodMap.net/privacypolicy">Privacy Policy</a> | <a href="/contact">Contact</a> </footer> </div><!-- /.container --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-bottom:60px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Try FloodMap Pro Today</h4> </div> <div class="modal-body" style="color:#337ab7;"> <h4><b>Unlock This Feature - Try FloodMap Pro</b></h4> <div class="panel panel-primary" style="font-size:1.2em;border-width:4px;border-color:crimson;"> <div class="panel-body" style="color:black;"> <span style="font-size:1.2em; color:crimson;text-align:center;" ><b>FloodMap Pro</b></span><br /> <span style="font-size:1.2em;text-align:center;color:black;"><b>Only $9/mo </b></span><br /> <span class="badge" style="color:red;background-color:yellow;">NEW</span><a target="_blank" href="/3DFloodMap/" style="text-decoration:underline"> <b>3D Flood Map and Simulation</b></a><br /> 🗺️ Interactive Color Flood Map<br /> ⛰️ Interactive Elevation Map<br /> 💾 Generate or Download Map<br /> 🔍 Search for a Place and get/set its Elevation.<br /> 🖱️ Click on the map and get/set its Elevation.<br /> 🛰️ Select Map Style like Imagery(Satellite), Oceans etc.<br /> 🌊 Set minus/negative value for ocean depth or bathymetric study.<br /> 🚫 No Ads.<br /> 🖥️ Large Map with Full Screen option.<br /><br /> <a id="buttonLink" href="https://members.floodmap.net/member/plans/f54d573b7e" class="btn btn-success active" role="button" aria-pressed="true" style="text-align:center;font-size:1.2em;"><b>Start your 7 day trial</b></a><br /> <span>💡 Your card will be charged after your 7 days trial ends. But if you cancel the plan before your 7 days trial ends, your card will not be charged.</span><br /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $('#linkFMPro').on('click', function (e) { ga('send', 'event', 'Pro', 'linkFMProClick'); } ); $('#demoModal').on('click', function (e) { ga('send', 'event', 'Pro', 'linkDemoModal'); } ); $('#demoPage').on('click', function (e) { ga('send', 'event', 'Pro', 'linkDemoPage'); } ); $('#buttonLink').on('click', function (e) { ga('send', 'event', 'Pro', 'modalLinkClick'); } ); $('#signUpBtn').on('click', function (e) { ga('send', 'event', 'Pro', 'signUpClick'); } ); $('#myModal').on('shown.bs.modal', function (e) { ga('send', 'event', 'Pro', 'subscribeOpen'); }); </script> <script> var autoPopup = false; if (autoPopup) startAutoPopup(); function startAutoPopup(){ setTimeout(function () { $('#myModal').modal(); }, 300000); } </script> <script> /* esri-leaflet-geocoder - v2.3.2 - Tue Nov 12 2019 12:54:26 GMT-0600 (Central Standard Time) * Copyright (c) 2019 Environmental Systems Research Institute, Inc. * Apache-2.0 */ !function (e, t) { "object" == typeof exports && "undefined" != typeof module ? t(exports, require("leaflet"), require("esri-leaflet")) : "function" == typeof define && define.amd ? define(["exports", "leaflet", "esri-leaflet"], t) : t((e.L = e.L || {}, e.L.esri = e.L.esri || {}, e.L.esri.Geocoding = {}), e.L, e.L.esri) }(this, function (e, t, s) { "use strict"; function i(e) { return new p(e) } function o(e) { return new f(e) } function r(e) { return new v(e) } function n(e) { return new _(e) } function a(e, t) { return new m(e, t) } function l(e) { return new y(e) } function u(e) { return new x(e) } function h(e) { return new b(e) } function d(e) { return new S(e) } function c(e) { return new C(e) } var g = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/", p = s.Task.extend({ path: "findAddressCandidates", params: { outSr: 4326, forStorage: !1, outFields: "*", maxLocations: 20 }, setters: { address: "address", neighborhood: "neighborhood", city: "city", subregion: "subregion", region: "region", postal: "postal", country: "country", text: "singleLine", category: "category", token: "token", key: "magicKey", fields: "outFields", forStorage: "forStorage", maxLocations: "maxLocations", countries: "sourceCountry" }, initialize: function (e) { e = e || {}, e.url = e.url || g, s.Task.prototype.initialize.call(this, e) }, within: function (e) { return e = t.latLngBounds(e), this.params.searchExtent = s.Util.boundsToExtent(e), this }, nearby: function (e, s) { var i = t.latLng(e); return this.params.location = i.lng + "," + i.lat, this.params.distance = Math.min(Math.max(s, 2e3), 5e4), this }, run: function (e, t) { return this.options.customParam && (this.params[this.options.customParam] = this.params.singleLine, delete this.params.singleLine), this.request(function (s, i) { var o = this._processGeocoderResponse, r = s ? void 0 : o(i); e.call(t, s, { results: r }, i) }, this) }, _processGeocoderResponse: function (e) { for (var i = [], o = 0; o < e.candidates.length; o++) { var r = e.candidates[o]; if (r.extent) var n = s.Util.extentToBounds(r.extent); i.push({ text: r.address, bounds: n, score: r.score, latlng: t.latLng(r.location.y, r.location.x), properties: r.attributes }) } return i } }), f = s.Task.extend({ path: "reverseGeocode", params: { outSR: 4326, returnIntersection: !1 }, setters: { distance: "distance", language: "langCode", intersection: "returnIntersection" }, initialize: function (e) { e = e || {}, e.url = e.url || g, s.Task.prototype.initialize.call(this, e) }, latlng: function (e) { var s = t.latLng(e); return this.params.location = s.lng + "," + s.lat, this }, run: function (e, s) { return this.request(function (i, o) { var r; r = i ? void 0 : { latlng: t.latLng(o.location.y, o.location.x), address: o.address }, e.call(s, i, r, o) }, this) } }), v = s.Task.extend({ path: "suggest", params: {}, setters: { text: "text", category: "category", countries: "countryCode", maxSuggestions: "maxSuggestions" }, initialize: function (e) { e = e || {}, e.url || (e.url = g, e.supportsSuggest = !0), s.Task.prototype.initialize.call(this, e) }, within: function (e) { e = t.latLngBounds(e), e = e.pad(.5); var i = e.getCenter(), o = e.getNorthWest(); return this.params.location = i.lng + "," + i.lat, this.params.distance = Math.min(Math.max(i.distanceTo(o), 2e3), 5e4), this.params.searchExtent = s.Util.boundsToExtent(e), this }, nearby: function (e, s) { var i = t.latLng(e); return this.params.location = i.lng + "," + i.lat, this.params.distance = Math.min(Math.max(s, 2e3), 5e4), this }, run: function (e, t) { if (this.options.supportsSuggest) return this.request(function (s, i) { e.call(t, s, i, i) }, this); console.warn("this geocoding service does not support asking for suggestions") } }), _ = s.Service.extend({ initialize: function (e) { e = e || {}, e.url ? (s.Service.prototype.initialize.call(this, e), this._confirmSuggestSupport()) : (e.url = g, e.supportsSuggest = !0, s.Service.prototype.initialize.call(this, e)) }, geocode: function () { return i(this) }, reverse: function () { return o(this) }, suggest: function () { return r(this) }, _confirmSuggestSupport: function () { this.metadata(function (e, t) { e || (t.capabilities && t.capabilities.indexOf("Suggest") > -1 ? this.options.supportsSuggest = !0 : this.options.supportsSuggest = !1, this.options.customParam = t.singleLineAddressField.name) }, this) } }), m = t.Evented.extend({ options: { zoomToResult: 0, useMapBounds: 12, searchBounds: null }, initialize: function (e, s) { if (t.Util.setOptions(this, s), this._control = e, !s || !s.providers || !s.providers.length) throw new Error("You must specify at least one provider"); this._providers = s.providers }, _geocode: function (e, s, i) { var o, r = 0, n = [], a = t.Util.bind(function (t, s) { r-- , t || (s && (n = n.concat(s)), r <= 0 && (o = this._boundsFromResults(n), this.fire("results", { results: n, bounds: o, latlng: o ? o.getCenter() : void 0, text: e }, !0), this.options.zoomToResult && o && this._control._map.fitBounds(o), this.fire("load"))) }, this); if (s) r++ , i.results(e, s, this._searchBounds(), a); else for (var l = 0; l < this._providers.length; l++)r++ , this._providers[l].results(e, s, this._searchBounds(), a) }, _suggest: function (e) { var s = this._providers.length, i = 0, o = t.Util.bind(function (e, o) { return t.Util.bind(function (t, r) { if (s -= 1, i += r.length, t) return this._control._clearProviderSuggestions(o), void this._control._finalizeSuggestions(s, i); if (r.length) for (var n = 0; n < r.length; n++)r[n].provider = o; else this._control._renderSuggestions(r); o._lastRender !== e && this._control._clearProviderSuggestions(o), r.length && this._control._input.value === e && (o._lastRender = e, this._control._renderSuggestions(r)), this._control._finalizeSuggestions(s, i) }, this) }, this); this._pendingSuggestions = []; for (var r = 0; r < this._providers.length; r++) { var n = this._providers[r], a = n.suggestions(e, this._searchBounds(), o(e, n)); this._pendingSuggestions.push(a) } }, _searchBounds: function () { return null !== this.options.searchBounds ? this.options.searchBounds : !1 === this.options.useMapBounds ? null : !0 === this.options.useMapBounds ? this._control._map.getBounds() : this.options.useMapBounds <= this._control._map.getZoom() ? this._control._map.getBounds() : null }, _boundsFromResults: function (e) { if (e.length) { for (var s = t.latLngBounds([0, 0], [0, 0]), i = [], o = [], r = e.length - 1; r >= 0; r--) { var n = e[r]; o.push(n.latlng), n.bounds && n.bounds.isValid() && !n.bounds.equals(s) && i.push(n.bounds) } for (var a = t.latLngBounds(o), l = 0; l < i.length; l++)a.extend(i[l]); return a } }, _getAttribution: function () { for (var e = [], t = this._providers, s = 0; s < t.length; s++)t[s].options.attribution && e.push(t[s].options.attribution); return e.join(", ") } }), y = _.extend({ options: { label: "Places and Addresses", maxResults: 5 }, suggestions: function (e, t, s) { var i = this.suggest().text(e); return t && i.within(t), this.options.countries && i.countries(this.options.countries), this.options.categories && i.category(this.options.categories), i.maxSuggestions(this.options.maxResults), i.run(function (e, t, i) { var o = []; if (!e) for (; i.suggestions.length && o.length <= this.options.maxResults - 1;) { var r = i.suggestions.shift(); r.isCollection || o.push({ text: r.text, unformattedText: r.text, magicKey: r.magicKey }) } s(e, o) }, this) }, results: function (e, t, s, i) { var o = this.geocode().text(e); return t && o.key(t), o.maxLocations(this.options.maxResults), s && o.within(s), this.options.forStorage && o.forStorage(!0), this.options.countries && o.countries(this.options.countries), this.options.categories && o.category(this.options.categories), o.run(function (e, t) { i(e, t.results) }, this) } }), x = t.Control.extend({ includes: t.Evented.prototype, options: { position: "topleft", collapseAfterResult: !0, expanded: !1, allowMultipleResults: !0, placeholder: "Search for places or addresses", title: "Location Search" }, initialize: function (e) { t.Util.setOptions(this, e), e && e.providers && e.providers.length || (e || (e = {}), e.providers = [l()]), this._geosearchCore = a(this, e), this._geosearchCore._providers = e.providers, this._geosearchCore.addEventParent(this); for (var s = 0; s < this._geosearchCore._providers.length; s++)this._geosearchCore._providers[s].addEventParent(this); this._geosearchCore._pendingSuggestions = [], t.Control.prototype.initialize.call(this, e) }, _renderSuggestions: function (e) { var s; e.length > 0 && (this._suggestions.style.display = "block"); for (var i, o, r = [], n = 0; n < e.length; n++) { var a = e[n]; if (!o && this._geosearchCore._providers.length > 1 && s !== a.provider.options.label && (o = t.DomUtil.create("div", "geocoder-control-header", a.provider._contentsElement), o.textContent = a.provider.options.label, o.innerText = a.provider.options.label, s = a.provider.options.label), i || (i = t.DomUtil.create("ul", "geocoder-control-list", a.provider._contentsElement)), -1 === r.indexOf(a.text)) { var l = t.DomUtil.create("li", "geocoder-control-suggestion", i); l.innerHTML = a.text, l.provider = a.provider, l["data-magic-key"] = a.magicKey, l.unformattedText = a.unformattedText } else for (var u = 0; u < i.childNodes.length; u++)i.childNodes[u].innerHTML === a.text && (i.childNodes[u]["data-magic-key"] += "," + a.magicKey); r.push(a.text) } this.getPosition().indexOf("top") > -1 && (this._suggestions.style.maxHeight = this._map.getSize().y - this._suggestions.offsetTop - this._wrapper.offsetTop - 10 + "px"), this.getPosition().indexOf("bottom") > -1 && this._setSuggestionsBottomPosition() }, _setSuggestionsBottomPosition: function () { this._suggestions.style.maxHeight = this._map.getSize().y - this._map._controlCorners[this.getPosition()].offsetHeight - this._wrapper.offsetHeight + "px", this._suggestions.style.top = -this._suggestions.offsetHeight - this._wrapper.offsetHeight + 20 + "px" }, _boundsFromResults: function (e) { if (e.length) { for (var s = t.latLngBounds([0, 0], [0, 0]), i = [], o = [], r = e.length - 1; r >= 0; r--) { var n = e[r]; o.push(n.latlng), n.bounds && n.bounds.isValid() && !n.bounds.equals(s) && i.push(n.bounds) } for (var a = t.latLngBounds(o), l = 0; l < i.length; l++)a.extend(i[l]); return a } }, clear: function () { this._clearAllSuggestions(), this.options.collapseAfterResult && (this._input.value = "", this._lastValue = "", this._input.placeholder = "", t.DomUtil.removeClass(this._wrapper, "geocoder-control-expanded")), !this._map.scrollWheelZoom.enabled() && this._map.options.scrollWheelZoom && this._map.scrollWheelZoom.enable() }, _clearAllSuggestions: function () { this._suggestions.style.display = "none"; for (var e = 0; e < this.options.providers.length; e++)this._clearProviderSuggestions(this.options.providers[e]) }, _clearProviderSuggestions: function (e) { e._contentsElement.innerHTML = "" }, _finalizeSuggestions: function (e, s) { e || (t.DomUtil.removeClass(this._input, "geocoder-control-loading"), this.getPosition().indexOf("bottom") > -1 && this._setSuggestionsBottomPosition(), s || this._clearAllSuggestions()) }, _setupClick: function () { t.DomUtil.addClass(this._wrapper, "geocoder-control-expanded"), this._input.focus() }, disable: function () { this._input.disabled = !0, t.DomUtil.addClass(this._input, "geocoder-control-input-disabled"), t.DomEvent.removeListener(this._wrapper, "click", this._setupClick, this) }, enable: function () { this._input.disabled = !1, t.DomUtil.removeClass(this._input, "geocoder-control-input-disabled"), t.DomEvent.addListener(this._wrapper, "click", this._setupClick, this) }, getAttribution: function () { for (var e = [], t = 0; t < this._providers.length; t++)this._providers[t].options.attribution && e.push(this._providers[t].options.attribution); return e.join(", ") }, geocodeSuggestion: function (e) { var t = e.target || e.srcElement; t.classList.contains("geocoder-control-suggestions") || t.classList.contains("geocoder-control-header") || (t.classList.length < 1 && (t = t.parentNode), this._geosearchCore._geocode(t.unformattedText, t["data-magic-key"], t.provider), this.clear()) }, onAdd: function (e) { s.Util.setEsriAttribution(e), this._map = e, this._wrapper = t.DomUtil.create("div", "geocoder-control"), this._input = t.DomUtil.create("input", "geocoder-control-input leaflet-bar", this._wrapper), this._input.title = this.options.title, this.options.expanded && (t.DomUtil.addClass(this._wrapper, "geocoder-control-expanded"), this._input.placeholder = this.options.placeholder), this._suggestions = t.DomUtil.create("div", "geocoder-control-suggestions leaflet-bar", this._wrapper); for (var i = 0; i < this.options.providers.length; i++)this.options.providers[i]._contentsElement = t.DomUtil.create("div", null, this._suggestions); var o = this._geosearchCore._getAttribution(); return e.attributionControl && e.attributionControl.addAttribution(o), t.DomEvent.addListener(this._input, "focus", function (e) { this._input.placeholder = this.options.placeholder, t.DomUtil.addClass(this._wrapper, "geocoder-control-expanded") }, this), t.DomEvent.addListener(this._wrapper, "click", this._setupClick, this), t.DomEvent.addListener(this._suggestions, "mousedown", this.geocodeSuggestion, this), t.DomEvent.addListener(this._input, "blur", function (e) { this.clear() }, this), t.DomEvent.addListener(this._input, "keydown", function (e) { var s = (e.target || e.srcElement).value; t.DomUtil.addClass(this._wrapper, "geocoder-control-expanded"); for (var i, o = this._suggestions.querySelectorAll(".geocoder-control-suggestion"), r = this._suggestions.querySelectorAll(".geocoder-control-selected")[0], n = 0; n < o.length; n++)if (o[n] === r) { i = n; break } switch (e.keyCode) { case 13: r ? (this._input.value = r.innerText, this._geosearchCore._geocode(r.unformattedText, r["data-magic-key"], r.provider), this.clear()) : this.options.allowMultipleResults && s.length >= 2 ? (this._geosearchCore._geocode(this._input.value, void 0), this.clear()) : 1 === o.length ? (t.DomUtil.addClass(o[0], "geocoder-control-selected"), this._geosearchCore._geocode(o[0].innerHTML, o[0]["data-magic-key"], o[0].provider)) : (this.clear(), this._input.blur()), t.DomEvent.preventDefault(e); break; case 38: r && t.DomUtil.removeClass(r, "geocoder-control-selected"); var a = o[i - 1]; r && a ? t.DomUtil.addClass(a, "geocoder-control-selected") : t.DomUtil.addClass(o[o.length - 1], "geocoder-control-selected"), t.DomEvent.preventDefault(e); break; case 40: r && t.DomUtil.removeClass(r, "geocoder-control-selected"); var l = o[i + 1]; r && l ? t.DomUtil.addClass(l, "geocoder-control-selected") : t.DomUtil.addClass(o[0], "geocoder-control-selected"), t.DomEvent.preventDefault(e); break; default: for (var u = 0; u < this._geosearchCore._pendingSuggestions.length; u++) { var h = this._geosearchCore._pendingSuggestions[u]; h && h.abort && !h.id && h.abort() } } }, this), t.DomEvent.addListener(this._input, "keyup", t.Util.throttle(function (e) { var s = e.which || e.keyCode, i = (e.target || e.srcElement).value; return i.length < 2 ? (this._lastValue = this._input.value, this._clearAllSuggestions(), void t.DomUtil.removeClass(this._input, "geocoder-control-loading")) : 27 === s ? void this._clearAllSuggestions() : void (13 !== s && 38 !== s && 40 !== s && this._input.value !== this._lastValue && (this._lastValue = this._input.value, t.DomUtil.addClass(this._input, "geocoder-control-loading"), this._geosearchCore._suggest(i))) }, 50, this), this), t.DomEvent.disableClickPropagation(this._wrapper), t.DomEvent.addListener(this._suggestions, "mouseover", function (t) { e.scrollWheelZoom.enabled() && e.options.scrollWheelZoom && e.scrollWheelZoom.disable() }), t.DomEvent.addListener(this._suggestions, "mouseout", function (t) { !e.scrollWheelZoom.enabled() && e.options.scrollWheelZoom && e.scrollWheelZoom.enable() }), this._geosearchCore.on("load", function (e) { t.DomUtil.removeClass(this._input, "geocoder-control-loading"), this.clear(), this._input.blur() }, this), this._wrapper } }), b = s.FeatureLayerService.extend({ options: { label: "Feature Layer", maxResults: 5, bufferRadius: 1e3, formatSuggestion: function (e) { return e.properties[this.options.searchFields[0]] } }, initialize: function (e) { s.FeatureLayerService.prototype.initialize.call(this, e), "string" == typeof this.options.searchFields && (this.options.searchFields = [this.options.searchFields]), this._suggestionsQuery = this.query(), this._resultsQuery = this.query() }, suggestions: function (e, t, s) { var i = this._suggestionsQuery.where(this._buildQuery(e)).returnGeometry(!1); return t && i.intersects(t), this.options.idField && i.fields([this.options.idField].concat(this.options.searchFields)), i.run(function (e, t, i) { if (e) s(e, []); else { this.options.idField = i.objectIdFieldName; for (var o = [], r = t.features.length - 1; r >= 0; r--) { var n = t.features[r]; o.push({ text: this.options.formatSuggestion.call(this, n), unformattedText: n.properties[this.options.searchFields[0]], magicKey: n.id }) } s(e, o.slice(0, this.options.maxResults)) } }, this) }, results: function (e, s, i, o) { var r = this._resultsQuery; return s ? (delete r.params.where, r.featureIds([s])) : r.where(this._buildQuery(e)), i && r.within(i), r.run(t.Util.bind(function (e, t) { for (var s = [], i = 0; i < t.features.length; i++) { var r = t.features[i]; if (r) { var n = this._featureBounds(r), a = { latlng: n.getCenter(), bounds: n, text: this.options.formatSuggestion.call(this, r), properties: r.properties, geojson: r }; s.push(a), delete this._resultsQuery.params.objectIds } } o(e, s) }, this)) }, orderBy: function (e, t) { this._suggestionsQuery.orderBy(e, t) }, _buildQuery: function (e) { for (var t = [], s = this.options.searchFields.length - 1; s >= 0; s--) { var i = 'upper("' + this.options.searchFields[s] + '")'; t.push(i + " LIKE upper('%" + e + "%')") } return this.options.where ? this.options.where + " AND (" + t.join(" OR ") + ")" : t.join(" OR ") }, _featureBounds: function (e) { var s = t.geoJson(e); if ("Point" === e.geometry.type) { var i = s.getBounds().getCenter(), o = this.options.bufferRadius / 40075017 * 360 / Math.cos(180 / Math.PI * i.lat), r = this.options.bufferRadius / 40075017 * 360; return t.latLngBounds([i.lat - r, i.lng - o], [i.lat + r, i.lng + o]) } return s.getBounds() } }), S = s.MapService.extend({ options: { layers: [0], label: "Map Service", bufferRadius: 1e3, maxResults: 5, formatSuggestion: function (e) { return e.properties[e.displayFieldName] + " <small>" + e.layerName + "</small>" } }, initialize: function (e) { s.MapService.prototype.initialize.call(this, e), this._getIdFields() }, suggestions: function (e, t, s) { return this.find().text(e).fields(this.options.searchFields).returnGeometry(!1).layers(this.options.layers).run(function (e, t, i) { var o = []; if (!e) { var r = Math.min(this.options.maxResults, t.features.length); i.results = i.results.reverse(); for (var n = 0; n < r; n++) { var a = t.features[n], l = i.results[n], u = l.layerId, h = this._idFields[u]; a.layerId = u, a.layerName = this._layerNames[u], a.displayFieldName = this._displayFields[u], h && o.push({ text: this.options.formatSuggestion.call(this, a), unformattedText: a.properties[a.displayFieldName], magicKey: l.attributes[h] + ":" + u }) } } s(e, o.reverse()) }, this) }, results: function (e, t, s, i) { var o, r = []; if (t) { var n = t.split(":")[0], a = t.split(":")[1]; o = this.query().layer(a).featureIds(n) } else o = this.find().text(e).fields(this.options.searchFields).layers(this.options.layers); return o.run(function (e, t, s) { if (!e) { s.results && (s.results = s.results.reverse()); for (var o = 0; o < t.features.length; o++) { var n = t.features[o]; if (a = a || s.results[o].layerId, n && void 0 !== a) { var l = this._featureBounds(n); n.layerId = a, n.layerName = this._layerNames[a], n.displayFieldName = this._displayFields[a]; var u = { latlng: l.getCenter(), bounds: l, text: this.options.formatSuggestion.call(this, n), properties: n.properties, geojson: n }; r.push(u) } } } i(e, r.reverse()) }, this) }, _featureBounds: function (e) { var s = t.geoJson(e); if ("Point" === e.geometry.type) { var i = s.getBounds().getCenter(), o = this.options.bufferRadius / 40075017 * 360 / Math.cos(180 / Math.PI * i.lat), r = this.options.bufferRadius / 40075017 * 360; return t.latLngBounds([i.lat - r, i.lng - o], [i.lat + r, i.lng + o]) } return s.getBounds() }, _layerMetadataCallback: function (e) { return t.Util.bind(function (t, s) { if (!t) { this._displayFields[e] = s.displayField, this._layerNames[e] = s.name; for (var i = 0; i < s.fields.length; i++) { var o = s.fields[i]; if ("esriFieldTypeOID" === o.type) { this._idFields[e] = o.name; break } } } }, this) }, _getIdFields: function () { this._idFields = {}, this._displayFields = {}, this._layerNames = {}; for (var e = 0; e < this.options.layers.length; e++) { var t = this.options.layers[e]; this.get(t, {}, this._layerMetadataCallback(t)) } } }), C = _.extend({ options: { label: "Geocode Server", maxResults: 5 }, suggestions: function (e, t, s) { if (this.options.supportsSuggest) { var i = this.suggest().text(e); return t && i.within(t), i.run(function (e, t, i) { var o = []; if (!e) for (; i.suggestions.length && o.length <= this.options.maxResults - 1;) { var r = i.suggestions.shift(); r.isCollection || o.push({ text: r.text, unformattedText: r.text, magicKey: r.magicKey }) } s(e, o) }, this) } return s(void 0, []), !1 }, results: function (e, t, s, i) { var o = this.geocode().text(e); return t && o.key(t), o.maxLocations(this.options.maxResults), s && o.within(s), o.run(function (e, t) { i(e, t.results) }, this) } }); e.VERSION = "2.3.2", e.Geocode = p, e.geocode = i, e.ReverseGeocode = f, e.reverseGeocode = o, e.Suggest = v, e.suggest = r, e.GeocodeService = _, e.geocodeService = n, e.Geosearch = x, e.geosearch = u, e.GeosearchCore = m, e.geosearchCore = a, e.ArcgisOnlineProvider = y, e.arcgisOnlineProvider = l, e.FeatureLayerProvider = b, e.featureLayerProvider = h, e.MapServiceProvider = S, e.mapServiceProvider = d, e.GeocodeServiceProvider = C, e.geocodeServiceProvider = c, e.WorldGeocodingServiceUrl = g, Object.defineProperty(e, "__esModule", { value: !0 }) }); //# sourceMappingURL=esri-leaflet-geocoder.js.map </script> <script> var lat, lng, intitZoom; lat =45; lng= 60; initZoom = 7; var mapElem = document.getElementById('map_canvas'); var map = L.map('map_canvas', { minZoom: 2, maxZoom: 15, fullscreenControl: true, maxBounds:L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)), maxBoundsViscosity: 1.0 }); map.setView([lat, lng], initZoom); var elev = document.getElementById('elev').value; //L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { // attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' //}).addTo(map); var layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); var layerLabels; document .querySelector('#basemaps') .addEventListener('change', function (e) { //$('#myModal').modal(); //e.target.value = 'OpenStreetMap'; var basemap = e.target.value; setBasemap(basemap); }); var isColorFloodMap; var fmTileUrl = '/getFMTile.ashx?x={x}&y={y}&z={z}&e='; var floodLayer = L.tileLayer(fmTileUrl + elev, { attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="https://www.mapzen.com/rights">Mapzen</a>, <a href = "https://www.mapzen.com/rights/#services-and-data-sources">Others</a>', opacity: 0.5 }) var searchControl = L.esri.Geocoding.geosearch({ useMapBounds: 20, expanded:true }).addTo(map); var resultsL = L.layerGroup().addTo(map); var marker; searchControl.on('results', function (data) { /* results.clearLayers(); for (var i = data.results.length - 1; i >= 0; i--) { ga('send', 'event', 'Location', 'locsearch'); addMarker(data.results[i].latlng); } */ data = null; $('#myModal').modal(); }); function addMarker(point) { if (marker != undefined) { map.removeLayer(marker); }; point = L.latLng(Math.round(point.lat * 1000000) / 1000000, Math.round(point.lng * 1000000) / 1000000); marker = L.marker(point); resultsL.addLayer(marker); var popup = L.popup(); popup.setContent('<b>Please Wait!</b><br>Getting Elevation Information...'); marker.bindPopup(popup); marker.openPopup(); getElevation(popup, point); } // `fullscreenchange` Event that's fired when entering or exiting fullscreen. map.on('fullscreenchange', function () { if (map.isFullscreen()) { map.toggleFullscreen(); $('#myModal').modal(); } }); function getElevation(popup, point) { vZoom = map.getZoom(); $.getJSON('/pro/elevationmap/getelevation.ashx?lat=' + point.lat + '&lon=' + point.lng + '&zoom=' + vZoom, function (data) { var popupHtml = "<b>Latitude: " + point.lat + "<br>Longitude: " + point.lng + "</b><br>" + "<p id='elevContent' style='padding-bottom:0px;'>" + getElevContent(data.value) + "</p>"; popElev = data.value; ga('send', 'event', 'Elevation', 'elevfound'); popupHtml = popupHtml + "<br><br><a style='font-size:1.2em;' target='_blank' href = '/3DFloodMap/' >👉 <b>View in 3D</b></a >"; popup.setContent(popupHtml); }); } map.on("click", function (e) { ga('send', 'event', 'Location', 'locclick'); addMarker(e.latlng); }) map.on("zoom", function (e) { updateLink(); }) map.on("move", function (e) { updateLink(); }) setElev(51,false); function setElev(elevS, event=true) { if (isNaN(elevS)) { alert("Please enter only numeric value!"); return; } elevS = Math.round(elevS); document.getElementById("elev").value = elevS; elev = elevS; updateLink(); //infowindow.close(); refresh(); if (event) ga('send', 'event', 'Elevation', 'setelev'); } function refresh() { //map.overlayMapTypes.setAt(0, floodMapType); document.getElementById("curElev").innerHTML = elev; if (isColorFloodMap) AddColorFloodMap(); else floodLayer.setUrl(fmTileUrl + elev); } function getElevContent(elevValue) { var elevContent = ""; resultElevation = Math.round(elevValue); if (!isElevMap) { if (elev > elevValue) elevContent = elevContent + "<span style='color:red'><b>Probable Water Level:" + Math.round(elev - elevValue) + " meters.</b></span>"; else if (elevValue - elev <= 5) elevContent = elevContent + "<span style='color:orange'><b>Above Water Level:" + Math.round(elevValue - elev) + " meters.</b></span>"; else if (elevValue - elev > 5) elevContent = elevContent + "<span style='color:green'><b>Above Water Level:" + Math.round(elevValue - elev) + " meters.</b></span>"; } elevContent = elevContent + "<br><b>Elevation: <span style='font-size:1.2em;'><span class='badge' style='background-color:#337ab7;'>" + Math.round(elevValue) + "</span></span> meters</b>"; if (!isElevMap) { //elevContent = elevContent + " + <b><input id='addElev' type='text' value='0' style='width:20px' /></b > <br><input type='button' onclick='$(\"#myModal\").modal()' value='Set Water Level' /><br />"; elevContent = elevContent + " + <b><input id='addElev' type='text' value='0' style='width:20px' /></b > <br><input type='button' onclick='setElev(" + Math.round(elevValue) + " + parseInt(document.getElementById(\"addElev\").value),true)' value='Set Water Level' /><br />"; } return elevContent; } function getElevContentOld(elevValue) { var elevContent = ""; resultElevation = Math.round(elevValue); if (elev > elevValue) elevContent = elevContent + "<span style='color:red'><b>Probable Water Level:" + Math.round(elev - elevValue) + " meters.</b></span>"; else if (elevValue - elev <= 5) elevContent = elevContent + "<span style='color:orange'><b>Above Water Level:" + Math.round(elevValue - elev) + " meters.</b></span>"; else if (elevValue - elev > 5) elevContent = elevContent + "<span style='color:green'><b>Above Water Level:" + Math.round(elevValue - elev) + " meters.</b></span>"; elevContent = elevContent + "<br><b>Elevation: <span style='font-size:1.2em;'>" + Math.round(elevValue) + "</span> meters + <input id='addElev' type='text' value='0' style='width:20px'/></b><br><input type='button' onclick='$(\"#myModal\").modal()' value='Set Water Level'/><br/>"; return elevContent; } function updateLink() { center = map.getCenter(); var lngUrl = ""; document.getElementById("link").value = "https://www.floodmap.net/" + lngUrl + "?ll=" + Math.round(center.lat * 1000000) / 1000000 + "," + Math.round(center.lng * 1000000) / 1000000 + "&z=" + map.getZoom() + "&e=" + elev; } function setBasemap(basemap) { if (basemap === 'OpenStreetMap') { if (layer) { map.removeLayer(layer); } layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); if (!isColorFloodMap) floodLayer.bringToFront(); } else if (basemap === 'OpenTopoMap') { if (layer) { map.removeLayer(layer); } layer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { attribution: ' SRTM | Base Map: © <a href="http://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)' }).addTo(map); if (!isColorFloodMap) floodLayer.bringToFront(); } else { $('#myModal').modal(); } } //Color FloodMap var colFloodMap; var isElevMap; var isSea = "false"; var oldColMapLayers = new Array(); var isShowMap = true; var colorMapTimeout; var colorpal = "blue"; switchToFloodMap(); $('input[type=radio][name=floodmap]').change(function () { if (this.value == 'floodmap') { $('#previewbox').hide(); $('#setElev').show(); $('#clickOnLabel').html('<b><span style="color: orange; ">Click on the Map</span> to get/set the flood water level at the location.</b>'); isElevMap = false switchToFloodMap(); } else if (this.value == 'colfloodmap') { ga('send', 'event', 'Pro', 'colFMRadio'); $('#previewbox').show(); $('#setElev').show(); $('#clickOnLabel').html('<b><span style="color: orange; ">Click on the Map</span> to get/set the flood water level at the location.</b>'); isElevMap = false switchToColorFloodMap(); } else if (this.value == 'colelevmap') { ga('send', 'event', 'Pro', 'colElevRadio'); $('#previewbox').show(); $('#setElev').hide(); $('#clickOnLabel').html('<b><span style="color: orange; ">Click on the Map</span> to get the Elevation at the location.</b>'); isElevMap = true switchToColorFloodMap(); } }); function switchToFloodMap() { $('#colOpt').hide(); isColorFloodMap = false; map.options.maxZoom = 22; colorpal = "blue"; //$('#mapPanel').removeClass("col-md-9").addClass("col-md-12"); //$('#colPanel').hide(); //map.invalidateSize(); if (map.hasLayer(colorWait)) { map.removeLayer(colorWait); } floodLayer.setUrl(fmTileUrl + elev); map.addLayer(floodLayer); try { var arrayLength = oldColMapLayers.length; for (var i = 0; i < arrayLength; i++) { if (map.hasLayer(oldColMapLayers[i])) { map.removeLayer(oldColMapLayers[i]); } oldColMapLayers = []; } } catch (e) { } } function switchToColorFloodMap() { isColorFloodMap = true; if (map.getZoom() > 15) map.setZoom(15); map.options.maxZoom = 15; //$('#mapPanel').removeClass("col-md-12").addClass("col-md-9"); //$('#colPanel').show(); //map.invalidateSize() if (elev <= -1 && !isElevMap) { $('#seaChk').prop('checked', true); isSea = "true"; } colorpal = $('input[name="colorpal"]:checked').val(); AddColorFloodMap(); if (map.hasLayer(floodLayer)) map.removeLayer(floodLayer); $('#colOpt').show(); } $('#seaChk').change(function () { if (this.checked) isSea = "true"; else isSea = "false"; switchToColorFloodMap(); }); $('input[type=radio][name=colorpal]').change(function () { colorpal = this.value; switchToColorFloodMap(); }); var waitIcon = L.icon({ iconUrl: '/img/colorwait.gif', iconSize: [40, 40], // size of the icon iconAnchor: [20, 20], // point of the icon which will correspond to marker's location }); var colorWait = new L.marker(map.getCenter(), { icon: waitIcon, clickable: false }); map.on('move', function (e) { colorWait.setLatLng(map.getCenter()); }); var colorwaitTimeout, retryTimeout; function AddColorFloodMap() { if (colorMapTimeout) clearTimeout(colorMapTimeout); if (isShowMap) { isShowMap = false; var cen = map.getCenter(); var zm = map.getZoom(); var rect = mapElem.getBoundingClientRect(); var imgBounds = map.getBounds(); if (!isElevMap) colFloodMap = new L.ImageOverlay('/pro/floodmapresult/GetFloodMap.ashx?lat=' + cen.lat + '&lon=' + cen.lng + '&zoom=' + zm + '&width=' + rect.width + '&height=' + rect.height + '&p=1&colorpal=' + colorpal + '&sea=' + isSea + '&slippy=true&floodelv=' + elev, imgBounds); else colFloodMap = new L.ImageOverlay('/pro/elevationmap/getMap.ashx?lat=' + cen.lat + '&lon=' + cen.lng + '&zoom=' + zm + '&width=' + rect.width + '&height=' + rect.height + '&p=1&colorpal=' + colorpal + '&sea=' + isSea + '&slippy=true', imgBounds); retryTimeout = setTimeout(function () { if (colorwaitTimeout) clearTimeout(colorwaitTimeout); if (map.hasLayer(colorWait)) { map.removeLayer(colorWait); } try { var arrayLength = oldColMapLayers.length; for (var i = 0; i < arrayLength; i++) { if (map.hasLayer(oldColMapLayers[i])) { map.removeLayer(oldColMapLayers[i]); } oldColMapLayers = []; } } catch (e) { } oldColMapLayers.push(colFloodMap); isShowMap = true; if (!isColorFloodMap) { switchToFloodMap(); return; } AddColorFloodMap(); }, 10000); colFloodMap.on('load', function colorMapLoad() { if (retryTimeout) clearTimeout(retryTimeout); if (colorwaitTimeout) clearTimeout(colorwaitTimeout); if (map.hasLayer(colorWait)) { map.removeLayer(colorWait); } try { var arrayLength = oldColMapLayers.length; for (var i = 0; i < arrayLength; i++) { if (map.hasLayer(oldColMapLayers[i])) { map.removeLayer(oldColMapLayers[i]); } oldColMapLayers = []; } } catch (e) { } oldColMapLayers.push(colFloodMap); isShowMap = true; if (!isColorFloodMap) { switchToFloodMap(); return; } var newCen = map.getCenter(); if (!(cen.lat == newCen.lat && cen.lng == newCen.lng && zm == map.getZoom())) AddColorFloodMap(); }); colFloodMap.on('error', function () { if (retryTimeout) clearTimeout(retryTimeout); if (colorwaitTimeout) clearTimeout(colorwaitTimeout); if (map.hasLayer(colorWait)) { map.removeLayer(colorWait); } try { var arrayLength = oldColMapLayers.length; for (var i = 0; i < arrayLength; i++) { if (map.hasLayer(oldColMapLayers[i])) { map.removeLayer(oldColMapLayers[i]); } oldColMapLayers = []; } } catch (e) { } oldColMapLayers.push(colFloodMap); isShowMap = true; if (!isColorFloodMap) { switchToFloodMap(); return; } AddColorFloodMap(); }); colFloodMap.addTo(map); colorwaitTimeout = setTimeout(function () { colorWait.addTo(map); }, 1500); } } var showImage = true; var zoomstart = false; map.on('zoomend', function () { if (isColorFloodMap) { if (colorMapTimeout) clearTimeout(colorMapTimeout); colorMapTimeout = setTimeout(function () { AddColorFloodMap(); }, 1000); } }); map.on("moveend", function (e) { if (isColorFloodMap) { if (colorMapTimeout) clearTimeout(colorMapTimeout); AddColorFloodMap(); } }) </script> </script> <script type="application/javascript" src="https://sdki.truepush.com/sdk/v2.0.2/app.js" async></script> <script> var truepush = window.truepush || []; truepush.push(function () { truepush.Init({ id: "5f1a712a8cf1e2671f4d75f7" }, function (error) { if (error) console.error(error); }) }) </script> <!-- Check member address update --> <div class="modal fade" id="modalNoAddress" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-bottom:60px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" >⚠️ Update Your Billing Address Now</h4> </div> <div class="modal-body" style="font-size:1.2em;color:#337ab7;"> <div class="panel panel-primary" style="font-size:1.2em;border-width:4px;border-color:crimson;"> <div class="panel-body"> <ul style="color:black;"> <li>Our payment provider needs your Billing Address to process your Card Payment at the end of your 7 days trial.</li> <li>Otherwise your payment will fail and you will not be able to access FloodMap Pro after your trial ends.</li> </ul> 👉 <a style="text-decoration:underline;" href="https://members.floodmap.net/member/account/edit">Click here to update your Billing Address now</a> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="modalNoAddressCardFail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-bottom:60px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">⚠️ Update Your Billing Address Now</h4> </div> <div class="modal-body" style="font-size:1.2em;color:#337ab7;"> <div class="panel panel-primary" style="font-size:1.2em;border-width:4px;border-color:crimson;"> <div class="panel-body"> <ul style="color:black;"> <li>Your Card payment failed due to Billing Address unavailability.</li> <li>Our payment provider needs your Billing Address to retry your Card Payment.</li> <li>Otherwise you will not be able to access FloodMap Pro.</li> </ul> 👉 <a href="https://members.floodmap.net/member/account/edit">Click here to update your Billing Address now</a> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Elevation Map Generator Promo --> <div class="modal fade" id="myModalEMG" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-bottom:60px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Elevation Map Generator</h4> </div> <div class="modal-body" style="font-size:1em;color:#337ab7;"> <h3><b>Elevation Map Generator</b></h3> <div class="panel panel-primary" style="font-size:1.2em;border-width:4px;border-color:crimson;"> <div class="panel-body" style="color:black;"> <span style="font-size:1.2em; color:crimson;text-align:center;" ><b>FloodMap Pro</b></span><br /> <span style="font-size:1.2em;text-align:center;color:black;"><b>Only $9/mo </b></span><br /> Now FloodMap Pro has <span style="font-size:1.2em; color:crimson;text-align:center;" ><b>Elevation Map Generator</b></span> <br />👉 Select Location, Zoom and Map Size<br> 👉 Higher Resolution and Large Size<br> <img class="img-responsive" src="/img/elevmapad.png"><br> <a style="text-align:center;" href="https://members.floodmap.net/member/plans/f54d573b7e" class="btn btn-success btn-lg active" role="button" aria-pressed="true"><b>Start your 7 day trial</b></a><br /> <span>💡 Your card will be charged after your 7 days trial ends. But if you cancel the plan before your 7 days trial ends, your card will not be charged.</span><br /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Elevation Map Generator Promo --> <div class="modal fade" id="myModalFMG" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-bottom:60px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Generate Color Flood Map</h4> </div> <div class="modal-body" style="font-size:1em;color:#337ab7;"> <h3><b>Generate Color Flood Map</b></h3> <div class="panel panel-primary" style="font-size:1.2em;border-width:4px;border-color:crimson;"> <div class="panel-body" style="color:black;"> <span style="font-size:1.2em; color:crimson;text-align:center;" ><b>FloodMap Pro</b></span><br /> <span style="font-size:1.2em;text-align:center;color:black;"><b>Only $9/mo </b></span><br /> <span style="font-size:1.2em; color:crimson;text-align:center;" ><b>Now Generate Color Coded Flood Map</b></span> <br />👉 Select Color Palette and Map Size<br> 👉 Color Coded Depth Analysis Map<br> <img class="img-responsive" src="/img/fmgad.png"><br> <a style="text-align:center;" href="https://members.floodmap.net/member/plans/f54d573b7e" class="btn btn-success btn-lg active" role="button" aria-pressed="true">Start your 7 day trial</a><br /> <span>💡 Your card will be charged after your 7 days trial ends. But if you cancel the plan before your 7 days trial ends, your card will not be charged.</span><br /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>