Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a popup on click</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
​
<style>
​
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGl0ZWxjbyIsImEiOiJjamFoeno1cWExcmIxMzNvMndzMjI4a3l3In0.gG5WlJsB-MmbrpUsqgqlxA';
​
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [ -80.819999899999999,36.140000000000001],
    zoom: 11.15
});
​
map.on('load', function () {
    // Add a layer showing the places.
    map.addLayer({
        "id": "places",
        "type": "fill",
        "source": {
            "type": "geojson",
            "data": {
  "@context": [
    "https://raw.githubusercontent.com/geojson/geojson-ld/master/contexts/geojson-base.jsonld",
    {
      "wx": "https://api.weather.gov/ontology#",
      "@vocab": "https://api.weather.gov/ontology#"
    }
  ],
    "type": "FeatureCollection",
      "features": [
        {
          "id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103497",
          "type": "Feature",
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  -80.819999899999999,
                  36.140000000000001
                ],
                [
                  -80.870000000000005,
                  36.280000000000001
                ],
                [
                  -80.870000000000005,
                  36.329999999999998
                ],
                [
                  -80.900000000000006,
                  36.339999999999996
                ],
                [
                  -81.060000000000002,
                  36.769999999999996
                ],
                [
                  -80.659999999999997,
                  37.059999999999995
                ],
                [
                  -79.530000000000001,
                  36.299999999999997
                ],
                [
                  -79.530000000000001,
                  36.239999999999995
                ],
                [
                  -80.450000000000003,
                  36.259999999999998
                ],
                [
                  -80.439999999999998,
                  36.159999899999995
                ],
                [
                  -80.819999899999999,
                  36.140000000000001
                ]
              ]
            ]
          },
          "properties": {
            "@id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103497",
            "@type": "wx:Alert",
            "id": "NWS-IDP-PROD-3103497",
            "areaDesc": "Pulaski; Floyd; Grayson; Surry; Patrick; Rockingham; Yadkin; Wythe; Henry; Stokes; Alleghany; Carroll",
            "geocode": {
              "UGC": [
                "VAZ013",
                "VAZ017",
                "VAZ015",
                "NCZ003",
                "VAZ032",
                "NCZ005",
                "NCZ020",
                "VAZ012",
                "VAZ043",
                "NCZ004",
                "NCZ002",
                "VAZ016"
              ],
              "SAME": [
                "051750",
                "051155",
                "051063",
                "051077",
                "037171",
                "051141",
                "037157",
                "037197",
                "051197",
                "051690",
                "051089",
                "037169",
                "037005",
                "051640",
                "051035"
              ]
            },
            "affectedZones": [
              "https://api.weather.gov/zones/forecast/VAZ013",
              "https://api.weather.gov/zones/forecast/VAZ017",
              "https://api.weather.gov/zones/forecast/VAZ015",
              "https://api.weather.gov/zones/forecast/NCZ003",
              "https://api.weather.gov/zones/forecast/VAZ032",
              "https://api.weather.gov/zones/forecast/NCZ005",
              "https://api.weather.gov/zones/forecast/NCZ020",
              "https://api.weather.gov/zones/forecast/VAZ012",
              "https://api.weather.gov/zones/forecast/VAZ043",
              "https://api.weather.gov/zones/forecast/NCZ004",
              "https://api.weather.gov/zones/forecast/NCZ002",
              "https://api.weather.gov/zones/forecast/VAZ016"
            ],
            "references": [],
            "sent": "2018-09-09T02:34:00-04:00",
            "effective": "2018-09-09T02:34:00-04:00",
            "onset": "2018-09-09T02:34:00-04:00",
            "expires": "2018-09-09T03:30:00-04:00",
            "ends": null,
            "status": "Actual",
            "messageType": "Alert",
            "category": "Met",
            "severity": "Moderate",
            "certainty": "Observed",
            "urgency": "Expected",
            "event": "Special Weather Statement",
            "sender": "w-nws.webmaster@noaa.gov",
            "senderName": "NWS Blacksburg VA",
            "headline": "Special Weather Statement issued September 9 at 2:34AM EDT by NWS Blacksburg VA",
            "description": "Until 330 AM EDT.\n\nAt 231 AM EDT, radar indicated a large area of thunderstorms with\nvery heavy rainfall extending from Claytor Lake, to Stuart, to King,\nmoving northeast at 15 mph.  Very heavy rainfall can be expected\nwith this activity, which could lead to localized flooding of roads,\nespecially in low-lying and normally flood prone areas.\n\nLocations impacted include...\nReidsville...\nMount Airy...\nGalax...\nElkin...\nand Fairview.\n\nTorrential rainfall is occurring with these storms, and may cause\nlocalized flooding. Do not drive your vehicle through flooded\nroadways.",
            "instruction": "",
            "response": "Execute",
            "parameters": {
              "eventMotionDescription": [
                "2018-09-09T02:31:00.000-04:00...storm...215DEG...13KT...36.97,-80.68 36.21,-79.8"
              ],
              "NWSheadline": [
                "A LINE OF STRONG THUNDERSTORMS WILL AFFECT STOKES COUNTY IN NORTH CENTRAL NORTH CAROLINA...NORTHERN YADKIN... NORTHEASTERN ALLEGHANY AND SURRY COUNTIES IN NORTHWESTERN NORTH CAROLINA...ROCKINGHAM COUNTY IN NORTH CENTRAL NORTH CAROLINA... SOUTHEASTERN PULASKI...SOUTHWESTERN FLOYD AND CARROLL COUNTIES IN SOUTHWESTERN VIRGINIA...SOUTHWESTERN HENRY COUNTY IN SOUTH CENTRAL VIRGINIA...SOUTHEASTERN WYTHE...EASTERN GRAYSON AND PATRICK COUNTIES IN SOUTHWESTERN VIRGINIA AND THE CITY OF GALAX"
              ],
              "EAS-ORG": [
                "WXR"
              ],
              "PIL": [
                "RNKSPSRNK"
              ],
              "BLOCKCHANNEL": [
                "CMAS",
                "EAS",
                "NWEM"
              ]
            }
          }
        },
        {
          "id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103495-2743102",
          "type": "Feature",
          "geometry": null,
          "properties": {
            "@id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103495-2743102",
            "@type": "wx:Alert",
            "id": "NWS-IDP-PROD-3103495-2743102",
            "areaDesc": "St. Marys",
            "geocode": {
              "UGC": [
                "MDZ017"
              ],
              "SAME": [
                "024037"
              ]
            },
            "affectedZones": [
              "https://api.weather.gov/zones/forecast/MDZ017"
            ],
            "references": [
              {
                "@id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103259-2742908",
                "identifier": "NWS-IDP-PROD-3103259-2742908",
                "sender": "w-nws.webmaster@noaa.gov",
                "sent": "2018-09-08T22:29:00-04:00"
              },
              {
                "@id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103259-2742907",
                "identifier": "NWS-IDP-PROD-3103259-2742907",
                "sender": "w-nws.webmaster@noaa.gov",
                "sent": "2018-09-08T22:29:00-04:00"
              }
            ],
            "sent": "2018-09-09T02:27:00-04:00",
            "effective": "2018-09-09T02:27:00-04:00",
            "onset": "2018-09-09T02:27:00-04:00",
            "expires": "2018-09-09T10:30:00-04:00",
            "ends": "2018-09-09T05:00:00-04:00",
            "status": "Actual",
            "messageType": "Update",
            "category": "Met",
            "severity": "Minor",
            "certainty": "Likely",
            "urgency": "Expected",
            "event": "Coastal Flood Advisory",
            "sender": "w-nws.webmaster@noaa.gov",
            "senderName": "NWS Baltimore MD/Washington DC",
            "headline": "Coastal Flood Advisory issued September 9 at 2:27AM EDT expiring September 9 at 5:00AM EDT by NWS Baltimore MD/Washington DC",
            "description": "* LOCATIONS...Shoreline in St. Marys County.\n\n* TIDAL DEPARTURE...1 to 2 feet above normal.\n\n* TIMING...Around the time of high tide. High tide at Point\nLookout is at 1:41 PM this afternoon and 2:09 am early Monday\nmorning. High tide at Coltons Point is at 2:49 AM early Sunday\nmorning, 3:19 PM Sunday afternoon, and 3:41 am early Monday\nmorning. High tide at Piney Point is at 2:43 PM Sunday afternoon\nand 3:05 am early Monday morning.\n\n* IMPACTS...Water is expected to go over a portion of the\nbulkhead near the Straits Point bridge, and also cover yards\nin the St Georges Creek and St Marys River areas. Minor\nshoreline inundation up to one foot above ground is possible\nelsewhere. For late Sunday morning and afternoon, there is a\npossibility that water covers roads on St. Georges Island, is\nin yards, and approach structures. Inundation is possible at\nmultiple marinas off St. Mary's River, Smith Creek, and\nJutland Creek. Shoreline inundation up to one foot above\nground is possible elsewhere.\n\n* OTHER INFORMATION...Additional Coastal Flood Watches may be\nneeded for the high tide cycle Monday night.",
            "instruction": "A Coastal Flood Advisory indicates that onshore winds and tides\nwill combine to generate flooding of low areas along the shore.\n\nA Coastal Flood Watch means that conditions favorable for\nflooding are expected to develop. Coastal residents should be\nalert for later statements or warnings, and take action to\nprotect property.",
            "response": "Monitor",
            "parameters": {
              "NWSheadline": [
                "COASTAL FLOOD ADVISORY REMAINS IN EFFECT UNTIL 5 AM EDT EARLY THIS MORNING... ...COASTAL FLOOD WATCH NOW IN EFFECT FROM 11 AM EDT THIS MORNING THROUGH MONDAY MORNING"
              ],
              "VTEC": [
                "/O.CON.KLWX.CF.Y.0072.000000T0000Z-180909T0900Z/"
              ],
              "PIL": [
                "LWXCFWLWX"
              ],
              "BLOCKCHANNEL": [
                "CMAS",
                "EAS",
                "NWEM"
              ],
              "eventEndingTime": [
                "2018-09-09T05:00:00-04:00"
              ]
            }
          }
        },
        {
          "id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103494-2743100",
          "type": "Feature",
          "geometry": null,
          "properties": {
            "@id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3103494-2743100",
            "@type": "wx:Alert",
            "id": "NWS-IDP-PROD-3103494-2743100",
            "areaDesc": "King George; Charles",
            "geocode": {
              "UGC": [
                "VAZ057",
                "MDZ016"
              ],
              "SAME": [
                "051099",
                "024017"
              ]
            },
            "affectedZones": [
              "https://api.weather.gov/zones/forecast/VAZ057",
              "https://api.weather.gov/zones/forecast/MDZ016"
            ],
            "references": [],
            "sent": "2018-09-09T02:27:00-04:00",
            "effective": "2018-09-09T02:27:00-04:00",
            "onset": "2018-09-09T02:27:00-04:00",
            "expires": "2018-09-09T10:30:00-04:00",
            "ends": "2018-09-10T08:00:00-04:00",
            "status": "Actual",
            "messageType": "Alert",
            "category": "Met",
            "severity": "Minor",
            "certainty": "Likely",
            "urgency": "Expected",
            "event": "Coastal Flood Advisory",
            "sender": "w-nws.webmaster@noaa.gov",
            "senderName": "NWS Baltimore MD/Washington DC",
            "headline": "Coastal Flood Advisory issued September 9 at 2:27AM EDT expiring September 10 at 8:00AM EDT by NWS Baltimore MD/Washington DC",
            "description": "The National Weather Service in Baltimore MD/Washington has\nissued a Coastal Flood Advisory, which is in effect until 8 AM\nEDT Monday.\n\n* LOCATIONS...Shoreline in Charles County and King George County.\n\n* TIDAL DEPARTURE...1 to 2 feet above normal.\n\n\n* TIMING...Around the time of high tide. The next high tides at\nDahlgren will be at 3:00 am Sunday morning, 3:22 pm Sunday\nafternoon, and 3:48 am early Monday morning. The next high tides\nat Goose Bay will be at 3:59 am Sunday morning, 4:29 pm Sunday\nafternoon, and 4:51 am early Monday morning.\n\n* IMPACTS...Water is expected to reach yards near Cobb Island and\ndocks near Dahlgren. Minor shoreline inundation up to one foot\nabove ground is possible elsewhere.",
            "instruction": "",
            "response": "Monitor",
            "parameters": {
              "NWSheadline": [
                "COASTAL FLOOD ADVISORY IN EFFECT UNTIL 8 AM EDT MONDAY"
              ],
              "VTEC": [
                "/O.EXB.KLWX.CF.Y.0072.000000T0000Z-180910T1200Z/"
              ],
              "PIL": [
                "LWXCFWLWX"
              ],
              "BLOCKCHANNEL": [
                "CMAS",
                "EAS",
                "NWEM"
              ],
              "eventEndingTime": [
                "2018-09-10T08:00:00-04:00"
              ]
            }
          }
        },
      ],
        "title": "Current watches, warnings, and advisories",
          "updated": "2018-09-09T06:45:51+00:00"
}
            
        },
              'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.8
        }
    });
​
    // When a click event occurs on a feature in the places layer, open a popup at the
    // location of the feature, with description HTML from its properties.
    map.on('click', 'places', function (e) {
      // earlier
      // var coordinates = e.features[0].geometry.coordinates.slice();
      // check this out
      //console.log(coordinates);
      // Now
        var coordinates = e.features[0].geometry.coordinates[0][0].slice();
      //console.log(coordinates);
        var description = e.features[0].properties.description;
        // 
        console.log(coordinates);
        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }
​
        new mapboxgl.Popup()
            .setLngLat(coordinates)
            .setHTML(description)
            .addTo(map);
    });
​
    // Change the cursor to a pointer when the mouse is over the places layer.
    map.on('mouseenter', 'places', function () {
        map.getCanvas().style.cursor = 'pointer';
    });
​
    // Change it back to a pointer when it leaves.
    map.on('mouseleave', 'places', function () {
        map.getCanvas().style.cursor = '';
    });
});
</script>
​
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
muraliprajapatipro
0viewers