Tag Archives: Open Source

OpenLayers and Revit

16 Jul

In a previous post, I showed how OpenLayers could display Autocad Files. OpenLayers, using an Image Layer, can also display an Ortho of your model. While I would prefer a 3D PDF, this may have its uses.

Here is the Revit model as a web map.

I took 3 shots of a Revit model and added two points. I used a blank white image as the background, a full model layer – which is active at the start, a layer with no walls, and a frame layer. By clicking down the layers, you can remove pieces of the building. I did not fix resolutions in my code, but the images can be more crisp. Here is a shot with the Frame Layer turned on.

To see the map live go to my website:


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.


Query Multiple WMS Layers in Leaflet.js

16 Apr

In an earlier post I imported GeoJSON in to Leaflet. One of the reasons I did this was to be able to assign a popup to each layer – which is something I could not do with WMS. I was finally able to make a popup for each of my WMS layers. Here is how I did it.

I have 2 layers -psfa:SchoolPoints and psfa:CityOfAztec – on my GeoServer at: http://localhost:8080/geoserver/psfa/wms.

I made a Leaflet map importing these two layers.


The cloudmade layer that is added is my base map. With the layers showing up correctly, I found the website of Bryan McBride. I copied his WMS example and then modified it for my server and layers.


var URL = the location of my GeoServer.

GetFeatureInfo&LAYERS=my layers seperated by a ,

Lastly, do the same for &QUERYLAYERS= seperaed by a ,

This is how I was able to get my map to popup the correct info when I clicked on any WMS layer in my map. Next, I need to clean up the popup box to fit my data without scrolling. It looks like if you want to change the formatting of the popup internals, GeoServer has some WMS templates. I am not that far yet.

Final Map


Leaflet.js and GeoJSON

12 Apr

Recently, I have been playing with a few different open source GIS tools and Leaflet.js has been one I really like – OpenLayers is next on my To-Do list. In this post, I will show a very simple example of loading GeoJSON point data in to a map and then adding a popup to the points. I modified the example from the Leaflet website, stripping out other ways of doing it and simplified the GeoJSON to one data object. I think for newbies like myself, this made it much easier to understand.

Here is a screen shot of the final map – 2 points with a popup.

The Final Leaflet.js Map.

The following is the GeoJSON I used – it contains 2 points.

GeoJSON file saved as .js

Now in the webpage, I create a Leaflet map and use the GeoJSON file. Here is the code:

Here is what’s happening:

Import the GeoJSON data: <script src=”MyGeoJSONforLightRail.js” type=”text/javascript”></script>

Create a place to put the map: <div id=”map” style=”width: 600px; height: 400px”></div>

Add a map named same as place we want to put it: var map = new L.Map(‘map’);

Add a base map, set the map zoom, add the base layer to the map:

var cloudmadeUrl = ‘http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png’, cloudmadeAttribution = ‘Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade’,  cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

map.setView(new L.LatLng(39.747, -105), 14).addLayer(cloudmade);

Create and empty GeoJSON Layer: var lightRailGeojsonLayer = new L.GeoJSON();

Attach a popup: lightRailGeojsonLayer.on(“featureparse”, function (e) {
var popupContent = “<p>I started out as a GeoJSON ” + e.geometryType + “, but now I’m a Leaflet vector!</p>”;
popupContent += “<p>This is the default look of a GeoJSON Point.</p>”;
if (e.properties && e.properties.popupContent) {
popupContent += e.properties.popupContent;

Note on Popup: The += following popupContent is appending to the string. You will see it 3 times.

Add the blank GeoJSON layer to the map: map.addLayer(lightRailGeojsonLayer);

Populate the layer with the .js file we included in the header (MyGeoJSONforLightRail.js):


Note on populating: the (lightRailStop) is the name of the var in the MyGeoJSONLightRail.js file:

var lightRailStop = {
“type”: “FeatureCollection”,
“features”: [ blah blah blah…..


There you go. Change the GeoJSON to your file, modify the map setView, and edit the popup and you have your own map. For more examples go to the Leaflet page.



When Architecture and Planning Mix: BIM and GIS

20 Mar

Architects and planners work at two different scales and use two different sets of software. Architects use computer aided drafting (CAD) and Planners use geographic information systems (GIS). Architects are often drafting a single building on a site and planners are analyzing a block, neighborhood, city or region. It is not that often that a planner works at the level of a single building and it is just as rare to find an architect drafting a city. What if we could combine the work of architects and planners in GIS?

Read More at The Urban Times…

Crowdsourcing Maps Using Ushahidi

13 Mar

Making maps requires the collection of large amounts of data. The size of the area you wish to map increases the amount of data needed to make the map effective. One way to accomplish the data collection is by crowdsourcing your map. A central user or community can set up a base map and allow users to input data into this map. Mapping a city this way would allow people familiar with specific areas of the city to map what they see and know about those areas. They are the local experts. This not only provides, probably, better data, but also allows for large amounts of data to be collected quickly.

There are several GIS software platforms for creating a crowdsourced map. One platform in particular stands out – Ushahidi. The Ushahidi Platform is an open source application for “information collection, visualization and interactive mapping.” Requiring at a minimum a web server, such as Apache, PHP 5, and MySQL, all of which are free and open source. Ushahidi can run on many computers.

Read More at The Urban Times…

Open Source Mapping: GIS For the Rest of Us

13 Mar

Data drives planning decisions, and those who have the data have the most power in making them. Unfortunately, it is usually governments and companies that have the data, and their decisions on planning and development impact our communities. The tools used to create and analyze data are expensive—for U.S. residents, a copy of ESRI’s ArcView GIS software is $1,500 for the most basic version. Most communities do not have the resources to purchase this type of software, nor do they have the ability to buy data collection tools such as a Trimble GeoExplorer. How can we involve communities in the creation and analysis of data so that they may help make and influence decisions about their neighborhoods?

Read More at The Urban Times…