Vintage Okc Clickable Map

[Doug Loudenback]

I've embarked on a new project ... it's just in its infancy and will take several weeks to complete, I'm supposing. It's an interactive map of vintage Oklahoma City (not yet defined, but probably extending through 1960-70 or so) bounded by N. 18th and S. 15th on the north and south and Klein and Stonewall on the west and east:



The "small" map (above) is broken into 8 quadrants (octorants?) plus an overlapping area in the center, as shown. In the larger quadrants (or whatever they should be called), the buildings or areas can be clicked on for images or other links, such as that shown below for Delmar Garden and the Santa Fe depot:

Larger: http://i8.photobucket.com/albums/a49...ple_delmar.jpg


Larger: http://i8.photobucket.com/albums/a49...le_santafe.jpg


I'm torn between using "flash" (which is way more interactive than html, and, once it's loaded, fast; but flash files are much more slow to load and this one could wind up being a very large flash file). "Html" pages load much more quickly but are much less interactive. I've got the main structure set up in "flash" right now but I'm wondering if that is the best way to go.

The map, as it is right now, is at Doug Dawgz Blog: Vintage Oklahoma City Clickable Map. The structure of the maps is largely "unpopulated" by buildings ... only the 5 passenger rail terminals and Delmar Garden and Wheeler Park have pictures associated with any links in the map as it stands right now. Before I really spend a lot of time populating the map(s) I need to decide whether to proceed with flash or take a tack toward html code, instead. I can easily see that this project will involve a couple of hundred buildings or so. So, before I do that, I'm trying to look at this project objectively, make a decision, and then proceed.

I'd appreciate any feedback, comments, etc., about how to proceed. Html, flash, or about anything else.

[Martin]

i've been wanting to do something exactly like this for some time now. some of your concerns with flash can be avoided if the application is built correctly. i'd be *extremely* interested in collaborating on a project like this... anyway, here are some ideas...

first... the map itself needs to be 'vector' and not 'bitmap.' the finished result will look better and have a smaller file size. the map can also be zoomed in on without compromising image quality.

second... 'quadrants' are nice, but it'd be far more usable if the user could drag the map around the viewing area just like any one of the many mapping sites they are already familiar with. usability is key.

third... this goes back to making the map vector. it'd be really cool to have map layers. the user could toggle visibility of features like streets, hiways, railroads, streetcar routes, water, etc.

fourth... and this might be challenging even for me... would be to have a slider that changes features over time. that is, things like the course of the river, streets, etc. were added/removed over the course of time. at the very least, it'd be interesting to see how locations fit into modern streets/geographic features.

...just some ideas. -M

[Doug Loudenback]

Excellent ideas and thoughts, M.

The program I'm using to make the flash file is v6 Alligator Flash which is fairly modest and inexpensive program which cost about $100 when I bought it a couple of years ago. I'm not at all familiar with what vector graphics means, and I don't know how the program converts images which are inserted/imported into the flash file. I don't find the word "vector" mentioned in its help files, which are pretty crappy.

Map layers should be possible, either way, and that's a great concept, maybe a time-line kind of thing such as decades, or maybe a pair of them per layer, or, at least, when the river changed. This would necessitate a redesign of the main map, though, since the model for this map was the "Manly Map" which was probably drawn in the mid-1930s but updated through the late 1940s. This map is described here: Doug Dawgz Blog: Okc Street Map History

Size. There really are 2 different types of issues: (1) file-size in terms of bytes, (2) display dimensions that a user would see.

(1) File-size: IF I opted NOT to include pictures of buildings WITHIN the flash file (but instead use links to images located externally) the file-size would be much smaller. But, there would be so damned many pieces needed to make the deal work together properly, plus there would be a lack of uniformity in presentation. Of course, by including building photos within the flash file itself bloats file-size enormously (and subject to me being educated about vector graphics). I began by using links but didn't like the preliminary results, and turned toward inclusion of the building images in the single flash file.

