When I'm painting two polygons with a part of them covering each other, the mouse events are triggred for the polygon that was last painted no matter that it's zIndex is lower!
Is there a way to make mouse event to be triggered for the polygon with higher zIndex?
My code is adding layers of polygons in an asynchronous way (ajax) and some layers overlap.
I want polygons with higher zIndex's to get the mouse events.
A polygon is created by :
function createPolygon(_paths, _strokeColor, _strokeOpacity, _strokeWeight, _fillColor, _fillOpacity, _zindex) {
var polygon = new google.maps.Polygon({
paths: _paths,
strokeColor: _strokeColor,
strokeOpacity: _strokeOpacity,
strokeWeight: _strokeWeight,
fillColor: _fillColor,
fillOpacity: _fillOpacity,
zIndex: _zindex
});
return polygon;
}
and afterwards is attached to the map by:
for (i in polygonArray) {
polygonArray[i].setMap(map);
polygonArray[i].setVisible(true);
}
Thanks
I set the panControl property of the map to false which apperantly disables the affect of the zIndex, you must set it to true!
Related
I'm using leaflet with custom CRS.Simple projection. If I draw a polyline at the page Load it is more or less drawn ok (Although much more accurate in firefox than in chrome) but if I drag the map the polyline remains in the same place of the browser window, so then appears shifted respect of the background map.
Example:
Initial load
After drag the map, the map moves but the polyline remains in the same place
To add the polyline I'm converting the coordinates to the CRS.Simple projection. I don't think there is a problem here as every other map marker or text appears correctly
.....
//initialize leaflet map
map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.Simple //simple coordinates system
}).setView([0, 0], mapMaxZoom);
//set the bounds of the map to the current dimension
var mapBounds = new L.LatLngBounds(
map.unproject([0, mapHeight], mapMaxZoom),
map.unproject([mapWidth, 0], mapMaxZoom)
);
//load the tiles
map.fitBounds(mapBounds);
L.tileLayer(mapData.info.tiles+'/{z}/{x}/{y}.png', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: '',
noWrap: true,
continuousWorld: true
}).addTo(map);
.....
var pointList = [getMapCoordinates(1750,1750),
getMapCoordinates(1520,1764),
getMapCoordinates(1300,1560),
getMapCoordinates(1132,1258),
getMapCoordinates(1132,1060),
getMapCoordinates(926,960)];
polyline = new L.Polyline(pointList, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
polyline.addTo(map);
....
function getMapCoordinates(px,py)
{
//as we use simple system, transform the point (based on pixel) on map coordinates that leaflet understand
return map.unproject([px, py], map.getMaxZoom());
}
Any idea what I'm doing wrong, or is it a bug? Any workaround would be appreciated
Ok, it seems the problem was in stable version (0.7.3) Using dev version (1.0-dev) works ok and even solves the problem with the different browser drawing
I have an editable circle on my map and I wanted to see if it's possible to have a marker always appear at the center of the circle. I know I can have a marker and move it to the center of the circle whenever it's moved. The problem is that circles do not have a "while being dragged" event so I should wait for the dragging to stop and then move the marker to the new center.
Bind the center of the circle to the position of a marker
See this "article" in the documentation
Proof of concept
Relevant changed code from that example:
var circle = new google.maps.Circle({
strokeWeight: 2,
draggable: true
});
When drawing large circle onto a Google map, when the circles get really large (thousands of miles translated to meters) the circles start to sine wave over the map.
Example
Here's the code to set up and draw the circles:
//larger, outer circle
var options = {
strokeWeight: 0,
fillColor: '#AA0000',
fillOpacity: 0.5,
map: map,
radius: distance
};
//smaller inner circle
var options2 = {
strokeWeight: 0,
fillColor: '#AA0000',
fillOpacity: 0.5,
map: map,
radius: distance/2
};
circles[circles.length]=new google.maps.Circle(options);
circles[circles.length]=new google.maps.Circle(options2);
for(var i=0; i<=circles.length-1; i++)
{
circles[i].bindTo('center', marker, 'position');
}
Is there a way to avoid that?
This is an exciting question!
If you're upset about the repeating sin pattern, but actually want your circle to cover a geographic area on the earth defined by radius in meters then you're best bet is to increase the zoom level (or shrink the width of the map) to reduce the overall size of the are being presented. Alternatively, you could reduce the distance to a value that doesn't encompass the north pole (which is what I believe would trigger the awkward sin pattern)
If you're trying to draw a circle in the geometric, not geographic, sense then the Google Maps circle overlay isn't for you. Instead, you should use a GroundOverlay (rendering a transparent PNG server-side somewhere) or CustomOverlay (the technically more advanced solution). A CustomOverlay could include a DIV with a circle you've drawn using any HTML technique like CSS or an SVG.
I am trying to create polyline outlines and fills for each state. I need the state polyline to be clickable. Also, when viewed at greater zoom levels the fill looks fragmented. Any suggestions?
see code below:
function drawBorder(){
var Polyline_Path = new google.maps.Polyline({
path: newyork,
strokeColor: "#CD0000",
// color of the outline of the polyline
strokeOpacity: 1,
// between 0.0 and 1.0
strokeWeight: 1,
// The stroke width in pixels
fillColor: "#CD0000",
fillOpacity: 1,
clickable: true
});
Polyline_Path.setMap(map);
google.maps.event.addListener(Polyline_Path, 'click', function() {
alert('you clicked polyline');
});
}
this code does work to make the polyline clickable but only in a very specific area of the polyline. Is there a way to configure it to detect a click event anywhere in the state
I used the google.maps.Polygon instead and it took care of fragmenting and clickable issues
Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.
The following uses an array called "subjects" that consists of increasing radii and various fillcolors.
for (i=0;i<subjects.length;i++) {
radi = subjects[i][0];
fillcolr = subjects[i][1];
zindx = subjects.length - i;
newcircle = new google.maps.Circle({
radius: radi,
center: centerPoint,
strokeWidth: 1,
fillOpacity: 1.0,
fillColor: fillcolr,
zIndex: zindx
});
// display it
newcircle.setMap(map);
// make outer circle clickable
google.maps.event.addListener(newcircle, 'click', function() {
circleClickedInfo(i);
});
The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...
Try this for every shape you need:
selectedShape.setOptions({zIndex:0});