I wanted the user to be able to see what position on the map their mouse pointer is over, and what scale the map is, and what the current bounding box is.
These are mostly useful as a GIS developer. I wanted them there to help me develop the page. Such as to see what scale the map is at so when I am styling the map, I can work to make it look nicer.
Displaying this information takes up some room, so I wanted to be able to have it shrink and hide from view on request.
First I will describe how I got the map information to appear on the screen.
Map Scale and Cursor Position
It was pretty simple to make the bounding box, scale, and mouse position appear. I just looked at some MapBuilder demos, copied the code, and stuck it in my map_config.xml file.
To make the mouse position and map scale appear, I had to add two widgets to the map_config.xml file.
Like before when we used MapBuilder widgets, the "id" value in the tag name must match the "id" value of an element in our html page. Here is the HTML for where I placed the two widgets:
Note the id's: "cursorTrack" and "mapScaleText".
Uload the map_config.xml file and the html page and you should see both values appear. Easy!
Bounding box
I couldn't find a widget to render the current bounding box for me, so I did it myself by just asking for the bounding box value like what we did for the bookmark.
I made a little text field to hold the value, and a button called "refresh" that would refresh the current value of the bounding box in the text area.
The refresh link calls a javascript function, that in turn asks MapBuilder for the bbox value and updates the text field. Here is the code:
Note that I was having issues with <a> wanting to reload the page when clicked on, so I made it call an empty javascript function called nothing(). Hacky, yes, but it works.
Here is the function grabCurrentBbox():
Ok, that isn't the entire function... there were some issues with Internet Explorer and its getElementByID and getElementsByName functions.
Basically, they don't work all the time. If you try to call getElementByID("div_id"), it won't let you walk down inside of the returned <div> object and find the children, at least not find them by name or ID. You have to search the children by tag name. Ie. a, span, img, table ...
So what I had to do is surround the text field in a <span> and then surround that in a <div>, call the div by its ID, then ask for the first occurence of the tag <span>, using getElementsByTagName('span'), and then set all of the innerHTML of the span object.
It all looks like this:
Here is the real HTML of the web page for this area:
I gave the bounding box text field a default value, so when the page loads it isn't balnk.
The downside to my approach, is that the user has to hit refresh to see the new bounding box value. I want to change it in the future so that when the map is moved in any way, the bbox value automatically updates.
Hiding the Advanced Options
In order to make the page less cluttered, I opted to have the extra information hidden when the page loads, and appear when the user hits a button.
To perform this, I wrapped all of the HTML in a span tag. Then I set its style to "display:none;", like so:
Above the area I made a link that will hide and unhide the area:
I also attached a nice little arrow graphic.
This link is similar to the bounding box 'refresh' link in that it re-routes the call to "javascript:nothing()" so the page doesn't refresh when clicked. I have it call my own method called toggleAdvOptions() to make the area appear/dissapear.
Here is that function:
Once again, I have to wrap things in a div tag so Internet Explorer can handle it. I ask for the div by name, then get the first element in the div, a span tag, and then use it to manipulate the information.
There is also a global variable called ADV_OPTIONS_ON that I use for toggling.
Browser Issues
Like I mentioned. Internet Explorer does not return a proper object when you use getElementsByName() or getElementByID(). It will return you something, but you can't manipulate any children of that object.
For example, I have this HTML:
If I call
document.getElementsByName("divvy")[0]
it will return me something, but that object can't be used. So I can't go:
I have to call getElementsByTagName('div'). This will return a real object I can manipulate. To make sure I get the right div, I wrap it in another div tag, get it by its ID, and then get the div tag in it by using getElementsByTagName(). This seems to work.
SUMMARY
First thing we did was add the cursor position and scale widgets to out map_config.xml file.
Then we placed them in the web page inside a <div>.
Next we rolled our own bounding box text field and gave it a refresh button.
Finally, we wrapped all of that HTML in a <div> and set it so it can be toggled on and off with a style "display:none".
>>Proceed onto the next step, Step 9: Drawing Custom Points >>