Google Maps - Polygon with hole and custom background - google-maps

I want to draw a polygon on Google Maps with a complex background (striped for example). This https://stackoverflow.com/a/15840086/3020903 SO pretty much got me covered on 99% of the cases. It shows how to use custom overlays for this. Problem with this is, it does not support multidimensional coordinate arrays (e.g polygons with holes) and I currently have no idea how to achieve this. I am aware that polygons themselves support custom holes in them, but I need a "striped background" polygon with a hole in it.
One idea was to cut the polygon to multiple ones so that no single one would have a hole in it, but that seems very complex, as my polygons and holes in them might be extremely complex. Even if I could get it working, it will probably break pattern repetition.
Can anyone help me with this?

I got it working after some fiddling with this JsFiddle: http://jsfiddle.net/9gvsq3od/
Basic idea is in combining SVG's fill-rule="evenodd" property with a two dimensional LatLng array and a bit modification to PolyLineFill.prototype.AdjustPoints() to handle the two-dimensional coordinate array.
Heres a working example: http://jsfiddle.net/o4phfL6c/

Related

GIS: Alternative ways of patching gaps in a polygon

I'm working in QGIS but I can also use ArcGIS if there's a solution that works best on there.
I have a shapefile with certain plots of land highlighted and I plan to calculate the distance of features to the borders of these plots. But the plots have the roads and rivers going through them as gaps in the polygons. Like this:
Of course, this messes with the distance calculation I want. The goal is to create new polygons that just the outline only. I have tried the hole function in QGIS. I also tried buffering with dissolving then reversing the buffer. What other methods might work to fill in the gaps?

Animating Blobs using quadratic or bezier curves on HTML5 Canvas

I'm trying to work out a way to animate a series of circles that when they get close to each other, they melt into each other like blobs or liquid metal. Similar to the animation below.
I've searched for a few hours online for algorithms that might go part the way toward doing this, but the closest i've gotten is using blur functions to kind of fake it. I'm looking for a way to draw the objects entirely with curves.

Polygonal Search

I have read several of the posts concerning Polygonal Search, but they are all about fixing or updating the programs. I am just wondering how it works. If there is a way I can get something like pseudo code of it or an explanation of how a shape captures the data points.
To further specify my goal, I am trying to make a constant square that will be held over a map (such as google maps), but the map can move around behind the square, however, the square will continue to report whatever cities lie within its bounds. [I will eventually proceed to building it, I just need some guidance]
Thank you.
There is an open-source library which has a function to check if two shapes overlap. You can check source code:
http://turfjs.org/static/docs/module-turf_inside.html
If you look for theory behind it check Hyperplane separation theorem

Drawing resizable (not intersecting) polygons

I have been searching everywhere but I could not find an answer. I
need to have drawing resizable polygons with mouse interaction but I
do not want irregular, overlapping or intersecting polygons in the
end.
Here is a simple example of drawing resizable polygons
http://www.wolfpil.de/polygon.html
You can easily create & resize polygons which is great. But I need an
extra functionality to detect intersections and NOT allowing weird
looking shapes/polygons.
You can see the problem in this video:
http://www.youtube.com/watch?v=zou2jcGM8zw
The only solution for that problem I found at http://www.wikimapia.org. They have added features to handle the problem.
You can see it in this video: http://www.youtube.com/watch?v=K7-K0k2D-2A
I spent 3 days trying out to achieve something like this. I have gone
through wikimapia's javascript code but it is way too complex for me
to understand.
In sum, it does not have to look as fancy as as wikimapia's. I just
need resizable polygons which do NOT intersect while resizing or
adding new points to it. Can you give me any suggestions how to
achieve that?
Thank in advance.
Depending on how many points that you allow, a naive, simple O(N^2) line intersection algorithm suffices. Algorithmically this is not the best solution, but for starting out it's the most accessible for a beginner in computational geometry.
For starter, see Wikipedia article on line segment intersection. One of its links has an easy to understand explanation on how to compute the intersection point of two line segments.
Good luck!
While this is not a complete answer, note that the example you supplied appears to be using the Geometry Controls from the GMaps Utility Library, which is an open source project hosted on Google Code.
You can check the full source code in the Google Code browser.

How to simplify (reduce number of points) in KML?

I have a similar problem to this post. I need to display up to 1000 polygons on an embedded Google map. The polygons are in a SQL database, and I can render each one as a single KML file on the fly using a custom HttpHandler (in ASP.NET), like this http://alpha.foresttransparency.org/concession.1.kml .
Even on my (very fast) development machine, it takes a while to load up even a couple dozen shapes. So two questions, really:
What would be a good strategy for rendering these as markers instead of overlays once I'm beyond a certain zoom level?
Is there a publicly available algorithm for simplifying a polygon (reducing the number of points) so that I'm not showing more points than make sense at a certain zoom level?
For your second question: you need the Douglas-Peucker Generalization Algorithm
For your first question, could you calculate the area of a particular polygon, and relate each zoom level to a particular minimum area, so as you zoom in or out polygon's disappear and markers appear depending on the zoom level.
For the second question, I'd use Mark Bessey's suggestion.
I don't know much aobut KML, but I think the usual solution to question #2 involves iterating over the points, and deleting any line segments under a certain size. This will cause some "unfortunate" effects in some cases, but it's relatively fast and easy to do.
I would recommend 2 things:
- Calculate and combine polygons that are touching. This involves a LOT of processing and hard math, but I've done it so I know it's possible.
- Create your own overlay instead of using KML in PNG format, while you combine them in the previous suggestion. You'll have to create a LOT of PNGs but it is blazing fast on the client.
Good luck :)
I needed a solution to your #2 question a little bit ago and after looking at a few of the available line-simplification algorithms, I created my own.
The process is simple and it seems to work well, though it can be a bit slow if you don't implement it correctly:
P[0..n] is your array of points
Let T[n] be defined as the triangle formed by points P[n-1], P[n], P[n+1]
Max is the number of points you are trying to reduce this line to.
Calculate the area of every possible triangle T[1..n-1] in the set.
Choose the triangle T[i] with the smallest area
Remove the point P[i] to essentially flatten the triangle
Recalculate the area of the affected triangles T[n-1], T[n+1]
Go To Step #2 if the number of points > Max