Tag Archives: Web

Albuquerque Registered Historic Places as GeoJSON in Leaflet

13 Dec
Albuquerque Registered Historic Places.

Albuquerque Registered Historic Places.

I will say it one more time: I hate that Albuquerque publishes data in KMZ. I took the Registered Historic Places file and converted it to GeoJSON. Then I put up this simple Leaflet map using the GeoJSON file. My website is at abqhistoric.educationalfacilityplanning.com and I put the GeoJSON inside a JavaScript file where it was assigned to a variable ‘abq’. Here is the GeoJSON.

Advertisements

Convert MongoDB to GeoJSON: Use in Leaflet.js

16 Nov

Leaflet.js is my favorite tool for making quick web maps. Using GeoJSON, you can feed data to Leaflet either by pasting it in to your code or by making it a variable and saving it as a .JS and importing it. How you do it is up to you, but in this example I am going to copy and paste in my GeoJSON text. My GeoJSON will be generated from a mongoDB using Python.
I created a mongoDB with a series of points (Long, Lat). Then I wrote a Python script to grab all those points and dump them in to a GeoJSON file. Lastly, I paste that as a variable in my Leaflet code.
Taking this project further, try using the select near, or select near where type:coffee shop, features in mongoDB. You could use bounding boxes too.

Here is the python code to convert mongoDB to GeoJSON:

from pymongo import Connection,GEO2D
db=Connection().geo

geojson=open(“mongoLoop.json”,”w”)
geojson.write(‘{ “type”: “FeatureCollection”,’+”\n”)
geojson.write(‘”features”: [‘+”\n”)

x=0
d=db.places.count()

for i in db.places.find():
if x < d-1:
geojson.write(‘{ “type”: “Feature”,’+”\n”)
geojson.write(‘”properties”: {“popup”: “value0”},’)
geojson.write(‘ “geometry”: {“type”: “Point”, “coordinates”: [‘)
p1=i[“loc”][0]
p2=i[“loc”][1]
geojson.write(str(p1)+’,’+str(p2)+’]}},’+”\n”)
x=x+1
print “x =” + str(x)
else:
geojson.write(‘{ “type”: “Feature”,’+”\n”)
geojson.write(‘”properties”: {“popup”: “value0”},’)
geojson.write(‘ “geometry”: {“type”: “Point”, “coordinates”: [‘)
p1=i[“loc”][0]
p2=i[“loc”][1]
geojson.write(str(p1)+’,’+str(p2)+’]}}’+”\n”)
print “Last Loop”

geojson.write(‘]}’)
geojson.close()

And the output:

{ “type”: “FeatureCollection”,
“features”: [
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [35,-106]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [35.8,-106.8]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [38,-108]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [39,-109]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [30,-100]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [31,-101]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [31,-102]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [31,-103]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [33,-100]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [25,-102]}}
]}

Lastly the HTML to create the Leaflet map – input your API Key:

<!DOCTYPE html>
<html>
<head>
<title>My Map</title>
<meta charset=”utf-8″ />

<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.css&#8221; />
<!–[if lte IE 8]><link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.css&#8221; /><![endif]–>
</head>
<body>
<div id=”map” style=”width: 600px; height: 400px”></div>

<script src=”http://cdn.leafletjs.com/leaflet-0.4/leaflet.js”></script&gt;

<script>

var map = L.map(‘map’).setView([35, -106], 13);

L.tileLayer(‘http://{s}.tile.cloudmade.com/API-KEY/997/256/{z}/{x}/{y}.png’, {
attribution: ‘Map data &copy; <a href=”http://openstreetmap.org”>OpenStreetMap</a&gt; contributors, <a href=”http://creativecommons.org/licenses/by-sa/2.0/”>CC-BY-SA</a&gt;, Imagery © <a href=”http://cloudmade.com”>CloudMade</a>&#8217;,
maxZoom: 18
}).addTo(map);