(2) Dimensions. Since my choice was to make the map cover a fairly large area (roughly 2 miles wide by 2 1/2 to 3 miles high), that's a lot of space to show in a single page. Building population would be a nightmare unless a very large image was used. The map source file I've made is 2000 x 2324 px, much too large for a user's useful display. By slicing the map into quadrants, each slice is about 1000 x 675 px which fits well into a typical user's display area (I think most are still using a 1024 x 768 display) and, while still fairly "tight" in areas that have a high degree of building density, using the slice is reasonably manageable for showing individual buildings. Now, what you said about zoom would be nice but I'm pretty sure the software I'm using doesn't have that capability but I'll check. Anyway, user friendliness (as well as the making of and populating the map with buildings being easier to me when making the map) was a reason that I opted to effectively zoom to map slices which would fit on a user's display without the need to scroll, rather like what I did earlier with the 1905 township maps ... Doug Dawgz Blog: 1905 Oklahoma County Township Maps.

But, the township map stuff was designed to fit within a blog article, and the effective graphic width for a column is about 500 px, and that wouldn't work for a project like this. So, what's seen in the blog article itself is more like a doorway to the external flash file which is presently 1000 x 675 px, as I said.

Tell me what you have in mind about collaboration. A PM might be best.

Thanks, again, M, for the food for thought.

[George]

Doug:

First, thank you for undertaking this project. I am a big fan of your site and your maps. Second, in a former life, I was involved with a flash-heavy site. Based on that experience, I'd recommend leaning toward HTML. There are a few reasons for this suggestion: initial loading time (as you've mentioned); Flash version compatibility among your users; inability of some devices to read Flash (e.g., iPhone); and, maybe most important, Search Engine Optimization issues. You will find many good comments on this topic at the Official Google Webmasters' Blog "Best Uses of Flash":

Official Google Webmaster Central Blog: Best uses of Flash

Good luck and thanks again!

[Doug Loudenback]

Thanks, George.

Another consideration in my mind for possibly using html instead of flash is that when a user moves a mouse over an object in an html clickable map, be it a river or a building or a street, a pop-up note identifying the object is easily done by including a "title" item in the html link, e.g., "KATY Passenger Depot at Compress Dr. and East Reno." That's something I've not figured out how to do in the flash software I'm using. In the context of a map populated by lots of buildings, particularly in the more densely populated areas, that becomes especially important. Zooming can be done by a user, also, simply by using Ctrl+ or Ctrl- ... at least Firefox works that way and I suppose that IE Explorer does also. My very old, stale, sometimes inaccurate, and, frankly, not particularly well done downtown Vintage map at Downtown Oklahoma City Vintage Map used those features.

