on Code

Geospatial Portal Code Release

Editor’s Note: I’ve made a few updates since this was first posted. The zip file is now current as of 3.17.2008, and I’ve also changed the text here a bit. The update includes a custom OpenLayers.js build to reduce the file size (thanks Chris!), some CSS changes, and general tweaks/cleanup.

Editor’s Note #2: I created a Projects page at the top for this project and the REST Web Service Framework project.

GP Logo 2

I’ve been thinking about the best way to release the code for Geospatial Portal for a while now.

My first thought was to make demo of it - strip out all of the Mecklenburg County specific features so it would be the same basic layout, with an accordion control and a generic WMS service. I had already made something similar for a coworker for a project needing the same sort of layout.

I ultimately decided against releasing it that way here, as beyond showing you how to make an accordion control with jQuery, I didn’t think it would add anything beyond what you get with the sample code provided with OpenLayers. So, I decided to just zip the whole thing and put it out there.

Of course, it wasn’t quite that simple. The non-mapping web services used by the site were JSON using jQuery.getJSON. The problem, however, is that browsers will raise a security flag if you do a XMLHttpRequest to a different domain than the one the original page is coming from (XSS attack protection). So you would basically unzip the folder, drop it on your http server, and watch Firebug report an endless series of XHR error messages. Which isn’t terribly helpful.

So, I added a JSONP option to our REST web services (I also updated PostGIS REST Web Services JSON include). JSONP allows you to load the JSON object as a remote JavaScript function, therefore not raising your browser’s XSS ire.

Which means you can dump the zipped gp folder on any http server anywhere, and as long as your browser can get to the Internet, it will just work. If you have Apache or IIS running on your PC, dump it on there and hit default.htm, and off it’ll go. The code is exactly the same as on our web site, and it will work exactly the same for you as it does there. No server-side code is used in the website - it’s strictly HTML and JavaScript - so no special setup is necessary.

Without further ado:

Geospatial Portal

The folder layout is pretty straight-forward, but let’s take a look:

  • The main folder contains the only HTML page, default.htm, and three subdirectories:
    • image: This contains all of the plain-old images (i.e. not images related to CSS). There are some GIMP files in there if you want the originals to edit.
    • style: This contains all of the CSS styling, along with images used in the CSS styling. With the exception of the auto-complete and lightbox functions, everything is handled in custom.css - that's the file you want to edit to customize particular things in your page. Technically there's a CSS file associated with OpenLayers in the scripts folder, but you probably won't ever need to mess with it.
    • script: This has all of your JavaScript, and there's a good bit of it. The folders contain OpenLayers, jQuery, and some jQuery plugins. Note I've made a custom build of OpenLayers (gp.conf is located in the OpenLayers folder) to reduce the size of OpenLayers.js, so if you try to add new OpenLayers-related features and start getting strange problems, you'll want to go to the OpenLayers site and get the whole enchilada. There are three scripts in this folder to take note of:
      • page.js: Handles all of the page stuff - page load events, accordion control, button clicks, etc.
      • map.js: Handles initialization of the map and identify, markers, etc.
      • jsonp_processor.js: This is a series of functions to process JSON returned from the REST web services.
So, there are really only five files to keep an eye on - default.htm, custom.css, page.js, map.js, and jsonp_processor.js. Those are the only ones you'll likely need to edit to change the site to suit your needs.

Hopefully having a copy of a working model will help jump start your own site. Of course, it’s all GNU GPL. My name is in the comment headers, but you are under no obligation to keep it there.

Happy coding!