WeatherMap

Developer

Size

13,360 Kb

Views

14,168

WeatherMap Previews
WeatherMap HTML Codes
WeatherMap CSS Codes
WeatherMap JS Codes

How do I make an weathermap?

What is a weathermap? How do you make a weathermap? This script and codes were developed by Paulo Sérgio on 19 November 2022, Saturday.

WeatherMap Previews

WeatherMap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WeatherMap</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row row-content"> <div class="panel panel-default"> <div class="panel-heading">Global Weather Map</div> <div class="panel-body"> <div id="map"></div> </div> </div> </div>
</div>
<!-- modal progress bar -->
<div class="modal fade" data-keyboard="false" data-backdrop="static" id="progressmodal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="c100 p1"> <span>Loading...</span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div> </div> </div> <!-- end modal content --> </div><!-- end modal-dialog -->
</div>
<div class="panel panel-default weather-panel"> <div class="panel-body"> <div class="container container-panel"> <div class="row"> <div class="col-md-4"> <div class="weather-icon"></div> </div> <div class="col-md-8"> <div class="weather-info"> <div class="row"> <div class="col-md-4">Local</div> <div class="col-md-8 city"></div> </div> <div class="row"> <div class="col-md-4">Temp</div> <div class="col-md-8 temp"></div </div> <div class="row"> <div class="col-md-12 text-center text-icon"></div> </div> </div> </div> </div> </div> </div>
</div>
<div class="text-center all-icon"> <div class="icon sun-shower hide "> <div class="cloud"></div> <div class="sun"> <div class="rays"></div> </div> <div class="rain"></div> </div> <div class="icon thunder-storm hide thunderstom"> <div class="cloud"></div> <div class="lightning"> <div class="bolt"></div> <div class="bolt"></div> </div> </div> <div class="icon cloudy hide clouds"> <div class="cloud"></div> <div class="cloud"></div> </div> <div class="icon flurries hide snow"> <div class="cloud"></div> <div class="snow"> <div class="flake"></div> <div class="flake"></div> </div> </div> <div class="icon sunny hide clear"> <div class="sun"> <div class="rays"></div> </div> </div> <div class="icon rainy hide rain"> <div class="cloud"></div> <div class="rain"></div> </div>
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WeatherMap - Script Codes CSS Codes

