8fbad8b7b1
Adding an interactive map with a geocoding search bar. We use leaflet with the openstreetmap.fr tiles. As for the geocoding part, we use komoot's photon API for the time being.
38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Aquilenet: Éligibilité FTTH</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
|
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
|
crossorigin=""/>
|
|
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}"/>
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
|
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
|
crossorigin=""></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{url_for('static', filename='vendor/trevorevre-autocomplete-js-style.css')}}"
|
|
/>
|
|
<script src="{{url_for('static', filename='vendor/trevorevre-autocomplete-js.min.js')}}"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="autocomplete" id="search-addr-autocomplete">
|
|
<input id="search-addr-autocomplete-input" class="autocomplete-input"
|
|
spellcheck="false" autocorrect="off"t e autocomplete="off"
|
|
autocapitalize="off" placeholder="Votre Adresse"/>
|
|
<ul class="autocomplete-result-list"/>
|
|
</div>
|
|
<div id="map"/>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
{% include 'app.js'%}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|