Initial commit;
This commit is contained in:
commit
97b62ca02c
37
index.html
Normal file
37
index.html
Normal 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
151
magellan.js
Normal 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 © <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
Block a user