-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
120 lines (100 loc) · 4.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tsunami Power</title>
<link rel="icon" type="image/png" href="images/logo.png" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Boostrap dépend de Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript" src="js/carte_leaflet.js"></script>
<link rel="stylesheet" href="style/style.css">
<!-- Dependance Openlayers -->
<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<!-- D3.js -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
$(document).ready(function(){
// Recuperation du nombre d'habitant par ville
/*var wms = new OpenLayers.Layer.WMS( "Population Count",
"http://sedac.ciesin.columbia.edu/geoserver/wms",
{layers: 'gpw-v4:gpw-v4-population-count_2005'} );
alert(wms.div); console.log(wms);*/
//initialise la carte
init_carte_empty()
//initialize('cuba','la-habana','0.002');
$("#recherche").click(function(){
// On supprime la carte
$( "#mymap" ).remove();
// Création de la nouvelle carte
$( ".inner" ).append("<div id=\"mymap\" class=\"la-carte\" style=\"position: absolute;top: 0;left: 0;width: 100%;height: 500px;\"></div>");
var pays=$('#pays').val();
var ville=$('#ville').val();
var minmag=$('#minmag').val();
//Vérification du formulaire
if(!pays){alert('Veuillez entrer un pays'); exit;}
if(!ville){alert('Veuillez entrer une ville'); exit;}
if(!minmag){alert('Veuillez entrer une magnitude minimale'); exit;}
// jeu de test
//initialize('cuba','la-habana','0.002');
initialize(pays,ville,minmag);
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid" style="padding:0px;">
<div class="navbar-header"><img src="images/logo.png" alt="Tsunami predict" height="45px" /></div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Séismes</a></li>
<li class=""><a href='pages/24H.html'>24H</a></li>
<li class=""><a href="pages/heatmap.html">Heatmap</a></li>
<li class=""><a href="pages/cartodb.html">Animation 1</a></li>
<li class=""><a href="pages/cartodb2.html">Animation 2</a></li>
<li class=""><a href="pages/alerte.php">Alerte</a></li>
</ul>
</div>
</nav>
<div style ="height:500px;" class="container">
<div class="col-xs-6 col-sm-3">
<div class="form-group">
<input class="form-control input-sm" placeholder="Pays" type="text" name="pays" id="pays">
</div>
<div class="form-group">
<input class="form-control input-sm" placeholder="Ville" type="text" name="ville" id="ville">
</div>
<div class="form-group">
<input class="form-control input-sm" placeholder="Magnitude minimale (1 - 10)" type="text" name="minmag" id="minmag">
</div>
<div class="form-group">
<input class="form-control input-sm" placeholder="Rayon du cercle (en km)" type="text" name="rayon" id="rayon">
</div>
<button id="recherche" type="submit" class="btn btn-default" style="float:right">Rechercher</button>
</div>
<div class="col-xs-12 col-md-8">
<div class="inner">
<div id="mymap" class="la-carte" style="position: absolute;top: 0;left: 0;width: 100%;height: 500px;"></div>
</div>
</div>
</div>
<!-- footer-->
<div class="well well-sm">Copyright Tsunami Power</div>
</body>
</html>
<!-- JavaScript pour google-analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-88422583-1', 'auto');
ga('send', 'pageview');
</script>