I spoke at the Web Directions What Do You Know night in Brisbane tonight. Here's a slightly more in-depth version of what I talked about, with links to all the good stuff. You can also view my slides though they're quite large.

Recently the Google Maps Mania blog wrote a post entitled “The slow death of the Google Maps API”, not so much lamenting the demise of Google Maps as much as embracing the change that’s occurred in this space and it got me thinking.

Google Maps used to be the only real solution to showing maps online, and I’m sure you’ve plopped down the Google Maps embed code on a contact page in your day. But lately there’s been a lot more choices cropping up in both software and services so I’m going to quickly go through some of the cool stuff you can do with maps.

Mapbox: probably better than Google?

Firstly I’ll mention that in my opinion the main competitor to the Google Maps API right now is Mapbox. Mapbox has a bunch of services and APIs for both apps and the web, and you should check them out if you haven’t already (their blog is well worth a read too).

They have a sweet web interface that lets you completely customise your map styles and content, and offer a bunch of goodies for creating and managing maps including TileMill which is the ultimate map mashup customisation whatsit.

If you’re looking to plop a map onto a contact page these guys can absolutely get you there, but if you’re looking to do a full-on data visualisation they’ve got you covered too.

Leaflet

Mapbox are throwing a lot of support behind open source tools like Mapnik, Node and especially Leaflet.js which is the BSD licensed mapping library that most of their service runs on.

Leaflet is especially nice to use as both a user and a developer because it’s it’s super-fast and works well even down to IE7. It's completely styleable with CSS has excellent touch support for mobile devices which makes it really awesome if you need a responsive maps solution.

In terms of data visualisation, it uses SVG by default (with a VML fallback) or you can draw onto HTML5 canvas if you don’t need IE8. There's also a large number of modules you can use, both official and otherwise.

Heatwave Tracker

I’ll briefly mention the ABC News heatwave tracker which I did late last year, showing an animated map of temperatures for the past week.

This one was originally going to use Google Maps but had some performance issues on mobile that prompted the move to Leaflet.

This visualisation ended up using the basic Leaflet API to draw circles for each weather station and animating them using requestAnimationFrame. Under the hood Leaflet created a SVG circle for each of these points which turned out to be hardware accelerated to varying degrees across browsers, so it was super fast with around six-hundred data points updating at sixty frames per second.

There was no particularly tricky code involved in this, it’s all just using Leaflet’s standard APIs without any optimisations on the map side of things. The Leaflet port from Google Maps took about an hour which gives you some indication as to the effort involved.

100 Years of Air Travel

The Guardian has a much more impressive interactive with their 100 Years of Aviation feature.

This feature used a combo of Leaflet with a bunch of custom code to create a collage of maps, images, and audio showing the history of air travel. The most interesting feature is the html5 canvas-based visualisation showing all the planes in the sky over the last twenty-four hours which you can zoom, pan, and explore like a traditional map.

It's kinda mesmerising.

This one was commissioned by The Guardian and built by Kiln who I have somewhat of a map geek crush on right now. They used TileMill for the background layer (I had a suspicion!).

@k_i_l_n @AshKyd In more detail, Natural Earth polygons + SRTM30 elevation data processed with gdaldem for the relief shading layers.

— Robin Houston (@robinhouston) March 23, 2014

What about D3?

But Leaflet isn’t the only client-side library that’s doing interesting things in mapping. While Leaflet is positioned as a more traditional Google Maps replacement, D3 takes a more data-driven approach to visualising geodata.

For those not aware, D3 stands for “data driven documents” and you might remember Colin Gourlay talking about using D3 for responsive charts in the last Last What Do You Know in September.

Well D3 also has geodata functionality that can do wonderful things with more of a focus on your raw data rather than a traditional map.

This demo is from the D3 geo.projection plugin shows a few of the different types of map projection you can use in your projects, and you can see the way the map is animating between different projections that the library has a lot of power over a traditional flat map.

Earth

While this isn’t something you’d usually use in itself, it does lend to some interesting ways of visualising data, such as in the Earth global weather visualisation by @cambecc.

This is a really compelling mashup of wind, air pressure and temperature projected on a 2D globe then animated to show about as close as you can get to real time world-wide weather conditions.

This demo uses D3 and Backbone.js to display data which has been pre-processed from a number of different sources. It’s using the orthographic projection of D3 which presents a sweet 2d globe effect which you can spin and zoom to explore the nuances of the planet.

Because this is using the HTML5 canvas as a 2d drawing platform, all the individual data points you see moving on the screen have to be calculated each time you adjust your viewpoint. This is all done in D3 rather than on a GPU for instance, which might not be something you'd do in a super-high performance situation, but it's a really good demo of what D3 is capable of.

Google is still good…

Google Maps is still great, but they've really been focusing more on the consumer with their offerings of late.

The new version of Google Maps is a fantastic use of WebGL and is really a showcase use for the technology, but you can't develop against it for use in your own apps. In terms of the Maps APIs they've stagnated over the years and as a result we're seeing more innovation from other players rather than Google themselves.

So next time you're looking at doing anything to do with maps, check out some of the alternatives. You might find yourself getting more done, doing cooler things and generally looking better among your peers.

What does everyone else know?

