You are Here: Floor Plans, GIS, and QR Codes in the Building

18 Jan

I have started to see several negative posts about QR Codes. I like QR Codes. I have not, however,  seen many good uses of them – yet. I am going to show you how to use a QR Code on the room signage in your building to display a floor plan of the building in GIS with a “you are here” marker. Remember when I said architects should learn to code? This example will require a little PHP and Javascript. But do not turn away. It is VERY simple and I will provide the basic code. You just need to change a few parameters and viola! you will be up an running.

First, I am going to use Leaflet.js as my mapping engine. I am not using Google Maps because I prefer open source and when we get in to paying for Google, I am not having it. Yes, you do legally have to pay for Google when you meet certain requirements. Download and extract Leaflet to a folder on your web server.

Next, I will write the webpage to load my map. Almost all of this code is taken straight from the Leaflet.js examples section.

You will need a developer ID from Cloudmade — it’s free. The magic happens in the PHP that looks like this:

<?php echo $_GET[“lat”]; ?>, <?php echo $_GET[“long”]; ?>

This code allows me to pass data to the script in the URL of the page. The data is the coordinates of where you are standing when you scan the QR Code. So the URL for the page is The lat= and long = are variables called in the PHP.

Lastly, I will make the QR Codes using the URL of my page. I will grab the Latitude and Longitude of each room in the building and create a QR Code replacing the XXX shown in the URL in the previous paragraph.  My first QR Code will link to the URL:

Here is the QR Code:

Generate a code for each room and you are done. In this example I have yet to put the floor plan on the map. There are several ways to do this, so I will leave it up to you to figure out. If you want to do it and need help, leave a comment and I will tell you how I have made it work.

UPDATE: Here is a map with Autocad in Leaflet.js. I used a WMS layer and connected to my geoserver.

To add a WMS Layer

var floorplan = new L.TileLayer.WMS(“http://localhost:8080/geoserver/cad/wms&#8221;, {
layers: ‘cad:AztecHighSchoolCAD’,
format: ‘image/png’,
transparent: true,
attribution: “Paul Crickard”



Any ideas on how to make this work with a 2 story building? Without having 3D GIS capabilities on my phone, my best idea so far is to create 2 base maps, one for the 1st floor and one for the 2nd. If you have a better idea, let me know. I would love to hear it.


3 Responses to “You are Here: Floor Plans, GIS, and QR Codes in the Building”

  1. Mark May 23, 2012 at 9:01 pm #

    Awesome idea. Take a look at how I integrate floor plans using openlayers here: When an officeID is passed via an URL argument, there is a lookup table which determined the location and floor the office id is located. Openlayers then simply changes the base map and zooms.

    • paulcrickard May 23, 2012 at 9:54 pm #

      OpenLayers and CAD files…..That is a great idea and a great service! The lookup is awesome. I really appreciate that you ship the files and let the customer host their own app.


  1. URL Tricks in a Revit Schedule « Architecture and Planning - May 22, 2012

    […] a my post on GIS and QR Codes, I explain how to use a QR Code to pass and retrieve data. The same can be done from a link in a […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: