Wayfinding Map for Info Kiosk

This is one part of my idea for transforming parking lots into a place for wayfinding, city information, and access to public transportation. As part of this project I wanted to create a beautiful looking map that was also dynamically generated using web technologies.

This project was created for Ford's Parking Lot 2.0 challenge. Vote for the project

Read a full description of the project here

Map

This project uses a Node.js application that loads the scalable map and then fetches dynamic information for each location using the Google Places API. The idea being that popular places change frequently, so the map can be refreshed based upon Google categorization and ranking of places.

I used Backbone.js for the MV* framework.

###Dynamic wayfinding map

The wayfinding map displays the user current location in relation to the nearby surroundings. I created the visual design of the scalable map using Mapbox Studio. This map will actually work for any major city in the United States. I then added several transit layers using the L.A. county GIS data portal, the LA Metro developer portal, and https://data.lacity.org.

Mapbox studio is a great tool that allows you to style maps with CSS. Here's a basic example from my project:

@land: #88888A;
@water: #8B9FAC;
@motorway:          #424645;
@main:              #424645;
@street:            #424645;
@street_limited:    #424645;
  
Map {
  [zoom>=17] {
    background-color: @land; 
  }
  buffer-size: 256;
}

@land: #88888A;
@water: #8B9FAC;
  
#building [zoom<=14]{
  // At zoom level 13, only large buildings are included in the
  // vector tiles. At zoom level 14+, all buildings are included.
  polygon-fill: darken(@land, 20%);
  opacity: 0.0;
}

#place_label[zoom>=8][localrank<=3] {
  text-name: @name;
  text-face-name: @sans;
  text-wrap-width: 120;
  text-wrap-before: true;
  text-fill: #FFF;
}

Here is a link to the styled tiles, which are hosted with Mapbox.

The map generates a QR code for the current location. This was super easy to implement using the QRCode.js library.

Parking

###Real-time parking availability and information

The parking application uses the ParkWhiz developer API to show the current availability of parking at the current location, including the current price, number of available spaces, and a list of amenities, such as reserved parking, restrooms, and shuttle service. This application would integrate with an existing payment system and in some cases accept mobile payment. An electronic or printed receipt would include the location of the parking structure and a QR code link to the information map.

The ParkWhiz API works well. (However, in many responses the number of available spaces seems to frequently return 10 spaces.)

<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/eticket.png" width="40px"/></td>
	<td>Accepts mobile payment</td>
</tr>
<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/handicap.png" width="40px"/></td>
	<td>Includes handicap accessible spaces</td>
</tr>
<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/indoor.png" width="40px"/></td>
	<td>Indoor or covered parking</td>
</tr>
<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/reentry_allowed.png" width="40px"/></td>
	<td>Allows re-entry to the parking structure</td>
</tr>
<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/reserved.png" width="40px"/></td>
	<td>Allows re-entry to the parking structure</td>
</tr>
<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/restroom.png" width="40px"/></td>
	<td>Has restrooms</td>
</tr>
<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/security.png" width="40px"/></td>
	<td>Has on-site security</td>
</tr>
<tr>
	<td><img src="https://raw.githubusercontent.com/stevepepple/la-parking/master/assets/images/icons/shuttle.png" width="40px"/></td>
	<td>Has a shuttle service</td>
</tr>
</tbody>

Icon	Description
	Has on-site parking attendant or valet
	There is nearby bus service (added by me, as I've only selected parking lots near public transit)
	Has a charging station for electric vehicles

Running Locally

Make sure you have Node.js and the Heroku Toolbelt installed.

$ git clone https://github.com/stevepepple/la-parking.git # or clone your own fork
$ cd node-js-getting-started
$ npm install
$ bower install
$ npm start

The app will run on localhost:5000.