Initial commit;
This commit is contained in:
commit
97b62ca02c
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Cool places in Lyon 7</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
|
||||
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
|
||||
crossorigin=""/>
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Magellan</h1>
|
||||
<form class="form" id="form">
|
||||
<div class="form-group">
|
||||
<input id="address" class="form-control" type="text" name="title" placeholder="Adresse">
|
||||
<input id="submit" class="btn btn-primary" type="submit" value="Search">
|
||||
</div>
|
||||
</form>
|
||||
<ul id="results"></ul>
|
||||
<hr>
|
||||
<div id="the-map" style="width: 100%; height: 800px"></div>
|
||||
</div>
|
||||
|
||||
<script src="//unpkg.com/kinto/dist/kinto.min.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
|
||||
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
||||
|
||||
<script src="magellan.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
(function() {
|
||||
const MIN_ZOOM = 6;
|
||||
const MAX_ZOOM = 18;
|
||||
const INITIAL_ZOOM = 14;
|
||||
|
||||
const TILE_URL = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
|
||||
|
||||
const STATE = {
|
||||
locations: new Map(),
|
||||
};
|
||||
|
||||
let db = new Kinto({
|
||||
bucket: "magellan"
|
||||
});
|
||||
let kintoLocations = db.collection("locations");
|
||||
let syncOptions = {
|
||||
remote: "https://kinto.b.delire.party/v1",
|
||||
//headers: {Authorization: "Basic " + btoa('user:pass')}
|
||||
};
|
||||
|
||||
async function sync() {
|
||||
try {
|
||||
await kintoLocations.sync(syncOptions);
|
||||
} catch (err){
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
|
||||
sync();
|
||||
|
||||
function addLocation(loc) {
|
||||
if (!STATE.locations.has(loc.label)) {
|
||||
let marker = L.marker(loc.coordinates)
|
||||
.addTo(map)
|
||||
.bindPopup(loc.label);
|
||||
STATE.locations.set(loc.label, marker);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
let locations = await kintoLocations.list();
|
||||
locations = locations.data;
|
||||
console.log(locations)
|
||||
locations.forEach(addLocation);
|
||||
} catch (err) {
|
||||
alert(`on init: ${err.toString()}`)
|
||||
}
|
||||
}
|
||||
init();
|
||||
|
||||
async function addNewLocation(loc) {
|
||||
if (addLocation(loc)) {
|
||||
let marker = STATE.locations.get(loc.label);
|
||||
marker.openPopup();
|
||||
|
||||
// Add it to kinto.
|
||||
try {
|
||||
await kintoLocations.create({
|
||||
label: loc.label,
|
||||
coordinates: loc.coordinates
|
||||
});
|
||||
} catch (err) {
|
||||
alert(`Error when creating new location: ${err.toString()}`);
|
||||
};
|
||||
|
||||
sync();
|
||||
} else {
|
||||
STATE.locations.get(loc.label).openPopup();
|
||||
}
|
||||
}
|
||||
|
||||
class Location {
|
||||
constructor({ id, label, coordinates}) {
|
||||
this.id = id || null;
|
||||
this.label = label;
|
||||
this.coordinates = coordinates;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchLocation(address) {
|
||||
// Alternatively, search only for addresses (specialized for Lyon 7).
|
||||
//const GEOCODING_URL = 'https://api-adresse.data.gouv.fr/search/?q={query}&postcode=69007';
|
||||
|
||||
const GEOCODING_URL = 'https://demo.addok.xyz/search/?q={query}&limit=20';
|
||||
let resp = await fetch(GEOCODING_URL.replace('{query}', address));
|
||||
let results = await resp.json();
|
||||
|
||||
results = results.features.map(feature => {
|
||||
let { properties: {label: label}, geometry: { coordinates: coordinates }} = feature;
|
||||
coordinates.unshift(coordinates.pop());
|
||||
return new Location({label, coordinates});
|
||||
});
|
||||
|
||||
console.log(results);
|
||||
return results;
|
||||
}
|
||||
|
||||
let map = L.map('the-map').setView([45.751591, 4.845695], INITIAL_ZOOM);
|
||||
|
||||
L.tileLayer(TILE_URL, {minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM, attribution: 'Carte données © <a href="https://osm.org/copyright/">OpenStreetMap (ODbL)</a> / fond OSM-FR (CC-by-SA), <a href="https://www.data.gouv.fr/fr/datasets/points-dinterets-openstreetmap/">POI: OpenStreetMap (ODbL)</a>, <a href="https://www.data.gouv.fr/fr/datasets/base-d-adresses-nationale-ouverte-bano/">adresses BANO (ODbL)</a>, <a href="https://github.com/addok/addok">geocodeur addok</a>'}).addTo(map);
|
||||
|
||||
let $ = document.querySelector.bind(document);
|
||||
let $address = $('#address');
|
||||
let $submit = $('#submit');
|
||||
let $results = window.results = $('#results');
|
||||
|
||||
$('#form').onsubmit = function(event) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
$submit.onclick = async function() {
|
||||
let address = $address.value.trim();
|
||||
|
||||
$results.innerHTML = `searching for ${address}...`;
|
||||
let firstResult = true;
|
||||
|
||||
let locations = await fetchLocation(address);
|
||||
locations = locations.map(loc => {
|
||||
let li = document.createElement('li');
|
||||
|
||||
let a = document.createElement('a');
|
||||
a.href = '#';
|
||||
a.onclick = function() {
|
||||
L.popup()
|
||||
.setLatLng(loc.coordinates)
|
||||
.setContent(loc.label)
|
||||
.openOn(map);
|
||||
}
|
||||
a.appendChild(document.createTextNode(loc.label))
|
||||
li.appendChild(a);
|
||||
|
||||
li.appendChild(document.createTextNode(' '));
|
||||
|
||||
let button = document.createElement('button');
|
||||
button.appendChild(document.createTextNode('Save'));
|
||||
button.onclick = () => { addNewLocation(loc) };
|
||||
li.appendChild(button);
|
||||
|
||||
if (firstResult) {
|
||||
firstResult = false;
|
||||
$results.innerHTML = '';
|
||||
}
|
||||
$results.appendChild(li);
|
||||
return li;
|
||||
});
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in New Issue