A brief guide on how to add your own maps on Google Maps.

Posted: January 30, 2012 in Android Dev

Earth to Google Maps set in Mercator projection – that is, is deployed on the plane cylinder, which gives us a rectangle that is divided into small squares (tiles) with dimensions of 256 × 256 pixels.

An example of a piece of card from Google:
http://mt1.google.com/mt?v=ap.88&hl=ru&x=285&y=162&z=9&s=G
mt

Here you can see the following values
x = 285 y = 162 zoom = 9

ie we need to keep your picture in pieces of the form:
tile_285_162_9.jpg
(Or, of course, in a similar way to store images in database)
tile_285_162_9

To describe a piece of the map you need to know three numbers:
1 – its number in the vertical (the numbers are growing from the top down (ie from north to south)) (example – 285)
2 – its number in the horizontal (the numbers are growing from left to right (from west to east))(162)
Third level of magnification (zoom) (9)

Thus, the map can be represented as a stack of layers, each of which consists of small squares.(Obviously, the number of squares becomes larger with increasing the level of approximation.)

So, we have an image that we want to impose on the map or maps to show instead.
First, you need to know are the same three numbers that give us the location of the desired piece of card.
In the simplest case, you can download the desired spot on the map and we look on the pictures (in FireFox: Tools-> Page Info -> Media) or you can use online-service [6].
There will need to enter the coordinates and zoom level of interest we place on the map and it will show us the right numbers, but the most interesting – through this service you can upload your picture and it will cut it to us for the required number of pieces and give them those names in the format:

Tile_18250_10410_15.jpg

Unfortunately, the service throws out an error when trying to cut the big picture. In this case – will have to cut their own image.

! Please note that the image will fit under the very same card boxes!

You can use Photoshop-om, I’m using for this purpose Gimp .
To cut it in the picture to the vertical and horizontal picture (already tailored to fit the card is already cropped or rotated as needed) every 256 pixels display guides (Image-> Guides-> New Guide)
Then perform the transformation of the guillotine (Image-> Convert-> Guillotine)
! Procedure is extremely demanding of RAM!
After that we will have many pieces of images that are saved with names like:
p4.jpg – the original image
p4-00-00.jpg
p4-01-00.jpg

p4-01-07.jpg
..
p4-09-00.jpg

etc.
The numbering is the same as on the map – the first number – the column, the second – line.

To rename (or should I say – renumber) the resulting image, I wrote a little script in Python :

  1. #
  2. # For copy files from def-00-00.jpg to tile \ tile_18243_10406_15
  3. #
  4. import os
  5. # For copy
  6. import shutil
  7. srcfile = “p4-01-01.JPG”
  8. dstfile = “”
  9. #—————————————–
  10. #
  11. # Begin here :)
  12. #
  13. print “Start …”
  14. path = srcfile
  15. tilex = 281
  16. tiley_beg = 160
  17. tiley = tiley_beg
  18. zoom = ‘9 ‘
  19. for i in range (1,10):
  20. for j in range (1,8):
  21. if i <= 9:
  22. x = ‘0 ‘+ str (i)
  23. else:
  24. x = str (i)
  25. if j <= 9:
  26. y = ‘0 ‘+ str (j)
  27. else:
  28. y = str (j)
  29. srcpath = ‘p4-‘ + x + ‘-‘ + y + ‘. jpg’
  30. if os.path.exists (srcpath):
  31. print srcpath, ‘exists’
  32. shutil.copy (srcpath, ’tile \ \ tile_’ + str (tilex) + ‘_’ + str (tiley) + ‘_’ + zoom + ‘. jpg’)
  33. else:
  34. print ‘Cant find’, srcpath
  35. tiley + = 1
  36. tilex + = 1
  37. tiley = tiley_beg
  38. print “Done.”

* This source code WAS Highlighted with Source Code Highlighter .

The script must set the following parameters:
tilex – number of extreme vertical image on a Google map
tiley_beg – number of extreme image horizontally on a Google map
zoom – zoom level on Google Maps
Next, change the boundary conditions on the number of cycles received your pictures.
Do not forget to make changes to srcpath , making his name there pictures.
After running the script in a directory tile are your files:
tile_281_160_9.jpg
tile_281_161_9.jpg

tile_289_166_9.jpg

It remains only to adjust the output of your map, by means of Google Maps.

For the example:

  1. function add_custom_map (map)
  2. {
  3. var copyright ), 8, “Karta39”);
  4. var copyrightCollection = new GCopyrightCollection (‘Map Data:’);
  5. copyrightCollection.addCopyright (copyright);
  6. var tilelayers = [new GTileLayer (copyrightCollection, 9, 9)];
  7. tilelayers [0]. getTileUrl = CustomGetTileUrl;
  8. tilelayers [0]. getCopyright = function (a, b)
  9. {
  10. var c = copyrightCollection.getCopyrightNotice (a, b);
  11. if (! c)
  12. {
  13. c = G_NORMAL_MAP.getTileLayers () [0]. getCopyright (a, b);
  14. }
  15. return c;
  16. }
  17. var custommap = new GMapType (tilelayers, new GMercatorProjection (10),”Custom Map”, {shortName: “1645”});
  18. map.addMapType (custommap);
  19. }
  20. function CustomGetTileUrl (a, b)
  21. {
  22. if (b == 9 & & ax> 280 & & ax <290 & & ay> 159 & & ay <167)
  23. return “tile_” + a.x + “_” + a.y + “_” + b + “. jpg”;
  24. else
  25. return G_NORMAL_MAP.getTileLayers () [0]. getTileUrl (a, b);
  26. }

