Adding Styles to Subgurim’s Google Maps Control (Code Behind)

The current version of Subgurim’s Google Maps Control has the ability to add styles to your Google Maps, but I wanted to go deeper and create a map style like seen at Snazzy Maps. There were a few hints on the Subgurim Forums but nothing with a complete answer.

The map style I liked was Subtle Grayscale

Call this sub after loading your map from your code behind


Private Sub ApplyMapStyle()
Dim sb As New StringBuilder()
GMap1.Add("ApplyMapStyle();", True)

sb.Append("var myMapStyle = [{")
sb.Append("featureType: ""landscape"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""on"" },")
sb.Append("{ ""saturation"": -100 },")
sb.Append("{ ""lightness"": 60 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""poi"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""simplified"" },")
sb.Append("{ ""saturation"": -100 },")
sb.Append("{ ""lightness"": 51 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""road.highway"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""simplified"" },")
sb.Append("{ ""saturation"": -100 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""road.arterial"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""on"" },")
sb.Append("{ ""saturation"": -100 },")
sb.Append("{ ""lightness"": 30 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""road.local"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""on"" },")
sb.Append("{ ""saturation"": -100 },")
sb.Append("{ ""lightness"": 40 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""transit"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""simplified"" },")
sb.Append("{ ""saturation"": -100 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""administrative.province"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""off"" }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""administrative.province"",")
sb.Append("elementType: ""geometry"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""on"" },")
sb.Append("{ ""lightness"": -100 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""water"",")
sb.Append("elementType: ""labels"",")
sb.Append("""stylers"": [")
sb.Append("{ ""visibility"": ""on"" },")
sb.Append("{ ""saturation"": -100 },")
sb.Append("{ ""lightness"": -25 }")
sb.Append("]},")

sb.Append("{")
sb.Append("featureType: ""water"",")
sb.Append("elementType: ""geometry"",")
sb.Append("""stylers"": [")
sb.Append("{ ""saturation"": -97 },")
sb.Append("{ ""lightness"": -25 },")
sb.Append("{ ""hue"": ""#ffff00"" }")
sb.Append("]")

sb.Append("}];")

sb.Append("function ApplyMapStyle()")
sb.Append("{")
sb.Append("var mapType = new google.maps.StyledMapType(myMapStyle);")
sb.AppendFormat("{0}.mapTypes.set(""mymap"", mapType);", GMap1.GMap_Id)
sb.AppendFormat("{0}.setMapTypeId(""mymap"");", GMap1.GMap_Id)
sb.Append("}")

GMap1.Add(sb.ToString())
End Sub

Technorati Tags: , , ,

     

Leave a Reply