Archive | January, 2012

Mobile Map with Leaflet.js

20 Jan

In my last post, I used Leaflet.js to create a map and place a marker using a QR Code. In this post, I want to show how simple it is to build a map using Leaflet.js for mobile devices.

First, download Leaflet.js and extract it.  To get it to run, all I have needed was the Dist directory. Put the Dist directory on your web server in the same folder you will write your web page. When you write your webpage you will just add:

link rel=”stylesheet” href=”dist/leaflet.css”

script src=”dist/leaflet.js”

The code for the website will look like this:

This  code will work on an iPhone, should work on Droid, and will work in newer browsers. To display the basemap, you need a developer key. In the code, you will see a line with: BC9A493B41014CAABB98F0471D759707 This is the key I grabbed from the examples section. To get your own key, go to Cloudmade.com.

I have commented the code to explain what is happening on the major lines.  For more examples – how to draw polylines and polygons – head over to the Leaflet.js page.

To see my sample map which shows all the New Mexico School Districts I have worked for, go to: educationalfacilityplanning.com/iphone.html

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 http://educationalfacilityplanning.com/latlong.php?lat=XXX&long=XXX. 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: http://educationalfacilityplanning.com/latlong.php?lat=35.0967210997174&long=-106.635601453865

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.

Modify Revit Model Data Through the Web

10 Jan

In my post on Programming for Architects I mention how I can use PHP to edit Revit model data.  In this post, I will briefly explain how this is done and point you to a very simple website demonstrating the results.

1) Export your Revit model to a datababse using RevitDBLink. If you don’t care about bringing the results back in you can export a single schedule to CSV and create a database table from that, or export the whole model any way you wish.

2) Download a WAMP stack. WAMP stands for Windows, Apache, MySQL and PHP. You can get the entire stack here:  WAMP Server.

3) Create a webpage in the WWW directory that has a form and whatever else you want to display. The form should call a PHP file. Mine calls insert.php to change the values and a popup.php file to display data. Name the HTML file index.html.

4) Create a PHP file that updates the database.  This is where you need to be able to code, or at least copy and modify code from the web.

5) Start Apache and browse to http://localhost/           to see it in action.

I have a very simple example running on my website. Click on a room to see the current properties. Change the values and click submit. Reclick on a room to see the changes. Currently, this edits the database in real time but requires a user to open Revit and bring the database back in. I see this as a good thing because it adds a layer of protection. It allows the user to import a specific table (rooms) and preview the changes prior to importing.

Happy Hacking.

Free Revit Viewer

6 Jan

As I look over some of my analytics, I see a lot of people searching for a free Revit viewer.  I don’t know what these people intend to do with the viewer and therefore do not know what capabilities they would like it to have. But, I will put out a few good options and point you to a list of MANY free “Revit” viewers.

First, I would probably start with Autodesks own “Revit Lite” —  Project Spark. It is available in the Labs. According to the Labs, it will operate until July 7, 2012.

The rest of the viewers, and why I put Revit in quotes earlier, rely on IFC. Export your model, and these free viewers will allow you to do many different things. If you know how to code, grab the Open IFC Tools and write your own viewers.

I have used, FZKViewer and IFCWalkThru. They run as stand alone apps, meaning no installation necessary. You can find them here.

I have also used IFC Engine. I just noticed while writing this that they may even give you the advanced version if you ask. Check it out here.

For many other IFC tools, check out this list on the IFC Wiki.

If you want to get a little creative, you can build a website and embed your 3D model in it. You can even have links to many different views. This trick uses the Revit export to DWF. I have a post on it and a sample website on this blog. If you need copies of the code to make this work, just leave me a comment and I will email it to you.

Hope these help. If you have any other viewers, please leave links to them in the comments section.

 

Hey, Pico Iyer, Welcome to 2012

5 Jan

Dear Pico,

I was like you. I didn’t want a cell phone. I held out for years, and when I finally broke down, I resisted getting a smart phone. It was, afterall, just for making calls. I fought the good fight against joining Facebook, but my mother wanted me to join so we could keep in touch. My mother, Pico. She uses the internet. Twitter? A dumbed down version of RSS. Screw that noise — for a few more months. Let’s face it, technology and the internet are here, and are becoming more and more ubiquitous. But we can excercise a little self control without spending “$2,285 a night to stay in a cliff-top room at the Post Ranch Inn in Big Sur pay partly… because you can’t get online in their rooms.” And, without paying “good money” for a program that blocks our internet access. Shit, Pico, I will save you a few bucks and let you in on a secret, you don’t have to launch Firefox. You can even unplug your CAT 5 cable or switch off the Wi-Fi .

After reading your article, The Joy Of Quiet, I went out and bought an iPhone 4S. Reading about how you and your friends can’t manage to spend time with your families or go for walks without intentionally leaving your phone at home or turning it off actually drove me to get more technology. I even considered letting Siri write this letter, but thought I would go old skool and type it. You left Manhattan for Rural Japan so you could “more easily survive for long stretches entirely on foot?” Have you ever heard of upstate NY? How about the Dakotas? We have plenty of podunk places in America where you could have accomplished the same thing. Guess what Pico? My new iPhone works in Japan. I have heard that in Tokyo you are never more than 100 yards from a cell phone tower. Want to talk about a people that are wired. The Japanese are probably the most turned-on people in the world.

Look, Pico. I love technology. I get more information in minutes from Twitter than from a day of print or television news. I can freely choose which stories I would like to read more. Not like television news where I am stuck listening to how some cross country bicyclist lost his cat Pikachu in the Rio Grande for 20 minutes. I can disconnect whenever I want. I do not have to think about turning off my phone so that I can talk to my wife. I don’t have to intentionally leave it at home when I go for a walk. And, I can sleep in on weekends, make my coffee, and sit on my ass for hours, all without even thinking about my phone or the internet. If you can’t, you need some serious help. You probably have Inability to Switch Off Syndrom(ITSO) – your colleague Roger Cohen should be CC’d.

Man up, Pico. Get some self control. Slap every one of your friends who spent money to NOT use the internet. And stop trying to make me feel bad for playing Angry Birds in the bathroom.

Signed

– A Happy Addict.