Mecklenburg County GeoPortal
This is the complete source code for Mecklenburg County, NC's GeoPortal. It's MIT licensed, so do with it what you will. Patches are always welcome.
This project stands on the shoulders of Smart People:
- Leaflet.js for mapping.
- Bootstrap for teh pretty and responsive.
- jQuery and Underscore.js for DOM manipulation, templating, and general awesome.
Stuff it Does I Think is Neat
- It's not ugly. That puts it into the top 5% of online government GIS apps from the get-go.
- It's easy to use. See above.
- Embed map. It has a wizard to walk you through creating an iframe for the site, so you can shove just the features you want in your CMS, other sites, whatever. Here's an example.
- Print a report, aka taking what's on your screen and burning it into pressed trees. Apparently that's still a thing.
- Some responsive improvements. Some elements like the popup size scale themselves in-situ; they aren't resizing on window size change.
Good Stuff to Know
I used PubSub for almost all of the main "events" - adding a marker, selecting a location, making reports, etc. You can find the publications near the top of
The "report" type information is rendered via Underscore.js templates. Templates are stored in individual html files in
public/templates. When they are loaded they are put into a global variable so they don't have to be loaded again. They are also put in localstorage if it's available, so most users only have to fetch them once. A version number is put in localstorage so it is wiped after you publish site updates.
Grunt is used for watch and build. To get Grunt running:
- Install Node.js for whatever platform you're on.
- Bust out a terminal/DOS/whatever and install Grunt via
npm install -g grunt-cli.
- Bust out a terminal/DOS/whatever and move to the main folder (where
npm installand it will install everything you need. To see what it installed, check out
The watch process is the default; just type
grunt and you're going. For final compilation (minimzation/uglify etc.) type
It might be useful to look through
This contains stuff that needs preprocessing before we use it or source files for images.
- images: Source files for images.
less: LESS source files.
main.lessimports the others and is what you should edit.
functions.jscontains some general functions and prototypes.
question.jscontains the service calls for all of the reports as well as turns on or off overlay layers.
map.jscontains map specific code.
page.jscontains general code for page interactions.
- The root folder contains index.html, embed.html, report.html, and favicon and touch icons, and related stuff.
- css: The processed LESS goes into main.css.
- images: Really?
- php: This is just a little code to email feedback.
- templates: Underscore templates. There are lots of these.