Perhaps it's best to go that direction this time around, also, as I may. My internal debate is not yet finished! There are downsides with html, too. If using a single clickable map, the image will need to be quite large for the buildings to be placed in a block's space as well as be seen by a user. If the image is 1000 px wide (so that it would fit in a typical user's display without a need for horizontal scrolling, it would be 1162 px in height, obviously necessitating vertical scrolling. But, an image only 1000 px wide is really too small for that purpose. A map which is 2048 px wide would be 2380 px in height and a cropped segment of such a displayed area would look like this, with only the rail passenger depots shown ...



... and that would be reasonably good for a dense population of buildings ... but would require a lot of both horizontal and vertical scrolling, which problem doesn't exist in the means I've used for the flash model presently in my blog.

Soo ... I'm still considering all options that occur to me or as may be suggested by anyone.

What about for you, though, since you favor html. How would such a large image (2048 x 2380) work for you?

[Doug Loudenback]

I've just noticed something quite important when opening the preliminary flash file. When using IE Explorer 7, the html file which is the host for the flash file works just fine, but when using Firefox 3.0.6 as I prefer to do, the flash file does not open as intended. Instead, the flash file is considerably "shrunk" in size which makes the presentation less than designed (1000 x 675 px). I've experimented with different height/width settings in the <embed></embed> portion of the html code but haven't found a satisfactory solution.

The full html code presently reads as follows:

<HTML>
<HEAD>
<TITLE>Vintage Oklahoma City Map</TITLE>
</HEAD>
<BODY bgcolor="black">
<center>
<OBJECT CLASSID="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="1000" HEIGHT="675" >
<PARAM NAME="MOVIE" VALUE="http://www.dougloudenback.com/maps/vintageokc.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="QUALITY" VALUE="high">
<EMBED SRC="http://www.dougloudenback.com/maps/vintageokc.swf" WIDTH="1000" HEIGHT="675" PLAY="true" LOOP="true" WMODE="opaque" QUALITY="high"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</center>
</BODY>
</HTML>

If someone using Firefox (or some other browser other than IE 7, since that works ok ... but feel free to check it out in IE Explorer if you have time and inclination) can test this out to see of your results are the same as mine in Firefox, I'd be grateful. A direct link to the html file is: Vintage Oklahoma City Map.

If you are using a 1024 x 768 display, the flash file should almost but not quite fill the screen horizontally, and, if you maximize the display (F11) that would be true vertically, as well. If you don't maximize, tool, address and status bars will take up viewing space so that you'd have to scroll vertically to see the entire flash display. The following pair of images show what I mean ... I've reduced the 1024 x 768 screen captures down to 800 x 600 because that illustrates what I'm saying as well as the original size would ...

IE Explorer:


Firefox:


As you can see, on my computer using Firefox results in a substantial deterioration in image quality because of "shrinkage" which is occurring for one or more reasons that I do not know.

Any comments, clues, whatever?

[Martin]

odd. your html seems correct. both the embed & object tags have the same width & height. in fact, i'm running firefox 3.0.6 and the output is identical to what i get in ie 7.0.6... perhaps there's some setting you have tweaked on your installation of firefox.

-M

[Doug Loudenback]

As far as I know (and certainly not intentionally), I've not tweaked Firefox at all, but some plug-ins may have been installed that I'm not remembering. So, that's really strange. I think I'll sneak in to my wife's computer, install Firefox, and see what happens (I may get bloodied up after I mess with her computer, but that's not what I mean). On second thought, perhaps its best that I do my "test" on my laptop instead ... if that makes any gender-sense whatsoever.

[bdhumphreys]

Hey Doug,

First, congratulations - this looks like a terrific project and I am really excited to see where it leads. It is fun to compare your current work with where you started - the content has always been fantastic but the presentation just keeps getting better and better.

As for Firefox, I checked it on mine and it looked fine to me.

Also, I wanted to let you that I just put up a post on what I have deemed Oklahoma City's first great public space - Oklahoman Park!

imagiNATIVEamerica Oklahoman Park: OKC’S First Great Public Space

One reason it is pertinent to this conversation is that I put together a basic massing model of two blocks of 1922 Downtown OKC based on the footprint and height information from Sanborn maps. At some point I think it would be really interesting to tackle larger sections of OKC and be able to compare the city's growth over time. Ultimately, it would be more of a presentation interface and it would take some time. I think the content you are putting together is the major piece. Once you have the content, you can continue to play around with the way you display it over time.

Best of luck!

[Doug Loudenback]

Wow! As always, Blair, you get yet another "first" for finding really great stuff that most (me) have been unaware! The Oklahoman Park ... well, I'll be jiggered! I'll check it out more closely after a bit, once I wrestle with this Firefox issue ...

Following up, I turned on my laptop and used Firefox as my browser ... and did NOT get the result described above. Like Blair and M, the display was as it should have been, 1000 px wide. Soo ... WTF?

I'll keep grappling with this but if I'm going to use flash, I'd certainly want consistent results. Maybe it would be good to have BOTH a flash and an html version ...

On edit ... uhh, oh my, ya know, hmm ... I just don't know how to put this other than to say, as reluctant as I am to say it, but ...

I'm just damn dumb! I guess that I'd managed to use Ctrl- to reduce the display size when tinkering with viewing the flash file earlier, and that setting was saved by Firefox ... reverting the display to "normal" resulted in the file being displayed properly.

Sorry for all the fuss, guys. Whip me.

[bdhumphreys]

Doug - that is not dumb, that is pretty easy to do.

Glad you figured it out though...I can't wait to see the finished product!

[George]

Doug, regarding the possible large dimensions of an HTML map, have you explored creating an Image Map?

(more at: Creating HTML Image Maps)

