|
|
@@ -32,6 +32,8 @@ var VectorLayer = ol.layer.Vector;
|
|
|
var OSM = ol.source.OSM;
|
|
|
var fromLonLat = ol.proj.fromLonLat;
|
|
|
|
|
|
+var Control = ol.control.Control;
|
|
|
+
|
|
|
var LineString = ol.geom.LineString;
|
|
|
|
|
|
//var defaultLonLat = [ -76.5019, 42.4440];
|
|
|
@@ -51,7 +53,7 @@ function _rnd(a,b) {
|
|
|
|
|
|
function example_change_pos() {
|
|
|
|
|
|
- var w = 1/16.0;
|
|
|
+ let w = 1/16.0;
|
|
|
|
|
|
let lonlat = [
|
|
|
defaultLonLat[0] + _rnd(-w,w),
|
|
|
@@ -74,7 +76,7 @@ function example_change_opacity(p) {
|
|
|
// See https://stackoverflow.com/questions/57341190/how-can-i-change-icon-source-dynamically
|
|
|
//
|
|
|
function example_change_image() {
|
|
|
- var _nuimg = new Icon({
|
|
|
+ let _nuimg = new Icon({
|
|
|
anchor: [0.5, 46],
|
|
|
anchorXUnits: 'fraction',
|
|
|
anchorYUnits: 'pixels',
|
|
|
@@ -89,20 +91,20 @@ function example_change_image() {
|
|
|
//var vectorSource = new VectorSource({ features: [iconFeature], });
|
|
|
var vectorSource = new VectorSource();
|
|
|
var _icon = [];
|
|
|
-for (var ii=0; ii<2; ii++) {
|
|
|
+for (let ii=0; ii<2; ii++) {
|
|
|
|
|
|
- var w = 1/32.0;
|
|
|
+ let w = 1/32.0;
|
|
|
let lonlat = [
|
|
|
defaultLonLat[0] + _rnd(-w,w),
|
|
|
defaultLonLat[1] + _rnd(-w,w)];
|
|
|
let merc = fromLonLat(lonlat);
|
|
|
|
|
|
- var iconFeature = new Feature({
|
|
|
+ let iconFeature = new Feature({
|
|
|
geometry: new Point([merc[0], merc[1]]),
|
|
|
name: 'bus'
|
|
|
});
|
|
|
|
|
|
- var iconStyle = new Style({
|
|
|
+ let iconStyle = new Style({
|
|
|
image: new Icon({
|
|
|
anchor: [0.5, 46],
|
|
|
anchorXUnits: 'fraction',
|
|
|
@@ -136,16 +138,63 @@ const rasterLayer = new TileLayer({
|
|
|
|
|
|
//--
|
|
|
|
|
|
+
|
|
|
+//-------------------
|
|
|
+//-------------------
|
|
|
+//-------------------
|
|
|
+
|
|
|
+
|
|
|
const g_map = new Map({
|
|
|
//layers: [rasterLayer, vectorLayer, routeLayer],
|
|
|
layers: [rasterLayer, busLayer ],
|
|
|
target: document.getElementById('map'),
|
|
|
+
|
|
|
+ controls:[],
|
|
|
view: new View({
|
|
|
center: defaultWebMerc,
|
|
|
zoom: 11,
|
|
|
}),
|
|
|
});
|
|
|
|
|
|
+class CustomToggle extends Control {
|
|
|
+ constructor(opt) {
|
|
|
+ opt = opt || {};
|
|
|
+ let ele = document.createElement("button");
|
|
|
+ ele.id = 'ui_route_toggle';
|
|
|
+ ele.innerHTML = "Route";
|
|
|
+
|
|
|
+ // class="btn" id="sidebarToggle" style='display:float;'
|
|
|
+ ele.classList.add("custom-button");
|
|
|
+
|
|
|
+ super({
|
|
|
+ element: ele,
|
|
|
+ target: opt.target
|
|
|
+ });
|
|
|
+
|
|
|
+ ele.addEventListener('click', this.fire.bind(this), false);
|
|
|
+ }
|
|
|
+
|
|
|
+ fire() {
|
|
|
+ document.body.classList.toggle('sb-sidenav-toggled');
|
|
|
+ localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
|
|
|
+
|
|
|
+ // hacky, but functional
|
|
|
+ //
|
|
|
+ setTimeout(_resize, 250);
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+g_map.addControl(new CustomToggle({ className: 'custom-zoom' }));
|
|
|
+
|
|
|
+//-------------------
|
|
|
+//-------------------
|
|
|
+//-------------------
|
|
|
+
|
|
|
+
|
|
|
+g_map.addControl(new ol.control.Zoom({
|
|
|
+ className: 'custom-zoom'
|
|
|
+}));
|
|
|
+
|
|
|
const element = document.getElementById('popup');
|
|
|
|
|
|
const popup = new Overlay({
|
|
|
@@ -159,7 +208,7 @@ g_map.addOverlay(popup);
|
|
|
//
|
|
|
g_map.on('click', function (evt) {
|
|
|
|
|
|
- // note working (wip)
|
|
|
+ // not working (wip)
|
|
|
//
|
|
|
/*
|
|
|
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
|
|
|
@@ -199,7 +248,7 @@ setInterval( function() {
|
|
|
|
|
|
function update_buses(json_gtfs) {
|
|
|
|
|
|
- var bearingIdxLookup = [ "0", "45", "90", "135", "180", "225", "270", "315" ];
|
|
|
+ let bearingIdxLookup = [ "0", "45", "90", "135", "180", "225", "270", "315" ];
|
|
|
|
|
|
for (let ii=0; ii<json_gtfs.entityList.length; ii++) {
|
|
|
let id = json_gtfs.entityList[ii].id;
|
|
|
@@ -221,7 +270,7 @@ function update_buses(json_gtfs) {
|
|
|
let iheading = Math.floor( (parseInt( bearing ) + 23) / 45 );
|
|
|
if (iheading > 7) { iheading = 0; }
|
|
|
|
|
|
- var _nuimg = new Icon({
|
|
|
+ let _nuimg = new Icon({
|
|
|
anchor: [0.5, 46],
|
|
|
anchorXUnits: 'fraction',
|
|
|
anchorYUnits: 'pixels',
|
|
|
@@ -239,8 +288,8 @@ function update_buses(json_gtfs) {
|
|
|
function fetch_gtfs_vehicle_position() {
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
xhr.onload = function() {
|
|
|
- var ab = xhr.response;
|
|
|
- var json_pb = pb2json.pb2json(ab);
|
|
|
+ let ab = xhr.response;
|
|
|
+ let json_pb = pb2json.pb2json(ab);
|
|
|
//console.log(">>>", json_pb);
|
|
|
|
|
|
update_buses(json_pb)
|
|
|
@@ -255,20 +304,20 @@ function fetch_gtfs_vehicle_position() {
|
|
|
|
|
|
function update_route_layer(geojson) {
|
|
|
if (!geojson) { return; }
|
|
|
- var route_points = geojson.features[0].geometry.coordinates;
|
|
|
- var merc_points = [];
|
|
|
+ let route_points = geojson.features[0].geometry.coordinates;
|
|
|
+ let merc_points = [];
|
|
|
for (let ii=0; ii<route_points.length; ii++) {
|
|
|
merc_points.push(ol.proj.transform(route_points[ii], 'EPSG:4326', 'EPSG:3857'));
|
|
|
}
|
|
|
|
|
|
- var routeLine = new ol.Feature({
|
|
|
+ let routeLine = new ol.Feature({
|
|
|
geometry: new ol.geom.LineString(merc_points)
|
|
|
});
|
|
|
|
|
|
- var routeLineVector = new ol.source.Vector({});
|
|
|
+ let routeLineVector = new ol.source.Vector({});
|
|
|
routeLineVector.addFeature(routeLine);
|
|
|
|
|
|
- var routeLayer = new VectorLayer({
|
|
|
+ let routeLayer = new VectorLayer({
|
|
|
source: routeLineVector,
|
|
|
style: new ol.style.Style({
|
|
|
fill: new ol.style.Fill({ color: 'rgb(0,0,255,0.25)', weight: 4, opacity: 0.5 }),
|
|
|
@@ -292,19 +341,19 @@ function update_stop_layer(geojson) {
|
|
|
merc_points.push(ol.proj.transform(pnt, 'EPSG:4326', 'EPSG:3857'));
|
|
|
}
|
|
|
|
|
|
- var stopVectorSource = new VectorSource();
|
|
|
+ let stopVectorSource = new VectorSource();
|
|
|
|
|
|
- for (var ii=0; ii<merc_points.length; ii++) {
|
|
|
+ for (let ii=0; ii<merc_points.length; ii++) {
|
|
|
let _stop = stop_points[ii].stop;
|
|
|
|
|
|
let _stop_name = _stop.stop_name;
|
|
|
|
|
|
- var iconFeature = new Feature({
|
|
|
+ let iconFeature = new Feature({
|
|
|
geometry: new Point([merc_points[ii][0], merc_points[ii][1]]),
|
|
|
name: _stop_name
|
|
|
});
|
|
|
|
|
|
- var iconStyle = new Style({
|
|
|
+ let iconStyle = new Style({
|
|
|
image: new Icon({
|
|
|
anchor: [0.5, 46],
|
|
|
anchorXUnits: 'fraction',
|
|
|
@@ -319,7 +368,7 @@ function update_stop_layer(geojson) {
|
|
|
|
|
|
}
|
|
|
|
|
|
- var stopLayer = new VectorLayer({
|
|
|
+ let stopLayer = new VectorLayer({
|
|
|
source: stopVectorSource,
|
|
|
zIndex: 0
|
|
|
});
|
|
|
@@ -330,7 +379,7 @@ function update_stop_layer(geojson) {
|
|
|
function fetch_geojson(url) {
|
|
|
let xhr = new XMLHttpRequest();
|
|
|
xhr.onload = function() {
|
|
|
- var geojson = xhr.response;
|
|
|
+ let geojson = xhr.response;
|
|
|
update_route_layer(geojson);
|
|
|
update_stop_layer(geojson);
|
|
|
};
|
|
|
@@ -341,9 +390,11 @@ function fetch_geojson(url) {
|
|
|
|
|
|
}
|
|
|
|
|
|
-//--
|
|
|
+//---
|
|
|
+
|
|
|
|
|
|
function _resize() {
|
|
|
+
|
|
|
let h = $(window).height();
|
|
|
let m = document.getElementById("map");
|
|
|
m.style.height = (h-10) + "px";
|
|
|
@@ -357,7 +408,35 @@ function init() {
|
|
|
$(window).on('resize', _resize);
|
|
|
}
|
|
|
|
|
|
+window.addEventListener('DOMContentLoaded', event => {
|
|
|
+
|
|
|
+ // Toggle the side navigation
|
|
|
+ const sidebarToggle = document.body.querySelector('#sidebarToggle');
|
|
|
+ if (sidebarToggle) {
|
|
|
+ // Uncomment Below to persist sidebar toggle between refreshes
|
|
|
+ // if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
|
|
|
+ // document.body.classList.toggle('sb-sidenav-toggled');
|
|
|
+ // }
|
|
|
+ sidebarToggle.addEventListener('click', event => {
|
|
|
+ event.preventDefault();
|
|
|
+ document.body.classList.toggle('sb-sidenav-toggled');
|
|
|
+ localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
|
|
|
+
|
|
|
+
|
|
|
+ // hacky, but functional
|
|
|
+ //
|
|
|
+ setTimeout(_resize, 250);
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ //init();
|
|
|
+ //_resize();
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
$(document).ready(function() {
|
|
|
init();
|
|
|
_resize();
|
|
|
});
|
|
|
+
|
