Tag Archives: Map

Realtime Bus Map Using OpenLayers and KML

12 Jan

The City of Albuquerque posts a KML file every minute that shows the location of a bus. Using OpenLayers and Open Street Map, I built a map to display route 157.

I needed the KML to be stored locally do I created a PHP script to grab the file. In the HTML, I called the script using . It runs, saves the KML and then OpenLayers displays it.

I would like to use $_GET to allow the passing of a route # to find your bus and a QRCode on the bus sign.

See the map.


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.

Leaflet.js with Floating DIVs and onclick()

10 Dec
My simple Map Website

My simple Map Website

I am not a web designer, I make maps. I thought it might be cool to make a website that’s a map. I started by disabling the scrolling and zooming on leaflet. But that’s boring, all you get is an image with popups. Most people wouldn’t think it was a real map. so what I did was place some icons in <div>’s and float them on my map. When you click one, I change the map.setView() and add a marker and openPopup. This is a very simple example just to test how a map website might work. It is a single page – haven’t thought about how to display large amounts of information ad I have no need for that yet. Works great on iPhone too. Here is the live site.

CTRL-U in Firefox to see the code.

Albuquerque Public Art: A Mobile Leaflet.js Example

5 Dec
Mobile Leaflet Map with Geolocation, Clusters, and Icons.

Mobile Leaflet Map with Geolocation, Clusters, and Icons.

I was looking at the Albuquerque OpenData – it’s all in KML – and decided to make a mobile map using the public art file. The first thing I did was write a Python script to get the Long, Lat and URL of the image out as text. I renamed the KML to XML and imported it in to Excel. From there I deleted out several columns and stripped some information out by hand. Then I ran this script to get my JavaScript:

from xlrd import open_workbook

for rownum in range(sheet.nrows):
a=”[“+str(sheet.cell_value(rownum,2))+” , “+str(sheet.cell_value(rownum,1))+” , “+'”<img src=’+”‘”+str(sheet.cell_value(rownum,3))+”‘”+’>”‘+”],\n”


I wrote my Leaflet map and put the output in as my markers. Then I made a new PNG using the Albuquerque Vase Logo. Lastly, I grabbed the LocateControl. View the live example.

If you view this page on an iPhone, it will ask for your current location. You can also click the location circle in the top left of the map – under the zoom controls.  Doesnt appear to work on Droid – but only tested on 1 device.

Just grab the code from the example by going to ‘page source’ in your browser – ctrl-u in Firefox.

If you do not have location enabled, you can go to this map.

Shapefiles in Revit: Method II

25 Oct

Need to get shapefiles from your GIS in to Revit? I will tell you how using open source software. But first, Revit does not like coverages of over 20 miles so you may need to crop your shapefile.

Download Qgis – a free and open source GIS.

Open your shapefile in Qgis.

It will appear in the table of contents on the left. Right click on it and select ‘Save as..’ Choose AutoCAD DXF.

You now have a DXF of your shapefile.

Want to bring AutoCAD – or Revit – to GIS? Do everything in Reverse. But first activate your plugins.

Go to ‘Plugins’ and ‘Manage Plugins’. Check DXF2SHP.

Now click DXF2SHP and select your DXF. Choose a name and location to save your shapefile. Select the type. Probably polyline.

Here is a DXF loaded

Now your CAD drawing can be used in a GIS.

OpenLayers and AutoCAD: OpenLayers.Layer.Image

20 Jun

I have wanted to get my own basemaps in to my web applications. I was looking at a TileServer but do not have the computer and setup to make it work. I started playing with OpenLayers because it allows you to import an image and use it as the base layer. I saw a tweet linking to a hand drawn, isometric, watercolor map of Reyjavik.

I was also playing around with importing AutoCAD in to Leaflet.js. Then I received a comment on a post that linked to FloorPlanMapper. Floorplanmapper uses AutoCAD in OpenLayers as an image like in the Reyjavik map.

So I decided to import a CAD file in OpenLayers and drop 2 points in to a room, then connect a popup to the points. This was my first attempt at OpenLayers and relied a lot on OpenLayers:PopUp Mayham.

Ideally, I would use polygons in the rooms but here is my AutoCAD and OpenLayers map:

OpenLayers is a mapping library that can be used to create applications that use CAD files as the base. Just another possibility and another reason to look cross discipline to deliver great services to your clients.

Here is my code: OpenLayerCAD

Leaflet.js Interactivity

19 Jun

I have been playing with Leaflet and while I am not a JavaScript pro, I wanted to make my map more of an application. Two things I have started working on: Adding buttons and capturing popups.

In Leaflet, to add or remove a layer you only need to call map.addLayer(layerName) and map.removeLayer(layerName). I created a function


and then I created a hyperlink

<a href=”#” onClick=”addPoints()”>

I grabbed a button image and used it as the link. When you click the button, the map will add a layer.

Click Button to Add Layer

Red School Points are Added When Clicked.

The remove button does the same thing but uses the map.removeLayer() function.

I also wanted to capture popup info and display it on the webpage so I can display more data and do things with it. To display a popup in the webpage, I modified the popup function from Bryan McBride. Instead of:



I took the text in the setContent(), deleted the openPopup(), and used:

var container = document.getElementById(“display”);
container.innerHTML = “the text from setContent()”;

I have a DIV at the top of the page with an id=”display”. This is where the info from the popup will show up.

Top Line Will Open With PopUp Info

PopUp Displayed

Here is my full HTML file. It connects to my GeoServer so it will not work properly but you can see the code.