ecomp-sdk-app/src/main/webapp/WEB-INF/jsp/leafletMap.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal SDK
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   --%>
  20 <!DOCTYPE html>
  21
  22 <html>
  23 <head>
  24
  25     <meta charset="UTF-8">
  26
  27     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  28     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  29     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  30
  31     <style>
  32         #map {
  33             height: 450px;
  34             width: 800px;
  35         }
  36         .animateOff {
  37             color: red;
  38         }
  39         .animateOn {
  40             color: green;
  41         }
  42     </style>
  43
  44     <script>
  45
  46     var siteData = [
  47                 {"id": "cb1ma", "name": "Cambridge, MA", "title": "100G", "lat": 42.3736, "lon": -71.11},
  48                 {"id": "st6wa", "name": "Seattle, WA", "title": "40G", "lat": 47.6097, "lon": -122.33},
  49                 {"id": "cgcil", "name": "Chicago, IL", "title": "310G", "lat": 41.8819, "lon": -87.627},
  50                 {"id": "n54ny", "name": "New York, NY", "title": "160G", "lat": 40.7127, "lon": -74.005},
  51                 {"id": "cl2oh", "name": "Columbus, OH", "title": "300G", "lat": 39.9833, "lon": -82.983},
  52                 {"id": "phlpa", "name": "Philadelphia, PA", "title": "210G", "lat": 39.95, "lon": -75.166},
  53                 {"id": "ptdor", "name": "Portland, OR", "title": "90G", "lat": 45.52, "lon": -122.68},
  54                 {"id": "dvmco", "name": "Denver, CO", "title": "170G", "lat": 39.7391, "lon": -104.98},
  55                 {"id": "kc9mo", "name": "Kansas City, MO", "title": "100G", "lat": 39.0997, "lon": -94.578},
  56                 {"id": "sffca", "name": "San Fransisco, CA", "title": "130G", "lat": 37.7833, "lon": -122.41},
  57                 {"id": "sl9mo", "name": "St Louis, MO", "title": "330G", "lat": 38.6272, "lon": -90.197},
  58                 {"id": "wswdc", "name": "Washington, DC", "title": "210G", "lat": 38.8951, "lon": -77.036},
  59                 {"id": "sc1ca", "name": "Sacramento, CA", "title": "250G", "lat": 38.5555, "lon": -121.46},
  60                 {"id": "slkut", "name": "Salt Lake City, UT", "title": "250G", "lat": 40.75, "lon": -111.88},
  61                 {"id": "rlgnc", "name": "Raleigh, NC", "title": "180G", "lat": 35.8188, "lon": -78.644},
  62                 {"id": "nsvtn", "name": "Nashville, TN", "title": "210G", "lat": 36.1666, "lon": -86.783},
  63                 {"id": "la2ca", "name": "Los Angeles, CA", "title": "180G", "lat": 34.05, "lon": -118.25},
  64                 {"id": "dlstx", "name": "Dallas, TX", "title": "330G", "lat": 32.7758, "lon": -96.796},
  65                 {"id": "attga", "name": "Atlanta, GA", "title": "280G", "lat": 33.755, "lon": -84.39},
  66                 {"id": "nwrla", "name": "New Orleans, LA", "title": "180G", "lat": 29.9647, "lon": -90.07},
  67                 {"id": "sd2ca", "name": "San Diego, CA", "title": "150G", "lat": 32.715, "lon": -117.16},
  68                 {"id": "phmaz", "name": "Phoenix, AZ", "title": "210G", "lat": 33.45, "lon": -112.06},
  69                 {"id": "santx", "name": "San Antonio, TX", "title": "220G", "lat": 29.4166, "lon": -98.5},
  70                 {"id": "hs1tx", "name": "Houston, TX", "title": "290G", "lat": 29.7627, "lon": -95.383},
  71                 {"id": "ormfl", "name": "Orlando, FL", "title": "130G", "lat": 28.4158, "lon": -81.298},
  72         ];
  73
  74     var pipeData = [
  75         {"id_a": "st6wa", "id_z": "ptdor", "name": "Seattle, WA to Portland, OR", "title": "60G", "lat_a": 47.6097, "lon_a": -122.33, "lat_z": 45.52, "lon_z": -122.68},
  76         {"id_a": "sc1ca", "id_z": "slkut", "name": "Sacramento, CA to Salt Lake City, UT", "title": "200G", "lat_a": 38.5555, "lon_a": -121.46, "lat_z": 40.75, "lon_z": -111.88},
  77         {"id_a": "hs1tx", "id_z": "ormfl", "name": "Houston, TX to Orlando, FL", "title": "130G", "lat_a": 29.7627, "lon_a": -95.383, "lat_z": 28.4158, "lon_z": -81.298},
  78         {"id_a": "nwrla", "id_z": "ormfl", "name": "New Orleans, LA to Orlando, FL", "title": "90G", "lat_a": 29.9647, "lon_a": -90.07, "lat_z": 28.4158, "lon_z": -81.298},
  79         {"id_a": "n54ny", "id_z": "phlpa", "name": "New York, NY to Philadelphia, PA", "title": "240G", "lat_a": 40.7127, "lon_a": -74.005, "lat_z": 39.95, "lon_z": -75.166},
  80         {"id_a": "n54ny", "id_z": "wswdc", "name": "New York, NY to Washington, DC", "title": "380G", "lat_a": 40.7127, "lon_a": -74.005, "lat_z": 38.8951, "lon_z": -77.036},
  81         {"id_a": "rlgnc", "id_z": "attga", "name": "Raleigh, NC to Atlanta, GA", "title": "160G", "lat_a": 35.8188, "lon_a": -78.644, "lat_z": 33.755, "lon_z": -84.39},
  82 //      {"id_a": "st6wa", "id_z": "sffca", "name": "Seattle, WA to San Fransisco, CA", "title": "40G", "lat_a": 47.6097, "lon_a": -122.33, "lat_z": 37.7833, "lon_z": -122.41},
  83         {"id_a": "la2ca", "id_z": "sd2ca", "name": "Los Angeles, CA to San Diego, CA", "title": "160G", "lat_a": 34.05, "lon_a": -118.25, "lat_z": 32.715, "lon_z": -117.16},
  84         {"id_a": "sd2ca", "id_z": "phmaz", "name": "San Diego, CA to Phoenix, AZ", "title": "200G", "lat_a": 32.715, "lon_a": -117.16, "lat_z": 33.45, "lon_z": -112.06},
  85         {"id_a": "ptdor", "id_z": "sffca", "name": "Portland, OR to San Fransisco, CA", "title": "70G", "lat_a": 45.52, "lon_a": -122.68, "lat_z": 37.7833, "lon_z": -122.41},
  86         {"id_a": "sffca", "id_z": "sc1ca", "name": "San Fransisco, CA to Sacramento, CA", "title": "80G", "lat_a": 37.7833, "lon_a": -122.41, "lat_z": 38.5555, "lon_z": -121.46},
  87         {"id_a": "la2ca", "id_z": "slkut", "name": "Los Angeles, CA to Salt Lake City, UT", "title": "200G", "lat_a": 34.05, "lon_a": -118.25, "lat_z": 40.75, "lon_z": -111.88},
  88         {"id_a": "cgcil", "id_z": "cl2oh", "name": "Chicago, IL to Columbus, OH", "title": "200G", "lat_a": 41.8819, "lon_a": -87.627, "lat_z": 39.9833, "lon_z": -82.983},
  89         {"id_a": "cl2oh", "id_z": "phlpa", "name": "Columbus, OH to Philadelphia, PA", "title": "240G", "lat_a": 39.9833, "lon_a": -82.983, "lat_z": 39.95, "lon_z": -75.166},
  90         {"id_a": "phlpa", "id_z": "wswdc", "name": "Philadelphia, PA to Washington, DC", "title": "240G", "lat_a": 39.95, "lon_a": -75.166, "lat_z": 38.8951, "lon_z": -77.036},
  91         {"id_a": "sffca", "id_z": "la2ca", "name": "San Fransisco, CA to Los Angeles, CA", "title": "280G", "lat_a": 37.7833, "lon_a": -122.41, "lat_z": 34.05, "lon_z": -118.25},
  92         {"id_a": "dvmco", "id_z": "cgcil", "name": "Denver, CO to Chicago, IL", "title": "200G", "lat_a": 39.7391, "lon_a": -104.98, "lat_z": 41.8819, "lon_z": -87.627},
  93         {"id_a": "dlstx", "id_z": "hs1tx", "name": "Dallas, TX to Houston, TX", "title": "360G", "lat_a": 32.7758, "lon_a": -96.796, "lat_z": 29.7627, "lon_z": -95.383},
  94         {"id_a": "nsvtn", "id_z": "cl2oh", "name": "Nashville, TN to Columbus, OH", "title": "200G", "lat_a": 36.1666, "lon_a": -86.783, "lat_z": 39.9833, "lon_z": -82.983},
  95         {"id_a": "cb1ma", "id_z": "phlpa", "name": "Cambridge, MA to Philadelphia, PA", "title": "110G", "lat_a": 42.3736, "lon_a": -71.11, "lat_z": 39.95, "lon_z": -75.166},
  96 //      {"id_a": "sffca", "id_z": "cgcil", "name": "San Fransisco, CA to Chicago, IL", "title": "170G", "lat_a": 37.7833, "lon_a": -122.41, "lat_z": 41.8819, "lon_z": -87.627},
  97         {"id_a": "sffca", "id_z": "dvmco", "name": "San Fransisco, CA to Denver, CO", "title": "90G", "lat_a": 37.7833, "lon_a": -122.41, "lat_z": 39.7391, "lon_z": -104.98},
  98         {"id_a": "sffca", "id_z": "sl9mo", "name": "San Fransisco, CA to St Louis, MO", "title": "80G", "lat_a": 37.7833, "lon_a": -122.41, "lat_z": 38.6272, "lon_z": -90.197},
  99         {"id_a": "santx", "id_z": "dlstx", "name": "San Antonio, TX to Dallas, TX", "title": "180G", "lat_a": 29.4166, "lon_a": -98.5, "lat_z": 32.7758, "lon_z": -96.796},
 100         {"id_a": "santx", "id_z": "hs1tx", "name": "San Antonio, TX to Houston, TX", "title": "240G", "lat_a": 29.4166, "lon_a": -98.5, "lat_z": 29.7627, "lon_z": -95.383},
 101         {"id_a": "sl9mo", "id_z": "wswdc", "name": "St Louis, MO to Washington, DC", "title": "280G", "lat_a": 38.6272, "lon_a": -90.197, "lat_z": 38.8951, "lon_z": -77.036},
 102         {"id_a": "nwrla", "id_z": "attga", "name": "New Orleans, LA to Atlanta, GA", "title": "200G", "lat_a": 29.9647, "lon_a": -90.07, "lat_z": 33.755, "lon_z": -84.39},
 103         {"id_a": "la2ca", "id_z": "dlstx", "name": "Los Angeles, CA to Dallas, TX", "title": "280G", "lat_a": 34.05, "lon_a": -118.25, "lat_z": 32.7758, "lon_z": -96.796},
 104         {"id_a": "slkut", "id_z": "dvmco", "name": "Salt Lake City, UT to Denver, CO", "title": "200G", "lat_a": 40.75, "lon_a": -111.88, "lat_z": 39.7391, "lon_z": -104.98},
 105         {"id_a": "dvmco", "id_z": "dlstx", "name": "Denver, CO to Dallas, TX", "title": "200G", "lat_a": 39.7391, "lon_a": -104.98, "lat_z": 32.7758, "lon_z": -96.796},
 106         {"id_a": "kc9mo", "id_z": "sl9mo", "name": "Kansas City, MO to St Louis, MO", "title": "280G", "lat_a": 39.0997, "lon_a": -94.578, "lat_z": 38.6272, "lon_z": -90.197},
 107         {"id_a": "kc9mo", "id_z": "dlstx", "name": "Kansas City, MO to Dallas, TX", "title": "280G", "lat_a": 39.0997, "lon_a": -94.578, "lat_z": 32.7758, "lon_z": -96.796},
 108         {"id_a": "cgcil", "id_z": "wswdc", "name": "Chicago, IL to Washington, DC", "title": "200G", "lat_a": 41.8819, "lon_a": -87.627, "lat_z": 38.8951, "lon_z": -77.036},
 109         {"id_a": "cgcil", "id_z": "sl9mo", "name": "Chicago, IL to St Louis, MO", "title": "370G", "lat_a": 41.8819, "lon_a": -87.627, "lat_z": 38.6272, "lon_z": -90.197},
 110         {"id_a": "n54ny", "id_z": "cb1ma", "name": "New York, NY to Cambridge, MA", "title": "80G", "lat_a": 40.7127, "lon_a": -74.005, "lat_z": 42.3736, "lon_z": -71.11},
 111         {"id_a": "st6wa", "id_z": "dvmco", "name": "Seattle, WA to Denver, CO", "title": "40G", "lat_a": 47.6097, "lon_a": -122.33, "lat_z": 39.7391, "lon_z": -104.98},
 112         {"id_a": "la2ca", "id_z": "phmaz", "name": "Los Angeles, CA to Phoenix, AZ", "title": "260G", "lat_a": 34.05, "lon_a": -118.25, "lat_z": 33.45, "lon_z": -112.06},
 113         {"id_a": "phmaz", "id_z": "santx", "name": "Phoenix, AZ to San Antonio, TX", "title": "160G", "lat_a": 33.45, "lon_a": -112.06, "lat_z": 29.4166, "lon_z": -98.5},
 114         {"id_a": "sl9mo", "id_z": "dlstx", "name": "St Louis, MO to Dallas, TX", "title": "200G", "lat_a": 38.6272, "lon_a": -90.197, "lat_z": 32.7758, "lon_z": -96.796},
 115         {"id_a": "dlstx", "id_z": "nsvtn", "name": "Dallas, TX to Nashville, TN", "title": "160G", "lat_a": 32.7758, "lon_a": -96.796, "lat_z": 36.1666, "lon_z": -86.783},
 116         {"id_a": "wswdc", "id_z": "attga", "name": "Washington, DC to Atlanta, GA", "title": "380G", "lat_a": 38.8951, "lon_a": -77.036, "lat_z": 33.755, "lon_z": -84.39},
 117         {"id_a": "st6wa", "id_z": "cgcil", "name": "Seattle, WA to Chicago, IL", "title": "70G", "lat_a": 47.6097, "lon_a": -122.33, "lat_z": 41.8819, "lon_z": -87.627},
 118         {"id_a": "dvmco", "id_z": "kc9mo", "name": "Denver, CO to Kansas City, MO", "title": "100G", "lat_a": 39.7391, "lon_a": -104.98, "lat_z": 39.0997, "lon_z": -94.578},
 119         {"id_a": "phmaz", "id_z": "dlstx", "name": "Phoenix, AZ to Dallas, TX", "title": "210G", "lat_a": 33.45, "lon_a": -112.06, "lat_z": 32.7758, "lon_z": -96.796},
 120         {"id_a": "cgcil", "id_z": "n54ny", "name": "Chicago, IL to New York, NY", "title": "280G", "lat_a": 41.8819, "lon_a": -87.627, "lat_z": 40.7127, "lon_z": -74.005},
 121         {"id_a": "sl9mo", "id_z": "nsvtn", "name": "St Louis, MO to Nashville, TN", "title": "170G", "lat_a": 38.6272, "lon_a": -90.197, "lat_z": 36.1666, "lon_z": -86.783},
 122         {"id_a": "dlstx", "id_z": "attga", "name": "Dallas, TX to Atlanta, GA", "title": "240G", "lat_a": 32.7758, "lon_a": -96.796, "lat_z": 33.755, "lon_z": -84.39},
 123         {"id_a": "hs1tx", "id_z": "nwrla", "name": "Houston, TX to New Orleans, LA", "title": "170G", "lat_a": 29.7627, "lon_a": -95.383, "lat_z": 29.9647, "lon_z": -90.07},
 124         {"id_a": "ormfl", "id_z": "attga", "name": "Orlando, FL to Atlanta, GA", "title": "210G", "lat_a": 28.4158, "lon_a": -81.298, "lat_z": 33.755, "lon_z": -84.39},
 125         {"id_a": "nsvtn", "id_z": "attga", "name": "Nashville, TN to Atlanta, GA", "title": "240G", "lat_a": 36.1666, "lon_a": -86.783, "lat_z": 33.755, "lon_z": -84.39},
 126         {"id_a": "wswdc", "id_z": "rlgnc", "name": "Washington, DC to Raleigh, NC", "title": "200G", "lat_a": 38.8951, "lon_a": -77.036, "lat_z": 35.8188, "lon_z": -78.644}
 127     ];
 128     </script>
 129
 130
 131 </head>
 132 <body>
 133   <div id="map"></div>
 134   <button id="forwardButton" onclick="stepForward();">Step Forward</button>
 135   <button id="playPause" onclick="playPause();">Play</button>
 136   <div>
 137     <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
 138       <thead att-table-row type="header">
 139         <tr>
 140           <th att-table-header key="id">Site</th>
 141           <th att-table-header key="lastName">Usage</th>
 142         </tr>
 143       </thead>
 144       <tbody att-table-row type="body" id="topTenSites">
 145       </tbody>
 146     </table>
 147     <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
 148       <thead att-table-row type="header">
 149         <tr>
 150           <th att-table-header key="id">Link</th>
 151           <th att-table-header key="lastName">Usage</th>
 152         </tr>
 153       </thead>
 154       <tbody att-table-row type="body" id="topTenLinks">
 155       </tbody>
 156     </table>
 157   </div>
 158
 159   <script>
 160     var map = L.map('map').setView([40, -96], 4);
 161     L.tileLayer('', {maxZoom:18}).addTo(map); //TODO configure
 162
 163     var dataLayer = addDataLayers(map, null);
 164
 165     function addDataLayers(map, dataLayer) {
 166         if (dataLayer!=null) {
 167                 map.removeLayer(dataLayer);
 168         }
 169
 170         dataLayer = L.layerGroup();
 171
 172         var siteInfo = [];
 173
 174         var pipeLayer = L.layerGroup();
 175         for (var i=0; i<pipeData.length; i++) {
 176                 var pipe = pipeData[i];
 177
 178                 var usage = pipe.usage;
 179                 if (!usage || Math.random()<0.05) {
 180                         //console.log("Rerolling " + pipe.name);
 181                         usage = Math.floor(Math.random()*33 + Math.random()*33 + Math.random()*34);
 182                 } else {
 183                         //console.log("Adjusting " + pipe.name);
 184                         usage = Math.floor(usage + Math.random()*15 - Math.random()*15);
 185                 }
 186                 if (usage<0) usage = 0;
 187                 while (usage>100) usage -= Math.floor(20*Math.random());
 188                 if (usage>90) usage -= Math.floor(20*Math.random());
 189
 190                 pipe.usage = usage;
 191
 192                 var color = "black";
 193                 if (usage>60) color = "yellow";
 194                 if (usage>70) color = "orange";
 195                 if (usage>80) color = "red";
 196                 pipeLayer.addLayer(L.polyline([[pipe.lat_a, pipe.lon_a], [pipe.lat_z, pipe.lon_z]], {"color": color, "title": pipe.name}).bindPopup(pipe.name + "<br/>" + pipe.title + "<br/>" + usage + "% usage"));
 197
 198                 var siteA = siteInfo[pipe.id_a];
 199                 if (siteA) {
 200                         siteA.usage += usage;
 201                         siteA.maxUsage += 100;
 202                         //console.log("Site a id = " + pipe.id_a + ", object existed = " + siteA + ", usage = " + siteA.usage + ", max = " + siteA.maxUsage);
 203                 } else {
 204                         siteA = {};
 205                         siteA.usage = usage;
 206                         siteA.maxUsage = 100;
 207                         siteInfo[pipe.id_a] = siteA;
 208                         //console.log("Site a id = " + pipe.id_a + ", object is new = " + siteA + ", usage = " + siteA.usage + ", max = " + siteA.maxUsage);
 209                 }
 210
 211                 var siteZ = siteInfo[pipe.id_z];
 212                 if (siteZ) {
 213                         siteZ.usage += usage;
 214                         siteZ.maxUsage += 100;
 215                         //console.log("Site z id = " + pipe.id_z + ", object existed = " + siteZ + ", usage = " + siteZ.usage + ", max = " + siteZ.maxUsage);
 216                 } else {
 217                         siteZ = {};
 218                         siteZ.usage = usage;
 219                         siteZ.maxUsage = 100;
 220                         siteInfo[pipe.id_z] = siteZ;
 221                         //console.log("Site z id = " + pipe.id_z + ", object is new = " + siteZ + ", usage = " + siteZ.usage + ", max = " + siteZ.maxUsage);
 222                 }
 223         }
 224         dataLayer.addLayer(pipeLayer);
 225
 226         var dataCenterLayer = L.layerGroup();
 227         for (var i=0; i<siteData.length; i++) {
 228                 var site = siteData[i];
 229 //              {"id": "slkut", "name": "Salt Lake City, UT", "title": "250G", "lat": 40.75, "lon": -111.88},
 230                 var info = siteInfo[site.id];
 231                 var color = "black";
 232                 if (info.usage/info.maxUsage>.6) color = "yellow";
 233                 if (info.usage/info.maxUsage>.7) color = "orange";
 234                 if (info.usage/info.maxUsage>.8) color = "red";
 235                 var pct = Math.floor(100*info.usage/info.maxUsage);
 236                 site.usage = pct;
 237 //              dataCenterLayer.addLayer(L.marker([site.lat, site.lon], {"title": site.name}).bindPopup(site.name + "<br/>" + pipe.title + "<br/>" + info.usage + "/" + info.maxUsage));
 238                         dataCenterLayer.addLayer(L.circleMarker([site.lat, site.lon], {"color": color, "title": site.name, "fillOpacity": .5}).bindPopup(site.name + "<br/>" + pipe.title + "<br/>" + pct + "%"));
 239         }
 240         dataLayer.addLayer(dataCenterLayer);
 241
 242         dataLayer.addTo(map);
 243
 244         siteData.sort(function(a,b){return b.usage-a.usage});
 245         var topTenHtml = "";
 246         for (var i=0; i<10; i++) {
 247                 topTenHtml = topTenHtml + "<tr><td att-table-body>" + siteData[i].name + "</td><td att-table-body>" + siteData[i].usage + "%</td></tr>";
 248         }
 249         document.getElementById("topTenSites").innerHTML = topTenHtml;
 250
 251         pipeData.sort(function(a,b){return b.usage-a.usage});
 252         topTenHtml = "";
 253         for (var i=0; i<10; i++) {
 254                 topTenHtml = topTenHtml + "<tr><td att-table-body>" + pipeData[i].name + "</td><td att-table-body>" + pipeData[i].usage + "%</td></tr>";
 255         }
 256         document.getElementById("topTenLinks").innerHTML = topTenHtml;
 257
 258         return dataLayer;
 259     }
 260
 261     function stepForward() {
 262         dataLayer = addDataLayers(map, dataLayer);
 263     }
 264
 265     var intervalObj = null;
 266     function playPause() {
 267         if (intervalObj==null) {
 268                 document.getElementById('playPause').innerHTML = "Pause";
 269                 document.getElementById('forwardButton').disabled = true;
 270                 intervalObj = window.setInterval(function(){dataLayer = addDataLayers(map, dataLayer);},1500);
 271         } else {
 272                 document.getElementById('playPause').innerHTML = "Play";
 273                 document.getElementById('forwardButton').disabled = false;
 274                 clearInterval(intervalObj);
 275                 intervalObj = null;
 276         }
 277     }
 278
 279     function onMapClick(e) {
 280         //alert("You clicked the map at " + e.latlng);
 281         dataLayer = addDataLayers(map, dataLayer);
 282     }
 283
 284     map.on('click', onMapClick);
 285   </script>
 286
 287 </body>
 288 </html>