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.

Read a full description of the project here.

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


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* application framework.

The git repository is here

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.


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.)

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
Accepts mobile payment
Includes handicap accessible spaces
Indoor or covered parking
Allows re-entry to the parking structure
Allows re-entry to the parking structure
Has restrooms
Has on-site security
Has a shuttle service

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.