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});
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
Can anyone advise as to how I should implement a system where the map markers' sizes increase according to their order?
The markers are arranged in order and I would like the latest marker to be the biggest and the others to decrease in size the lower in order they are.
A solution could be to use SVG markers. You can scale them as you wish. Here is a quick example with a simple circle marker:
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1
}
Note the scale property. You can increment this value every time you create a marker.
JSFiddle demo
Hope this helps!
increment the size of icon marker
that may help
In a given instance of google maps...
Is there a way to turn off the other instances of the maps which tile to the right and left of the initial central map?
I've seen ways to restrict the pan ability of the map ... but it uses lat + lng to determine when to re-center the map ... and thus the usage falls apart at different zoom levels.
For example: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
If on zooms all the way out, you can see how the map of the globe is tiled along the x-axis.
I would like a single instance of the map.
You could add an observer to the zoom_changed event, and set the minZoom if more than 90 degrees of map is shown. The second statement recursively reduces the zoom to an acceptable limit before the limit is known.
var zoomObserver = function () {
width = Math.abs(map.getBounds().getNorthEast().lat() -
map.getBounds().getSouthWest().lat());
if (width > 90){
var opt = { minZoom: map.getZoom()};
map.setOptions(opt);
}
if (width > 179){
map.setZoom(map.getZoom() + 1);
}
};
google.maps.event.addListener(map,'zoom_changed', zoomObserver );
This simple solution works for most use cases, doesn't take into account doubling the width of the map through resizing the browser window, so you may need to add the observer to another event in that case.
I have two polylines drawn on a google maps api v3 directions service.
My problem is that where they overlap on part of the map, one covers the others. I wish to draw 6 lines in total which are bus routes in my city. All routes come back to the same area of the city but it will be very difficult to distinguish them apart.
Is there a way to slightly offset each line?
function busRoute2(source,destination){
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true,
polylineOptions: { strokeColor: '#000000', strokeOpacity: 0.5 }
});
directionsDisplay.setMap(map);
var request = {
origin:source,
destination:destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
Heres the working code (very basic) polyLine offset map animated Note: The icon 'offset' property is the percent offset of the icon along the line.
You need to manipulate the relative 'path' Coordinates (SVG format) of the icon (in your case a line) itself in order to offset it away from the line
Forget my suggestions. I tried to create a repeat icon (2 pixel dot) repeated every 4 pixels offset from the polyLine. It looks absolutely disgusting and lags the browser.
I am going to have to create a function that edits the coords of the polyline at load time according to angle dLat, dLng and zoom scale.
As you want your markers (stops, buses) and lines to be on one side of the road going one direction and the opposite going back. You also dont want to obscure the road name on the map
If anyone wants to help with this email me at huntington#beachincalifornia.com
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.