qtrandev / leaflettransit Goto Github PK

9.0 9.0 7.0 641 KB

LeafletJS app showing Miami-Dade Transit buses. Uses JavaScript, Angular, JQuery, Bootstrap, and Leaflet Awesome markers. Presented to the Mayor of Miami-Dade County around 2016. http://qtrandev.github.io/LeafletTransit

Home Page: http://qtrandev.github.io/LeafletTransit

JavaScript 84.29% HTML 14.46% CSS 1.25%

leaflettransit's People

Contributors

Stargazers

Watchers

Forkers

mam98222 ernieatlyd javiermaly codeforsouth

leaflettransit's Issues

Use miami-transit-api to proxy data instead of anyorigin.com

Use the following links for data:

https://miami-transit-api.herokuapp.com/bus/livebus.xml
https://miami-transit-api.herokuapp.com/bus/livebus.json (optional)

API format: /api/:endpoint(.json, .xml)?param=value
Examples:
https://miami-transit-api.herokuapp.com/api/Buses.xml
https://miami-transit-api.herokuapp.com/api/Buses.json
https://miami-transit-api.herokuapp.com/api/MoverTrains.xml
https://miami-transit-api.herokuapp.com/api/MoverTrains.json

Move javascript code to index.js

There is javascript code in index.html. Move it to index.js. The functions may need to be reorganized to have similar code go together. data.js may need to be looked at also.

For the future: conside color coding all the "modes" a singular color

Meaning that the project because more of a system map with color coded routes.

For example, all the busses are one color, metro rail is another, metromover a third, etc. It would be based on agencies, so city of Miami trolley and city of Doral trolleys would be different colors.

Put link to Github source code at top of page

This is to let people know they can easily edit and view this code. If you object because this looks ugly, then comment here.

Fix bug where if page is left open too long

Maybe 30 minutes is too long. The cacheing of icons or blue halo icons are causing some sort of build up.

Check for errors before processing API data

If result code is 200, process data. If any other code, ignore data or handle error

Add Miami Beach trolleys

Research result:

Miami Beach is already covered by the Miami-Dade Transit Southbeach Local route. Ex:
http://www.miamidade.gov/transit/bustracker.asp?RouteID=123&Dir=Clockwise&StopID=746&Sequence=1

There are also 2 trolley routes in service, Alton Road and North Beach. The "TSO Miami Beach Trolley" tracking apps are available for iPhone and Android:
http://www.miamibeachfl.gov/it/scroll.aspx?id=77127

Online map of Miami Beach trolleys is at:
http://app.tsomobile.com/publictransportation/driverroute.htm?tkn=825894C5-2B5F-402D-A055-88F2297AF99A

Move CSS code to separate file

It's time for us to move CSS styles out to a separate file since the styles are taking up too much space in the main HTML file. Let's call it styles.css. This is a very simple task so anyone can grab it one, make the change, do some simple test to see if the page still works, then commit it or do a pull request.

Display icons at certain zoom levels

Sidebar for map

Static sidebar for map ~30% on right side, remainder of page will be map.

Example, google maps classic:
https://maps.google.com/maps/mm

Make map work well on mobile

Right now the icons are very hard to tap on mobile. I don't know if this is a Leaflet bug or we just need to make the icons bigger to tap. The map menu to hide layers is also impossible to tap on mobile. Maybe we need buttons at the bottom of the map to toggle map layers.

Fix png file 404 load problem in console

The page tries to access http://www.qtrandev.com/transit5/icons/icon-POI-%7B%7Bx.CategoryID%7D%7D.png in the POI table before the Angular code can replace the png file name with the correct one such as icon-POI-ENT.png

Just look at somehow fixing this.

Make live data from miami-transit-api update periodically

This should be easier than making everything update live. The other data get from anyorigin.com so we can't overload them with periodic requests.

Draw line of previous bus location when refreshing

Requested by Cristina. When doing a refresh, instead of moving the marker, a line should be drawn from the previous location so the user can see the path history.

Allow user to locate current position