If you weren't at Web Directions What Do You Know, here are some the other talks from the night.

Sarah Bock

Narcissism and the web

Andy Fitzsimon

Generative design is awesome (My personal favourite, I want to play with netengine.io)

Luke Brooker

Craft as in Beer

Jilly Magee

Data is the real King (and yep, content is data)

Just a quick rant because I’ve been trying since October to get myself set up with fibre Internet in South Brisbane.

A little background for those of us who don’t know: South Brisbane fibre is wholly owned by Telstra, and isn’t part of the NBN. The plans are different, a lot of ISPs don’t seem to bother competing here and everything has to go through Telstra’s wholesale division.

The unit I moved into has never had a landline connected so I got hit with a ~$300 connection fee straight up. Initially Telstra thought there was a connection at this address and disconnected my landlady next door, taking out her phone and Internet for the better part of a week which was a massive pain. After that it took about a month for them to get around to installing the network stuff in my unit and another month for me to convince them it wasn’t working and come out to actually plug the fibre in at the comms room.

It literally took four hours for the poor tech to unravel the network here and get it connected. In the process I think he unplugged the line into another unit where the tenants were trying to get their own Internet connected, so they’ll probably be hit with the $300 connection fee as well.

The tech was a funny guy. Reasonable enough, although he asked me to fix his computer while he was working which was a bit awkward. When he finally got the line connected he confirmed with me that it was 30 mbit, at which point I mentioned I was trying to get 100 mbit and that something must be wrong. Before telling me that 30 mbit should be more than enough for my needs he mentioned that Telstra Wholesale only goes up to 30/1 mbit and that I’d have to sign up for a Telstra plan if I wanted to go higher.

I was pretty mad at this point, but hey, I had Internet for the moment.

Since then I’ve spent another month chasing iiNet trying to get the bottom of the 100 mbit situation. iiNet themselves have never heard of the 30 mbit limit, they’ve verified on their end that I should be getting 100 mbit, and have been super reluctant to chase it up for me. I’ve complained by phone, email, Twitter, all the while being told that someone would chase it up for me and give me a call back, or email me, or follow it up internally somehow.

I just called up now and they have no record of any of the email or phone correspondence I’ve had, the guy has reiterated that “it should be fine, have you tried power cycling your modem?” and asked me to plug my PC directly into the wall. (I’ve already done this when I initially reported the problem, I even had to borrow a laptop with Ethernet from a friend to do so.)

There is something really wrong with this line but I’m so damn tired of chasing telcos to get it fixed. pic.twitter.com/ooJvBPmb1q

— Ash Kyd (@AshKyd) February 2, 2014

Meanwhile my practical speeds with two separate modems are fluctuating between the full 30 mbit and 0.5 mbit/second depending on the stars. I actually had a 700 millisecond ping to Speedtest.net this morning.

To Be Continued…

Trying to wrap my head around mobile tech and the various protocols involved. After some quick research, this is what I’ve learned:

GSM

GSM is a 2G network spec that does calls and text, but doesn't (nicely?) support data transfer. You can add data capabilities to a GSM network with GPRS or EDGE.

UMTS

UMTS is an incompatible evolution of GSM which supports calls, text, and data. The initial release (R99/Release 1999) supports data transfer speeds of up to 384 kbit/s.

HSPA can be added to a UMTS network to acheive much faster, and eventually 4G download speeds.

CDMA

Meanwhile, CDMA networks are still popular in North America and have evolved to 3G speeds with progressive upgrades (CDMA One, CDMA 2000, and now . For the most part CDMA phones don't require SIM cards and are not compatible with 3G networks. I don't know how these phones are registered onto the network.

UMTS actually uses the underlying concepts of CDMA to operate, but when referring to simply "CDMA" people are generally talking about the trade name rather than the technique.

LTE and 4G

LTE is a data-only network based on, but incompatible with UMTS which provides 4G speeds of nearly 300 mbit/s down. As it's a packet network, traditional voice calls can't be placed (without carriers re-engineering their network) so phones either use VoIP or fall back to the next available network to talk. LTE is slated to be the first global mobile network, as even CDMA carriers are reportedly implementing it.

I think that just about covers it. Have I got this all right? Do leave a comment.

Spent the day plying with SVG. I've always used Inkscape for as long as I can remember, but it's taken me this long to actually dive in and start using the underlying markup for anything more than designing stuff.

I wrote a library to take an input string in a particular format and output a fully blown diagram to scale, based on the measurements and configurations from the input. The idea is that not just myself but also the lay person can rapidly prototype a bunch of diagrams (perhaps dynamically) for the new web site, and later reuse the library for internal projects.

I'm really rather impressed with myself. Aside producing a really cool tool, I've learned a fair bit about SVG itself and how it works. It's a pretty neat language, and features a lot of traits from XML, and CSS. I can see why it was poised (and I suppose still is, although it really fizzled thanks to Internet Explorer) as a web language. I really quite enjoy XML as a markup language, so it's quite fun to use it for drawing lines, filling rectangles with predefined gradients and translating things across the page.

I'm pretty proud of my work today, and I'm quite pleased to add another entry to my wide repertoire of half known things.

I took some time to make some pixel trees. They’re a little small, but I like them.