Skip to end of metadata
Go to start of metadata

Building a Fully Functional Web App From Scratch

This page will walk through the process of setting up a fully functional map in a web page. It covers AJAX queries, loading MapBuilder into a web page, handling browser incompatabilities, loading data sets, and linking everything together.

The site is here:

The goal:

To make a web page that displays a navigatable map and allows the user to search for geographic locations and addresses.
We wanted to prove to ourselves that it was quite feasable to perform a form search on geographic names and have the search results show up on a map, and then send that page to a friend. We also wanted to stress test MapBuilder and GeoServer.
Dave and I do a lot of travelling, and constantly we want to show people where we are. Also, sometimes we don't know where we are going and would like to find out where the place is. That is what this page fulfills: it allows us to search for a location (out of about 7.4 million locations in the world) and display them on a map. It also lets us bookmark the current map view and send it to people so they can see where we are.
We also added a geocoder (address search) for the heck of it.

The steps below will walk you through the entire process of setting up the web page.

  • No labels


  1. The link above points now to a web app based on OpenLayers. Is there an example on MapBuilder any more? Where at least can we download the source for the MB example? Thanks.


  2. I was reading through this tutorial and it is unclear where is the geography data, like coastal boundaries, islands etc... came from? The USGS doesn't provide this level of details. Are you using VMAP0, something else for this? It would be nice to have this tutorial updated to include description of "where from/how" geography has been included.