* This source code WAS Highlighted with Source Code Highlighter .

As can be seen – first create a copyright for the layer, and then the layer with your card.
In setting getTileUrl passed function returns the pieces of your card – CustomGetTileUrl(a,b)
Where a – a point with the parameters ax and ay , which indicate where the image vertically and horizontally
b – the level of approximation of the layer.
The line return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
Returns the native image Google Maps – if this line removed, the map will only show your picture.

The full version:

  1. <Html>
  2. <Head>
  3. <Meta http-equiv = “content-type” content = “text / html; charset = utf-8” />
  4. <Title> Google Custom Maps </ title>
  5. <! – Key for karta39.ru :) ->
  6. type = “text / javascript”> </ script>
  7. <script type= “text/javascript”>
  8. //<![ CDATA [
  9. function initialize ()
  10. {
  11. if (GBrowserIsCompatible ())
  12. {
  13. var map = new GMap2 (document. getElementById (“map”));
  14. var mmmap = map;
  15. / / Map.addControl (new GScaleControl ());
  16. map.addControl (new GLargeMapControl ()); / / motion control and approximation
  17. map.addControl (new GMapTypeControl ()); / / control mode maps
  18. map.setCenter (new GLatLng (54.707168569101256,20.510530471801758), 9);/ / Kaliningrad
  19. add_custom_map (map);
  20. }
  21. / / Display a warning if the browser was not compatible
  22. else
  23. {
  24. alert (“Sorry, the Google Maps API is not compatible with this browser”);
  25. }
  26. }
  27. function add_custom_map (map)
  28. {
  29. var copyright ), 8, “Karta39”);
  30. var copyrightCollection = new GCopyrightCollection (‘Map Data:’);
  31. copyrightCollection.addCopyright (copyright);
  32. var tilelayers = [new GTileLayer (copyrightCollection, 9, 9)];
  33. tilelayers [0]. getTileUrl = CustomGetTileUrl;
  34. tilelayers [0]. getCopyright = function (a, b)
  35. {
  36. var c = copyrightCollection.getCopyrightNotice (a, b);
  37. if (! c)
  38. {
  39. c = G_NORMAL_MAP.getTileLayers () [0]. getCopyright (a, b);
  40. }
  41. return c;
  42. }
  43. var custommap = new GMapType (tilelayers, new GMercatorProjection (10),”Custom Map”, {shortName: “1645”});
  44. map.addMapType (custommap);
  45. }
  46. function CustomGetTileUrl (a, b)
  47. {
  48. if (b == 9 & & ax> 280 & & ax <290 & & ay> 159 & & ay <167)
  49. return “tile_” + a.x + “_” + a.y + “_” + b + “. jpg”;
  50. else
  51. return G_NORMAL_MAP.getTileLayers () [0]. getTileUrl (a, b);
  52. }
  53. //]]>
  54. </ Script>
  55. </ Head>
  56. <Body onload = “initialize ()” onunload = “GUnload ()”>
  57. <Div id = “map” style = “width: 500px; height: 300px”> </ div>
  58. </ Body>
  59. </ Html>

* This source code WAS Highlighted with Source Code Highlighter .

See example here: http://karta39.ru/map/2/cm.html
The standard map:
A
Enabled our map:
2

Because a just added one layer, then our map is displayed only at the same level of approximation (this is on the slider to increase the left)

For other output capabilities of their cards can be read [3]. It is shown how to make sure that your layer is translucent:

To do this, add add_custom_map the following code:

  1. var paleLayer = new GTileLayer (copyrightCollection, 12,12);
  2. paleLayer.getTileUrl = CustomGetTileUrl;
  3. paleLayer.getOpacity = function () {return 0.5}
  4. var tilelayers3 = [G_NORMAL_MAP.getTileLayers () [0], paleLayer];
  5. var custommap3 = new GMapType (tilelayers3, new GMercatorProjection (10), “1645 Mixture”, {shortName: “1645Mx”});
  6. map.addMapType (custommap3);

* This source code WAS Highlighted with Source Code Highlighter .

That is, in principle, and all :)

Good luck!

Links:
[1] http://code.google.com/intl/ru_ALL/apis/maps/documentation/reference.html
[2] http://econym.googlepages.com/index.htm – Google Maps API Tutorial
[3] http://econym.googlepages.com/custommap.htm
[4] http://int2e.com/blog/how-to-make-a-site-like-mapwowcom/
[5] http://mapki.com/wiki/Automatic_Tile_Cutter
[6] http://open.atlas.free.fr/GMapsTransparenciesImgOver.php

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s