css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/continentsLow.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/black.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/box2d/Box2dWeb-2.1.a.3.min.js"></script>

    <div style="position:absolute; top: 0; left: 50%; width: 800px; height: 700px; text-align:center; margin-left:-400px;">
        <img src="https://www.amcharts.com/lib/coffee/cup.png" style="position:absolute; bottom:0px; left:80px"/>
        <div id="chartdiv" style="width: 800px; height: 700px; position:absolute"></div>
        <a href="https://www.amcharts.com" target="_blank"><img src="https://www.amcharts.com/lib/coffee/amcharts-logo.png" class="am-btn am-btn-label" style="position:absolute; bottom:0px; left:370px;"/></a>
        <img src="https://www.amcharts.com/lib/coffee/coffee.png" style="position:absolute; left:219px;"/>
        <div class="am-btn am-btn-start animated zoomInDown" onclick="startInterval();">I want COFFEE</div>
        <div class="am-btn am-btn-replay animated hidden unreachable" onclick="replay();"><i></i> REFILL</div>
    </div>


            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Montserrat:400);
@import url(https://fonts.googleapis.com/css?family=Lato:400);
@import url(https://daneden.github.io/animate.css/animate.min.css);

body {
  padding: 0;
  margin:0;
  background-color: #ece9e4;
  font-family: Montserrat;
  font-weight: 400;
  font-size: 1em;
  overflow: hidden;
}

/* BTN */
.am-btn {
  position: absolute;
  cursor: pointer;
  letter-spacing: 2px;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

/* START */
.am-btn-start {
  background-color: #73462e;
  color: #FFFFFF;
  top:340px;
  left:290px;
  padding: 20px 40px;
  border-radius: 40px;
  -webkit-transition: all .3s cubic-bezier(0,.45,.15,2);
  transition: all .3s cubic-bezier(0,.45,.15,2);
  opacity: 0.9;
}
.am-btn-start:hover {
  top:330px;
  left:280px;
  padding: 30px 50px;
  opacity: 1;
}

/* REPLAY */
.am-btn-replay {
  color: #553825;
  top: 575px;
  left: 350px;
  z-index: 100;
  line-height: 24px;
  opacity: 0.5;
}
.am-btn-replay:hover {
    opacity: 1;
}
.am-btn-replay i {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcuNjUgNi4zNWMtMS40NS0xLjQ1LTMuNDQtMi4zNS01LjY1LTIuMzUtNC40MiAwLTcuOTkgMy41OC03Ljk5IDhzMy41NyA4IDcuOTkgOGMzLjczIDAgNi44NC0yLjU1IDcuNzMtNmgtMi4wOGMtLjgyIDIuMzMtMy4wNCA0LTUuNjUgNC0zLjMxIDAtNi0yLjY5LTYtNnMyLjY5LTYgNi02YzEuNjYgMCAzLjE0LjY5IDQuMjIgMS43OGwtMy4yMiAzLjIyaDd2LTdsLTIuMzUgMi4zNXoiIGZpbGw9IiM1NTM4MjUiLz48L3N2Zz4=);
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 5px;
}

/* HELPER */
.hidden {
  opacity: 0;
}
.unreachable {
  pointer-events: none;
}
            
          
!
            
              /*
    although ammap has methods like getAreaCenterLatitude and getAreaCenterLongitude,
    they are not suitable in quite a lot of cases as the center of some countries
    is even outside the country itself (like US, because of Alaska and Hawaii)d
    That's why wehave the coordinates stored here
    */

var latlong = {};
latlong["AD"] = {
    "latitude": 42.5,
    "longitude": 1.5
};
latlong["AE"] = {
    "latitude": 24,
    "longitude": 54
};
latlong["AF"] = {
    "latitude": 33,
    "longitude": 65
};
latlong["AG"] = {
    "latitude": 17.05,
    "longitude": -61.8
};
latlong["AI"] = {
    "latitude": 18.25,
    "longitude": -63.1667
};
latlong["AL"] = {
    "latitude": 41,
    "longitude": 20
};
latlong["AM"] = {
    "latitude": 40,
    "longitude": 45
};
latlong["AN"] = {
    "latitude": 12.25,
    "longitude": -68.75
};
latlong["AO"] = {
    "latitude": -12.5,
    "longitude": 18.5
};
latlong["AP"] = {
    "latitude": 35,
    "longitude": 105
};
latlong["AQ"] = {
    "latitude": -90,
    "longitude": 0
};
latlong["AR"] = {
    "latitude": -34,
    "longitude": -64
};
latlong["AS"] = {
    "latitude": -14.3333,
    "longitude": -170
};
latlong["AT"] = {
    "latitude": 47.3333,
    "longitude": 13.3333
};
latlong["AU"] = {
    "latitude": -27,
    "longitude": 133
};
latlong["AW"] = {
    "latitude": 12.5,
    "longitude": -69.9667
};
latlong["AZ"] = {
    "latitude": 40.5,
    "longitude": 47.5
};
latlong["BA"] = {
    "latitude": 44,
    "longitude": 18
};
latlong["BB"] = {
    "latitude": 13.1667,
    "longitude": -59.5333
};
latlong["BD"] = {
    "latitude": 24,
    "longitude": 90
};
latlong["BE"] = {
    "latitude": 50.8333,
    "longitude": 4
};
latlong["BF"] = {
    "latitude": 13,
    "longitude": -2
};
latlong["BG"] = {
    "latitude": 43,
    "longitude": 25
};
latlong["BH"] = {
    "latitude": 26,
    "longitude": 50.55
};
latlong["BI"] = {
    "latitude": -3.5,
    "longitude": 30
};
latlong["BJ"] = {
    "latitude": 9.5,
    "longitude": 2.25
};
latlong["BM"] = {
    "latitude": 32.3333,
    "longitude": -64.75
};
latlong["BN"] = {
    "latitude": 4.5,
    "longitude": 114.6667
};
latlong["BO"] = {
    "latitude": -17,
    "longitude": -65
};
latlong["BR"] = {
    "latitude": -10,
    "longitude": -55
};
latlong["BS"] = {
    "latitude": 24.25,
    "longitude": -76
};
latlong["BT"] = {
    "latitude": 27.5,
    "longitude": 90.5
};
latlong["BV"] = {
    "latitude": -54.4333,
    "longitude": 3.4
};
latlong["BW"] = {
    "latitude": -22,
    "longitude": 24
};
latlong["BY"] = {
    "latitude": 53,
    "longitude": 28
};
latlong["BZ"] = {
    "latitude": 17.25,
    "longitude": -88.75
};
latlong["CA"] = {
    "latitude": 54,
    "longitude": -100
};
latlong["CC"] = {
    "latitude": -12.5,
    "longitude": 96.8333
};
latlong["CD"] = {
    "latitude": 0,
    "longitude": 25
};
latlong["CF"] = {
    "latitude": 7,
    "longitude": 21
};
latlong["CG"] = {
    "latitude": -1,
    "longitude": 15
};
latlong["CH"] = {
    "latitude": 47,
    "longitude": 8
};
latlong["CI"] = {
    "latitude": 8,
    "longitude": -5
};
latlong["CK"] = {
    "latitude": -21.2333,
    "longitude": -159.7667
};
latlong["CL"] = {
    "latitude": -30,
    "longitude": -71
};
latlong["CM"] = {
    "latitude": 6,
    "longitude": 12
};
latlong["CN"] = {
    "latitude": 35,
    "longitude": 105
};
latlong["CO"] = {
    "latitude": 4,
    "longitude": -72
};
latlong["CR"] = {
    "latitude": 10,
    "longitude": -84
};
latlong["CU"] = {
    "latitude": 21.5,
    "longitude": -80
};
latlong["CV"] = {
    "latitude": 16,
    "longitude": -24
};
latlong["CX"] = {
    "latitude": -10.5,
    "longitude": 105.6667
};
latlong["CY"] = {
    "latitude": 35,
    "longitude": 33
};
latlong["CZ"] = {
    "latitude": 49.75,
    "longitude": 15.5
};
latlong["DE"] = {
    "latitude": 51,
    "longitude": 9
};
latlong["DJ"] = {
    "latitude": 11.5,
    "longitude": 43
};
latlong["DK"] = {
    "latitude": 56,
    "longitude": 10
};
latlong["DM"] = {
    "latitude": 15.4167,
    "longitude": -61.3333
};
latlong["DO"] = {
    "latitude": 19,
    "longitude": -70.6667
};
latlong["DZ"] = {
    "latitude": 28,
    "longitude": 3
};
latlong["EC"] = {
    "latitude": -2,
    "longitude": -77.5
};
latlong["EE"] = {
    "latitude": 59,
    "longitude": 26
};
latlong["EG"] = {
    "latitude": 27,
    "longitude": 30
};
latlong["EH"] = {
    "latitude": 24.5,
    "longitude": -13
};
latlong["ER"] = {
    "latitude": 15,
    "longitude": 39
};
latlong["ES"] = {
    "latitude": 40,
    "longitude": -4
};
latlong["ET"] = {
    "latitude": 8,
    "longitude": 38
};
latlong["EU"] = {
    "latitude": 47,
    "longitude": 8
};
latlong["FI"] = {
    "latitude": 62,
    "longitude": 26
};
latlong["FJ"] = {
    "latitude": -18,
    "longitude": 175
};
latlong["FK"] = {
    "latitude": -51.75,
    "longitude": -59
};
latlong["FM"] = {
    "latitude": 6.9167,
    "longitude": 158.25
};
latlong["FO"] = {
    "latitude": 62,
    "longitude": -7
};
latlong["FR"] = {
    "latitude": 46,
    "longitude": 2
};
latlong["GA"] = {
    "latitude": -1,
    "longitude": 11.75
};
latlong["GB"] = {
    "latitude": 54,
    "longitude": -2
};
latlong["GD"] = {
    "latitude": 12.1167,
    "longitude": -61.6667
};
latlong["GE"] = {
    "latitude": 42,
    "longitude": 43.5
};
latlong["GF"] = {
    "latitude": 4,
    "longitude": -53
};
latlong["GH"] = {
    "latitude": 8,
    "longitude": -2
};
latlong["GI"] = {
    "latitude": 36.1833,
    "longitude": -5.3667
};
latlong["GL"] = {
    "latitude": 72,
    "longitude": -40
};
latlong["GM"] = {
    "latitude": 13.4667,
    "longitude": -16.5667
};
latlong["GN"] = {
    "latitude": 11,
    "longitude": -10
};
latlong["GP"] = {
    "latitude": 16.25,
    "longitude": -61.5833
};
latlong["GQ"] = {
    "latitude": 2,
    "longitude": 10
};
latlong["GR"] = {
    "latitude": 39,
    "longitude": 22
};
latlong["GS"] = {
    "latitude": -54.5,
    "longitude": -37
};
latlong["GT"] = {
    "latitude": 15.5,
    "longitude": -90.25
};
latlong["GU"] = {
    "latitude": 13.4667,
    "longitude": 144.7833
};
latlong["GW"] = {
    "latitude": 12,
    "longitude": -15
};
latlong["GY"] = {
    "latitude": 5,
    "longitude": -59
};
latlong["HK"] = {
    "latitude": 22.25,
    "longitude": 114.1667
};
latlong["HM"] = {
    "latitude": -53.1,
    "longitude": 72.5167
};
latlong["HN"] = {
    "latitude": 15,
    "longitude": -86.5
};
latlong["HR"] = {
    "latitude": 45.1667,
    "longitude": 15.5
};
latlong["HT"] = {
    "latitude": 19,
    "longitude": -72.4167
};
latlong["HU"] = {
    "latitude": 47,
    "longitude": 20
};
latlong["ID"] = {
    "latitude": -5,
    "longitude": 120
};
latlong["IE"] = {
    "latitude": 53,
    "longitude": -8
};
latlong["IL"] = {
    "latitude": 31.5,
    "longitude": 34.75
};
latlong["IN"] = {
    "latitude": 20,
    "longitude": 77
};
latlong["IO"] = {
    "latitude": -6,
    "longitude": 71.5
};
latlong["IQ"] = {
    "latitude": 33,
    "longitude": 44
};
latlong["IR"] = {
    "latitude": 32,
    "longitude": 53
};
latlong["IS"] = {
    "latitude": 65,
    "longitude": -18
};
latlong["IT"] = {
    "latitude": 42.8333,
    "longitude": 12.8333
};
latlong["JM"] = {
    "latitude": 18.25,
    "longitude": -77.5
};
latlong["JO"] = {
    "latitude": 31,
    "longitude": 36
};
latlong["JP"] = {
    "latitude": 36,
    "longitude": 138
};
latlong["KE"] = {
    "latitude": 1,
    "longitude": 38
};
latlong["KG"] = {
    "latitude": 41,
    "longitude": 75
};
latlong["KH"] = {
    "latitude": 13,
    "longitude": 105
};
latlong["KI"] = {
    "latitude": 1.4167,
    "longitude": 173
};
latlong["KM"] = {
    "latitude": -12.1667,
    "longitude": 44.25
};
latlong["KN"] = {
    "latitude": 17.3333,
    "longitude": -62.75
};
latlong["KP"] = {
    "latitude": 40,
    "longitude": 127
};
latlong["KR"] = {
    "latitude": 37,
    "longitude": 127.5
};
latlong["KW"] = {
    "latitude": 29.3375,
    "longitude": 47.6581
};
latlong["KY"] = {
    "latitude": 19.5,
    "longitude": -80.5
};
latlong["KZ"] = {
    "latitude": 48,
    "longitude": 68
};
latlong["LA"] = {
    "latitude": 18,
    "longitude": 105
};
latlong["LB"] = {
    "latitude": 33.8333,
    "longitude": 35.8333
};
latlong["LC"] = {
    "latitude": 13.8833,
    "longitude": -61.1333
};
latlong["LI"] = {
    "latitude": 47.1667,
    "longitude": 9.5333
};
latlong["LK"] = {
    "latitude": 7,
    "longitude": 81
};
latlong["LR"] = {
    "latitude": 6.5,
    "longitude": -9.5
};
latlong["LS"] = {
    "latitude": -29.5,
    "longitude": 28.5
};
latlong["LT"] = {
    "latitude": 55,
    "longitude": 24
};
latlong["LU"] = {
    "latitude": 49.75,
    "longitude": 6
};
latlong["LV"] = {
    "latitude": 57,
    "longitude": 25
};
latlong["LY"] = {
    "latitude": 25,
    "longitude": 17
};
latlong["MA"] = {
    "latitude": 32,
    "longitude": -5
};
latlong["MC"] = {
    "latitude": 43.7333,
    "longitude": 7.4
};
latlong["MD"] = {
    "latitude": 47,
    "longitude": 29
};
latlong["ME"] = {
    "latitude": 42.5,
    "longitude": 19.4
};
latlong["MG"] = {
    "latitude": -20,
    "longitude": 47
};
latlong["MH"] = {
    "latitude": 9,
    "longitude": 168
};
latlong["MK"] = {
    "latitude": 41.8333,
    "longitude": 22
};
latlong["ML"] = {
    "latitude": 17,
    "longitude": -4
};
latlong["MM"] = {
    "latitude": 22,
    "longitude": 98
};
latlong["MN"] = {
    "latitude": 46,
    "longitude": 105
};
latlong["MO"] = {
    "latitude": 22.1667,
    "longitude": 113.55
};
latlong["MP"] = {
    "latitude": 15.2,
    "longitude": 145.75
};
latlong["MQ"] = {
    "latitude": 14.6667,
    "longitude": -61
};
latlong["MR"] = {
    "latitude": 20,
    "longitude": -12
};
latlong["MS"] = {
    "latitude": 16.75,
    "longitude": -62.2
};
latlong["MT"] = {
    "latitude": 35.8333,
    "longitude": 14.5833
};
latlong["MU"] = {
    "latitude": -20.2833,
    "longitude": 57.55
};
latlong["MV"] = {
    "latitude": 3.25,
    "longitude": 73
};
latlong["MW"] = {
    "latitude": -13.5,
    "longitude": 34
};
latlong["MX"] = {
    "latitude": 23,
    "longitude": -102
};
latlong["MY"] = {
    "latitude": 2.5,
    "longitude": 112.5
};
latlong["MZ"] = {
    "latitude": -18.25,
    "longitude": 35
};
latlong["NA"] = {
    "latitude": -22,
    "longitude": 17
};
latlong["NC"] = {
    "latitude": -21.5,
    "longitude": 165.5
};
latlong["NE"] = {
    "latitude": 16,
    "longitude": 8
};
latlong["NF"] = {
    "latitude": -29.0333,
    "longitude": 167.95
};
latlong["NG"] = {
    "latitude": 10,
    "longitude": 8
};
latlong["NI"] = {
    "latitude": 13,
    "longitude": -85
};
latlong["NL"] = {
    "latitude": 52.5,
    "longitude": 5.75
};
latlong["NO"] = {
    "latitude": 62,
    "longitude": 10
};
latlong["NP"] = {
    "latitude": 28,
    "longitude": 84
};
latlong["NR"] = {
    "latitude": -0.5333,
    "longitude": 166.9167
};
latlong["NU"] = {
    "latitude": -19.0333,
    "longitude": -169.8667
};
latlong["NZ"] = {
    "latitude": -41,
    "longitude": 174
};
latlong["OM"] = {
    "latitude": 21,
    "longitude": 57
};
latlong["PA"] = {
    "latitude": 9,
    "longitude": -80
};
latlong["PE"] = {
    "latitude": -10,
    "longitude": -76
};
latlong["PF"] = {
    "latitude": -15,
    "longitude": -140
};
latlong["PG"] = {
    "latitude": -6,
    "longitude": 147
};
latlong["PH"] = {
    "latitude": 13,
    "longitude": 122
};
latlong["PK"] = {
    "latitude": 30,
    "longitude": 70
};
latlong["PL"] = {
    "latitude": 52,
    "longitude": 20
};
latlong["PM"] = {
    "latitude": 46.8333,
    "longitude": -56.3333
};
latlong["PR"] = {
    "latitude": 18.25,
    "longitude": -66.5
};
latlong["PS"] = {
    "latitude": 32,
    "longitude": 35.25
};
latlong["PT"] = {
    "latitude": 39.5,
    "longitude": -8
};
latlong["PW"] = {
    "latitude": 7.5,
    "longitude": 134.5
};
latlong["PY"] = {
    "latitude": -23,
    "longitude": -58
};
latlong["QA"] = {
    "latitude": 25.5,
    "longitude": 51.25
};
latlong["RE"] = {
    "latitude": -21.1,
    "longitude": 55.6
};
latlong["RO"] = {
    "latitude": 46,
    "longitude": 25
};
latlong["RS"] = {
    "latitude": 44,
    "longitude": 21
};
latlong["RU"] = {
    "latitude": 60,
    "longitude": 100
};
latlong["RW"] = {
    "latitude": -2,
    "longitude": 30
};
latlong["SA"] = {
    "latitude": 25,
    "longitude": 45
};
latlong["SB"] = {
    "latitude": -8,
    "longitude": 159
};
latlong["SC"] = {
    "latitude": -4.5833,
    "longitude": 55.6667
};
latlong["SD"] = {
    "latitude": 15,
    "longitude": 30
};
latlong["SE"] = {
    "latitude": 62,
    "longitude": 15
};
latlong["SG"] = {
    "latitude": 1.3667,
    "longitude": 103.8
};
latlong["SH"] = {
    "latitude": -15.9333,
    "longitude": -5.7
};
latlong["SI"] = {
    "latitude": 46,
    "longitude": 15
};
latlong["SJ"] = {
    "latitude": 78,
    "longitude": 20
};
latlong["SK"] = {
    "latitude": 48.6667,
    "longitude": 19.5
};
latlong["SL"] = {
    "latitude": 8.5,
    "longitude": -11.5
};
latlong["SM"] = {
    "latitude": 43.7667,
    "longitude": 12.4167
};
latlong["SN"] = {
    "latitude": 14,
    "longitude": -14
};
latlong["SO"] = {
    "latitude": 10,
    "longitude": 49
};
latlong["SR"] = {
    "latitude": 4,
    "longitude": -56
};
latlong["ST"] = {
    "latitude": 1,
    "longitude": 7
};
latlong["SV"] = {
    "latitude": 13.8333,
    "longitude": -88.9167
};
latlong["SY"] = {
    "latitude": 35,
    "longitude": 38
};
latlong["SZ"] = {
    "latitude": -26.5,
    "longitude": 31.5
};
latlong["TC"] = {
    "latitude": 21.75,
    "longitude": -71.5833
};
latlong["TD"] = {
    "latitude": 15,
    "longitude": 19
};
latlong["TF"] = {
    "latitude": -43,
    "longitude": 67
};
latlong["TG"] = {
    "latitude": 8,
    "longitude": 1.1667
};
latlong["TH"] = {
    "latitude": 15,
    "longitude": 100
};
latlong["TJ"] = {
    "latitude": 39,
    "longitude": 71
};
latlong["TK"] = {
    "latitude": -9,
    "longitude": -172
};
latlong["TM"] = {
    "latitude": 40,
    "longitude": 60
};
latlong["TN"] = {
    "latitude": 34,
    "longitude": 9
};
latlong["TO"] = {
    "latitude": -20,
    "longitude": -175
};
latlong["TR"] = {
    "latitude": 39,
    "longitude": 35
};
latlong["TT"] = {
    "latitude": 11,
    "longitude": -61
};
latlong["TV"] = {
    "latitude": -8,
    "longitude": 178
};
latlong["TW"] = {
    "latitude": 23.5,
    "longitude": 121
};
latlong["TZ"] = {
    "latitude": -6,
    "longitude": 35
};
latlong["UA"] = {
    "latitude": 49,
    "longitude": 32
};
latlong["UG"] = {
    "latitude": 1,
    "longitude": 32
};
latlong["UM"] = {
    "latitude": 19.2833,
    "longitude": 166.6
};
latlong["US"] = {
    "latitude": 38,
    "longitude": -97
};
latlong["UY"] = {
    "latitude": -33,
    "longitude": -56
};
latlong["UZ"] = {
    "latitude": 41,
    "longitude": 64
};
latlong["VA"] = {
    "latitude": 41.9,
    "longitude": 12.45
};
latlong["VC"] = {
    "latitude": 13.25,
    "longitude": -61.2
};
latlong["VE"] = {
    "latitude": 8,
    "longitude": -66
};
latlong["VG"] = {
    "latitude": 18.5,
    "longitude": -64.5
};
latlong["VI"] = {
    "latitude": 18.3333,
    "longitude": -64.8333
};
latlong["VN"] = {
    "latitude": 16,
    "longitude": 106
};
latlong["VU"] = {
    "latitude": -16,
    "longitude": 167
};
latlong["WF"] = {
    "latitude": -13.3,
    "longitude": -176.2
};
latlong["WS"] = {
    "latitude": -13.5833,
    "longitude": -172.3333
};
latlong["YE"] = {
    "latitude": 15,
    "longitude": 48
};
latlong["YT"] = {
    "latitude": -12.8333,
    "longitude": 45.1667
};
latlong["ZA"] = {
    "latitude": -29,
    "longitude": 24
};
latlong["ZM"] = {
    "latitude": -15,
    "longitude": 30
};
latlong["ZW"] = {
    "latitude": -20,
    "longitude": 30
};


// this is not real population data - we adjusted China and India, as those
// bubbles are simply too big
var mapData = [{
    "code": "AF",
    "name": "Afghanistan",
    "value": 32358260,
    "color": "#684831"
}, {
    "code": "DZ",
    "name": "Algeria",
    "value": 20980193,
    "color": "#1f0f05"
}, {
    "code": "AO",
    "name": "Angola",
    "value": 19618432,
    "color": "#1f0f05"
}, {
    "code": "AR",
    "name": "Argentina",
    "value": 140764561,
    "color": "#dbccb4"
}, {
    "code": "AU",
    "name": "Australia",
    "value": 122605732,
    "color": "#7d4822"
}, {
    "code": "AT",
    "name": "Austria",
    "value": 18413429,
    "color": "#ae774a"
}, {
    "code": "AZ",
    "name": "Azerbaijan",
    "value": 9306023,
    "color": "#ae774a"
}, {
    "code": "BD",
    "name": "Bangladesh",
    "value": 50493658,
    "color": "#684831"
}, {
    "code": "BE",
    "name": "Belgium",
    "value": 30754056,
    "color": "#ae774a"
}, {
    "code": "BO",
    "name": "Bolivia",
    "value": 10088108,
    "color": "#dbccb4"
}, {
    "code": "BW",
    "name": "Botswana",
    "value": 2030738,
    "color": "#1f0f05"
}, {
    "code": "BR",
    "name": "Brazil",
    "value": 196655014,
    "color": "#dbccb4"
}, {
    "code": "BG",
    "name": "Bulgaria",
    "value": 7446135,
    "color": "#ae774a"
}, {
    "code": "KH",
    "name": "Cambodia",
    "value": 14305183,
    "color": "#684831"
}, {
    "code": "CM",
    "name": "Cameroon",
    "value": 20030362,
    "color": "#1f0f05"
}, {
    "code": "CA",
    "name": "Canada",
    "value": 84349561,
    "color": "#dbccb3"
}, {
    "code": "CF",
    "name": "Central African Rep.",
    "value": 4486837,
    "color": "#1f0f05"
}, {
    "code": "TD",
    "name": "Chad",
    "value": 11525496,
    "color": "#1f0f05"
}, {
    "code": "CL",
    "name": "Chile",
    "value": 17269525,
    "color": "#dbccb4"
}, {
    "code": "CN",
    "name": "China",
    "value": 47565324,
    "color": "#684831"
}, {
    "code": "CO",
    "name": "Colombia",
    "value": 46927125,
    "color": "#dbccb4"
}, {
    "code": "CD",
    "name": "Congo, Dem. Rep.",
    "value": 7757577,
    "color": "#1f0f05"
}, {
    "code": "CG",
    "name": "Congo, Rep.",
    "value": 4139748,
    "color": "#1f0f05"
}, {
    "code": "CR",
    "name": "Costa Rica",
    "value": 4726575,
    "color": "#dbccb3"
}, {
    "code": "CI",
    "name": "Cote d'Ivoire",
    "value": 20152894,
    "color": "#1f0f05"
}, {
    "code": "CU",
    "name": "Cuba",
    "value": 71253665,
    "color": "#dbccb3"
}, {
    "code": "CY",
    "name": "Cyprus",
    "value": 1116564,
    "color": "#ae774a"
}, {
    "code": "CZ",
    "name": "Czech Rep.",
    "value": 10534293,
    "color": "#ae774a"
}, {
    "code": "DK",
    "name": "Denmark",
    "value": 5572594,
    "color": "#ae774a"
}, {
    "code": "EC",
    "name": "Ecuador",
    "value": 14666055,
    "color": "#dbccb4"
}, {
    "code": "EG",
    "name": "Egypt",
    "value": 52536770,
    "color": "#1f0f05"
}, {
    "code": "GQ",
    "name": "Equatorial Guinea",
    "value": 720213,
    "color": "#1f0f05"
}, {
    "code": "ET",
    "name": "Ethiopia",
    "value": 4734262,
    "color": "#1f0f05"
}, {
    "code": "FI",
    "name": "Finland",
    "value": 15384770,
    "color": "#ae774a"
}, {
    "code": "FR",
    "name": "France",
    "value": 83125894,
    "color": "#ae774a"
}, {
    "code": "DE",
    "name": "Germany",
    "value": 62162512,
    "color": "#ae774a"
}, {
    "code": "GR",
    "name": "Greece",
    "value": 11390031,
    "color": "#ae774a"
}, {
    "code": "GT",
    "name": "Guatemala",
    "value": 14757316,
    "color": "#dbccb3"
}, {
    "code": "IS",
    "name": "Iceland",
    "value": 4624366,
    "color": "#ae774a"
}, {
    "code": "IN",
    "name": "India",
    "value": 41491960,
    "color": "#684831"
}, {
    "code": "ID",
    "name": "Indonesia",
    "value": 42325638,
    "color": "#684831"
}, {
    "code": "IR",
    "name": "Iran",
    "value": 34798599,
    "color": "#684831"
}, {
    "code": "IQ",
    "name": "Iraq",
    "value": 32664942,
    "color": "#684831"
}, {
    "code": "IE",
    "name": "Ireland",
    "value": 4525802,
    "color": "#ae774a"
}, {
    "code": "IL",
    "name": "Israel",
    "value": 7562194,
    "color": "#684831"
}, {
    "code": "IT",
    "name": "Italy",
    "value": 120788694,
    "color": "#ae774a"
}, {
    "code": "JM",
    "name": "Jamaica",
    "value": 2751273,
    "color": "#dbccb3"
}, {
    "code": "JP",
    "name": "Japan",
    "value": 126497241,
    "color": "#684831"
}, {
    "code": "JO",
    "name": "Jordan",
    "value": 6330169,
    "color": "#684831"
}, {
    "code": "KZ",
    "name": "Kazakhstan",
    "value": 16206750,
    "color": "#684831"
}, {
    "code": "KE",
    "name": "Kenya",
    "value": 41609728,
    "color": "#1f0f05"
}, {
    "code": "KR",
    "name": "South Korea",
    "value": 78451285,
    "color": "#684831"
}, {
    "code": "KP",
    "name": "North Korea",
    "value": 391343,
    "color": "#684831"
}, {
    "code": "KG",
    "name": "Kyrgyzstan",
    "value": 5392580,
    "color": "#684831"
}, {
    "code": "LA",
    "name": "Laos",
    "value": 6288037,
    "color": "#684831"
}, {
    "code": "LR",
    "name": "Liberia",
    "value": 4128572,
    "color": "#1f0f05"
}, {
    "code": "LY",
    "name": "Libya",
    "value": 6422772,
    "color": "#1f0f05"
}, {
    "code": "LT",
    "name": "Lithuania",
    "value": 3307481,
    "color": "#ae774a"
}, {
    "code": "MG",
    "name": "Madagascar",
    "value": 21315135,
    "color": "#1f0f05"
}, {
    "code": "MY",
    "name": "Malaysia",
    "value": 28859154,
    "color": "#684831"
}, {
    "code": "ML",
    "name": "Mali",
    "value": 15839538,
    "color": "#1f0f05"
}, {
    "code": "MR",
    "name": "Mauritania",
    "value": 3541540,
    "color": "#1f0f05"
}, {
    "code": "MX",
    "name": "Mexico",
    "value": 94793341,
    "color": "#dbccb3"
}, {
    "code": "MN",
    "name": "Mongolia",
    "value": 2800114,
    "color": "#684831"
}, {
    "code": "MA",
    "name": "Morocco",
    "value": 32272974,
    "color": "#1f0f05"
}, {
    "code": "MZ",
    "name": "Mozambique",
    "value": 23929708,
    "color": "#1f0f05"
}, {
    "code": "MM",
    "name": "Myanmar",
    "value": 48336763,
    "color": "#684831"
}, {
    "code": "NA",
    "name": "Namibia",
    "value": 2324004,
    "color": "#1f0f05"
}, {
    "code": "NL",
    "name": "Netherlands",
    "value": 16664746,
    "color": "#ae774a"
}, {
    "code": "NZ",
    "name": "New Zealand",
    "value": 54414509,
    "color": "#7d4822"
}, {
    "code": "NI",
    "name": "Nicaragua",
    "value": 5869859,
    "color": "#dbccb3"
}, {
    "code": "NE",
    "name": "Niger",
    "value": 10068994,
    "color": "#1f0f05"
}, {
    "code": "NG",
    "name": "Nigeria",
    "value": 22470737,
    "color": "#1f0f05"
}, {
    "code": "NO",
    "name": "Norway",
    "value": 19924848,
    "color": "#ae774a"
}, {
    "code": "PK",
    "name": "Pakistan",
    "value": 76745364,
    "color": "#684831"
}, {
    "code": "PG",
    "name": "Papua New Guinea",
    "value": 7013829,
    "color": "#7d4822"
}, {
    "code": "PY",
    "name": "Paraguay",
    "value": 6568290,
    "color": "#dbccb4"
}, {
    "code": "PE",
    "name": "Peru",
    "value": 29399817,
    "color": "#dbccb4"
}, {
    "code": "PH",
    "name": "Philippines",
    "value": 94852030,
    "color": "#684831"
}, {
    "code": "PL",
    "name": "Poland",
    "value": 38298949,
    "color": "#ae774a"
}, {
    "code": "PT",
    "name": "Portugal",
    "value": 10689663,
    "color": "#ae774a"
}, {
    "code": "PR",
    "name": "Puerto Rico",
    "value": 3745526,
    "color": "#dbccb3"
}, {
    "code": "RO",
    "name": "Romania",
    "value": 21436495,
    "color": "#ae774a"
}, {
    "code": "RU",
    "name": "Russia",
    "value": 142835555,
    "color": "#ae774a"
}, {
    "code": "SA",
    "name": "Saudi Arabia",
    "value": 98082541,
    "color": "#684831"
}, {
    "code": "SN",
    "name": "Senegal",
    "value": 12767556,
    "color": "#1f0f05"
}, {
    "code": "SI",
    "name": "Slovenia",
    "value": 2035012,
    "color": "#ae774a"
}, {
    "code": "SO",
    "name": "Somalia",
    "value": 9556873,
    "color": "#1f0f05"
}, {
    "code": "ZA",
    "name": "South Africa",
    "value": 100459978,
    "color": "#1f0f05"
}, {
    "code": "ES",
    "name": "Spain",
    "value": 136454895,
    "color": "#ae774a"
}, {
    "code": "LK",
    "name": "Sri Lanka",
    "value": 21045394,
    "color": "#684831"
}, {
    "code": "SD",
    "name": "Sudan",
    "value": 4735288,
    "color": "#1f0f05"
}, {
    "code": "SE",
    "name": "Sweden",
    "value": 49440747,
    "color": "#ae774a"
}, {
    "code": "CH",
    "name": "Switzerland",
    "value": 7701690,
    "color": "#ae774a"
}, {
    "code": "TW",
    "name": "Taiwan",
    "value": 23072000,
    "color": "#684831"
}, {
    "code": "TJ",
    "name": "Tajikistan",
    "value": 6976958,
    "color": "#684831"
}, {
    "code": "TZ",
    "name": "Tanzania",
    "value": 46218486,
    "color": "#1f0f05"
}, {
    "code": "TH",
    "name": "Thailand",
    "value": 69518555,
    "color": "#684831"
}, {
    "code": "TN",
    "name": "Tunisia",
    "value": 10594057,
    "color": "#1f0f05"
}, {
    "code": "TR",
    "name": "Turkey",
    "value": 73639596,
    "color": "#ae774a"
}, {
    "code": "TM",
    "name": "Turkmenistan",
    "value": 5105301,
    "color": "#684831"
}, {
    "code": "UA",
    "name": "Ukraine",
    "value": 45190180,
    "color": "#ae774a"
}, {
    "code": "AE",
    "name": "United Arab Emirates",
    "value": 47890924,
    "color": "#684831"
}, {
    "code": "GB",
    "name": "United Kingdom",
    "value": 132417431,
    "color": "#ae774a"
}, {
    "code": "US",
    "name": "United States",
    "value": 223085380,
    "color": "#dbccb3"
}, {
    "code": "UY",
    "name": "Uruguay",
    "value": 3380008,
    "color": "#dbccb4"
}, {
    "code": "UZ",
    "name": "Uzbekistan",
    "value": 27760267,
    "color": "#684831"
}, {
    "code": "VE",
    "name": "Venezuela",
    "value": 29436891,
    "color": "#dbccb4"
}, {
    "code": "VN",
    "name": "Vietnam",
    "value": 88791996,
    "color": "#684831"
}, {
    "code": "YE",
    "name": "Yemen, Rep.",
    "value": 24799880,
    "color": "#684831"
}, {
    "code": "ZM",
    "name": "Zambia",
    "value": 13474959,
    "color": "#1f0f05"
}, {
    "code": "ZW",
    "name": "Zimbabwe",
    "value": 12754378,
    "color": "#1f0f05"
}];

var sortBy = function(field, reverse) {

    var key = function(x) {
        return x[field]
    };

    reverse = [-1, 1][+!!reverse];

    return function(a, b) {
        return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
    }
}

mapData.sort(sortBy('color', true));


// AMMAP PART OF THIS AWESOME DEMO
var map;
// min and max bullet sizes - adjust them to your needs
var minBulletSize = 4;
var maxBulletSize = 55;

// set dark theme
AmCharts.theme = AmCharts.themes.black;

// get min and max values
var min = Infinity;
var max = -Infinity;
for (var i = 0; i < mapData.length; i++) {
    var value = mapData[i].value;
    if (value < min) {
        min = value;
    }
    if (value > max) {
        max = value;
    }
}

// build map
AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.addClassNames = true;
    map.pathToImages = "https://www.amcharts.com/lib/3/images/";
    map.fontFamily = "Lato";
    map.fontSize = 15;
    map.dragMap = false;
    map.creditsPosition = "top-right";
    map.zoomControl = {
        buttonFillColor: "#343434",
        minZoomLevel: 0.7,
        zoomControlEnabled: false,
        panControlEnabled: false
    }

    // style tooltip
    map.balloon = {
        adjustBorderColor: false,
        horizontalPadding: 20,
        verticalPadding: 10,
        color: "#FFFFFF",
        maxWidth: 300,
        borderAlpha: 0,
        cornerRadius: 20,
        borderThickness: 1,
        shadowAlpha: 0
    }

    // bubbles are images, we set opacity and tooltip text
    map.imagesSettings = {
        balloonText: "[[title]]",
        alpha: 0.85
    }

    map.addClassNames = true;
    map.defs = {
        "filter": [{
            "id": "blur",
            "feGaussianBlur": {
                "in": "SourceGraphic",
                "stdDeviation": 2
            }
        }]
    };

    // make areas barely visible
    map.areasSettings = {
        outlineThickness: 1.5,
        unlistedAreasAlpha: 0,
        unlistedAreasOutlineAlpha: 0.7,
        unlistedAreasOutlineColor: "#d6cbc1"
    };

    // data provider. We use continents map to show real world map in background.
    var dataProvider = {
        zoomLevel: 0.8,
        zoomY: 0.3,
        zoomX: 0.05,
        map: "continentsLow",
        images: []
    }


    // create circle for each country
    var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
    var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

    // create circle for each country
    for (var i = 0; i < mapData.length; i++) {
        var dataItem = mapData[i];
        var value = dataItem.value;
        // calculate size of a bubble
        var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
        if (square < minSquare) {
            square = minSquare;
        }
        var size = Math.sqrt(square / (Math.PI * 2));
        var id = dataItem.code;

        dataProvider.images.push({
            type: "circle",
            width: size,
            height: size,
            color: dataItem.color,
            longitude: latlong[id].longitude,
            latitude: latlong[id].latitude,
            title: dataItem.name,
            value: value
        });
    }


    map.dataProvider = dataProvider;
		map.zoomOnDoubleClick = false;
    // Listen for the init event and initialize box2d part
    map.addListener("init", initBox2D)

    map.write("chartdiv");
});


