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!