├── lib
├── chosen
│ ├── chosen-sprite.png
│ ├── chosen-sprite@2x.png
│ ├── chosen.min.css
│ ├── chosen.jquery.min.js
│ └── chosen.proto.min.js
└── leaflet-awesome-markers
│ ├── images
│ ├── markers-matte.png
│ ├── markers-plain.png
│ ├── markers-soft.png
│ ├── markers-shadow.png
│ ├── markers-soft@2x.png
│ ├── markers-matte@2x.png
│ └── markers-shadow@2x.png
│ ├── leaflet.awesome-markers.min.js
│ ├── leaflet.awesome-markers.css
│ └── leaflet.awesome-markers.js
├── css
└── leaflet_demo.js
├── LICENSE.md
├── README.md
├── data
├── locs.json
└── moa_path.json
├── js
├── form-setup.js
├── presentation.js
└── webworker.js
├── index.html
└── docs
└── Playing with OSM XML.ipynb.json
/lib/chosen/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/chosen/chosen-sprite.png
--------------------------------------------------------------------------------
/lib/chosen/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/chosen/chosen-sprite@2x.png
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/images/markers-matte.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/leaflet-awesome-markers/images/markers-matte.png
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/images/markers-plain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/leaflet-awesome-markers/images/markers-plain.png
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/images/markers-soft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/leaflet-awesome-markers/images/markers-soft.png
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/images/markers-shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/leaflet-awesome-markers/images/markers-shadow.png
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/images/markers-soft@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/leaflet-awesome-markers/images/markers-soft@2x.png
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/images/markers-matte@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/leaflet-awesome-markers/images/markers-matte@2x.png
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/images/markers-shadow@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mplewis/osm-pathfinding/HEAD/lib/leaflet-awesome-markers/images/markers-shadow@2x.png
--------------------------------------------------------------------------------
/css/leaflet_demo.js:
--------------------------------------------------------------------------------
1 | var map = L.mapbox.map('map', 'examples.map-9ijuk24y');
2 | var markers = new L.MarkerClusterGroup();
3 |
4 | var locs = {
5 | triangle: {
6 | desc: 'Triangle Fraternity',
7 | coords: [44.983294, -93.237445]
8 | },
9 | keller: {
10 | desc: 'Keller Hall',
11 | coords: [44.974548, -93.232232]
12 | }
13 | };
14 |
15 | _.values(locs).forEach(function(loc) {
16 | L.marker(loc.coords).bindPopup(loc.desc).addTo(map);
17 | });
18 |
19 | $.get('/mpls_nodes_some.json').then(function(data) {
20 | _.pairs(data).forEach(function(locPair) {
21 | var id = locPair[0];
22 | var loc = locPair[1];
23 | var marker = L.marker([loc.lat, loc.lon])
24 | .bindPopup('ID:' + id + ', lat:' + loc.lat + ', lon:' + loc.lon);
25 | markers.addLayer(marker);
26 | });
27 | });
28 |
29 | map.addLayer(markers);
30 |
31 | map.setView(locs.triangle.coords, 15);
32 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright 2019 Matt Lewis
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 |
--------------------------------------------------------------------------------
/lib/leaflet-awesome-markers/leaflet.awesome-markers.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
3 | (c) 2012-2013, Lennard Voogdt
4 |
5 | http://leafletjs.com
6 | https://github.com/lvoogdt
7 | *//*global L*/(function(e,t,n){"use strict";L.AwesomeMarkers={};L.AwesomeMarkers.version="2.0.1";L.AwesomeMarkers.Icon=L.Icon.extend({options:{iconSize:[35,45],iconAnchor:[17,42],popupAnchor:[1,-32],shadowAnchor:[10,12],shadowSize:[36,16],className:"awesome-marker",prefix:"glyphicon",spinClass:"fa-spin",icon:"home",markerColor:"blue",iconColor:"white"},initialize:function(e){e=L.Util.setOptions(this,e)},createIcon:function(){var e=t.createElement("div"),n=this.options;n.icon&&(e.innerHTML=this._createInner());n.bgPos&&(e.style.backgroundPosition=-n.bgPos.x+"px "+ -n.bgPos.y+"px");this._setIconStyles(e,"icon-"+n.markerColor);return e},_createInner:function(){var e,t="",n="",r="",i=this.options;i.icon.slice(0,i.prefix.length+1)===i.prefix+"-"?e=i.icon:e=i.prefix+"-"+i.icon;i.spin&&typeof i.spinClass=="string"&&(t=i.spinClass);i.iconColor&&(i.iconColor==="white"||i.iconColor==="black"?n="icon-"+i.iconColor:r="style='color: "+i.iconColor+"' ");return""},_setIconStyles:function(e,t){var n=this.options,r=L.point(n[t==="shadow"?"shadowSize":"iconSize"]),i;t==="shadow"?i=L.point(n.shadowAnchor||n.iconAnchor):i=L.point(n.iconAnchor);!i&&r&&(i=r.divideBy(2,!0));e.className="awesome-marker-"+t+" "+n.className;if(i){e.style.marginLeft=-i.x+"px";e.style.marginTop=-i.y+"px"}if(r){e.style.width=r.x+"px";e.style.height=r.y+"px"}},createShadow:function(){var e=t.createElement("div");this._setIconStyles(e,"shadow");return e}});L.AwesomeMarkers.icon=function(e){return new L.AwesomeMarkers.Icon(e)}})(this,document);
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OSM Pathfinding
2 |
3 | ## About
4 |
5 | This is a final project for UMN CSCI 4511W. We are making a pathfinding algorithm visualization. It shows how pathfinding algorithms like A* behave in real world scenarios like finding directions on a map in real time.
6 |
7 | ## Tools used
8 |
9 | ### [Mapbox](https://www.mapbox.com/) & [OpenStreetMap](http://www.openstreetmap.org/about)
10 |
11 | >With Mapbox, design and then publish maps that tell stories, integrate with apps, and represent brands.
12 |
13 | Our background maps are provided by Mapbox, which creates maps based on data obtained from OpenStreetMap.
14 |
15 | >OpenStreetMap is built by a community of mappers that contribute and maintain data about roads, trails, cafés, railway stations, and much more, all over the world.
16 |
17 | We are obtaining raw node information such as gps coordinates directly from OpenStreetMap. This data is pre-processed by the [osm-redis-processor](https://github.com/mplewis/osm-redis-processor) and loaded into the redis database. To save time we have created a database dump of node information for the UMN East Bank campus area.
18 |
19 | ### [Leaflet](http://leafletjs.com/)
20 |
21 | >An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
22 |
23 | We use leaflet to display beautiful markers during the pathfinding process.
24 |
25 | ### [Bootstrap](http://getbootstrap.com/)
26 |
27 | >Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
28 |
29 | We are using Boostrap to create a responsive front-end for the visualizations. Whether a user has a 3 inch or 3 foot screen, our app should still look good.
30 |
31 | ## Installation
32 |
33 | 1. Clone the osm-pathfinding repo to your computer.
34 |
35 | $ git clone https://github.com/mplewis/osm-pathfinding.git
36 | $ cd osm-pathfinding
37 |
38 | 2. Start an http server in the `osm-pathfinding` folder. Any server will work, we're using python's built-in server for ease of use.
39 |
40 | $ python -m SimpleHTTPServer
41 |
42 | 3. In a web browser, navigate to `osm.html` (`http://localhost:8000/osm.html` when using the python server)
43 |
--------------------------------------------------------------------------------
/data/locs.json:
--------------------------------------------------------------------------------
1 | [
2 | {"name": "Triangle Fraternity", "node": "33308096"},
3 | {"name": "Keller Hall", "node": "244111945"},
4 | {"name": "Argyle House", "node": "1817826603"},
5 | {"name": "Stadium View Apartments", "node": "1719691524"},
6 | {"name": "Walter Library", "node": "246708364"},
7 | {"name": "Joe's house", "node": "34500367"},
8 | {"name": "Carlson School of Management", "node": "34645936"},
9 | {"name": "Comstock Hall and Coffman", "node": "246710346"},
10 | {"name": "Seward Community Co-op", "node": "33312869"},
11 | {"name": "Mall of America", "node": "415734111"},
12 | {"name": "The Super Block", "node": "33315482"},
13 | {"name": "TCF Bank Stadium", "node": "301294248"},
14 | {"name": "Bierman Field", "node": "34178538"},
15 | {"name": "Punch Through Design", "node": "33314964"},
16 | {"name": "The Metrodome rubble", "node": "33802709"},
17 | {"name": "First Avenue and 7th Street Entry", "node": "34657987"},
18 | {"name": "Minneapolis Institute of Arts", "node": "1244547405"},
19 | {"name": "World's Worst Kmart", "node": "430581352"},
20 | {"name": "Twin Cities Reptiles", "node": "1659327615"},
21 | {"name": "Bucca di Beppo (St. Paul)", "node": "187854249"},
22 | {"name": "The Capitol (St. Paul)", "node": "716319426"},
23 | {"name": "Gold Medal Park", "node": "2099152218"},
24 | {"name": "Stone Arch Bridge", "node": "1119671765"},
25 | {"name": "State Fair Grandstand", "node": "1701289667"},
26 | {"name": "St. Paul Student Center", "node": "187894552"},
27 | {"name": "UMN Medical Center - Fairview", "node": "1719987032"},
28 | {"name": "Minneapolis Convention Center", "node": "33369238"},
29 | {"name": "Northrop Memorial Auditorium", "node": "1537684426"},
30 | {"name": "Bohemian Flats", "node": "1721335837"},
31 | {"name": "IDS Tower", "node": "1076377565"},
32 | {"name": "Orpheum Theatre", "node": "2090482161"},
33 | {"name": "Pantages Theatre", "node": "33826716"},
34 | {"name": "Hennipen County Medical Center", "node": "33803321"},
35 | {"name": "North Central University", "node": "1371140015"},
36 | {"name": "The Depot", "node": "944735113"},
37 | {"name": "Minneapolis City Hall", "node": "33369172"},
38 | {"name": "Lake Calhoun", "node": "476931420"},
39 | {"name": "Van Cleve Park", "node": "34372686"},
40 | {"name": "Tower Hill Park - Witch's Hat", "node": "34397227"},
41 | {"name": "Loring Park", "node": "33826407"},
42 | {"name": "Nicollet Island", "node": "33308479"}
43 | ]
44 |
--------------------------------------------------------------------------------
/js/form-setup.js:
--------------------------------------------------------------------------------
1 | $.getJSON('data/locs.json', function(locs) {
2 | locs.forEach(function(loc) {
3 | var coords = nodeCoords(loc.node);
4 | // Skip adding location if node isn't found in getNodes()
5 | if (!coords) {
6 | return;
7 | }
8 | var newOption = $('