-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (129 loc) · 6.09 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
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/styles.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/leaflet.css" />
<title>Geocodding & Reverse Geocodding</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Carto BAN</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#" onclick="makeActive(event)">Home</a></li>
<li><a href="#geocodding" onclick="makeActive(event)">Géocodage</a></li>
<li><a href="#reverse-geocodding" onclick="makeActive(event)">Géocodage Inverse</a></li>
<li><a href="#geolocator" onclick="makeActive(event)">Géolocalisation</a></li>
<li><a href="#about" onclick="makeActive(event)">A propos</a></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li class="dropdown-header">Marqueurs</li>
<li><a id="persistantMarkerY">Persistants</a></li>
<li><a id="persistantMarkerN">Non Persistants</a></li>
</ul>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Configuration <span class="caret"></span></a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="starter-template">
<h1>Service de géocodage et géocodage inverse</h1>
<p class="lead">
Ce site utilise fièrement
<a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>,
<a href="https://leafletjs.com/" target="_blank">Leaflet</a> et
<a href="https://adresse.data.gouv.fr/" target="_blank">la base adresse nationale</a>.
</p>
</div>
</div>
<section>
<div class="row">
<div class="col-md-4" id="geocodding">
<h2>Géocodage :<br>Adresse <span>→</span> Géométrie</h2>
<ol>
<li>Vous renseignez une adresse et vous validez,</li>
<li>L'adresse est trouvée : elle est affichée sur la carte.<br>La recherche n'est pas probante : une liste est proposée.</li>
<!--li>Elle est corrigée et/ou complétée en direct,</li-->
</ol>
<div class="col-md-6" id="address_searcher">
<p>
<label for="adresse">Saisie de l'adresse :</label>
</p>
<div>
<textarea id="adresse" placeholder="Adresse à rechercher"></textarea>
</div>
<input type="submit" name="submit_address" id="submit_address" value="Rechercher">
</div>
<div class="col-md-6" id="geocodding_result">
</div>
</div>
<div class="col-md-4" id="geolocator">
<h2>Géo-localisation</h2>
<p>En se bassant sur :</p>
<ul>
<li>votre localisation,</li>
<li>votre adresse IP,</li>
</ul>
<p>il est possible d'afficher votre position présumée sur la carte.</p>
<input type="submit" id="locate" value="Localisez moi">
<p id="geolocatorResult"></p>
</div>
<div class="col-md-4" id="reverse-geocodding">
<h2>Géocodage inverse :<br>Géométrie <span>→</span> Adresse</h2>
<ol>
<li>Vous renseignez une géométrie au format (latitude,longitude),</li>
<li>Elle s'affiche sur la carte,</li>
<li>L'adresse correspondante est retournée.</li>
</ol>
<div class="col-md-6" id="coordinates_searcher">
<p>
<label for="coordonnees">Saisie des coordonnées :</label>
</p>
<p>
<textarea name="coordonnees" id="coordonnees" placeholder="Exemple : 48.856578, 2.351828" title="Séparateur : {,|;| } avec ou sans espace avant et/ou après."></textarea>
</p>
<p>
<input type="submit" name="submit_coordinates" id="submit_coordinates" value="Rechercher">
</p>
</div>
<div class="col-md-6" id="reverseGeocodding">
<p id="reverseGeocoddingResult"></p>
</div>
</div>
</div>
<div class="container" id="map"></div>
<div class="container" id="about">
<h2>A propos</h2>
<p>
Ce mini-site utilise le projet <a href="https://adresse.data.gouv.fr/" target="_blank">base adresse nationale</a> pour réaliser le géocodage des adresses et le géocodage inverse.<br>
L'affichage est fait via <a href="https://leafletjs.com/" target="_blank">Leaflet</a> avec la cartographie <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>.<br>
<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> est aussi dans la place !
</p>
</div>
</section>
<footer>
<p>Réalisé en 2016 par <a href="https://cv.rmaziere.fr" target="_blank">Romain MAZIERE</a> et disponible sur <a href="https://github.com/rmaziere/onePageGeo" target="_blank">GitHub</a></p>
</footer>
<!-- JavaScript -->
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/leaflet.js"></script>
<script src="./js/leafletIcons.js"></script>
<script src="./js/script.js"></script>
</body>
</html>