From dde4846fab3e517fe38d4f6269d808f284dcdfa8 Mon Sep 17 00:00:00 2001
From: Anton Sarukhanov <code@ant.sr>
Date: Tue, 17 May 2016 21:13:44 -0400
Subject: [PATCH] Cleanup; moved markup for map UI elements into JS.
---
static/css/map.css | 44 +++++++++++++++++-----------------
static/js/map.js | 59 ++++++++++++++++++++++++++--------------------
templates/map.html | 8 -------
3 files changed, 55 insertions(+), 56 deletions(-)
diff --git a/static/css/map.css b/static/css/map.css
index f14f382..a87bd0d 100644
--- a/static/css/map.css
+++ b/static/css/map.css
@@ -41,22 +41,39 @@ fieldset legend ~ label {
}
/* Map Buttons */
+.btn.ctr-wide {
+ position: absolute;
+ bottom: .75em;
+ left: 0;
+ right: 0;
+ width: 50%;
+ text-align: center;
+ color: #fff;
+ background-color: rgba(0,0,0,.8);
+ border: 2px solid rgba(255,255,255,.5);
+ border-radius: .75em;
+ display: none;
+ margin: 0 auto;
+ padding: .4em;
+}
+.btn:hover {
+ cursor: pointer;
+}
#locate {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1001;
-}
-#locate a {
- text-decoration: none;
-}
-#locate a img {
background-color: #222;
border-radius: 50%;
border: 2px solid #666;
padding: 0.4em;
height: 1.5em;
}
+#locate img {
+ height: 1.5em;
+}
+
/* Embed Mode - Hide UI stuff */
.map.embed .leaflet-control-zoom,
@@ -64,23 +81,6 @@ fieldset legend ~ label {
display: none;
}
-/* Messages displayed above the map */
-#msg {
- position: absolute;
- bottom: .75em;
- left: 0;
- width: 100%;
- text-align: center;
-}
-#msg span {
- display: none;
- color: #fff;
- background-color: rgba(0,0,0,.8);
- border: 2px solid rgba(255,255,255,.8);
- border-radius: .75em;
- padding: .4em;
-}
-
/* Text, etc */
.legalese {
text-align: center;
diff --git a/static/js/map.js b/static/js/map.js
index dab43c0..483e2a8 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -1,14 +1,14 @@
-/* The primary class for this project */
var BusMap = {
cookiePrefix: "BM_",
zoomShowVehicles: 15,
stopZoom: 16,
vehicleMaxAge: 10,
+ locateOptions = { timeout: 3000, },
};
/*
- Creates and manipulates a Leaflet map, abstracting away the ugly parts.
- Updating the map (Vehicles, Routes) is also handled here.
+ BusMap.Map is the JS class representing the map.
+ It implements a Leaflet map, fetches bus data, and renders it.
*/
BusMap.Map = function(opts) {
var stops = {};
@@ -21,18 +21,15 @@ BusMap.Map = function(opts) {
/* Constructor - create/initialize the map */
function init() {
// Create Map
- var mapOptions = {};
- var boundsOptions = {
- animate: false,
- reset: true,
- };
-
that.map = that.opts.mapElement;
- that.leaflet = L.map(that.map, mapOptions)
+ that.leaflet = L.map(that.map)
.fitBounds(that.opts.bounds)
- .setMaxBounds(that.opts.bounds, boundsOptions);
- if (that.opts.center) { that.leaflet.setView(that.opts.center); }
- else {that.leaflet.fitBounds(that.opts.bounds)}
+ .setMaxBounds(that.opts.bounds, { animate: false, reset: true });
+ if (that.opts.center) {
+ that.leaflet.setView(that.opts.center);
+ } else {
+ that.leaflet.fitBounds(that.opts.bounds)
+ }
if (that.opts.zoom) that.leaflet.setZoom(that.opts.zoom);
// Listen for hash change
@@ -60,12 +57,9 @@ BusMap.Map = function(opts) {
// Configure and apply the map tile layer
var tileUrl = that.opts.tileUrl;
- var tileOptions = {
- };
+ var tileOptions = {};
if (that.opts.tileOptions) {
- for (var o in that.opts.tileOptions) {
- tileOptions[o] = that.opts.tileOptions[o];
- }
+ tileOptions = that.opts.tileOptions;
}
L.tileLayer(tileUrl, tileOptions).addTo(that.leaflet);
@@ -93,7 +87,7 @@ BusMap.Map = function(opts) {
.appendTo('.leaflet-control-attribution');
// Display welcome screen on first launch
var been_here = BusMap.getCookie('been_here');
- if (!(been_here)) {
+ if (!been_here) {
$("#welcome").show();
}
BusMap.setCookie('been_here', Date.now());
@@ -101,16 +95,21 @@ BusMap.Map = function(opts) {
that.leaflet.on('locationfound', function(l) {
that.leaflet.fitBounds(l.bounds);
});
- $("#locate a").click(function() {
- that.leaflet.locate({
- timeout: 3000,
- });
- });
} else {
// UI stuff for embed mode
$('<a>?</a>').click(function() { showModal('about') })
.appendTo('.leaflet-control-attribution');
}
+
+ // Other UI Elements
+ var ztv_text = 'Zoom To Vehicles';
+ $(that.map).after('<span id="zoomToVehicles" class="btn ctr-wide">' + ztv_text + '</span>');
+ $('#zoomToVehicles').click(goToVehicles)
+ var locate_img = '<img src="static/img/crosshair.png" alt="Locate"></a></div>';
+ $(that.map).after('<div id="locate" class="btn">' + locate_img + '</div>');
+ $("#locate").click(function() {
+ that.leaflet.locate(BusMap.locateOptions);
+ });
};
/* Get Routes (and Stops, and Directions) */
@@ -431,11 +430,11 @@ BusMap.Map = function(opts) {
if (zoom >= BusMap.zoomShowVehicles
&& !(that.leaflet.hasLayer(that.vehicleMarkersGroup))) {
that.leaflet.addLayer(that.vehicleMarkersGroup);
- if (!that.opts.embed) $('#msg-zoomForVehicles').hide();
+ if (!that.opts.embed) $('#zoomToVehicles').hide();
} else if (zoom < BusMap.zoomShowVehicles
&& that.leaflet.hasLayer(that.vehicleMarkersGroup)) {
that.leaflet.removeLayer(that.vehicleMarkersGroup);
- if (!that.opts.embed) $('#msg-zoomForVehicles').show();
+ if (!that.opts.embed) $('#zoomToVehicles').show();
}
}
}
@@ -483,6 +482,14 @@ BusMap.Map = function(opts) {
window.location = window.location.href.replace(window.location.hash, "#" + view);
}
+
+ // Go to zoom level and map center where vehicles are visible.
+ function goToVehicles() {
+ // TODO: this
+ var zoom = BusMap.zoomShowVehicles;
+ console.log("going to zoom " + zoom);
+ }
+
init();
return that;
};
diff --git a/templates/map.html b/templates/map.html
index c4f0704..438d678 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -12,13 +12,6 @@
{% endblock %}
{% block body %}
<div class="map{% if embed %} embed{% endif %}" id="map"></div>
- {# TODO: Generate these using JS, not here. #}
- <div id="msg">
- <span id="msg-zoomForVehicles">Zoom in to see vehicles.</span>
- </div>
- <div id="locate">
- <a href="javascript:void(0);"><img src="static/img/crosshair.png" alt="Locate"></a>
- </div>
<script src="bower/leaflet/dist/leaflet.js"></script>
<script src="bower/Leaflet.label/dist/leaflet.label.js"></script>
<script src="bower/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
@@ -26,7 +19,6 @@
<script src="bower/jquery/dist/jquery.min.js"></script>
<script src="static/js/map.js"></script>
<script>
- // Initialize the map
var map = BusMap.Map({
{% if embed %}embed: true,{% endif %}
agency: {{ agency.tag|tojson|safe }},
--
GitLab