One reason your map looks so big may be the way you are creating it. Using an image with clickable areas (invisible to the user), which link to more detailed maps might be the best way to go and give the site a more professional finish. (Major caveat: I am not a coder.)

Also, in playing with your Flash map, I was reminded of another reason I don't like 100% Flash sites: the user navigation is different than what browser users have come to expect (e.g., no BACK button). I know different sites try different UI workarounds for this problem, still none seem especially elegant (in case you haven't already read his books, you might want to check out Jakob Nielsen's work on site usability).

Again, we are lucky to have you and your projects -- thanks!

[Doug Loudenback]

Thanks, George.

Yes, an html model should absolutely be a clickable image map, along the lines of a much earlier one done of downtown which I still intend to majorly revise and update, but not now. The 2005 map is here: Downtown Oklahoma City. At that time, I wasn't paying a great deal of attention to scale, particularly east of the Santa Fe RR. The aesthetics of that map could be definitely improved upon, also. The area covered by that map was much much smaller than what I'm presently working on.

I was serious when asking you,

What about for you, though, since you favor html. How would such a large image (2048 x 2380) work for you?

Put differently, considering the area covered by this new project, what size of an html page would be too large? I'd value your opinion.

[George]

Doug, thanks for gently guiding me back to the specific question at hand. First, as someone who is all too familiar with my own opinions, let me say that my 2 cents is worth no more than the next person's 2 cents (I'm sure my wife will back me up on this). With that out of the way, here is my take:

1) Is a 2048 x 2380 html image (btw, classified by Google as an "Extra Large image") better than a Flash application? Yes.

2) How big an html image is too big from a usability perspective? Once your image triggers the vertical & horizontal scroll bars, you are betting that your user is a "scroller." If they are, then there isn't a huge difference in usability between a 1500 x 1500 image and a 2500 x 2500 image (loading-time issues aside). That said, I think you do need to show your user that you are trying to use the browser "real estate" as efficiently as possible. In other words, your graphics should be large enough so they are easy to read, while small enough so that as much information as possible is visible in the browser window. For example, I think this Denver map strikes a good balance (http://mappery.com/maps/Downtown-Denver-map.jpg), while your "cropped segment" (above) may not be dense enough.

3) How user-friendly is one 2048 x 2380 image vs. other possible html solutions?. There are many examples of downtown city maps on the Internet that load as a single image. Because knowing what is contiguous or nearby in a downtown area is so important, I find scrolling these single image maps to be more user-friendly that making the user navigate a series of "panels" (like with this map of Vancouver Vancouver Atlas - JohoMaps). You, of course, will make your own call on this issue.


4) Add'l usability suggestions: A) When the user first lands on your page, they clearly should not be landing in the middle of a 2048 x 2380 image without prior warning. There needs to be a "preview map" on your home page that provides some context for the larger map they are about to visit (see Downtown Denver map - Denver CO ? mappery ); B) The user's view in the browser should be "self-contained" in that the user should not have to refer back to a Map Legend or Side Notes to understand any given view on the map; C) While the map itself gives a visual clue that "scrolling" is necessary, generally there are no visual clues given that a user might need to use the "ctrl +" feature on their browser to zoom in. Therefore, don't expect/require users to zoom in or out on their own.

Doug, based on what I have seen on your site, I know that you are both smarter and more experienced about these issues than I am. I offer my opinion with all due humility and apologize in advance for stating anything that you've known all along. Thanks!

[Doug Loudenback]

Thanks so much, George. I've been working on an html model over the weekend as a preliminary step to jumping in and no looking back. MMM has some good points on flash, too. I hope to post a preliminary draft html version very quickly for comparison purposes.

Preliminary observations: The Vancouver link is nice ... but ... does it really address what I thought was an earlier general observation that you you made ... maybe I misread, but I though you had favored one map, not several, the several being more akin to a flash presentation showing map segments.

As to what you said about "When the user first lands on your page ...," I understand and agree. Whether the ultimate choice be flash, html, or both, either way the relatively small area presented in the main blog area is much too small to be anything other that a portal, a jump off point, to a larger file. Well, the Vancouver example might be the exception to that since its html segments are relatively small.

