Overlaying Background Images

We've seen how to set up a coordinate system between rooms and a background image.  But you don't always need a fancy coordinate system.  In this example, we will start with the background image and then just click on it to add rooms wherever we want.

Adding a background image

Using the images on the www.mapquest.com site, I copy and pasted various views of downtown Colorado Springs into my graphics editor and stitched them together to form a larger image.  I then used the Zone/Background/Image command to load this image into a new zMapper map:

We've zoomed out so you can see the entire map.  The image itself is about 1,000 pixels on a side and has a lot more detail in it that you can zoom in to see.

Adding Rooms

What we want to do is overlay the background image with the major streets of the downtown area.  We are then going to place some of our favorite restaurants onto the map and compute the shortest driving distance from one point to another.

To get started, let's create a new room definition called "Intersection".  We'll give it a blue background and a cyan border so that it will stand out on our map.  We then zoom in and use the Add Room tool in the toolbar and click on the location we want to put our intersections.  If you Shift-click on the Add Room tool, it will remain selected so that you can add several rooms at once.  When we are done, we click the Select tool on the left again.  Here is what our map looks like with some intersections:

Defining new Link types

Next, we want to connect these intersections with some streets.  We'll select the Exits from the Palette pulldown, then right-click and select New to create a new Exit type.  We'll call this exit definition "Street".  To change the properties of the link, we right-click and select the Properties option.  In this dialog, we can change the drawing properties for exit lines.  Let's give our streets a cyan color:  

Adding Streets to the map

Then, using the Link tool on the left, we add a link between each room.  To do this, we click the Link tool, then click on the outside edge of the room (intersection) we want to start the link, then click on the outside edge of the room we want to finish the link.  Again, we can Shift-click the Link tool so that it stays selected in order to add lots of streets to our map:

Adding Bends to links

Some of the streets on our map need to turn and bend.  To add a bend to a link, right-click on it and select Add Bend.  You can then drag/drop a bend wherever you want.  Here is a street that we added some bends to:

One-way streets

Next, we want to change some of the streets so that they are one-way.  Simply right-click on the end of the link that you want the arrow to appear and select One-way.  Several of the downtown streets are one-way, and this will be important to allow zMapper to determine the shortest path to our restaurants. 

Adding the freeway

Finally, lets add the I-25 freeway to the map.  We right-click on the Exit palette and add a new type of exit called "Freeway".  We select it's properties and give it a purple color and make it wider than normal streets (a width of 4 in this case).  Here is our completed street map zoomed all the way out:

Adding rooms to the map

Now it's time to add our favorite restaurants to the map.  We'll go to the Room palette, right-click and select New to create a new room definition called "Restaurants".  We'll then right-click and select Edit Bitmap to create a little icon for the room.  In this case, we'll make a silly hamburger and coke icon (which is really a sin considering that the food at these restaurants is *much* better than just a hamburger and a coke):

With this new room definition selected in the Palette, we then click on the location of our restaurants.  Here is what part of the map looks like now:

The next step is to connect these restaurants with our streets.  Unfortunately, there isn't any easy way to do this.  To make the map look nice, we'll create a new room type (called "Blank") to represent the connection between the restaurants and the streets.  We then put a Blank room on the street in front of each restaurant, and then delete and recreate the street link so that it connects to our blank room.  Here is the result:

We've made the Blank rooms so small you can't see them.  We did this by Ctrl-clicking on the room to display the room-size handles, then we resized the room until it was *really* tiny.  So now it looks like our restaurants are connected to the streets.

Finding the Shortest Path

To find the shortest path between rooms, we go into the Edit/Options and turn on the new property called "Use Exit length in shortest path".  When this option is turned off, zMUD simply minimizes the number of rooms between two points in a path.  By turning this option on, the *length* of the room exits are used to determine the shortest path.

To highlight the shortest path, we first click on the start point and click on the Set Current Location (the blue dot button in the toolbar).  Then we right-click on the destination room and select Show Path.  The shortest path will be highlighted in red as shown below:

The above example was an easy path, even with the twisty road.  Let's try another case using some of the one-way streets in downtown.  We'll set the northern-most freeway exit as our starting point, then right-click on one of the downtown restaurants and select Show Path:

If you look really closely at the image, you see that zMapper properly computed the shortest path, taking into consideration all of the one-way streets downtown.

zExplorer and the Future

In the coming months, you'll be able to set up servers on the Internet for your maps.  People using the new zExplorer program (a free upgrade for AC Explorer users) will be able to download and view your maps, and will also be able to add their own comments and notes to each location (much like AC Explorer allows you to do).  Imagine putting this restaurant map on the Internet and then allowing people to comment on their favorite (or worst) restaurants and then using the Shortest Path feature (also available in zExplorer) to determine the best route.

The possibilities for this type of technology are endless.  From game maps like the current AC Explorer program, to real-world maps like this restaurant example.  It will be very interesting to see what people come up with!