Static maps: draw polygons with many dots. (2048 char limit)

Since the get request has a limit of 2048 characters, you cannot create an image using Google Static Maps, which contains a polygon with a large number of polygon points.

Especially if you try to draw many complex polygons on one map. If you use the Google Maps API, you won’t have a problem - it works very well! But I want to have an image (jpg or png) ...

So, is it possible to create an image from the Google Maps API? Or any way to “trick” the 2048 char limit?

Thanks!

+6
source share
3 answers

It’s impossible to “trick” a character’s restriction, but you can simplify your polyline to bring the encoded polyline line under the limit. This may or may not cause the polygon to be of suitable accuracy for your needs.

Another caveat is that (as far as I know) the Static Maps API allows only one coded polyline on a map (it may look like a polygon if you either close it yourself or fill it, but it's still a polyline, not a polygon) .

One option to simplify your polyline is the Douglas Peucker algorithm. The following is an implementation that extends the google.maps.Polyline object using the simplify method.

It depends on whether the Google Maps JS API is loaded, which you might not need if you use static maps, but the code below can be easily rewritten.

 google.maps.Polyline.prototype.simplify = function(tolerance) { var points = this.getPath().getArray(); // An array of google.maps.LatLng objects var keep = []; // The simplified array of points // Check there is something to simplify. if (points.length <= 2) { return points; } function distanceToSegment(p, v, w) { function distanceSquared(v, w) { return Math.pow((vx - wx),2) + Math.pow((vy - wy),2) } function distanceToSegmentSquared(p, v, w) { var l2 = distanceSquared(v, w); if (l2 === 0) return distanceSquared(p, v); var t = ((px - vx) * (wx - vx) + (py - vy) * (wy - vy)) / l2; if (t < 0) return distanceSquared(p, v); if (t > 1) return distanceSquared(p, w); return distanceSquared(p, { x: vx + t * (wx - vx), y: vy + t * (wy - vy) }); } // Lat/Lng to x/y function ll2xy(p){ return {x:p.lat(),y:p.lng()}; } return Math.sqrt(distanceToSegmentSquared(ll2xy(p), ll2xy(v), ll2xy(w))); } function dp( points, tolerance ) { // If the segment is too small, just keep the first point. // We push the final point on at the very end. if ( points.length <= 2 ) { return [points[0]]; } var keep = [], // An array of points to keep v = points[0], // Starting point that defines a segment w = points[points.length-1], // Ending point that defines a segment maxDistance = 0, // Distance of farthest point maxIndex = 0; // Index of said point // Loop over every intermediate point to find point greatest distance from segment for ( var i = 1, ii = points.length - 2; i <= ii; i++ ) { var distance = distanceToSegment(points[i], points[0], points[points.length-1]); if( distance > maxDistance ) { maxDistance = distance; maxIndex = i; } } // check if the max distance is greater than our tollerance allows if ( maxDistance >= tolerance ) { // Recursivly call dp() on first half of points keep = keep.concat( dp( points.slice( 0, maxIndex + 1 ), tolerance ) ); // Then on second half keep = keep.concat( dp( points.slice( maxIndex, points.length ), tolerance ) ); } else { // Discarding intermediate point, keep the first keep = [points[0]]; } return keep; }; // Push the final point on keep = dp(points, tolerance); keep.push(points[points.length-1]); return keep; }; 

This has been paved together with a few examples ( here and here ).

Now you can take your original polyline and pass it through this function with an increase until the resulting encoded polyline falls below the URL length limit (which will depend on other parameters that you pass to static maps).

Something like this should work:

 var line = new google.maps.Polyline({path: path}); var encoded = google.maps.geometry.encoding.encodePath(line.getPath()); var tol = 0.0001; while (encoded.length > 1800) { path = line.simplify(tol); line = new google.maps.Polyline({path: path}); encoded = google.maps.geometry.encoding.encodePath(path); tol += .005; } 
+6
source

Another way is to use the javascript library, which can convert the contents of the canvas into an image. Sort of

Although I'm not sure about the performance for googlemaps overlay.

EDIT: If you are using html2canvas, be sure to check this question: fooobar.com/questions/944852 / ...

0
source

As of September 2016, the URL restriction has been changed to 8192 characters.

https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction

There was also a feature request in a public tracker issue that was flagged as Fixed.

0
source

Source: https://habr.com/ru/post/944848/


All Articles