Set municipalities limits in GoogleMaps

Question

Set municipalities limits in GoogleMaps

Navigation

#1 by (5 votes)

3

I'm trying to create thematic maps using google maps api . Reading the documentation I realized that for coloring regions I need to set all the Lat Long coordinates of the perimeter I want. Someone who has ever had a similar problem:

Do you know if there is a site that offers the coordinates of the municipalities like this one link ? >
Do you know if there are any options in the api where municipalities can be informed by name or by code? For example: new GPolygon(maps.saopaulo);
Do you know if there is an easier way to do it?

Searching the documentation, the only way I figured out how to do this is with Gpolygon . A good example would be this one: link , where the city of Campinas is highlighted.

javascript google-maps

asked by anonymous 18.03.2015 / 23:54

1 answer

Make two directives have the same $ scope in the Angular Catch custom tags with Html Agility Pack

score 5 · Accepted Answer

This ibge website that you passed us serves well, let's reverse engineer it to discover the polygons!

We can start off by how this map is rendered on their site, so we can use the chrome developer tools and inspect the element that contains the map to understand where it comes from:

Themapcomesfromaniframe,interesting,let'sfollowthislink:

Here's the result:

Let'sinspectthesourcecodeandtrytofindthecodethataddsthisshapetogooglemaps:

A-ha! We get from there to find the webservice that it accesses to get the shape data:

var codigo = jsget['codigo'];//33';//3303302';
var idnivel = jsget['idnivel'];//'MU';
var fcomp = jsget['fcomp'];//'100';//1000';

var urlServicoMapas = "shapes/" + codigo.substr(0, 2) + "/" + idnivel + "_M13_" + codigo + "_" + fcomp + ".json";

From here we deduce that the url in this case is:

link

If you access this url, you will see that the shape comes truncated in some format, but no problem, continuing to read the source code, we can see that it uses a "compactor", which is in another url: p>

<script language="javascript" src="compactador.js"></script>

This is the code that interests us:

function descompacta(string) {
    var myArray = [];
    var str, str2, arr, arr2, lat, lng, f;
    var strings = string.split(" ");
    for (var i in strings)
    {
        str = strings[i];
        str2 = '';
        arr = [];
        arr2 = [];
        for (var j=0; j<str.length; j++)
        {
            switch (str.charAt(j))
            {
                case 'A': str2 += ',0'; break;
                case 'B': str2 += ',1'; break;
                case 'C': str2 += ',-1'; break;
                case 'D': str2 += ',2'; break;
                case 'E': str2 += ',-2'; break;
                case 'F': str2 += ',3'; break;
                case 'G': str2 += ',-3'; break;
                case 'H': str2 += ',4'; break;
                case 'I': str2 += ',-4'; break;
                case 'J': str2 += ',5'; break;
                case 'K': str2 += ',-5'; break;
                case 'L': str2 += ',6'; break;
                case 'M': str2 += ',-6'; break;
                case 'N': str2 += ',7'; break;
                case 'O': str2 += ',-7'; break;
                case 'P': str2 += ',8'; break;
                case 'Q': str2 += ',-8'; break;
                case 'R': str2 += ',9'; break;
                case 'S': str2 += ',-9'; break;
                default: str2 += str.charAt(j); break;
            }
        }
        arr = str2.split(",");
        f = arr.shift();
        lng = parseInt(arr[0])/f;
        lat = parseInt(arr[1])/f;
        arr2.push([lat, lng]);
        for (var j=2; j<arr.length; j+=2)

        {
            lng += parseInt(arr[j])/f;
            lat += parseInt(arr[j+1])/f;
            arr2.push([lat, lng]);
        }
        myArray.push(arr2);
    }
    return myArray;
}

Running the webservice result in this function, we get an array with our shape:

link