var mongo = { “type”: “FeatureCollection”,
“features”: [
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-106, 35]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-106.8,35]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-108, 38]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [-109, 39]}},
{ “type”: “Feature”,
“properties”: {“popup”: “value0”}, “geometry”: {“type”: “Point”, “coordinates”: [30,-100]}}
]};

var myLayer = L.geoJson().addTo(map);
myLayer.addData(mongo);

</script>
</body>
</html>

MongoDB with a slice of CherryPy: Running a Query and Displaying Results

15 Nov

As you may have noticed, I love CherryPy. Recently, I have been playing with MongoDB and pymongo. In my last post I showed how to create a shapefile from a mongoDB. In this post, I will show how to connect to mongoDB through Python using CherryPy and spitting out the results of a find() in an HTML table.

Here is what the webpage will look like:

And here is the code – I’m sure there is a cleaner way to write this instead of looping twice but i’m writing this on my lunch break and don’t have a lot of time to do more than make it run.

import cherrypy
from pymongo import Connection,GEO2D
class mongocherry(object):
def index(self):
db=Connection().geo
output =[]
output.append(‘<HTML><HEAD><TITLE>QUERY MONGODB</TITLE></HEAD><BODY><h1>Query MongoDB</h1>’)
output.append(‘<table border=”1″><tr><td>ID</td><td>LAT</td><td>LONG</td></tr>’)

