11 replies to this topic

[Charles Syrett]

Yesterday, while researching a project, I stumbled on this site. It looks like someone has used an IMS but somehow fixed it so that it's "powered by Google". If you open up a separate window and search for Finch and Yonge on Google Maps (or just use the drop down from "My TTC"), you'll see that the data and presentation are quite different. Can anyone tell me how this is done? Or point me somewhere that explains it? Thanks!

Charles Syrett
Map Graphics
http://www.mapgraphics.com

[Hans van der Maarel]

Assuming you're referring to the map... It's probably a custom Google tileset. They're fairly easy to make out of any georeferenced image.

[Charles Syrett]

That's what I assumed at first, and I've done those myself. But they've done an awful lot of zoom levels for this. It's hard to believe they would have put all that work into it.

Charles Syrett
Map Graphics
http://www.mapgraphics.com

Assuming you're referring to the map... It's probably a custom Google tileset. They're fairly easy to make out of any georeferenced image.

[jmcandrew]

Looking at the source code in the maps.js (After a comment stating "This is a hack") you'll see:
transit_layer.getTileUrl = function(tile, zoom) { return "http://mt"+((tile.x+tile.y)%4 == 1 ? '0' : (tile.x+tile.y)%4)+".myttc.ca/tiles/z"+zoom+"x"+tile.x+"y"+tile.y+".png"; };

So, they are using custom tiles. The tiles are also generated from OpenStreetMap, I am 100% sure of this, because I have been able to find a lot of my additions to the map data. It's a shame they don't cite osm.org anywhere on their site though.

[Charles Syrett]

I suspected something like that -- a quick compare of the display with OSM shows that it's built from the same data. Does this mean someone selected some of the OSM data, used an IMS to generate a huge set of tiles at multiple zooms, and then used Google API to display it on this page? (My limited experience with custom tiles is to create a map using graphics software, and then georef and tile using Google API.)

Charles Syrett
Map Graphics
http://www.mapgraphics.com

Looking at the source code in the maps.js (After a comment stating "This is a hack") you'll see:
transit_layer.getTileUrl = function(tile, zoom) { return "http://mt"+((tile.x+tile.y)%4 == 1 ? '0' : (tile.x+tile.y)%4)+".myttc.ca/tiles/z"+zoom+"x"+tile.x+"y"+tile.y+".png"; };

So, they are using custom tiles. The tiles are also generated from OpenStreetMap, I am 100% sure of this, because I have been able to find a lot of my additions to the map data. It's a shame they don't cite osm.org anywhere on their site though.

[Dennis McClendon]

Damn! Those are some fine looking online maps. My compliments to the designer.

I wish Google would hire him.

[Charles Syrett]

Well, I hope Google doesn't hire him.....they would end up getting all the custom carto work, worldwide!

Charles Syrett
Map Graphics
http://www.mapgraphics.com

Damn! Those are some fine looking online maps. My compliments to the designer.

I wish Google would hire him.

[MapMedia]

I would image they went through pains to make their own tile set for the streets. For a government site, can you image WHY they would ($) do this? At least in Google Maps, Finch St stands out.
I am impressed with transit line and labeling overlay work.

[Kevin Branigan]

Hey guys,

I'm one of the two programmers responsible for myttc.ca, so I thought I'd chime in (google alert ftw)

The snippet of code you found there, is for the transit overlay - not the map tiles. The map tiles come from cloudmade.com. They provide a comparable set of APIs to Google Maps but use OpenStreetMap data as the source. They provide actually a LOT of tools for doing this sort of thing - including as you've noticed, incredible control over tile styling. We selected the style and replaced the Google Map tiles with our own, because we personally found the Google Map tiles to be rather ugly after staring at them for a while. We still use the Google Maps slippy map because it's still rather powerful (though we have experimented with implementing our own, polylines are still a problem for us)

For the transit layer, this is a good example:
http://code.google.c...lay-simple.html
unfortunately there really isn't a good example for replacing the map tiles themselves, but it's not too much different then the above. I suppose you could use our source as reference look for 'cloudmade' in maps.js

We cite OpenStreetMap at http://myttc.ca/colophon, though perhaps it should be more apparent.

Side note, we are not government funded or associated with the TTC - just 2 developers who were unsatisfied with the TTC website and interested in making our own. I'll pass your complements onto Kieran, who created the cloudmade style and really pushed for that feature.

I think I covered everything but if you have more questions, I'm willing to help

Kevin Branigan
http://refactory.ca

[Charles Syrett]

Not sure where you got the idea it's a government site -- it isn't. Just a community effort by some developers with time on their hands to do it. (See the About page.) But I'm still hoping someone who can understand the geekspeak on the Developers page could explain in layman's terms how this was done.

Charles Syrett
Map Graphics
http://www.mapgraphics.com

I would image they went through pains to make their own tile set for the streets. For a government site, can you image WHY they would ($) do this? At least in Google Maps, Finch St stands out.
I am impressed with transit line and labeling overlay work.

[Kieran Huggins]

Hey - I'm the other myttc.ca developer. Kevin covered pretty much everything, but I wanted to add that the transit route overlay tiles originated as a PDF from the TTC (the transit agency) themselves. I made those tiles by pulling the vector data out of the PDF in illustrator, resizing & lining it up with the google maps tiles, then exporting as a transparent PNG for cutting into tiles.

Also: the "dirty hack" comment in the code refers to explicitly passing the string '0' since JavaScript evaluates the integer 0 as 'false' (which means 'an empty string'). I was originally going to look more into typecasting, but wanted to move on quickly.

If there are any other questions we'd be happy to share what we can.

Cheers,
Kieran

[Hans van der Maarel]

I split off the subsequent discussion into 2 new topics:

American vs European style street maps
History of MapArt