// BOX2D (Physics) part
var width = 800;
var height = 700;
var pixels2meters = 30; // box2d uses meters, not pixels and this is ratio
var framesPerSecond = 40;
var world;
var images;
var floorBody;
var bottomBody;
var stopTimeout;
var interval;
var timeout;

function initBox2D() {
    var b2Vec2 = Box2D.Common.Math.b2Vec2;
    var b2BodyDef = Box2D.Dynamics.b2BodyDef;
    var b2Body = Box2D.Dynamics.b2Body;
    var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
    var b2Fixture = Box2D.Dynamics.b2Fixture;
    var b2World = Box2D.Dynamics.b2World;
    var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
    var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
    var b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef;
    var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;


    world = new b2World(
        new b2Vec2(0, 10), //gravity
        false //allow sleep, false otherwise joints might not be restored
    );

    // walls and ground. please, study box2d tutorials if you want to understand everything below
    var wallsBodyDef = new b2BodyDef();
    wallsBodyDef.type = b2Body.b2_staticBody;

    var wallsFixtureDef = new b2FixtureDef();
    wallsFixtureDef.density = 1.0;
    wallsFixtureDef.friction = 0.5;
    wallsFixtureDef.restitution = 0.2;

    // floor
    wallsFixtureDef.shape = new b2PolygonShape();
    wallsFixtureDef.shape.SetAsBox(width / pixels2meters, 20 / pixels2meters);
    wallsBodyDef.position.Set(0, (height) / pixels2meters);
    floorBody = world.CreateBody(wallsBodyDef).CreateFixture(wallsFixtureDef);

    // coffee cup walls
    // left wall
    wallsFixtureDef.shape.SetAsBox(5 / pixels2meters, 120 / pixels2meters);

    wallsBodyDef.position.Set((width / 2 - 48) / pixels2meters, (height - 100) / pixels2meters);
    wallsBodyDef.angle = -0.23;
    world.CreateBody(wallsBodyDef).CreateFixture(wallsFixtureDef);

    // right wall
    wallsBodyDef.position.Set((width / 2 + 148) / pixels2meters, (height - 100) / pixels2meters);
    wallsBodyDef.angle = 0.26;
    world.CreateBody(wallsBodyDef).CreateFixture(wallsFixtureDef);

    // bottom
    wallsBodyDef.angle = 0;
    wallsFixtureDef.shape = new b2PolygonShape();
    wallsFixtureDef.shape.SetAsBox(80 / pixels2meters, 20 / pixels2meters);
    wallsBodyDef.position.Set(447 / pixels2meters, (height - 13) / pixels2meters);
    bottomBody = world.CreateBody(wallsBodyDef).CreateFixture(wallsFixtureDef);


    // bubbles
    var bubbleBodyDef = new b2BodyDef();
    bubbleBodyDef.angularDamping = 1; // we don't want to bubbles to rotate like crazy
    bubbleBodyDef.linearDamping = 0.6; // makes movement more smooth. If you increase this value, bubbles will move like in some oil
    bubbleBodyDef.type = b2Body.b2_dynamicBody;

    var bubbleFixtureDef = new b2FixtureDef();
    bubbleFixtureDef.density = 0.2;
    bubbleFixtureDef.friction = 0.4;
    bubbleFixtureDef.restitution = 0.2; // adjust this property to reduce or increase bouncing

    // we need to keep bubbles in place, so we create a static body to which bubbles will be constrained - think of a nail at each bubble position
    var nailFixtureDef = new b2FixtureDef();
    nailFixtureDef.shape = new b2CircleShape(2 / pixels2meters);

    var nailBodyDef = new b2BodyDef();
    nailBodyDef.type = b2Body.b2_staticBody; // nails are static, they don't move

    // now, loop through images of map's data provider
    images = map.dataProvider.images;

    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        // create bubble
        bubbleFixtureDef.shape = new b2CircleShape(image.width / 2 / pixels2meters);
        bubbleBodyDef.position.x = (width + 100 + Math.random() * 2) / 2 / pixels2meters;
        bubbleBodyDef.position.y = -30 * i / pixels2meters;
        var bubble = world.CreateBody(bubbleBodyDef).CreateFixture(bubbleFixtureDef);

        // create nail
        nailBodyDef.position.x = image.displayObject.x / pixels2meters;
        nailBodyDef.position.y = image.displayObject.y / pixels2meters;
        var nail = world.CreateBody(nailBodyDef).CreateFixture(nailFixtureDef);
        nail.SetSensor(true); // nail is sensor - this means the bubbles won't colide with it and can overlap

        // now, we need to link bubble with a nail with a joint (imagine a string)
        var jointDef = new b2DistanceJointDef();
        jointDef.bodyA = bubble.GetBody();
        jointDef.bodyB = nail.GetBody();
        // the following tow lines describes stiffness of a string, try to modify them.
        jointDef.dampingRatio = 2;
        jointDef.frequencyHz = 1.7;
        // lenght 0 means that the bubble will try to be at the nail position (if other bubbles allow)
        jointDef.length = 0;
        //connect the centers
        jointDef.localAnchorA = new b2Vec2(0, 0);
        jointDef.localAnchorB = new b2Vec2(0, 0);

        // var joint = world.CreateJoint(jointDef);
        // store definition, image and joint in mapImage object
        image.jointDef = jointDef;
        image.box2Dimage = bubble;
        // image.joint = joint;
    }

    //setup debug draw (if you don't need it, just delete the lines, uncomment to see how box objects are drawn)
    /*
            var debugDraw = new b2DebugDraw();

            debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
            debugDraw.SetDrawScale(pixels2meters);
            debugDraw.SetFillAlpha(0.5);
            debugDraw.SetLineThickness(1.0);
            debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
            world.SetDebugDraw(debugDraw);
    */
    // interval to update bubbles
    // release initially to do some animation
    // releaseBubbles();
    // attach bubbles in some time

    startInterval();
    stopTimeout = setTimeout(stopInterval, 3000);
}

