Permalink
Browse files

Legend (#114)

* Adds Legend on bottom left which adds and removes routes dynamically
shuttle stops and user location is hard coded.

* fixed Hound errors

* Attempt at fixing weird indentation shennanigans between the editor I
used and gith.

* fixed another indentation error
  • Loading branch information...
DanielMarion authored and jlyon1 committed Dec 5, 2017
1 parent 5dd9136 commit 870d184e23e63af08cb384625f3e80c65fbb05ea
Showing with 56 additions and 2 deletions.
  1. +19 −0 static/css/application.css
  2. +37 −2 static/js/frontend.js
View
@@ -176,6 +176,25 @@ a.dropdown-schedule > img{
font-weight: 500;
}
/* ===================== */
.legend {
background: 0,12,12;
position: relative;
bottom: 30px;
opacity: 1;
filter: alpha(opacity=50)
color: black;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.88);
box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 1px;
display: inline-block;
;
}
.legend ul {
padding-left: 6px;
padding-right: 5px;
}
.pulsate {
-webkit-animation: pulsate 5s ease-out;
-webkit-animation-iteration-count: infinite;
View
@@ -73,6 +73,7 @@ Vue.component('shuttle-map',{
MapBoundPoints: [],
ShuttleUpdateCounter: 0,
first: true,
legend: L.control({position: 'bottomleft'}),
ShuttleSVG: `<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -86,6 +87,10 @@ Vue.component('shuttle-map',{
</g>
</svg>
`,
CircleSVG: `<?xml version="1.0"?>
<svg height="600" width="600" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="50%" fill="COLOR" />
</svg>`
};
},
methods:{
@@ -95,11 +100,17 @@ Vue.component('shuttle-map',{
return url;
},
initMap: function(){
getLegendIcon: function(color) {
var url = "data:image/svg+xml;base64," + btoa(this.ShuttleSVG.replace("COLOR",color));
return url;
},
initMap: function(){
this.ShuttleMap = L.map('mapid', {
zoomControl: false,
attributionControl: false // hide Leaflet
});
this.ShuttleMap.setView([42.728172, -73.678803], 15.3);
// show attribution without Leaflet
this.ShuttleMap.addControl(L.control.attribution({
@@ -119,6 +130,30 @@ Vue.component('shuttle-map',{
grabRoutes: function(){
$.get( "/routes", this.updateRoutes).fail(function(){routeSuccess = false;});
},
updateLegend () {
let app = this;
app.legend.onAdd = function(map) {
var div = L.DomUtil.create('div','info legend');
var legendstring = "";
for (i = 0; i < app.ShuttleRoutes.length; i++){
let route = app.ShuttleRoutes[i];
console.log(route);
legendstring += `<li><img src=` + app.getLegendIcon(route.color)+`
width="12" height="12"> `+
route.name;
}
div.innerHTML = `<ul style="list-style:none">
<li><img src="static/images/user.svg" width="12" height="12"> You</li>`+
legendstring +
`<li><img src="static/images/circle.svg" width="12" height="12"> Shuttle Stop</li>
</ul>`;
return div;
};
app.legend.addTo(app.ShuttleMap);
},
updateRoutes: function(data){
routeSuccess = true;
@@ -164,7 +199,7 @@ Vue.component('shuttle-map',{
}
this.ShuttleRoutes = updatedRoute;
this.drawRoutes();
this.updateLegend();
},

0 comments on commit 870d184

Please sign in to comment.