Thanks George. I'll have something in html for you to look at shortly. On my computer, I've populated many older downtown buildings in a clicklable html map but haven't linked them to anything other than popup comments yet. We'll see how that goes in the next 24 or so hours.

As to my "expertise" in web stuff, I really don't have any other than an accumulation of miscellaneous odds and ends. I just go by the seat of my pants, learning on the go on an "as needed" basis and have never studied html stuff systematically. It sounds to me like in many of these considerations that you've "been there, done that." And, as I said, I very much appreciate your feedback.

[George]

Doug, thanks. btw, the Vancouver Map was meant to illustrate the difficulty in navigating via "panels." (In rereading my post, I can see that I did not express this clearly.)

[Doug Loudenback]

Thanks, George.

A working html model is here: Doug Dawgz Blog ... when opened, it is 1800 px wide and I'd like to know what people think about it's width. This map has its center core reasonably well populated but, except for Brown's Department Store, the links are to a dummy page for illustration purposes. Hovering your mouse over a building will give its name, at least. I would have preferred for a balloon note to open on mouse-over, but I couldn't get that to work with an image map.

On Edit: the 5 train depot links now show photos & information, for testing purposes.

[Doug Loudenback]

After considerable thought, I've decided to use HTML and not Flash to develop this project. Positives and negatives are involved with either decision, but, since this project will probably be "unfinished" until my fingers don't work on a keyboard any longer (in other words, I see the project as being in a continual state of expansion), I decided that HTML would be easier for me to do on an ongoing basis.

The current map is here: Doug Dawgz Blog: Vintage Oklahoma City Clickable Map

I still have to figure out a few things and the map is by no means close to being populated, but it has begun. The principal movie theaters, the train depots, Browns, Wheeler Park and Delmar Garden and maybe a few things I'm not recalling now have functional links.

If anyone can inform me how to cause rollover tool tips (onmouseover, onmouseout) to occur, that would be appreciated. While I can do that with text rollovers, I don't know how to do that with a clickable image map, as shown in the following text example:



My knowledge of java script is woefully limited, and most probably what I'm wanting is quite doable.

I very much appreciate the input of those who have been helpful, and I hope to get some more!

[jbrown84]

fourth... and this might be challenging even for me... would be to have a slider that changes features over time. that is, things like the course of the river, streets, etc. were added/removed over the course of time. at the very least, it'd be interesting to see how locations fit into modern streets/geographic features.

I was going to mention this as well. Would be very cool. Already a great feature though, Doug!

[Doug Loudenback]

Thanks, JBrown.

Probably, only 2 events call for such a demarcation: (1) abandonment of the east/west rail through downtown (and the accompanying Civic Center from Shartel to Broadway) and (2) relocation of the North Canadian river.

Already, using one map for the whole thing, overlaps exist where the Civic Center was and wasn't (the east/west rail tracks were causes problems concerning placement of items which once occupied a space but were replace by other buildings which occupied it after the east/west tracks were removed). At present, I've tried to accommodate those kinds of things by slightly misplacing overlapping items ... e.g., the present Oklahoma County Courthouse and the Frisco passenger depot, and the USO Civic Center facility and the Rock Island passenger depot north of the Skirvin. After I get the CBD wholly populated with buildings, it would be good to separate them in one way or another.

[Martin]

if anyone can inform me how to cause rollover tool tips...

you might look into any one of these...

-M

[Doug Loudenback]

M, I've had a look but I don't find anything as yet which will work with an image map using map coordinates where links are present as opposed to more normal text and/or image links.

Unless you or someone else has suggestions, I think I'll give up on using balloon pop-up tool tips and will use the ordinary title="xxxx" html method instead.

[Doug Loudenback]

Progress Report on http://dougdawg.blogspot.com/2009/02...city-map.html:

After deciding how (html or flash) to proceed with this project (html is what I decided upon), the 1st task was to populate the clickable html map with enough buildings to make it initially useful even though I see that this project will take months of time to get in a state that I'll be pleased with it. Anyway, 149 buildings or "areas" are presently identified, largely focusing on the the central business district but including several in Deep Deuce, the warehouse district, and other places in the area covered by the map.