//update bubbles
function update() {
    var images = map.dataProvider.images;
    counter++;
    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        var box2Dimage = image.box2Dimage;
        // box2D takes care of positions of bubbles, we simply get those positions and set them on ammap bubbles.
        var bbody = box2Dimage.GetBody();
        var position = bbody.GetPosition();

        var currentX = position.x;
        var currentY = position.y;

        image.displayObject.translate(position.x * 30, position.y * 30, 1, true);
    }

    if (counter == Math.round(15000 / framesPerSecond)) {
        attachBubbles();
        counter = -Infinity;
    }

    world.Step(1 / framesPerSecond, 10, 10);

    // uncomment next line if you want to see box2d objects in action (also canvas element at the bottom)
    //world.DrawDebugData();
    world.ClearForces();
};

// releases bubbles
function releaseBubbles() {
    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        setTimeout(destroyJoint, Math.random() * 1000, image);
    }
}

// destroys joint
function destroyJoint(image) {
    if (image.joint) {
        world.DestroyJoint(image.joint);
        image.joint = null;
    }
}

// attach bubbles back
function attachBubbles() {
    var images = map.dataProvider.images;
    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        if (!image.joint) {
            setTimeout(restoreJoint, (images.length - i) * 50, image); // we attach bubbles randomly during 0.1 sec interval
        }
    }

    setTimeout(showReplay, 8000);
}

