Often you will want to share what you have found with other people. Using AJAX, there is no back and forward button, and bookmarking doesn't save your current layout and configuration. For bookmarking, you have to prepare the bookmarked URL yourself.
The way bookmarks work is by issuing GET commands in the URL. These are variables attached to the end of the page URL. They follow a question mark (?variable=1234) and ar separated with ampersands (?varA=1234&varB=9999&varC=brent).
There are two things we want to bookmark:
1) Current view of the map.
2) Search results.
MapBuilder already handles saving the current view of the map. All you have to do is pass in a parameter in the url called "bbox". http://sigma.openplans.org/index.html?bbox=-165,-135,160,132
When the page is reloaded with 'bbox' in the url, MapBuilder will automatically set the map to the current bbox position. Cool!
Changing the URL
To change the URL in the browser, all you have to do is set one variable in javascript:
Now what we want to do, is grab the current bounding box from MapBuilder and add the variable 'bbox' to the URL. To get the current bounding box of the map we use the following line:
Here, 'bbox' is an array of 4 floats (bottom left X,Y and upper right X,Y). And once again, the value 'mainMap' is specified in our map_config.xml document as being our main map.
Ok, so now we have our bounding box, lets set the url of the screen and put it all in one function:
Create the link
Now lets create a link on the page, so that when the user clicks on it, our getPageBookmark() function is called.
Bookmarking the search results
Bookmarking the search results is a little trickier than the bounding box. Well not really, but we need to think about it a bit.
With the GNIS search, if you search for "Washington" in the United States, you will get about 2000 results! This many results cannot be stored in a URL with limited character length.
The solution here is to just store the query information (city and country) in the URL, and then have the page process the request on loading, instead of having the results handed to it.
So this makes it quite easy to implement. All we have to do is add another couple variables to the URL, and then process the URL when the page loads in our nice little setup() function.
First we will set a global variable called 'lastQuery'
The next thing we need to do is save the user's query to the global variable, so that when they hit the "Link to this page" link, the URL is changed to hold their search request.
I do this in the geographic search function. I take the two query values, city and country, and attach them for the URL with a variable name 'gnis'
Then, in the getPageBookmark() function I attach the varialble to the end of the URL:
If we search for Vancouver, Canada and bookmark the page, the URL will look like this: http://sigma.openplans.org/index.html?bbox=100.70408330000001,12.690333299999999,101.07908330000001,12.9903333&gnis=vancouver,canada
Note the "&gnis=vancouver,canada" at the end of the URL.
Load the bookmarked search results
When the page loads, we need to intercept the URL and parse it, taking out the variables we want, and displaying the page as if the person has just performed a search.
To do this, we need to head to our setup() function and have it parse the URL and look for the query string "gnis=city,country". But first, lets just grab the URL and take all the variables:
That takes the URL, and splits it at the question mark. Everything after the question mark are variables.
Next we test to make sure that there actually are variables passed in (vars != null && vars != ""). And then split 'vars' by the ampersand (&). The ampersand denotes a separation between variables. With the variables split, we iterate through each one and look for our variable.
The varialbe 'matches' is an array of all the variables passed in. Each variable should have an equals sign (=) signifying the separation between the variable name and the value.
For that, I again split the variable by the equals sign, so I am left with two values: variable name, variable value.
I then look at the variable name and update the page based on what value was passed in ("gnis" or "geocode").
Here is the entire function. Note that it handles the Geocoder search results as well, which is almost exactly the same as the GNIS search:
I have the function pick the first variable it finds, and then kick out of the loop.
The origional search function I made, called 'searchGnis()' took in no parameters. What it did was ask the form fields for their values, then use the values for the search. They could have been passed in as parameters, but I figured that out after the fact. Oh well.
So now I have two funcitons: searchGnis() and searchGnis_p(city,country).
searchGnis() is called when the form is filled in and used. It will grab the values from the form and then call searchGnis_p(city,country). I have the setup() function just call the searchGnis_p(city,country) function because it already has the city and country values.
(note that polymorphism didn't seem to work with javascript, hence the _p tacked onto the end of the function name)
Now we head to our geographic search function (the one that the form calls) and have it save the user's search request in the variable 'lastQuery'.
With the search values saved, the getPageBookmark() function can attach the values to the URL.
Summary
First we made a link that when clicked, called a function called getPageBookmark().
Then we made getPageBookmark() grab the current bounding box of the map and save it as a variable in the URL.
Next, we told our search functions to save the query so getPageBookmark() can use the values.
After that, we configured our setup() function to parse the URL and update the search results based on what was passed in.
>>Proceed onto the next step, Step 8: Advanced Map Information >>