for x in db.places.find():
output.append(‘<tr><td>’+str(x[“_id”])+'</td><td>’+str(x[“loc”][0])+'</td><td>’+str(x[“loc”][1])+'</td></tr>’)

output.append(‘</table></BODY></HTML>’)
i=0
html=””
while i<len(output):
html+=str(output[i])
i+=1

return html

index.exposed = True

cherrypy.config.update({‘server.socket_host’: ‘127.0.0.1’,
‘server.socket_port’: 8000,
})

cherrypy.quickstart(mongocherry())

I have servers running on some ports so I needed to set a config to change the port. This site creates a front end to data that will always be current. You can make your index page a form and allow the user to select the data they want, then in another def returnResults(self, user selected data): Spit out all the HTML that is in the index now, passing ‘user selected data’ to mongoDB.

I have really enjoyed playing with mongoDB and am curious about importing Revit schedule. Not sure what I would do with it once it’s loaded. But still thinking…… Any ideas?

Shapefile Creator Website Using Cherrypy

8 Nov

I showed how to create a shapefile using python, now I want to make the tool public with a web based front-end. My python web framework of choice is Cherrypy. -a minimal web framework.

My website will allow you to enter Longitude, Latitude and a comment. I am working on a text area where you can paste data. Here ie my website:

And when you submit, you can download a ZIP of your shapefile.

Pretty simple. I don’t really know what the use case is – if you have GIS and Long/Lat you would just import it directly. And if you don’t have GIS, why do you need a shapefile? But I guess this shows how you can perform GIS data functions through the web using python. Maybe connect some toolboxes and use Arcpy to allow people to run your models with their data – without giving your model and logic away.

My code is not pretty and no built for production – it is built to work. Here it is.

import cherrypy
import shapefile
from cherrypy.lib.static import serve_file
import zipfile

class SHP(object):

def index(self):
return “””<HTML><HEAD><TITLE>SHAPEFILE CREATOR</TITLE></HEAD>
<BODY><FORM NAME=’shp’ action=’paul’>Latitude: <input type=’text’ name=’lat’><BR>Longitude: <input type=’text’ name=’long’>
<BR>Comment: <input type=’text’ name=’comment’><BR><input type=’submit’ Value=’SUBMIT’>
</FORM></BODY></HTML>”””

index.exposed = True

def paul(self,lat,long,comment):
w = shapefile.Writer(shapefile.POINT)
Flat=float(lat)
Flong=float(long)
w.point(Flong, Flat)
w.field(‘Comment’)
w.record(comment)
w.save(‘Web’)
prj = open(“Web.prj”, “w”)
epsg = ‘GEOGCS[“WGS 84”,’
epsg += ‘DATUM[“WGS_1984”,’
epsg += ‘SPHEROID[“WGS 84”,6378137,298.257223563]]’
epsg += ‘,PRIMEM[“Greenwich”,0],’
epsg += ‘UNIT[“degree”,0.0174532925199433]]’
prj.write(epsg)
prj.close()
zipped = zipfile.ZipFile(‘YourShapefile.zip’, mode=’w’)
zipped.write(‘Web.shp’)
zipped.write(‘Web.shx’)
zipped.write(‘Web.dbf’)
zipped.write(‘Web.prj’)
zipped.close()
return “Download Shapefile: <a href=’/get?filepath=C:\Documents and Settings\user\Desktop\YourShapefile.zip’>YourShapefile</a>”

paul.exposed = True

def get(self, filepath):
return serve_file(filepath, “application/x-download”, “attachment”)
get.exposed = True

cherrypy.config.update({‘server.socket_host’: ‘127.0.0.1’,
‘server.socket_port’: 8000,
})

cherrypy.quickstart(SHP())

Link a QR Code to a Database

2 Feb

In an earlier post, I showed how to link a QR Code to a map by using PHP _GET. This allowed me to pass variables to a script and have the script run in realtime to update the page. I am going to do the same thing in this post, but the data I pass will be used in a SQL statement to retrieve data from the database.

I think this would be a great tool for a facility to use to inventory their equipment. Lets say I have a swamp cooler on the roof of my building — I live in New Mexico. I am on the roof and I need to know something about this particular unit. I can scan a QR Code on the side of the unit, it will then pull up a website that displays everything about this unit: The manufacturer, when it was installed, when it was last serviced, what was done to this unit during the last service, when it is beyond its useful life. On the same page, I could have a form that allows me to update the data. I can enter todays date  as the new last serviced date and put a description of what I did – changed the pad and oiled motor. The next time the code was scanned, this data would be available.

Since I have a room database from Revit already setup, I am going to show how to connect a QR Code to this database to retrieve the room properties. To modify this to work on any other object, just change the database connection.

I wrote a PHP script called get.php. This script selects all the data from a rooms table in a MySQL database where the room number is from the QR Code: SELECT * FROM rooms WHERE number = $_GET[roomchosen].

_GET[roomchosen] is the PHP call to pull the data from the URL that was sent via the QR Code. Here is he full code:

Now I just need a QR Code that has the URL to the script and sends the room number: http://room.educationalfacilityplanning.com/get.php?roomchosen=3. This URL will select room 3. I have 6 rooms in this database, so feel free to change the URL to any number 1-6. If you don’t know where to make a QR Code just google “QR Code Generator” or go to http://www.qrstuff.com/.

Here is my QR Code for room 3.

 

To link to any database, you can pass a part or a full SQL statement through a URL using PHP _GET. Assign your swamp cooler and id=12345. Create a QR Code with the url http://YourDomain.com/swampCoolerGet.php?id=12345. In your script have a statement:  SELECT * FROM swampcoolers WHERE id = $_GET[id].

Don’t forget to add a form for updating the data to make this perfect for facility management.

 

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.

DWF in a Website. Part II

1 Apr

In an earlier post, I gave the link to a Firefox and Chrome plugin for viewing a DWF through the web.  I have been looking at examples online and have been disappointed because they fail to take advantage of the abilities of Revit to embed data in to a DWF. I have built a sample website to demonstrate how a Revit model — both 2D and 3D – via DWF can be viewed through the web. When the models load, make sure to select the arrow tool in the toolbar and click on rooms and objects to see the properties. You can add comments and save the DWF to your local machine.

The Firefox and Chrome plugin is HERE.

The website with the models is at fm.educationalfacilityplanning.com

How this works with Design Review 2012, I do not know. But hopefully, everything still plays nice.