// restores joint
function restoreJoint(image) {
    var joint = world.CreateJoint(image.jointDef);
    image.joint = joint;
}

var counter;

function startInterval() {
    stopInterval();
    clearTimeout(stopTimeout);
    jQuery(".btn-start").addClass("zoomOutDown");
    //timeout = setTimeout(attachBubbles, 14000);
    counter = 0;
    interval = window.setInterval(update, 1000 / framesPerSecond);
}

function replay() {
    releaseBubbles();
    floorBody.GetBody().GetFixtureList().SetSensor(true);
    bottomBody.GetBody().GetFixtureList().SetSensor(true);
    setTimeout(replayReal, 5000);
}

function replayReal() {
    //clearInterval(interval);
    var images = map.dataProvider.images;
    var b2Vec2 = Box2D.Common.Math.b2Vec2;

    floorBody.GetBody().GetFixtureList().SetSensor(false);
    bottomBody.GetBody().GetFixtureList().SetSensor(false);

    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        var box2Dimage = image.box2Dimage;
        // box2D takes care of positions of bubbles, we simply get those positions and set them on ammap bubbles.
        var bbody = box2Dimage.GetBody();

        var x = (width + 100 + Math.random() * 2) / 2 / pixels2meters;
        var y = -30 * i / pixels2meters;

        bbody.SetPosition(new b2Vec2(x, y));
    }
    // interval = window.setInterval(update, 500 / framesPerSecond);

    counter = 0;
    //timeout = setTimeout(attachBubbles, 14000);
}

function stopInterval() {
    clearInterval(interval);
    clearTimeout(timeout);
}

function showReplay() {
    jQuery(".am-btn-replay")
        .removeClass("unreachable hidden");
}

jQuery(".am-btn").on("click", function() {
    var btn = this;

    if (!jQuery(this).hasClass("am-btn-label")) {
        jQuery(this).addClass("unreachable");
        setTimeout(function() {
            jQuery(btn)
                .addClass("hidden");
        }, 1000);
    }
});

jQuery(".am-btn-start").on("click", function() {
    jQuery(this)
        .addClass("zoomOutDown");
});

jQuery(".am-btn-replay").on("click", function() {
    jQuery(this)
        .addClass("hidden unreachable");
});

setTimeout(function() {
    jQuery(".am-btn-start").removeClass("zoomInDown unreachable");
}, 1000);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console