Of the 149, 30 presently will open a page with images and descriptive text and that's coming along nicely ... before I add any other buildings/areas, it's probably best to get the 149 fully functional, and then go to the next "stage."

When I say "areas" I mainly mean aerial views of downtown, the warehouse district, and Deep Deuce although I've added a smaller area, the "sin" area sometimes called "Hells Half Acre" (which should be fun to develop later on down the line). Clicking on such an area will open a page containing some aerial photos not seen very often, mostly supplied either by Dean Schirf or the organization he represents, the Greater Oklahoma City Chamber of Commerce, but also from other sources. Here are a couple of the COC examples:

A view of downtown when the present I-40 crosstown was still in the planning stages:

Larger: http://i8.photobucket.com/albums/a49...cation_coc.jpg



Pullman Trains at the Santa Fe depot in 1953

Larger: http://i8.photobucket.com/albums/a49...s_1953_coc.jpg



Having separate pages for the aerials will make it easier to expand them as time goes on.

But, the most significant change is that I've now added a Building Index Page. With the clickable map alone, no comprehensive list of buildings/areas existed. So ... there are now 2 ways to view ... (1) Use the clickable map, or (2) Use the Building Index page. Links at the top of each makes switching between the "views" easy to do.

Here's a graphic which shows the Building Index page as it exists when this post is made here ... "crimson" colored links presently open separate pages containing photos, etc. The other links go to a shell "in progress" page.



Only 30 of the links presently go to useful other pages containing photos and data. I'm hoping that before the day is through I'll have at least 50 photo/data pages open and that the rest will come within the next week or so. When that's done, I'll resume populating the map with additional buildings, etc.

As always, any feedback, suggestions, ideas, whatever, is very welcome.

[Doug Loudenback]

Updating, I presently have over 60 buildings or places with associated mini-articles in the following list:



The red items are those which presently have mini-articles. Every item in the list is targeted for one and there are still many vintage buildings I've not added to the list, thinking it best to get all or most of the mini-articles done before adding very many more.

It's been quite a learning odyssey researching the diversity of buildings and areas. For example, I always just assumed that the transition from Epworth University to Oklahoma City University was just a smooth thing ... pick up the furniture and move down the street sort of thing. But, NO ... in 1911, Epworth actually closed its doors in Oklahoma City and moved to Guthrie.



A good bit of litigation was involved in the aftermath. Anton Classen was a prime mover in getting Epworth started here in the 1st place, in 1902. In a lengthy 1919 Oklahoman article, he described what had happened.



But, the Methodists didn't find Guthrie to their liking, and a completely new college was established as OCU (initially, Oklahoma City College), in 1919, and the dedication of its main new building in 1922:



Research for other mini-articles has proven fascinating, as well, such as the history of Douglass School with its 1891 origins in downtown on the south side of California between Robinson and Harvey, 2 locations in the warehouse district, then on High Street, and last to Eastern/MLK Jr., the latter being outside the vintage map perimeter. Curiously, black schools were required to be owned by the county and on county land but the Okc Board of Education provided the teacher, etc., staffing. I'm not sure when that changed, but it was true at least into the mid-1930s when Douglass moved to the N. High location.

It has also been interesting to learn that the area east of the Santa Fe railroad, north of the Rock Island tracks up to E. 13th was quite densely populated, at least equal to the density on the west side of the Santa Fe tracks.

Running across old apartment buildings that have come and gone has been fun, too. This one was originally the 1930 Marias des Cygnes Aparment Hotel at 1125 N. Lee, which became the Leonhardt Apartments.



It was eventually absorbed by the owners of the Pasteur medical properties north of St. Anthonys and, in 1985 had been approved for restoration by the use of development bonds. The project didn't get off the ground and the building was later destroyed.



Anyway, I hope that you history buffs and others who are curious will have a look and offer suggestions or critiques of any kind.

To start with the map: Doug Dawgz Blog: Vintage Oklahoma City Clickable Map
or
to start with the list: Doug Dawgz Blog: Vintage Map Index.

[okckid]

What an awesome website Doug. I have been spending alot of time downtown just looking at the old buildings. If I take some current pictures of specific addresses would you be interested?