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.
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.
Without further ado:
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.
- 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.