Just a nice feature to add. Comment if this should be removed or some other reason.

Source:
https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-locatecontrol/
https://github.com/domoritz/leaflet-locatecontrol

Fix blank map bug

There is a bug that only seems to happen once in a while where the map shows up as blank on load. It requires a 2nd reload to work.

It is very hard to reproduce but some people on a different might always see this and the blank map won't go away even on reload.

I suspect it's this line in index.html (line 345) in the addNearByMarker() function:
marker.on('mouseover', function (e) {
this.openPopup();
});

Add the City of Doral trolleys

Doral Trolley: http://www.cityofdoral.com/index.php?option=com_content&view=article&id=149&Itemid=339

Map: http://app.tsomobile.com/publictransportation/driverroute.htm?tkn=582EB861-9C13-4C89-B491-15F0AFBF9F47
During the day, the trolleys are on the maps. During the night, they may disappear. There are about 7 trolleys seen: DT01, DT03, DT05, DT06, DT07, DT09, DT0B, etc.

Main Javascript files seen:
http://app.tsomobile.com/publictransportation/driverroute.js
http://app.tsomobile.com/core/db/dbLib.js

This link returns the following data: http://rest.tsoapi.com//MappingController/GetUnitFromRouteAntibunching?callback=jQuery19103252993382047862_1427862361188&tkn=582EB861-9C13-4C89-B491-15F0AFBF9F47&geofencesid=35929&lan=en&_=1427862361294

jQuery19103252993382047862_1427862361188("{"Units":[{"MarkerID":"1022582","MarkerName":"DT0C","Latitude":"25.811438","Longitude":"-80.239133","Direction":"NE","Heading":"52"},{"MarkerID":"1002749","MarkerName":"DT0B","Latitude":"25.823312","Longitude":"-80.369868","Direction":"S","Heading":"167"},{"MarkerID":"1005858","MarkerName":"DT09","Latitude":"25.851035","Longitude":"-80.370776","Direction":"N","Heading":"0"},{"MarkerID":"1012049","MarkerName":"DT05","Latitude":"25.789840","Longitude":"-80.334141","Direction":"E","Heading":"89"},{"MarkerID":"1012059","MarkerName":"DT04","Latitude":"25.811851","Longitude":"-80.239400","Direction":"N","Heading":"0"},{"MarkerID":"1036382","MarkerName":"DT03","Latitude":"25.802444","Longitude":"-80.369228","Direction":"N","Heading":"0"}],"antibunching":{}}");

Integrate live bus data from Miguel

https://sleepy-eyrie-8607.herokuapp.com/tracker.xml or
https://sleepy-eyrie-8607.herokuapp.com/tracker.json

Data updates every 8 seconds or something. The first call may take 15 seconds to respond since the Heroku app is waking up from sleep.

Example JSON:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          "25",
          "-80"
        ]
      },
      "properties": {
        "lat": "25",
        "lon": "-80",
        "bustime": "2015-04-07 05:25:12"
      }
    },

Add speed to Miguel's data

Add Metrorail

I don't think Metrorail is included on here, is it? That's a big one to add, I think.

Add full-screen map control

https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-fullscreen

Investigate trolleys in other cities

This is a work item to investigate what trolley services and locations are available in South Florida cities. Start with the following cities and organizations:

City of Aventura Transit
Broward County Transit
City of Coral Gables Trolleys
Town of Cutler Bay
City of Hialeah Transit System
Jitney Transfers
Tri-Rail Transfers

This list shows an overview of those systems above: http://www.miamidade.gov/transit/transfers-outside-mdt.asp

Aventura

Aventura Express Shuttle Bus - http://www.cityofaventura.com/index.aspx?page=121
Route map PDF - http://www.cityofaventura.com/modules/showdocument.aspx?documentid=351
Schedule PDF - http://www.cityofaventura.com/modules/showdocument.aspx?documentid=352
There is no online map or live data.

Broward County Transit

