Develop Reference

Setting click priority on google maps polygon array

I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!

The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).

How to add square tiles to leaflet map with hovering effect?

I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.
I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.
If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?
UPDATE:
Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.
And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.

This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.
Updated after your update:
MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},

google maps api how to add circles around cities with url

I was reading this link but it is not the same
http://productforums.google.com/forum/#!category-topic/maps/base-map-data/M775Ry3-vNM
How can in google map makes circles and urls around cities?

See the following link
http://gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.html
Use new google.maps.Circle() constructor. You should set the centre and specify the radius of the circle. Hollow effect can be created using fillOpacity(0.0);
There is also a rectangle constructor new google.maps.Rectangle(). See https://developers.google.com/maps/documentation/javascript/reference#Rectangle

Use new google.maps.Circle() with a combination of listeners like mouseover and click.
There are display options like opacity and color.
https://developers.google.com/maps/documentation/javascript/reference#Circle
Your question is a bit too broad. If you have a more specific problem please edit it.

Tricky raphael svg animation

I've created a 'donut' chart originally from this jsfiddle, using raphael.
I have tweaked this script to suit my needs and currently have this being rendered.
My aim is to animate each slice (at the same time); for example make the blue slice grow to 60%; and the red slice shrink to 40%.
I have been able to redraw the slices by removing the existing one and quickly re-rendering a new one with adjusted values (e.g. 51, 49). But the problem here is that it is instant.
My question is,
(a) Can I animate this without the need to redraw the object (and how)?
(b) If not, how I can animate this effect using a redraw logic?

Yes. There is an example of doing this very thing on the Raphael demos page where you got the pie chart. See the Growing Pie demo.
You should separate the code in which you generate the path into a standalone function so you can use it later to return new paths. In order to use animate(), you'll need to define a function on the customAttributes object; it should return (at least) an object with the path property set to your slice's new path.
Since you have labels, you'll probably want to modify the code such that the pie slices expand/shrink relative to their center, so that you don't have to move the labels, too, since the labels are centered on their slice's "axis."
Update
Here's a JSFiddle with a simple example, pretty much the same as Dmitri's Growing Pie demo, except more like your chart. I export a setValue() method to change slice sizes and call it when the page loads. See his blog post about adding customAttributes, too.
In my last paragraph above, I was off the mark a bit. Your chart wasn't the one with labels; I had them mixed up. Also, it would be harder to keep slices centered, so I didn't do that after all. The animate() function sets each segment to its new starting and ending points on the circle, and Raphael figures out the intermediate points. As you can see, you can pass multiple arguments in an array.
this.customAttributes.slice = function(a0, a1) { /*...*/ }
// ...
chart.push(paper.path().attr({slice:[0, Math.PI/2 ]})

Can't see all the fiddle because I'm on iPod however it sounds like you need to have an animate call inside a function that you will need to write
Use the callback parameter that calls the function it sits inside.
Code your recursively called function so it eventually completes when all the work is done.
Each call to the function will happen at the end of every elapssed time interval you specify...

Detecting shape coordinates in Canvas

I'm writing drag & drop functionality in my HTML5 Canvas application and am wondering how to detect if I'm clicking on a shape other than a rectangle or square, in which case I would do something like this inside of my 'mousedown' event handler:
if (evt._x > 13 && evt._x < 202 .... ) {}
I don't see how to easily do something like that with an arc like this:
ctx.arc(25, 25, 20, 0, (Math.PI/180)*360);
I hope that is clear, thank you in advance.

Just use isPointInPath, which checks if a given point is within the current drawing path. If you're drawing multiple shapes to the canvas, than a good technique is to associate each of your shapes with a "hidden" canvas, draw each path to its respective canvas, than test isPointInPath against each of these, offsetting the destination/mouse coordinates as needed. Theres no reason to resort to your own calculations for this.

First you check if the click is within a shape's bounding box (the smallest rectangle which fully encloses the shape). If it is, then you do the more complex math to determine if the click is within the shape itself. You'll have to implement this math yourself as I don't think there's anything built-in for it.

You'll get the formula you need here and also in Polygon article of Wikipedia.

This may sound stupid, but you can use <area> tags inside a <map> over an <img> to create interactive polygonal shapes. They have their own onclicks/mouseovers/etc. already implemented by all browsers.