StitchCustomGMaps

From ActiveIDsWiki

Aim & Workflow

This tutorial describes how to create high resolution custom Google Maps using the GMaps JS API v3 MapType wizard in combination with stitching with Google Map Buddy.

This is done in three steps:

1. Create a custom map
2. Get the API style
3. Stitch your custom map

The result will be a custom styled map, like the one on the right, in high resolution.

Requirements

What you need for this tutorial is all available online:

• Styled Google Maps wizard
• Google Map Buddy (tested with v1.2)
• Firefox with the Firebug plugin installed.

Styled Google Maps

The Google Maps Javascript API v3 allows you to create custom styled (base) maps.

• documentation
• example
• wizard

On the right is an example of a custom styled Google Map.

Google Map Buddy

With Google Map Buddy you can auto stitch Google Maps tiles, allowing you to create amazingly high res maps (images).

Firebug

Firebug is the Mozilla Firefox web development tool. Firebug allows you to inspect and edit the HTML and CSS and that's exactly what we need to do in this tutorial. If you're not familiar with Firebug or any web development for that matter, you might want to check out the Firebug tutorial first.

Step 1: Style your map

Use the Styled Google Maps wizard to create your own custom styled map. It's a wizard, so not much has to be explained. All you need to do is add styles in which you define the different style attributes for different feature types and elements until the map looks the way you want.

Step 2: Get the API style

Now we can use our styled map (example) and extract the style rules, defined as the API style, that we need for the stitching.

We do this by taking a closer look at a map tile using Firebug:

1. open the Firebug console
2. select the inspect element option
3. click on a map tile
4. look at the element style in Firebug console on the right side (style tab)
5. click on the value behind background-image
6. copy this value

The value should look something like this:

url("http://mt1.google.com/vt?lyrs=m@132&src=apiv3&hl=en-US&apistyle=s.t:33|p.v:off,p.h:%2300ffee|p.s:100|p.l:100,s.t:3|p.h:%23ff0011|p.s:100|p.l:-100,s.e:l|p.v:off,s.t:6|p.h:%230091ff|p.s:76|p.l:-19&x=1051&y=673&z=11&s=Ga")

From this url we can extract the apistyle:

&apistyle=s.t:33|p.v:off,p.h:%2300ffee|p.s:100|p.l:100,s.t:3|p.h:%23ff0011|p.s:100|p.l:-100,s.e:l|p.v:off,s.t:6|p.h:%230091ff|p.s:76|p.l:-19

This is all we need to go to the next step, but I feel like giving a bit of background on this apistyle.

API style format

Within the apistyle the style rules are defined. Each style rule is seperated with a ',' and each argument with a '|', so if we add some line breaks the code becomes readible:

&apistyle=
 
s.t:33|
p.v:off
 
,
 
p.h:%2300ffee|
p.s:100|
p.l:100
 
,
 
s.t:3|
p.h:%23ff0011|
p.s:100|
p.l:-100,s.e:l|
p.v:off
 
,
 
s.t:6|
p.h:%230091ff|
p.s:76|
p.l:-19

Let's compare this to the style variables in JSON format which are used in the javascript to generate the map tiles. Click on the 'show JSON' button and you will get the following code:

[ { 
    featureType: "all", 
    elementType: "all", 
    stylers: [ 
      { hue: "#00ffee" }, 
      { saturation: 100 }, 
      { lightness: 100 } 
    ] 
  },{ 
    featureType: "road", 
    elementType: "all", 
    stylers: [ 
      { hue: "#ff0011" }, 
      { saturation: 100 }, 
      { lightness: -100 } 
    ] 
  },{ 
    featureType: "all", 
    elementType: "labels", 
    stylers: [ 
      { visibility: "off" }
    ] 
  },{ 
    featureType: "water", 
    elementType: "all", 
    stylers: [ 
      { hue: "#0091ff" }, 
      { saturation: 76 }, 
      { lightness: -19 } 
    ] 
  } 
]

We can now deduct the following:

  s.t = style featureType
  s.e = style elementType
  p.h = hue value
  p.s = saturation value
  p.l = lightness value

Now that we understand a bit of the API style, let's use it in Google Map Buddy.

Step 3: Stitch your custom map

Now let's use this in Google Map Buddy to create an image of a custom map:

1. open Google Map Buddy
2. select 'Goto Google Maps...'
3. select http://maps.google.com or use a custom one if you have one for your own map (this is just for previewing)
4. navigate to desired location
5. select 'Select Area'
6. enter 'Zoom level'
7. select 'Create Map'
8. enter filename and click 'Save'
9. under Road Map (or any map type) check 'will be downloaded' and uncheck 'default source url'
10. and now the important part: add the 'apistyle' to the url that is already filled in:

  default: http://mt[SRVINDEX].google.com/vt/v=w2.97&hl=[HL]&x=[X]&y=[Y]&z=[Z]&s=[SERVER]
  add:     &apistyle=s.t:33|p.v:off,p.h:%2300ffee|p.s:100|p.l:100,s.t:3|p.h:%23ff0011|p.s:100|p.l:-100,s.e:l|p.v:off,s.t:6|p.h:%230091ff|p.s:76|p.l:-19
  result:  http://mt[SRVINDEX].google.com/vt/v=w2.97&hl=[HL]&x=[X]&y=[Y]&z=[Z]&s=[SERVER]&apistyle=s.t:33|p.v:off,p.h:%2300ffee|p.s:100|p.l:100,s.t:3|p.h:%23ff0011|p.s:100|p.l:-100,s.e:l|p.v:off,s.t:6|p.h:%230091ff|p.s:76|p.l:-19

Now click 'ok' et voila GMB is creating your custom map: