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.
Related
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
on this page https://developers.google.com/maps/articles/toomanymarkers
it says how this is the easiest clustering posible, but I can't find any client side solution for this. Does anyone know for free open source, client side solution of grid based clustering for google maps markers ? i don't want MarkerClusterer.
I didn't find it, so i went and start coding my own solution. The first obvious request is that it has to be fast for up to at least 1000 markers loaded on map. Every zoom in out, move and soo on, will repeat procedure/function of clustering. Grid blocks are customizable, default value is 50*50 pixels.
Image below is showing what should the result look like.
I'm having problem with algoritem, now all I can think of to achive this is to itterate through all markers for each grid and ask if it is inside bounderies and then increase array of grid ++. This obviusly can't be done that way. There should be some hash or something that just one itteration through all markers would be needed and I would know in which grid specific marker belongs to.
I hope someone will give me a hint for algoritem I'm after. Thank you !
Seems like geohash is the answer to your problem, you even allude to that solution in your question. It's explained well here:
http://blog.trifork.com/2013/08/01/server-side-clustering-of-geo-points-on-a-map-using-elasticsearch/
I am actually exploring developing a similar clustering algo for Google Maps API v3. I'll post more if I actually get anywhere with it.
You can use a geohash or a space filling curve to reduce the dimension and reorder and hash a marker. On the server side you can use a point and a spatial index data stucture but you can also compute the geohash manually. Look for xkcd internet map comic and the hilbert curve to see how it works.
I am making some kind of floor plan that shows the position of participants of a meeting.
For this I am using Raphael.js.
I am looking to find a way to zoom & pan trough that floorplan but I am not finding anything. Can anyone point me in the right direction?
Without changing any of your code that defines the rest of the functionality go to
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=paper.setviewbox
Also use the raphael link to the documentation which always points to the latest....
There are some powerful new features in Raphael 2 that are not currently widely used.
Whats nice about this is that its just an add on!
I am trying to generate some sun 'rays' which I can best describe as looking like the blade of a krisknife, such as the blade portion of this picture.
This is just an example. I only need a triangular shape with two or three waves that I can close and fill.
Better yet, is there some HTML5 app with which I can draw a complex figure and then export the javascript (moveTo, arcTo, bezierCurveTo, quadraticCurveTo, ...). Something similar to HTML5 Bezier Sketcher but which saves the javascript. Trying to draw complex figures blind is very difficult and I don't want to switch to SVG if it is not necessary.
Thanks 1,000,000
Edit: I have now also looked at all the options at this site. None will allow me to draw and fill simple curves and then see/save canvs commands. All that show commands show them in new libraries like fabric or jsDraw2D.
You can parse SVG into an html5 canvas with fabric.js.
That might do the trick for you.
https://github.com/kangax/fabric.js
Beside SVG it can help you with a nice API to canvas drawing.
I found the answer among the solutions for Convert SVG to Canvas friendly output. The author didn't think it worked for him, but I think it's as perfect as any I have seen.
Professor Cloud (...is frikkin' amazing! This isn't the first thing he's done I have found incredibly useful.) created a site to take SVG input and product Canvas output. You can see it here, at Professor Cloud SVG-to-Canvas.
Using this site, I can draw something or even take a stock vector image in AI, export as SVG, cut out the commands and past them into Prof. Clouds amazing SVG-chipper, and get Canvas code. I understand it doesn't support full SVG capabilities, but then, neither does Canvas. Great for me.
Your solution is probably best but just for the record, I tried experimenting with some graph plotting, and got some nice results:
The equations are:
sin(x)*log(2/x) + x/10
sin(x)*log(2/x) - x/10
You can plot them using: http://www.graphsketch.com/
It looks good with 0 < x < 25
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