Obtain a customized map by parts

Question

Obtain a customized map by parts

Navigation

#1 by (1 votes)

3

I need to obtain a grid of images from Google Maps (static maps API) with certain characteristics, which would be:

No label or poster.
All black buildings ( 0x000000 ).
All roads, highways, highways, ..., white ( 0xffffff ).
All parks, forests or undeveloped areas, green ( 0x00ff00 ).
All rivers, lakes or areas with blue water ( 0x0000ff ).

Requesting a static map without configuring anything, we get an image like this:

https://maps.googleapis.com/maps/api/staticmap?center=Barcelona&size=400x400&zoom=18

So I've added certain configurations:

style=element:labels|visibility:off to remove labels and posters.
style=feature:road|color:0xffffff to show blank paths.
style=feature:landscape|color:0x000000 to show buildings in black.
style=feature:poi.park|color:0x00ff00 to show parks in green.
style=feature:water|color:0x0000ff to show water areas in blue.

With this configuration the result has changed to:

https://maps.googleapis.com/maps/api/staticmap?center=Barcelona&size=400x400&zoom=18&size=400x400&style=element:labels|visibility:off&style=feature:road|color:0xffffff&style=feature:landscape|color:0x000000&style=feature:poi.park|color:0x00ff00&style=feature:water|color:0x0000ff

Render problems.

I've almost got what I need, except for the following problems:

The buildings are still showing their 3D model and superimposing their projection on the roads and highways, falsifying their layout as they are partially hidden (in the example you can see a path cut in the center left).
There are buildings that are not shown in black (in the example you can see one in the upper center).

I would like to be able to deactivate the 3D buildings of the map render and / or render them in another color (for example red 0xff0000 ) as well as include in the render all the buildings (apparently landscape is not the category for all the buildings).

Coordinate problems.

I get the coordinates of a location using the Google Geocoding API, using the coordinates obtained I extract clippings from a specific location that placed next to each other give rise to the complete map of the location ( For example, for Mexico DC, it returns latitude 19.5927571 length -98.9604482 as upper left coordinate and latitude 19.1887101 length -99.3267771 as lower right coordinate) by trial and error I have been able to verify that shifting the length multiples of 0.0043 with zoom 17 each of the cuts fits horizontally but (following in Mexico) I must increase the latitude 0.0041 to have the same effect.

Also, the cutouts will be unraveled as I move vertically away. This is probably due to the fact that the meridians are getting narrower as we move towards North or South:

[I created a Fiddle] that shows this effect, is ready to work " almost right " in Mexico DC, but any other coordinate shows bigger deficits. In the example Fiddle you can see how the second row of images gets out of line with the previous row as we move to the right.

Questions.

How can I force all buildings to be displayed in the same color?
How should I deactivate the render of 3D buildings at high zoom levels?
How can I solve the problem of the uncertainties of clippings when moving by coordinates?

google-static-maps google-geocoding-api

asked by PaperBirdMaster 07.02.2017 в 16:05

source

1 answer

Elements on top of map google maps (Native) Ionic 2 Advanced search and mysql query

score 1 · Answer 1

Partial and short answer

Use link to experiment with the styles or consult the documentation

Criticism of the question

I think that

the publication is too broad because it includes several questions

the code included as an example can be minimized as well as improving its readability and online documentation

the code has not been properly separated (separation of interests / "separation of concerns")

Below is an example of complete and verifiable minimum code that generates a map of the city of Barcelona without modifying the styles, and next to it, a map with the modified styles, using the included tool "fragment HTML / JavaScript / CSS - Online documentation is displayed at the minimum.

Note that the HTML and JavaScript code are on different panels and works in Chrome

//URL del mapa estático sin estilos
function create_url1(lat, lng, zoom)
{
  var head = "https://maps.googleapis.com/maps/api/staticmap?center=" + lat + "," + lng;
  var zoom = "&zoom=" + zoom;
  var tail = "&size=400x400";
  return head + zoom + tail;
}
//URL del mapa estático con estilos
function create_url2(lat, lng, zoom)
{
  var head = "https://maps.googleapis.com/maps/api/staticmap?center=" + lat + "," + lng;
  var zoom = "&zoom=" + zoom;
  var tail = 
      "&size=400x400" +
      "&style=element:labels|visibility:off" +
      "&style=feature:road|color:0xffffff" +
      "&style=feature:landscape|color:0x000000" +
      "&style=feature:poi.park|color:0x00ff00" +
      "&style=feature:water|color:0x0000ff";
  return head + zoom + tail;
}
//Datos de Barcelona (location)
var lat = 41.3850639;
var lng = 2.1734035;
//Zoom
var zoom = 17;
//Llamar a las funciones que generan los urls con y sin estilos
document.getElementById("map_img1").src = create_url1(lat, lng, zoom);
document.getElementById("map_img2").src = create_url2(lat, lng, zoom);

<img id="map_img1" src="" width="300" height="300"/>
<img id="map_img2" src="" width="300" height="300"/>