It does something :)
This commit is contained in:
Mats van Reenen
parent
d9c0793b86
commit
5c101e5fb6
5
.firebaserc
Normal file
5
.firebaserc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"projects": {
|
||||
"default": "maps-22434"
|
||||
}
|
||||
}
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -1 +1,2 @@
|
||||
/node_modules
|
||||
node_modules
|
||||
.firebase
|
||||
10
firebase.json
Normal file
10
firebase.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"hosting": {
|
||||
"public": "src/public",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
14
src/public/404.html
Normal file
14
src/public/404.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Maps - 404 page not found</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" />
|
||||
</head>
|
||||
<body class="error">
|
||||
<h1 class="error">404 - page not found</h1>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@ -47,6 +46,8 @@ var points = [
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/logging.js"></script>
|
||||
<script src="js/search.js"></script>
|
||||
<script>
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoibXJlZW5lbiIsImEiOiJjanJncjh1b2kwMHpvM3lucTcyMzNhM3ZrIn0.d_CksoUBcctYlWDhUATpDQ';
|
||||
var map = new mapboxgl.Map({
|
||||
@ -73,61 +74,9 @@ var points = [
|
||||
// }
|
||||
|
||||
map.on('load', function() {
|
||||
map.addSource('abc', {
|
||||
'type': 'geojson',
|
||||
'data': {
|
||||
'type': 'FeatureCollection',
|
||||
'features': [
|
||||
{
|
||||
// feature for Mapbox DC
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'Point',
|
||||
'coordinates': [
|
||||
-77.03238901390978,
|
||||
38.913188059745586
|
||||
]
|
||||
},
|
||||
'properties': {
|
||||
'title': 'Mapbox DC'
|
||||
}
|
||||
},
|
||||
{
|
||||
// feature for Mapbox SF
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'Point',
|
||||
'coordinates': [-122.414, 37.776]
|
||||
},
|
||||
'properties': {
|
||||
'title': 'Mapbox SF'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Add a symbol layer
|
||||
map.addLayer({
|
||||
'id': 'points',
|
||||
'type': 'symbol',
|
||||
'source': 'abc',
|
||||
'layout': {
|
||||
'icon-image': 'def',
|
||||
// get the title name from the source's "title" property
|
||||
'text-field': ['get', 'title'],
|
||||
'text-font': [
|
||||
'Open Sans Semibold',
|
||||
'Arial Unicode MS Bold'
|
||||
],
|
||||
'text-offset': [0, 1.25],
|
||||
'text-anchor': 'top'
|
||||
}
|
||||
});
|
||||
drawRoute([{"geometry":{"coordinates":[[4.45978,51.904408],[4.460869,51.904633],[4.461155,51.904787],[4.460847,51.905215],[4.460584,51.905663],[4.460534,51.905728],[4.460452,51.905753],[4.45957,51.906975],[4.459557,51.90709],[4.459373,51.907221],[4.459131,51.907337],[4.458953,51.907607],[4.457748,51.907288],[4.456716,51.907434],[4.456587,51.907616],[4.456168,51.907527],[4.451688,51.908115]],"type":"LineString"},"legs":[{"annotation":{"distance":[1.7383332996178096,22.45993869066233,42.89666094673274,3.476653363969903,8.251714207993015,9.11956831622667,9.098858713962189,7.832744125431425,7.243404219727797,44.854935114005805,17.080483918802933,7.116146959737379,4.200702579344604,11.5725399881023,3.201029466433791,9.872886105925396,8.002569459719298,2.4759102406504714,3.8043732711046747,20.475954147450018,128.31838599567584,2.864075030418471,2.123302580512181,1.7809432563632868,1.8958210605027446,2.667238770549311,1.8605347706749356,2.466743348337021,1.9641764658696992,1.93080661276293,2.4539669062106473,1.2848285236847528,2.0223619411114524,6.036897781911623,1.5555774522754289,9.244241795514014,11.817183870830993,32.419965273198024,39.92727553391954,48.287710233717306,1.9213455322501025,47.508078107768874,25.145280552527016,1.5628598938059204,20.642580528524928,11.888460998010107,11.975562910758498,2.00234938836148,4.81491418483479,30.610685201690423,57.66309020851639,193.58631980950062,32.46683868168326],"duration":[0.6,8.1,15.4,0.8,2,2.2,2.2,1.9,1.7,10.8,4.1,1.7,1,2.8,0.8,2.4,1.9,0.6,0.9,4.9,30.8,0.7,0.5,0.4,0.5,0.6,0.4,0.6,0.5,0.5,0.6,0.3,0.5,1.4,0.4,2.2,2.8,7.8,9.6,11.6,0.5,11.4,6,0.4,5,2.9,2.9,0.5,1.2,7.3,13.8,46.5,7.8]},"summary":"","weight":281.7,"duration":289.7,"steps":[],"distance":989.5}],"weight_name":"cyclability","weight":281.7,"duration":289.7,"distance":989.5,"voiceLocale":"en-US"}][0])
|
||||
});
|
||||
</script>
|
||||
<script src="js/logging.js"></script>
|
||||
<script src="js/search.js"></script>
|
||||
<!-- <script src="js/drow.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
@ -31,25 +31,48 @@ function getDirection(){
|
||||
response.body.routes &&
|
||||
response.body.routes.length
|
||||
) {
|
||||
console.log("route", response.body.routes[0])
|
||||
geojson = response.body.routes[0].geometry
|
||||
map.addSource('route', {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
properties: {},
|
||||
geometry: geojson
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
console.log("route", response.body.routes[0]);
|
||||
drawRoute(response.body.routes[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawRoute(route){
|
||||
geojson = route.geometry
|
||||
if(map.getLayer('route'))
|
||||
map.removeLayer('route')
|
||||
if(map.getSource('route'))
|
||||
map.removeSource('route')
|
||||
map.addSource('route', {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
properties: {},
|
||||
geometry: geojson
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
map.addLayer({
|
||||
id: 'route',
|
||||
type: 'line',
|
||||
source: 'route',
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round'
|
||||
},
|
||||
paint: {
|
||||
'line-blur': 0,
|
||||
'line-color': '#0000FF',
|
||||
'line-width': 15
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function flyTo(target){
|
||||
var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
|
||||
d = mapboxClient.geocoding.forwardGeocode({
|
||||
|
||||
Reference in New Issue
Block a user