Keep It Simple

I was tasked with developing a digital interface for a collection of maps drawn on old cloth window shades. The maps were fairly large and many decades old with faded annotations and markings. The job was to make the maps accessible on a computer and allow for panning and zooming and to program it in a simple to use interface while keeping cost to a minimum.

I entered into the project with an attitude of keeping it as simple as possible. The way I went about this was to first verify what was expected on completion and then proceeding with the primary concept of making the maps available on a computer.

An old favorite

The initial steps involved were taking pictures of the maps and working with those images to see how they displayed on the computer. I realized that one huge picture of a map was not feasible. Subsequently, I sectioned the map so that it could be properly zoomed in on and remain clear. On one map this involved 18 sections, or images, that had a sufficient resolution. It is possible that a higher resolution camera would have benefited me in this endeavor but the 13 megapixel I used had to work because of budget concerns. I even initially considered SVG as a path to take but quickly ruled that out also. SVG would have only complicated the project.

The simplest direction was to section the map and then use a jQuery library to do the panning and zooming on the images in a program interface. I created a simple menu that would bring up each map section in a page area. I decided on using some pngs for the menu links and used a simple jQuery trick to change the src path as each menu item was clicked.  

By naming the map section images in a deliberate fashion and then giving each menu link an ID that matched the image section file name I was able to code a quick little src attribute replace routine.

$(document).ready(function(){

$(".menuswitch").click(function(){

var map= $(this).attr('id');

var mapchange= "mapimages/"+map+".jpg";

$("#mapshow").attr('src', mapchange);

});

}); 

Each menu link had a class name of menuswitch so each time a menu png image was clicked the main class that held the map image section would have its src attribute changed to that png's ID + .jpg and I also appended the directory name that held the section images. This created a routine that allowed the map images to show in the designated page area without a lot of coded url links. I had actually used this little trick before in another project but it took me a while to recall the exact structure. 

How simple is simple

I'd love to say it was as simple as that. As usual, I did try to complicate it by placing the map images in different directories, grouped in threes. Each three sections belonged in the same group because of how I took the pictures. So when it came time to to add the click function I initially tried to use the ID as the selector and ended up spending an hour trying to figure out why it wasn't working. I finally decided to change coding paths and just place all the images in one directory and use the class name for the selector. I used the directory name that I placed all the map images in as the class name; I still don't know why it wasn't letting me use the ID attribute as the selector.

Although this wasn't a huge issue, it is a good example of what can happen if you stray out of the project scope. The additional, self-imposed, requirement of placing the images in different grouped directories caused an unnecessary coding road block. By remaining fluid, I was able to overcome it and still complete the project in a timely manner. 

Keeping code projects simple also means keeping the simple uncomplicated.

by Jim Atkins 'thedosmann'

Memphis Web Programming / AA5973ZGN6PR