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).
Related
I'm using Leaflet Draw to draw rectangles on a Leaflet map. The rectangles get added to a FeatureGroup once they are created, and their styles are updated based on their size. For example, the rectangles are filled red if their area exceeds a certain threshold and green if their area is within the threshold.
I'm leveraging the "draw:created" callback to inspect the completed rectangle's size. I'm also able to update the rectangle's style during editing by leveraging the "draw:editresize" and "draw:editmove" callbacks. By doing this, users can easily see if their rectangles fall within the correct area requirements while they are resizing them.
Here is my problem: I haven't been able to find a callback that allows me to style the rectangle during its initial creation. Have I overlooked a callback? I've tried all of the logical ones from the doc's: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event.
There's not really any code to show other than the following event handlers, which currently work while editing a rectangle.
this.map.on('draw:editmove', function (e) {
self.setROIStyle(e);// works
});
this.map.on('draw:editresize', function (e) {
self.setROIStyle(e);//works
});
Thanks,
Ray
I have a google map with drawing overlays for rectangle, circle, polygon. Everything is cool but I want to clear the overlays before I start drawing a new one (automatically).
There doesn't seem to be any way to clear it via an existing Google Maps control and I don't want to create some custom button for it.
google.maps.event.addListener(this.map, 'mousedown', function(event) {
console.log('map mousedown');
console.log(_this.drawingManager.getDrawingMode());
});
I'm trying to clear the maps when a mousedown event occurs on the map. But it seems when the map is in "drawing mode" this event doesn't fire. I also can't find any documentation on any kind of mouse events for the drawing control.
Is there a way to fire a mousedown even when in drawing mode (drawing a circle, rectangle, polygon, etc) ?
There isn't a way to fire a mousedown event on map when in drawing mode I know of, but still I think there are two possible ways for you to go:
A. Only if you are using custom buttons for drawing manager (meaning you set drawingControl: false when initializing DrawingManager and create your own buttons). Then, when any drawing button was pressed, e.g. button for drawing a polyline, you can listen for the event which is fired when drawing was complete, and setDrawingMode to null which ensures that user will have to click one of the icons again to start drawing, where you can in the same click listener delete all existing drawings. For example (illustrational, depends on your setup):
$('#polylineButton').on('click', function(){
//delete any previous existing drawings on map
drawing_manager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
google.maps.event.addListenerOnce(drawing_manager, 'overlaycomplete',function(polyline) {
drawing_manager.setDrawingMode(null); //set to hand cursor after overlay was drawn
..
}
...
});
So this solution wouldn't require any additional buttons on the map, only those required to select respective drawing tools (hand, polyline, circle, etc.)
B. You cannot listen for the map click event, but you can still listen for a click event on the div containing the map. In that case you can, also with leveraging overlaycomplete event, set up some variables indicating when drawing started. Something similar to what was done in this answer .
I have a simple question, and hopefully there is a simple answer . . . I just can't find it after a couple of hours of searching.
I've got a standard google map with a bunch of markers. I have a click event on each marker so that when clicked, the map pans the marker to the center and zooms in on it. No issues there.
Now I want to change the event handler so that when a marker is clicked the map recenters so that the marker is centered horizontally, but it is vertically towards the top of the map canvas. Is there a relatively straight forward way of doing this that works across different zoom levels?
Thanks,
Chuck
There may be many ways, e.g.
google.maps.event.addListener(marker, 'click', function() {
this.getMap().setCenter(this.getPosition());
this.getMap().panBy(0,(this.getMap().getDiv().offsetHeight/2)+this.anchorPoint.y);
});
It puts the marker in the center and then pans the map vertically by (mapHeight/2-markerHeight)
You could also muck around with getProjection() and the fromContainerPixelToLatLon and fromLatLonToContainerPixel to set a specific position within the viewable point of the math.
Both of those will give you pixel measurements from the <div> element you're using as the map canvas.
c.f. fromDivPixel and ToDivPixel which will give you the pixel position of the item on the infinite div of the map. Say you've got your map focussed on Africa, right? And you've got a pin in NYC. Using the *DivPixel* variants will keep your pin in NYC, and then you can pan towards it. Using *ContainerPixel* will move your pin into view on the map regardless of whatever Lat/Lon you've set it to.
I have an OpenLayers map with two vector layers. Both of them contain marker.
With help of the following link, I managed to get a select-handler on both layers.
http://openlayers.org/dev/examples/select-feature-multilayer.html
This select-handler fires the same function for marker on both layers.
But how can I differ, on which layer the selected is positioned?
In OpenLayers,handler event triggers on single viewport or map canvas.Therefore,you should attach event (feature selection and feature unselection) on each layer.If you follow the code,in example page,it is so clear that they use the same event but different places where you may alter your own code.
vectors1.events.on({
"featureselected": function(e) {
showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
},
"featureunselected": function(e) {
showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
}
});
for vectors2 the same event is attached.If you're looking for which layer the feature is placed as above code says so.
I am currently working on google map and new to it..
I want to know is it possible to divide the map into certain tiles with definite height and width and to color them.. If yes then somebody can just explain how to do it as i am facing difficulties.
I think what you are referring to is known as overlays in the Google Maps API. Do you want to achieve something like this? (click to show overlay)
The polygons section in the Google Maps API documentation would be the place to go to learn more.
If there is a limited area (geographically) that you would like to color based on map tiles, then you could create a custom tile layer overlay for that area (with each tile colored appropriately).
You can read the documentation for Tile Layer Overlays, but the gist is that you create a GTileLayer object, then set a property on that object with a function, getTileUrl, that is called when Google maps need to insert a tile in Google Maps.
In your getTileUrl function, you can return your own version of the tile (which you can draw with a colored tint based on the origional tile):
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/origional_tile_with_colored_tint.png";
};
Once you have a a GTileLayer object, you instantiate a GTileLayerOverlay (passing in your GTileLayer) and add it to the GMap2 object (with the addOverlay method).
You can find an example of this here.