.panel-body > #map { height: 800px !important;
}
.row-content > #map { height: 800px !important;
}
.weather-panel { position: absolute; top: 45%; right: 45%; display: none; background-color: black; width: 300px;
}
.weather-panel-object { position: absolute; top: 45%; right: 45%; display: none; background-color: black; width: 300px;
}
.container-panel { width: 300px !important;
}
.panel-body { background-color: black; color: white; border-radius: 4px;
}
/* custom background progress bar */
.modal-content,
.modal-body { width: 0px; height: 0px; margin: auto;
}
.c100 { background-color: rgba(0, 0, 0, 0);
}
/* circle progress bar css */
.rect-auto,
.c100.p51 .slice,
.c100.p52 .slice,
.c100.p53 .slice,
.c100.p54 .slice,
.c100.p55 .slice,
.c100.p56 .slice,
.c100.p57 .slice,
.c100.p58 .slice,
.c100.p59 .slice,
.c100.p60 .slice,
.c100.p61 .slice,
.c100.p62 .slice,
.c100.p63 .slice,
.c100.p64 .slice,
.c100.p65 .slice,
.c100.p66 .slice,
.c100.p67 .slice,
.c100.p68 .slice,
.c100.p69 .slice,
.c100.p70 .slice,
.c100.p71 .slice,
.c100.p72 .slice,
.c100.p73 .slice,
.c100.p74 .slice,
.c100.p75 .slice,
.c100.p76 .slice,
.c100.p77 .slice,
.c100.p78 .slice,
.c100.p79 .slice,
.c100.p80 .slice,
.c100.p81 .slice,
.c100.p82 .slice,
.c100.p83 .slice,
.c100.p84 .slice,
.c100.p85 .slice,
.c100.p86 .slice,
.c100.p87 .slice,
.c100.p88 .slice,
.c100.p89 .slice,
.c100.p90 .slice,
.c100.p91 .slice,
.c100.p92 .slice,
.c100.p93 .slice,
.c100.p94 .slice,
.c100.p95 .slice,
.c100.p96 .slice,
.c100.p97 .slice,
.c100.p98 .slice,
.c100.p99 .slice,
.c100.p100 .slice { clip: rect(auto, auto, auto, auto);
}
.pie,
.c100 .bar,
.c100.p51 .fill,
.c100.p52 .fill,
.c100.p53 .fill,
.c100.p54 .fill,
.c100.p55 .fill,
.c100.p56 .fill,
.c100.p57 .fill,
.c100.p58 .fill,
.c100.p59 .fill,
.c100.p60 .fill,
.c100.p61 .fill,
.c100.p62 .fill,
.c100.p63 .fill,
.c100.p64 .fill,
.c100.p65 .fill,
.c100.p66 .fill,
.c100.p67 .fill,
.c100.p68 .fill,
.c100.p69 .fill,
.c100.p70 .fill,
.c100.p71 .fill,
.c100.p72 .fill,
.c100.p73 .fill,
.c100.p74 .fill,
.c100.p75 .fill,
.c100.p76 .fill,
.c100.p77 .fill,
.c100.p78 .fill,
.c100.p79 .fill,
.c100.p80 .fill,
.c100.p81 .fill,
.c100.p82 .fill,
.c100.p83 .fill,
.c100.p84 .fill,
.c100.p85 .fill,
.c100.p86 .fill,
.c100.p87 .fill,
.c100.p88 .fill,
.c100.p89 .fill,
.c100.p90 .fill,
.c100.p91 .fill,
.c100.p92 .fill,
.c100.p93 .fill,
.c100.p94 .fill,
.c100.p95 .fill,
.c100.p96 .fill,
.c100.p97 .fill,
.c100.p98 .fill,
.c100.p99 .fill,
.c100.p100 .fill { position: absolute; border: 0.08em solid #307bbb; width: 0.84em; height: 0.84em; clip: rect(0em, 0.5em, 1em, 0em); border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
.pie-fill,
.c100.p51 .bar:after,
.c100.p51 .fill,
.c100.p52 .bar:after,
.c100.p52 .fill,
.c100.p53 .bar:after,
.c100.p53 .fill,
.c100.p54 .bar:after,
.c100.p54 .fill,
.c100.p55 .bar:after,
.c100.p55 .fill,
.c100.p56 .bar:after,
.c100.p56 .fill,
.c100.p57 .bar:after,
.c100.p57 .fill,
.c100.p58 .bar:after,
.c100.p58 .fill,
.c100.p59 .bar:after,
.c100.p59 .fill,
.c100.p60 .bar:after,
.c100.p60 .fill,
.c100.p61 .bar:after,
.c100.p61 .fill,
.c100.p62 .bar:after,
.c100.p62 .fill,
.c100.p63 .bar:after,
.c100.p63 .fill,
.c100.p64 .bar:after,
.c100.p64 .fill,
.c100.p65 .bar:after,
.c100.p65 .fill,
.c100.p66 .bar:after,
.c100.p66 .fill,
.c100.p67 .bar:after,
.c100.p67 .fill,
.c100.p68 .bar:after,
.c100.p68 .fill,
.c100.p69 .bar:after,
.c100.p69 .fill,
.c100.p70 .bar:after,
.c100.p70 .fill,
.c100.p71 .bar:after,
.c100.p71 .fill,
.c100.p72 .bar:after,
.c100.p72 .fill,
.c100.p73 .bar:after,
.c100.p73 .fill,
.c100.p74 .bar:after,
.c100.p74 .fill,
.c100.p75 .bar:after,
.c100.p75 .fill,
.c100.p76 .bar:after,
.c100.p76 .fill,
.c100.p77 .bar:after,
.c100.p77 .fill,
.c100.p78 .bar:after,
.c100.p78 .fill,
.c100.p79 .bar:after,
.c100.p79 .fill,
.c100.p80 .bar:after,
.c100.p80 .fill,
.c100.p81 .bar:after,
.c100.p81 .fill,
.c100.p82 .bar:after,
.c100.p82 .fill,
.c100.p83 .bar:after,
.c100.p83 .fill,
.c100.p84 .bar:after,
.c100.p84 .fill,
.c100.p85 .bar:after,
.c100.p85 .fill,
.c100.p86 .bar:after,
.c100.p86 .fill,
.c100.p87 .bar:after,
.c100.p87 .fill,
.c100.p88 .bar:after,
.c100.p88 .fill,
.c100.p89 .bar:after,
.c100.p89 .fill,
.c100.p90 .bar:after,
.c100.p90 .fill,
.c100.p91 .bar:after,
.c100.p91 .fill,
.c100.p92 .bar:after,
.c100.p92 .fill,
.c100.p93 .bar:after,
.c100.p93 .fill,
.c100.p94 .bar:after,
.c100.p94 .fill,
.c100.p95 .bar:after,
.c100.p95 .fill,
.c100.p96 .bar:after,
.c100.p96 .fill,
.c100.p97 .bar:after,
.c100.p97 .fill,
.c100.p98 .bar:after,
.c100.p98 .fill,
.c100.p99 .bar:after,
.c100.p99 .fill,
.c100.p100 .bar:after,
.c100.p100 .fill { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.c100 { position: relative; font-size: 120px; width: 1em; height: 1em; border-radius: 50%; float: left; margin: 0 0.1em 0.1em 0; background-color: #cccccc;
}
.c100 *,
.c100 *:before,
.c100 *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
.c100.center { float: none; margin: 0 auto;
}
.c100.big { font-size: 240px;
}
.c100.small { font-size: 80px;
}
.c100 > span { position: absolute; width: 100%; z-index: 1; left: 0; top: 0; width: 5em; line-height: 5em; font-size: 0.2em; color: #cccccc; display: block; text-align: center; white-space: nowrap; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.c100:after { position: absolute; top: 0.08em; left: 0.08em; display: block; content: " "; border-radius: 50%; background-color: #f5f5f5; width: 0.84em; height: 0.84em; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in;
}
.c100 .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar { -webkit-transform: rotate(3.6deg); -moz-transform: rotate(3.6deg); -ms-transform: rotate(3.6deg); -o-transform: rotate(3.6deg); transform: rotate(3.6deg);
}
.c100.p2 .bar { -webkit-transform: rotate(7.2deg); -moz-transform: rotate(7.2deg); -ms-transform: rotate(7.2deg); -o-transform: rotate(7.2deg); transform: rotate(7.2deg);
}
.c100.p3 .bar { -webkit-transform: rotate(10.8deg); -moz-transform: rotate(10.8deg); -ms-transform: rotate(10.8deg); -o-transform: rotate(10.8deg); transform: rotate(10.8deg);
}
.c100.p4 .bar { -webkit-transform: rotate(14.4deg); -moz-transform: rotate(14.4deg); -ms-transform: rotate(14.4deg); -o-transform: rotate(14.4deg); transform: rotate(14.4deg);
}
.c100.p5 .bar { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg);
}
.c100.p6 .bar { -webkit-transform: rotate(21.6deg); -moz-transform: rotate(21.6deg); -ms-transform: rotate(21.6deg); -o-transform: rotate(21.6deg); transform: rotate(21.6deg);
}
.c100.p7 .bar { -webkit-transform: rotate(25.2deg); -moz-transform: rotate(25.2deg); -ms-transform: rotate(25.2deg); -o-transform: rotate(25.2deg); transform: rotate(25.2deg);
}
.c100.p8 .bar { -webkit-transform: rotate(28.8deg); -moz-transform: rotate(28.8deg); -ms-transform: rotate(28.8deg); -o-transform: rotate(28.8deg); transform: rotate(28.8deg);
}
.c100.p9 .bar { -webkit-transform: rotate(32.4deg); -moz-transform: rotate(32.4deg); -ms-transform: rotate(32.4deg); -o-transform: rotate(32.4deg); transform: rotate(32.4deg);
}
.c100.p10 .bar { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg);
}
.c100.p11 .bar { -webkit-transform: rotate(39.6deg); -moz-transform: rotate(39.6deg); -ms-transform: rotate(39.6deg); -o-transform: rotate(39.6deg); transform: rotate(39.6deg);
}
.c100.p12 .bar { -webkit-transform: rotate(43.2deg); -moz-transform: rotate(43.2deg); -ms-transform: rotate(43.2deg); -o-transform: rotate(43.2deg); transform: rotate(43.2deg);
}
.c100.p13 .bar { -webkit-transform: rotate(46.8deg); -moz-transform: rotate(46.8deg); -ms-transform: rotate(46.8deg); -o-transform: rotate(46.8deg); transform: rotate(46.8deg);
}
.c100.p14 .bar { -webkit-transform: rotate(50.4deg); -moz-transform: rotate(50.4deg); -ms-transform: rotate(50.4deg); -o-transform: rotate(50.4deg); transform: rotate(50.4deg);
}
.c100.p15 .bar { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -ms-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg);
}
.c100.p16 .bar { -webkit-transform: rotate(57.6deg); -moz-transform: rotate(57.6deg); -ms-transform: rotate(57.6deg); -o-transform: rotate(57.6deg); transform: rotate(57.6deg);
}
.c100.p17 .bar { -webkit-transform: rotate(61.2deg); -moz-transform: rotate(61.2deg); -ms-transform: rotate(61.2deg); -o-transform: rotate(61.2deg); transform: rotate(61.2deg);
}
.c100.p18 .bar { -webkit-transform: rotate(64.8deg); -moz-transform: rotate(64.8deg); -ms-transform: rotate(64.8deg); -o-transform: rotate(64.8deg); transform: rotate(64.8deg);
}
.c100.p19 .bar { -webkit-transform: rotate(68.4deg); -moz-transform: rotate(68.4deg); -ms-transform: rotate(68.4deg); -o-transform: rotate(68.4deg); transform: rotate(68.4deg);
}
.c100.p20 .bar { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg);
}
.c100.p21 .bar { -webkit-transform: rotate(75.6deg); -moz-transform: rotate(75.6deg); -ms-transform: rotate(75.6deg); -o-transform: rotate(75.6deg); transform: rotate(75.6deg);
}
.c100.p22 .bar { -webkit-transform: rotate(79.2deg); -moz-transform: rotate(79.2deg); -ms-transform: rotate(79.2deg); -o-transform: rotate(79.2deg); transform: rotate(79.2deg);
}
.c100.p23 .bar { -webkit-transform: rotate(82.8deg); -moz-transform: rotate(82.8deg); -ms-transform: rotate(82.8deg); -o-transform: rotate(82.8deg); transform: rotate(82.8deg);
}
.c100.p24 .bar { -webkit-transform: rotate(86.4deg); -moz-transform: rotate(86.4deg); -ms-transform: rotate(86.4deg); -o-transform: rotate(86.4deg); transform: rotate(86.4deg);
}
.c100.p25 .bar { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
.c100.p26 .bar { -webkit-transform: rotate(93.6deg); -moz-transform: rotate(93.6deg); -ms-transform: rotate(93.6deg); -o-transform: rotate(93.6deg); transform: rotate(93.6deg);
}
.c100.p27 .bar { -webkit-transform: rotate(97.2deg); -moz-transform: rotate(97.2deg); -ms-transform: rotate(97.2deg); -o-transform: rotate(97.2deg); transform: rotate(97.2deg);
}
.c100.p28 .bar { -webkit-transform: rotate(100.8deg); -moz-transform: rotate(100.8deg); -ms-transform: rotate(100.8deg); -o-transform: rotate(100.8deg); transform: rotate(100.8deg);
}
.c100.p29 .bar { -webkit-transform: rotate(104.4deg); -moz-transform: rotate(104.4deg); -ms-transform: rotate(104.4deg); -o-transform: rotate(104.4deg); transform: rotate(104.4deg);
}
.c100.p30 .bar { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg);
}
.c100.p31 .bar { -webkit-transform: rotate(111.6deg); -moz-transform: rotate(111.6deg); -ms-transform: rotate(111.6deg); -o-transform: rotate(111.6deg); transform: rotate(111.6deg);
}
.c100.p32 .bar { -webkit-transform: rotate(115.2deg); -moz-transform: rotate(115.2deg); -ms-transform: rotate(115.2deg); -o-transform: rotate(115.2deg); transform: rotate(115.2deg);
}
.c100.p33 .bar { -webkit-transform: rotate(118.8deg); -moz-transform: rotate(118.8deg); -ms-transform: rotate(118.8deg); -o-transform: rotate(118.8deg); transform: rotate(118.8deg);
}
.c100.p34 .bar { -webkit-transform: rotate(122.4deg); -moz-transform: rotate(122.4deg); -ms-transform: rotate(122.4deg); -o-transform: rotate(122.4deg); transform: rotate(122.4deg);
}
.c100.p35 .bar { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -ms-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg);
}
.c100.p36 .bar { -webkit-transform: rotate(129.6deg); -moz-transform: rotate(129.6deg); -ms-transform: rotate(129.6deg); -o-transform: rotate(129.6deg); transform: rotate(129.6deg);
}
.c100.p37 .bar { -webkit-transform: rotate(133.2deg); -moz-transform: rotate(133.2deg); -ms-transform: rotate(133.2deg); -o-transform: rotate(133.2deg); transform: rotate(133.2deg);
}
.c100.p38 .bar { -webkit-transform: rotate(136.8deg); -moz-transform: rotate(136.8deg); -ms-transform: rotate(136.8deg); -o-transform: rotate(136.8deg); transform: rotate(136.8deg);
}
.c100.p39 .bar { -webkit-transform: rotate(140.4deg); -moz-transform: rotate(140.4deg); -ms-transform: rotate(140.4deg); -o-transform: rotate(140.4deg); transform: rotate(140.4deg);
}
.c100.p40 .bar { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -ms-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg);
}
.c100.p41 .bar { -webkit-transform: rotate(147.6deg); -moz-transform: rotate(147.6deg); -ms-transform: rotate(147.6deg); -o-transform: rotate(147.6deg); transform: rotate(147.6deg);
}
.c100.p42 .bar { -webkit-transform: rotate(151.2deg); -moz-transform: rotate(151.2deg); -ms-transform: rotate(151.2deg); -o-transform: rotate(151.2deg); transform: rotate(151.2deg);
}
.c100.p43 .bar { -webkit-transform: rotate(154.8deg); -moz-transform: rotate(154.8deg); -ms-transform: rotate(154.8deg); -o-transform: rotate(154.8deg); transform: rotate(154.8deg);
}
.c100.p44 .bar { -webkit-transform: rotate(158.4deg); -moz-transform: rotate(158.4deg); -ms-transform: rotate(158.4deg); -o-transform: rotate(158.4deg); transform: rotate(158.4deg);
}
.c100.p45 .bar { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg);
}
.c100.p46 .bar { -webkit-transform: rotate(165.6deg); -moz-transform: rotate(165.6deg); -ms-transform: rotate(165.6deg); -o-transform: rotate(165.6deg); transform: rotate(165.6deg);
}
.c100.p47 .bar { -webkit-transform: rotate(169.2deg); -moz-transform: rotate(169.2deg); -ms-transform: rotate(169.2deg); -o-transform: rotate(169.2deg); transform: rotate(169.2deg);
}
.c100.p48 .bar { -webkit-transform: rotate(172.8deg); -moz-transform: rotate(172.8deg); -ms-transform: rotate(172.8deg); -o-transform: rotate(172.8deg); transform: rotate(172.8deg);
}
.c100.p49 .bar { -webkit-transform: rotate(176.4deg); -moz-transform: rotate(176.4deg); -ms-transform: rotate(176.4deg); -o-transform: rotate(176.4deg); transform: rotate(176.4deg);
}
.c100.p50 .bar { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.c100.p51 .bar { -webkit-transform: rotate(183.6deg); -moz-transform: rotate(183.6deg); -ms-transform: rotate(183.6deg); -o-transform: rotate(183.6deg); transform: rotate(183.6deg);
}
.c100.p52 .bar { -webkit-transform: rotate(187.2deg); -moz-transform: rotate(187.2deg); -ms-transform: rotate(187.2deg); -o-transform: rotate(187.2deg); transform: rotate(187.2deg);
}
.c100.p53 .bar { -webkit-transform: rotate(190.8deg); -moz-transform: rotate(190.8deg); -ms-transform: rotate(190.8deg); -o-transform: rotate(190.8deg); transform: rotate(190.8deg);
}
.c100.p54 .bar { -webkit-transform: rotate(194.4deg); -moz-transform: rotate(194.4deg); -ms-transform: rotate(194.4deg); -o-transform: rotate(194.4deg); transform: rotate(194.4deg);
}
.c100.p55 .bar { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -ms-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg);
}
.c100.p56 .bar { -webkit-transform: rotate(201.6deg); -moz-transform: rotate(201.6deg); -ms-transform: rotate(201.6deg); -o-transform: rotate(201.6deg); transform: rotate(201.6deg);
}
.c100.p57 .bar { -webkit-transform: rotate(205.2deg); -moz-transform: rotate(205.2deg); -ms-transform: rotate(205.2deg); -o-transform: rotate(205.2deg); transform: rotate(205.2deg);
}
.c100.p58 .bar { -webkit-transform: rotate(208.8deg); -moz-transform: rotate(208.8deg); -ms-transform: rotate(208.8deg); -o-transform: rotate(208.8deg); transform: rotate(208.8deg);
}
.c100.p59 .bar { -webkit-transform: rotate(212.4deg); -moz-transform: rotate(212.4deg); -ms-transform: rotate(212.4deg); -o-transform: rotate(212.4deg); transform: rotate(212.4deg);
}
.c100.p60 .bar { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg);
}
.c100.p61 .bar { -webkit-transform: rotate(219.6deg); -moz-transform: rotate(219.6deg); -ms-transform: rotate(219.6deg); -o-transform: rotate(219.6deg); transform: rotate(219.6deg);
}
.c100.p62 .bar { -webkit-transform: rotate(223.2deg); -moz-transform: rotate(223.2deg); -ms-transform: rotate(223.2deg); -o-transform: rotate(223.2deg); transform: rotate(223.2deg);
}
.c100.p63 .bar { -webkit-transform: rotate(226.8deg); -moz-transform: rotate(226.8deg); -ms-transform: rotate(226.8deg); -o-transform: rotate(226.8deg); transform: rotate(226.8deg);
}
.c100.p64 .bar { -webkit-transform: rotate(230.4deg); -moz-transform: rotate(230.4deg); -ms-transform: rotate(230.4deg); -o-transform: rotate(230.4deg); transform: rotate(230.4deg);
}
.c100.p65 .bar { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -ms-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg);
}
.c100.p66 .bar { -webkit-transform: rotate(237.6deg); -moz-transform: rotate(237.6deg); -ms-transform: rotate(237.6deg); -o-transform: rotate(237.6deg); transform: rotate(237.6deg);
}
.c100.p67 .bar { -webkit-transform: rotate(241.2deg); -moz-transform: rotate(241.2deg); -ms-transform: rotate(241.2deg); -o-transform: rotate(241.2deg); transform: rotate(241.2deg);
}
.c100.p68 .bar { -webkit-transform: rotate(244.8deg); -moz-transform: rotate(244.8deg); -ms-transform: rotate(244.8deg); -o-transform: rotate(244.8deg); transform: rotate(244.8deg);
}
.c100.p69 .bar { -webkit-transform: rotate(248.4deg); -moz-transform: rotate(248.4deg); -ms-transform: rotate(248.4deg); -o-transform: rotate(248.4deg); transform: rotate(248.4deg);
}
.c100.p70 .bar { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -ms-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg);
}
.c100.p71 .bar { -webkit-transform: rotate(255.6deg); -moz-transform: rotate(255.6deg); -ms-transform: rotate(255.6deg); -o-transform: rotate(255.6deg); transform: rotate(255.6deg);
}
.c100.p72 .bar { -webkit-transform: rotate(259.2deg); -moz-transform: rotate(259.2deg); -ms-transform: rotate(259.2deg); -o-transform: rotate(259.2deg); transform: rotate(259.2deg);
}
.c100.p73 .bar { -webkit-transform: rotate(262.8deg); -moz-transform: rotate(262.8deg); -ms-transform: rotate(262.8deg); -o-transform: rotate(262.8deg); transform: rotate(262.8deg);
}
.c100.p74 .bar { -webkit-transform: rotate(266.4deg); -moz-transform: rotate(266.4deg); -ms-transform: rotate(266.4deg); -o-transform: rotate(266.4deg); transform: rotate(266.4deg);
}
.c100.p75 .bar { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg);
}
.c100.p76 .bar { -webkit-transform: rotate(273.6deg); -moz-transform: rotate(273.6deg); -ms-transform: rotate(273.6deg); -o-transform: rotate(273.6deg); transform: rotate(273.6deg);
}
.c100.p77 .bar { -webkit-transform: rotate(277.2deg); -moz-transform: rotate(277.2deg); -ms-transform: rotate(277.2deg); -o-transform: rotate(277.2deg); transform: rotate(277.2deg);
}
.c100.p78 .bar { -webkit-transform: rotate(280.8deg); -moz-transform: rotate(280.8deg); -ms-transform: rotate(280.8deg); -o-transform: rotate(280.8deg); transform: rotate(280.8deg);
}
.c100.p79 .bar { -webkit-transform: rotate(284.4deg); -moz-transform: rotate(284.4deg); -ms-transform: rotate(284.4deg); -o-transform: rotate(284.4deg); transform: rotate(284.4deg);
}
.c100.p80 .bar { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -ms-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg);
}
.c100.p81 .bar { -webkit-transform: rotate(291.6deg); -moz-transform: rotate(291.6deg); -ms-transform: rotate(291.6deg); -o-transform: rotate(291.6deg); transform: rotate(291.6deg);
}
.c100.p82 .bar { -webkit-transform: rotate(295.2deg); -moz-transform: rotate(295.2deg); -ms-transform: rotate(295.2deg); -o-transform: rotate(295.2deg); transform: rotate(295.2deg);
}
.c100.p83 .bar { -webkit-transform: rotate(298.8deg); -moz-transform: rotate(298.8deg); -ms-transform: rotate(298.8deg); -o-transform: rotate(298.8deg); transform: rotate(298.8deg);
}
.c100.p84 .bar { -webkit-transform: rotate(302.4deg); -moz-transform: rotate(302.4deg); -ms-transform: rotate(302.4deg); -o-transform: rotate(302.4deg); transform: rotate(302.4deg);
}
.c100.p85 .bar { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -ms-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg);
}
.c100.p86 .bar { -webkit-transform: rotate(309.6deg); -moz-transform: rotate(309.6deg); -ms-transform: rotate(309.6deg); -o-transform: rotate(309.6deg); transform: rotate(309.6deg);
}
.c100.p87 .bar { -webkit-transform: rotate(313.2deg); -moz-transform: rotate(313.2deg); -ms-transform: rotate(313.2deg); -o-transform: rotate(313.2deg); transform: rotate(313.2deg);
}
.c100.p88 .bar { -webkit-transform: rotate(316.8deg); -moz-transform: rotate(316.8deg); -ms-transform: rotate(316.8deg); -o-transform: rotate(316.8deg); transform: rotate(316.8deg);
}
.c100.p89 .bar { -webkit-transform: rotate(320.4deg); -moz-transform: rotate(320.4deg); -ms-transform: rotate(320.4deg); -o-transform: rotate(320.4deg); transform: rotate(320.4deg);
}
.c100.p90 .bar { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg);
}
.c100.p91 .bar { -webkit-transform: rotate(327.6deg); -moz-transform: rotate(327.6deg); -ms-transform: rotate(327.6deg); -o-transform: rotate(327.6deg); transform: rotate(327.6deg);
}
.c100.p92 .bar { -webkit-transform: rotate(331.2deg); -moz-transform: rotate(331.2deg); -ms-transform: rotate(331.2deg); -o-transform: rotate(331.2deg); transform: rotate(331.2deg);
}
.c100.p93 .bar { -webkit-transform: rotate(334.8deg); -moz-transform: rotate(334.8deg); -ms-transform: rotate(334.8deg); -o-transform: rotate(334.8deg); transform: rotate(334.8deg);
}
.c100.p94 .bar { -webkit-transform: rotate(338.4deg); -moz-transform: rotate(338.4deg); -ms-transform: rotate(338.4deg); -o-transform: rotate(338.4deg); transform: rotate(338.4deg);
}
.c100.p95 .bar { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg);
}
.c100.p96 .bar { -webkit-transform: rotate(345.6deg); -moz-transform: rotate(345.6deg); -ms-transform: rotate(345.6deg); -o-transform: rotate(345.6deg); transform: rotate(345.6deg);
}
.c100.p97 .bar { -webkit-transform: rotate(349.2deg); -moz-transform: rotate(349.2deg); -ms-transform: rotate(349.2deg); -o-transform: rotate(349.2deg); transform: rotate(349.2deg);
}
.c100.p98 .bar { -webkit-transform: rotate(352.8deg); -moz-transform: rotate(352.8deg); -ms-transform: rotate(352.8deg); -o-transform: rotate(352.8deg); transform: rotate(352.8deg);
}
.c100.p99 .bar { -webkit-transform: rotate(356.4deg); -moz-transform: rotate(356.4deg); -ms-transform: rotate(356.4deg); -o-transform: rotate(356.4deg); transform: rotate(356.4deg);
}
.c100.p100 .bar { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);
}
.c100:hover { cursor: default;
}
.c100:hover > span { width: 3.33em; line-height: 3.33em; font-size: 0.3em; color: #307bbb;
}
.c100:hover:after { top: 0.04em; left: 0.04em; width: 0.92em; height: 0.92em;
}
.c100.dark { background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill { border-color: #c6ff00 !important;
}
.c100.dark > span { color: #777777;
}
.c100.dark:after { background-color: #666666;
}
.c100.dark:hover > span { color: #c6ff00;
}
.c100.green .bar,
.c100.green .fill { border-color: #4db53c !important;
}
.c100.green:hover > span { color: #4db53c;
}
.c100.green.dark .bar,
.c100.green.dark .fill { border-color: #5fd400 !important;
}
.c100.green.dark:hover > span { color: #5fd400;
}
.c100.orange .bar,
.c100.orange .fill { border-color: #dd9d22 !important;
}
.c100.orange:hover > span { color: #dd9d22;
}
.c100.orange.dark .bar,
.c100.orange.dark .fill { border-color: #e08833 !important;
}
.c100.orange.dark:hover > span { color: #e08833;
}
/* icons */
.icon { color: #161616; position: relative; display: inline-block; width: 12rem; height: 10rem;
}
.cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875rem; height: 3.6875rem; margin: -1.84375rem; background: currentColor; border-radius: 50%; box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem, 2.0625rem 0.9375rem 0 -0.9375rem, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff;
}
.cloud:after { content: ''; position: absolute; bottom: 0; left: -0.5rem; display: block; width: 4.5625rem; height: 1rem; background: currentColor; box-shadow: 0 0.375rem #fff;
}
.cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem #fff, 2.0625rem 0.9375rem 0 -0.9375rem #fff, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff; opacity: 0.3; -webkit-transform: scale(0.5) translate(6rem, -3rem); -ms-transform: scale(0.5) translate(6rem, -3rem); transform: scale(0.5) translate(6rem, -3rem); -webkit-animation: cloud 4s linear infinite; animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after { background: #fff;
}
.sun { position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 0.375rem #fff; -webkit-animation: spin 12s infinite linear; animation: spin 12s infinite linear;
}
.rays { position: absolute; top: -2rem; left: 50%; display: block; width: 0.375rem; height: 1.125rem; margin-left: -0.1875rem; background: #fff; border-radius: 0.25rem; box-shadow: 0 5.375rem #fff;
}
.rays:before,
.rays:after { content: ''; position: absolute; top: 0rem; left: 0rem; display: block; width: 0.375rem; height: 1.125rem; -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: 50% 3.25rem; -ms-transform-origin: 50% 3.25rem; transform-origin: 50% 3.25rem; background: #fff; border-radius: 0.25rem; box-shadow: 0 5.375rem #fff;
}
.rays:before { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg);
}
.cloud + .sun { margin: -2rem 1rem;
}
.rain,
.lightning,
.snow { position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75rem; height: 3.75rem; margin: 0.375rem 0 0 -2rem; background: currentColor;
}
.rain:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125rem; height: 1.125rem; margin: -1rem 0 0 -0.25rem; background: #0cf; border-radius: 100% 0 60% 0.83333333% 0 100% 50%; box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); -webkit-transform: rotate(-28deg); -ms-transform: rotate(-28deg); transform: rotate(-28deg); -webkit-animation: rain 3s linear infinite; animation: rain 3s linear infinite;
}
.bolt { position: absolute; top: 50%; left: 50%; width: 1rem; height: 0.5rem; margin: -0.875rem 0 0 -0.5rem; color: #fff; background: #fff; opacity: 0.3; -webkit-animation: lightning 2s linear infinite; animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) { width: 0.5rem; height: 0.25rem; margin: -1.875rem 0 0 -1.5rem; -webkit-transform: translate(2.5rem, 2.25rem); -ms-transform: translate(2.5rem, 2.25rem); transform: translate(2.5rem, 2.25rem); opacity: 0.2; -webkit-animation: lightning 1.5s linear infinite; animation: lightning 1.5s linear infinite;
}
.bolt:before,
.bolt:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -1.75rem 0 0 -1.25rem; border-top: 1.25rem solid transparent; border-right: 0.75rem solid; border-bottom: 0.75rem solid; border-left: 0.5rem solid transparent; -webkit-transform: skewX(-10deg); -ms-transform: skewX(-10deg); transform: skewX(-10deg);
}
.bolt:after { margin: -0.25rem 0 0 -0.0125rem; border-top: 0.75rem solid; border-right: 0.5rem solid transparent; border-bottom: 1.25rem solid transparent; border-left: 0.75rem solid; -webkit-transform: skewX(-10deg); -ms-transform: skewX(-10deg); transform: skewX(-10deg);
}
.bolt:nth-child(2):before { margin: -0.875rem 0 0 -0.75rem; border-top: 0.625rem solid transparent; border-right: 0.375rem solid; border-bottom: 0.375rem solid; border-left: 0.25rem solid transparent;
}
.bolt:nth-child(2):after { margin: -0.125rem 0 0 0; border-top: 0.375rem solid; border-right: 0.25rem solid transparent; border-bottom: 0.625rem solid transparent; border-left: 0.375rem solid;
}
.flake:before,
.flake:after { position: absolute; top: 50%; left: 50%; margin: -1.25rem 0 0 -1.25rem; content: '\2744'; color: #fff; list-height: 1em; opacity: 0.2; -webkit-animation: spin 8s linear infinite reverse; animation: spin 8s linear infinite reverse;
}
.flake:after { margin: -0.125rem 0 0 -1.375rem; font-size: 1.5rem; opacity: 0.4; -webkit-animation: spin 14s linear infinite; animation: spin 14s linear infinite;
}
.flake:nth-child(2):before { margin: -0.875rem 0 0 0.25rem; font-size: 1.25rem; opacity: 0.2; -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite;
}
.flake:nth-child(2):after { margin: 0.5rem 0 0 0.125rem; font-size: 2rem; opacity: 0.4; -webkit-animation: spin 16s linear infinite reverse; animation: spin 16s linear infinite reverse;
}
/* Animations */
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes cloud { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; -webkit-transform: scale(0.5) translate(-6rem, -3rem); transform: scale(0.5) translate(-6rem, -3rem); }
}
@keyframes cloud { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; -webkit-transform: scale(0.5) translate(-6rem, -3rem); transform: scale(0.5) translate(-6rem, -3rem); }
}
@-webkit-keyframes rain { 0% { background: #0cf; box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; } 25% { box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); } 50% { background: rgba(255, 255, 255, 0.3); box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); } 100% { box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; }
}
@keyframes rain { 0% { background: #0cf; box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; } 25% { box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); } 50% { background: rgba(255, 255, 255, 0.3); box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2); } 100% { box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf; }
}
@-webkit-keyframes lightning { 45% { color: #fff; background: #fff; opacity: 0.2; } 50% { color: #0cf; background: #0cf; opacity: 1; } 55% { color: #fff; background: #fff; opacity: 0.2; }
}
@keyframes lightning { 45% { color: #fff; background: #fff; opacity: 0.2; } 50% { color: #0cf; background: #0cf; opacity: 1; } 55% { color: #fff; background: #fff; opacity: 0.2; }
}

WeatherMap - Script Codes JS Codes

//marker coordinates
var coordinates = [ [-15.78 ,	-47.93 , "Brazil"], [-33.46 , -70.65 , "Chile"], [45.81	, 15.98 , "Croatia"], [30.06	, 31.25 , "Egito"], [48.85	, 2.35 , "France"], [28.64 ,	77.22 , "India"], [13.51	, 2.11 , "Nigeria"], [18.47	, -66.11 , "Puerto Rico"], [55.75 ,	37.62 , "Russia"], [-25.74	, 28.19 , "South Africa"], [38.90	, -77.04 , "United States"], [51.51	, -0.13 , "United Kingdom"], [39.91	, 116.40 , "China"]
];
//positions of weather on screen
var screenposition = [ //'[top , left]' ["0%" , "10%"], //top ["20%" , "10%"], ["40%" , "10%"], // end top ["60%" , "10%"], //left ["80%" , "10%"], ["0%" , "60%"], //end left ["0%" , "80%"], //bottom ["20%" , "80%"], ["40%" , "80%"], ["60%" , "80%"], //end bottom ["80%" , "80%"], //right ["80%" , "60%"], ["80%" , "40%"]
];
var objectIndex = 0; //current object
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 0, lng: 0}, zoom: 2, mapTypeControl: false //hide controls
});
map.setOptions({ //disable other features draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true
});
//add markers and your listeners
for(var i = 0 ; i < coordinates.length ; i++){ var marker = new google.maps.Marker({ position: {lat: coordinates[i][0] , lng: coordinates[i][1]}, map: map, title: coordinates[i][2] }); marker.addListener("mouseover",function(event){ console.log(this); var lat = this.position.lat(); var lng = this.position.lng(); var position = {}; position.coords = {} position.coords.latitude = lat; position.coords.longitude = lng; getWeatherInfo(position, this); //append position and marker })
}
function getWeatherInfo(position , marker){ //api call example: //http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&APPID=d8d409f23f334713a789b30beb5daa84 if(marker && marker.hasWeather) return; showModalLoading(position , marker);
}
$(document).ready(function(){ console.log("on ready"); //http://ipinfo.io/json //current position //get current location $.ajax({ method: "GET", url: "http://ipinfo.io/json" }) .done(function( data ) { var loc = (data.loc).split(','); var position = {}; position.coords = {} position.coords.latitude = loc[0]; position.coords.longitude = loc[1]; showModalLoading(position, null); });
});
function showModalLoading(position , marker){ //console.log("show modal"); if(marker && !marker.hasWeather || !marker){ $('#progressmodal').modal('show'); } var counter = 0; $.ajax({ method: "GET", url: "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=d8d409f23f334713a789b30beb5daa84" }) .done(function( data ) { console.log(data); var i = setInterval(function(){ $('.c100').removeClass('p' + (counter + 1)); $('.c100').addClass('p' + (counter + 2)); counter++; if(counter === 100) { clearInterval(i); $('#progressmodal').modal('hide'); appendWeatherElement(marker , data); } }, 10); });
}
function appendWeatherElement(marker , weatherObj){ //var div = $("body") var weather = $(".weather-panel").clone(); //objectIndex weather.removeClass("weather-panel"); //remove cloned class weather.addClass("weather-panel-object"); //current object class objectIndex++; $("body").append(weather); $(weather).show(); //show hide element //do nothing if(marker && marker.hasWeather) return; var time = weatherObj.weather[0].main; var main = time.toLowerCase();//get time type var temp = weatherObj.main.temp; //temp //temp = (temp - 32) * (5 / 9); //to celsius temp = temp - 273.15; //kelvin to celsius console.log(main); // var iconcontainer = $(weather).find(".weather-icon"); console.dir(iconcontainer); //iconcontainer = $(iconcontainer).clone(); //$(iconcontainer).removeClass("weather-icon"); //clone icons var el = $("." + main).clone(); $(el).removeClass(main); //$(iconcontainer).remove(el); //$(iconcontainer).append(el); el.appendTo(iconcontainer); //$(el).show(); $(el).removeClass("hide"); for( var i = 1 ; i < $(iconcontainer).children().length; i++){ //remove other children $(iconcontainer).children().slice(i).detach(); } //iconcontainer.empty(); var weatherinfo = $(weather).find(".weather-info"); var cityEl = $(weatherinfo).find(".city"); var tempEl = $(weatherinfo).find(".temp"); var funcEl = $(weatherinfo).find(".text-icon"); funcEl.append(time); //append time tempEl.append(temp.toFixed(2) + " °C"); //append temp //local weather if(marker === null){ var city = weatherObj.name; cityEl.append(city); $( weather).animate({ top: "30px", right: "45%", }, 1500, function() { // Animation complete. }); //world weather } else { if(!marker.hasWeather){ marker.hasWeather = true; var pos = screenposition.pop(); var city = marker.title; cityEl.append(city); $( weather).animate({ top: pos[0] , right: pos[1] , }, 1500, function() { // Animation complete. }); } }
}

Home Page	Home
Developer	Paulo Sérgio
Username	paulo101977
Uploaded	November 19, 2022
Rating	3
Size	13,360 Kb
Views	14,168

Do you need developer help for WeatherMap?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Paulo Sérgio (paulo101977) Script Codes

Name	Size
Input Range Multiple CSS Jquery Javascript Scss Sass	2,880 Kb
Menu Navigation Items	5,500 Kb
Project Singapoure	4,037 Kb
SunRay Css	2,200 Kb
Wiki Search	3,062 Kb
D3js SVG Clip Path	5,740 Kb
Twitch.tv API Query	3,631 Kb
Tic Tac Toe Game	6,111 Kb
Tributo a Renato Russo	5,611 Kb
Donut Chart D3js	3,246 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
The Walking Raymarcher	Xorxor_hu	7,934 Kb
Cars going	Netoguimaraes	1,699 Kb
Comparison of Roboto Draft vs Roboto	Jxnblk	2,880 Kb
BabyStore	Pablo-Ai	3,807 Kb
Sass random color animation	Jotavejv	4,827 Kb
Blockquote design	Sjmcpherson	1,863 Kb
Faux column absolute wrapper	Yurimorini	1,823 Kb
Drag in vanilla js using dotval math instead of translate	Paulq	2,662 Kb
Ionic - Wordpress REST API starter	Superpikar	2,961 Kb
Form Labels	Bartuc	2,717 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!