bnjbvr/magellan
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial commit;

Browse Source
This commit is contained in:
Benjamin Bouvier 2019-03-23 19:43:42 +01:00
commit 97b62ca02c
2 changed files with 188 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html Normal file
View File

@ -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>

151
magellan.js Normal file
View File

@ -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 &copy; <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;
});
}
})();