Website - http://www.broward.org/BCT/Pages/default.aspx
Google Transit GTFS Feed - http://www.broward.org/bct/google/latest/google_transit.zip
Schedules - http://www.broward.org/BCT/Schedules/Pages/default.aspx
System map PDF - http://www.broward.org/BCT/Documents/SystemMap.pdf
There is no live data but I heard from a BCT contractor who came once to a Code For Miami meeting that upgrades are in process and live video and GPS data are being added - no info on completion date.

Jitney Transfers

Conchita Transit Express operates a private jitney service that connects to and from the Hialeah Metrorail station.
There is no website, online map or live data.

Tri-Rail Transfers

Website - http://www.tri-rail.com
System map PDF - http://www.tri-rail.com/train-schedules/System-Map-MIC-Future.pdf
Train schedule PDF - http://www.sfrta.fl.gov/docs/Online-Train-Schedule-April-2015-HR.pdf
Smartphone app - http://www.tri-rail.com/rider-information/smart-phone-app/
There is no online map or live data seen.

Other Info

Doral

Miami Beach

#11

Miami Lakes

#18

City of Miami

http://www.miamigov.com/trolley
http://miami.etaspot.net/
https://github.com/qtrandev/LeafletTransit/blob/master/routeCoords.json

Hollywood

http://app.tsomobile.com/publictransportation/driverroute.htm?tkn=C6B3CFCC-C1B2-47B4-9FD3-EEFB2A46E3C6

Palm Beach County Palm Tran

Location tracking:
http://www.palmtran.org/igo
Sample:
http://www.palmtran.org/iGo/rest/Vehicles/GetAllVehiclesForRoutes?routeIDs=2
Scripts:
http://www.palmtran.org/iGo/Scripts/myavail/MyAvail.js
http://www.palmtran.org/iGo/Scripts/myavail/desktop/MyAvail.Vehicle.js

Add data refresh controls to map

Right now the Bus GPS data refreshes every 5 seconds. We want a control for users to change this or disable this.
Leaftlet may have a way to make a panel appear on the map. This panel should have a button to toggle autorefresh and maybe a slider to increase/decrease autorefresh time from 5s to 30s.

This control panel appears by default but should also be able to be hidden - maybe unchecking a layer in the right control box.

Move icons on map

Refresh the data and make the icons move. Drawing any line or history is covered in #28

Add website design using www.uxpin.com

We need an overall design for the site. There are over 100 routes for the Miami Transit system. Eventually, there will be too much data to display. We need a user interface design to handle all this.

https://www.uxpin.com
Using UXPin was mentioned by Aris from Live Ninja who was at the Meetup.

Use Github Pages github.io to host application

I think this is as simple as create a gh-pages branch

Citi bikes are not showing - find out why

The API could be down or blocked or there may be a bug. Investigate.

Update refresh time and other marker info on move

When the marker moves, the refresh time and other information should be updated.

Update README.md to follow Code for America format

Follow format here: https://github.com/codeforamerica/howto/blob/master/Good-READMEs.md
Can use or modify screenshots at: http://www.qtrandev.com/transit4/screenshots/

Add Mover tracker and stations

MoverTrains:
http://www.miamidade.gov/transit/WebServices/MoverTrains/?TrainID=

MoverStations:
http://www.miamidade.gov/transit/WebServices/MoverStations/?StationID=

MoverTracker:
http://www.miamidade.gov/transit/WebServices/MoverTracker/?StationID=

MoverMapShape:
http://www.miamidade.gov/transit/WebServices/MoverMapShape/?LoopID=

Route stops and shape points:
http://rest.tsoapi.com/Routes/GetRouteFromToken?tkn=DB13899C-1B19-4577-9CA2-D4DDD773384D&routeId=-1

Add Google Maps traffic layer

This is only experimental. I'm not sure we can even legally get this layer, but here's an attempt and if it looks good, we can look into officially adding it.

Traffic layer is here:
https://developers.google.com/maps/documentation/javascript/examples/layer-traffic

Code to add Google Maps to Leaflet is here at line 105:
https://github.com/shramov/leaflet-plugins/blob/master/layer/tile/Google.js