New UI Design

I've redesigned the UI for the main map page. Please try it out:

http://travellermap.com/new.html

I've tested in Chrome, Firefox, Safari, and Internet Explorer 8/9/10, and on iPhone and iPad - yes, you now have full UI control on touch-based devices.

Please let me know if you have any issues with the page. If you notice any glitches, it'd be nice if you check with the "classic" page as well to see if you've discovered a long-standing bug or something new with the UI.

Let's shake those bugs out!

Ω

Tinkering

Lots of tiny tweaks and refactors, hopefully all invisible.

I've dropped support for IE7, a 6-year-old browser which, according to analytics, accounted for about as much traffic as the site was getting from gaming consoles. XP users should upgrade to IE8... or a browser that's been updated this decade like Chrome or Firefox. (XP itself is over 10 years old at this point, but I'm still developing on it!)

Oh, and a new data drop from Don so fire up your nitpicking keys! Ω

IE8 Fixes

Ooops - I broke search, credits, and a handful of other features on IE8 recently.

Fixed! Sorry about that, and thanks for the bug reports! Ω

Client Code Update

I've just pushed a set of updates to the client files - the HTML, JavaScript, and CSS that makes up the pages. This affects the main page, the iframe page, and the touch page. These now all share common logic which will make updates easier. The visible changes are:

• Intermediate levels are used when zooming in with the mouse wheel. This may mean that the "Scale" field in the control panel will go blank, but if you're using the wheel you probably aren't using the drop-down.
• When zooming, the previous image tiles are used until the new tiles load. Combined with the previous, this means zooming is much smoother. 
• The credits display at the bottom of the page (which shows credits, sector data, world data, and one-click generators for LBBs and Posters) now [EDIT: Based on feedback in the comments]  tracks your mouse hover coordinates updates on click/doubleclick/drag rather than just what's centered on the page.
• When you zoom by double-clicking or using the wheel the mouse position is retained, so you can "zoom in" on something that isn't centered.
• Added Facebook and Twitter buttons next to the Google Plus buttons.
• The "you are here" and overlay URL parameters from the iframe API can be used on the main map page. 
• Tweaked the [-] and [+] buttons in the control panel to be the same size. Yay for −

Note: I only tested as far back as IE8. According to analytics, I have a small number of IE7 users. If they report problems I may be able to fix it, but only if they complain. My testing on browsers other than IE,  Chrome and Safari (iOS) has been limited, but Firefox and Opera are usually pretty well behaved.

As always, let me know what I broke and I'll try and fix it quickly.

EDIT: Remember to mention which browser+version and which operating system+version you're using, too.

...

In other news - no progress on the outages. I've found and fixed a couple of bugs with cached state handling but I still see the service going down when usage is high. I have monitoring set up now so that as I make changes I can have a higher confidence that they haven't made things worse.

Ω

PNG and DOM

Two hopefully invisible changes today, but scream if anything breaks:

• I've changed the map to generating PNGs by default instead of GIFs. This is to work around a bug in embedded WebKit (seen in the Second Life Viewer 2.0 Beta) where it may not display GIFs correctly.
• I've rewritten the event handling code for the map to more correctly manage DOM events, in both the W3C and IE models. This is to try and make dragging work correctly in the IE9 Platform Preview (I'll test tomorrow), clean up the code (this was my first interactive web site!), and as a side effect it fixes mouse wheel support in Chrome.

I've tested in IE8, Safari (Win), Firefox 3.6 (Win), Chrome 4 (Win), and Opera 10 (Win). Looks good, but I'm nervous and ready to roll back if anyone sees any issues.

Ω

TODO List

Here's my "To Do" list for the site. Many of these are probably incomprehensible, but I thought I'd share anyway

• FEATURE: Support custom data for sector.htm LBB generator
  
• LOC: Detect language setting "Accept-Language:", serve Japanese version (it turns out a lot of the site traffic is from Japan. Go figure!)
  
• IMPL/FEATURE: Style object that's data only
• Cache object for brushes, etc
• Allow passing in via parameters (options and scale are presets)
• Scale is just a seed - use next-highest scale
• FEATURE: Search by regex on (UWP, PBG, ...)
• BUG: Terra should look like Earth in Candy style
  
• BUG: iframe doesn't show if "Disable script debugging" is unchecked (WTF?) - IE bug? Maybe cookies can't be loaded or something?
  
• IMPL/PERF: Add more condensed route storage (perf, size)
• QUALITY: Investigate DrawClosedCurve for candy borders
• FEATURE: Style options - hexes at every level
• QUALITY: Up the JPEG quality for Candy a bit
• DATA: Incorporate Theron sector from BeRKA (?)
  
• DATA: Incorporate Uistilao sector from BeRKA (?)
• DATA: Use Kaa'G!kul data from HIWG (?)
• DATA: Incorporate MWM's new T5 data
• IMPL: Reconsider JavaScript class/object style
• Use Class.prototype.func = function() ... rather than this.func, and other extern logic
• Verify that inline functions for event handlers aren't leaking memory
• FEATURE: Support different data sets (Judge's Guild, etc)

What else should I have on the list? Ω

LBB Generator

I played a bit more with the sector.htm page - adding a title page, tweaks to the layout, and so forth. The page code is also slightly more interesting to peruse - to make it easier to modify I wrote a JavaScript Template mechanism that defines the transform using XSLT-like constructs (if, foreach) embedded in the HTML as attributes (jt_if, jt_foreach) itself, and JSONT-like expression embedding sequences ({$.index}, {$.title}), and operates over a JavaScript data construct. The expression language is JavaScript itself and "$" is set to the current object as the parse descends. Check the page source for details.

It ended up working pretty well, once I sorted out some cross-browser issues (IE doesn't have a convenient mechanism for enumerating explicitly specified attributes, alas). Tested in Firefox 2, IE7, Opera 9 and Safari 3 on Windows XP. Ω

Fixed cache-control headers for images

If you use IE you may have noticed that when zooming in then back out the map image tiles would re-load from the server (that is, it'd be slow). Firefox (or another Mozilla-derived browser) were zippy. I was generating the HTTP headers incorrectly which caused IE (compliant) to re-request the images each time.

FYI, the fix was in the ASP.NET code for Tile.aspx:

Response.Cache.SetCacheability( HttpCacheability.Public ); // was doing this
Response.Cache.SetExpires( DateTime.Now.AddDays( 1 ) ); // was doing this
Response.Cache.SetValidUntilExpires( true ); // wasn't doing this

I was also misinterpreting the meaning of Response.Cache.VaryByParams (which populates the HTTP "Vary:" header). I was interpreting the semantics as "re-request if these params are different" rather than correct semantics: "re-request even if these params are the same". So I removed calls to that, and everything appears happier now.

So what does that mean? In IE, try zooming all the way in to 64 pixels/parsec then out to 1/32 pixels/parsec, using the mouse wheel. Then, once all the tiles are cached, you can repeat the zoom in/zoom out without waiting for the images to re-load. Makes a great demo! Ω

Fixed Search Display in Opera

I think I've fixed the search display in Opera. IE handles dynamic heights just fine, but Mozilla and Opera need special work. Mozilla needs to have the height calculated by script. That works in Opera too, but some layout calculations are done asynchronously so it needed a little more working around.

Also, Opera doesn't like xml elements for data islands, so the default search wasn't working.

Ω

New Feature: Zoom with Mouse Wheel

Mouse wheel can be used to zoom in/out (IE only).

Ω