Creating Q-Web

To visualise data that is related to geographical locations (e.g. the local weather) nothing beats a good map with some clear symbols that reveal data from a database. The following series describes my route towards a database driven ASP.NET application that shows data as collected by the 'Discharge measurement' stations. The company I work for (Qmetrix) supplies these stations to local water management authorities. They measure the flow of water in a river or stream, combine it with the water-level and the local depth-profile and calculate the total cubic meters of water per second that passes by.
First I needed a nice map. I used MapBuilder, the excellent tool to manipulate Google maps. Now what I need for the webpage is a image for the area of interest, for which I know the exact coordinates of the left-top and right-bottom corner. Here is how:
In MapBuilder first click 'New Map' and enter a (short) name and a description. Then return to 'Edit Map'. Disable the 'Automatic Zoom' feature. Make sure the area of interest is completely visible. (Find it quick by just typing the name and country of a city that that in the area in the "Location Search & Quick Navigation" box )
Click in the left top corner, this will show a blinking marker. Select a small marker type, type 'Left Top' in the 'Caption' box and click 'Add'.
Repeat these steps for the 'Right-Bottom' marker. Now click 'Save Center, Zoom, Maptype'. Select 'Map Controls' in the menu, and disable all visible features. Don't forget to click the 'Save' button at the bottom of this screen.
Now choose 'Preview' in the menu. It might be required to shift the map a little to get both markers in the right place.

If required you can go back to the 'Map Controls' screen, and increase the map width and height. Now if you don't want to include the Google and Mapbuilder trademarks you must make sure they fall outside the area as enclosed by the two markers. If the map is right, capture the whole screen, using a screen-capture utility or just [Shift][PrtScreen]. Load the captured image in an image editor, and cut out the exact area Top left to Bottom right. Save this as a new (.jpg or .png) image.
Now go back to MapBuilder, and make a note of the exact coordinates of Top-Left and Right-Bottom. (I usually just click on the markers, and Copy-Paste the 'Latitude' and 'Longitude' fields to a Notepad text file.)
While this text file is open you might also write down the exact sizes (in pixels) of the map image we just created. Usually this can be found using the image editor, but you can also locate the file in Explorer, right click it and select 'Properties'. Hidden under an 'Advanced->' button you find the exact size of the image in pixels.