You are viewing anzaan

Tired of ads? Upgrade to paid account and never see ads again!
I have been developing  vehicle-tracking system for  the past 5-7 months and we use google for mapping. Their enterprise license isn't cheap and we didn't  have  a viable alternative. I looked into OSM and found their coverage of Australia  not quite upto what we needed. We thought google has all  we needed and settled for it. Few months back  a security company from Fiji showed keen  interest in buying our product as well as acting as our distributrr in Fiji. That's where the problem began. You see, Google's coverage of Fiji is next to nothing, no roads, just a few zoom levels and that was it.

Like all good customers, their patience on the two months timeframe i had given them to get Fiji's map up and running ran out before the deadline  and last week I promised them I'll show them at least something within a week.  And of course I had no clue how I was going to keep that promise. I tried my hand on all sorts of things, I tried to configure and run our own map server to spit our tiles for Fiji,  I tried overlaying Fiji's map data (which the client provided as shapefiles and it only covered a part of Fiji) on google map, I used good-old Firebug to debug OpenGTS's tracking website to see how they did their tracking using Open Street Map.

I had two plans. Plan A: whatever it takes get the fiji's map to load inside google map so I can use the existing javascript codebase that relies on google's api. Plan B: Use OSM for Fiji and google for rest,  and rewrite javascript code and use OpenLayer  javascript  library as the main library to allow users to switch ebtween providers easily. Since Plan A is less painful, I tried to find ways to accomplish it. And Plan A  indeed turned out to be extremely painless if there's such a thing. I won't go detail out all the things that failed, but I'll definitely detail out what worked. So, to all my fellow colleagues, cursing themselves in their little office cubicle, tearing their hair our trying to integrate OSM in google map, here's the solution: We'll create a new map type and point google to OSM 's tile provider to get map tiles from OSM instead of fetching them from google's servers. Firstly, We'll create a new GTileLayer for osm.     var osmTileLayer= new GTileLayer(new GCopyrightCollection(""),1,17);     osmLayer.myLayers='osm';     osmLayer.myFormat='image/jpeg';     This is where we define a custom function for fetchng tiles from OSM map server. This function will be user by google to fetch tiles from OSM everytime there's request for tiles. 

  osmLayer.getTileUrl=function(a,b,c) {             return 'http://c.tile.openstreetmap.org/'+b+'/'+a.x+'/'+a.y+'.png';         } Then we create a map type and add it to our good old google map.

var osmLayer=[osmTileLayer];      var OSMMap = new GMapType(osmLayer, G_SATELLITE_MAP.getProjection(), "OSM", G_SATELLITE_MAP);  map.addMapType(OSMMap ); And that's it !! That's all it takes to add Open Street Map as a new map type in google map. here's the complete code: ------------------------------------------------    var osmTileLayer= new GTileLayer(new GCopyrightCollection(""),1,17);     osmLayer.myLayers='osm';     osmLayer.myFormat='image/jpeg';

osmLayer.getTileUrl=function(a,b,c) {             return 'http://c.tile.openstreetmap.org/'+b+'/'+a.x+'/'+a.y+'.png';         } var osmLayer=[osmTileLayer];      var OSMMap = new GMapType(osmLayer, G_SATELLITE_MAP.getProjection(), "OSM", G_SATELLITE_MAP);  map.addMapType(OSMMap ); ----------------------------------------------------- and here's the final result:

The picture doesn't look much since it seemed to gt resized when it gets uploaded. to see a better pic, click here cheers

Latest Month

September 2008
S M T W T F S
 123456
78910111213
14151617181920
21222324252627
282930    
Powered by LiveJournal.com
Designed by Tiffany Chow