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 .
Related
I'm using Leaflet jS for a map and it works well except for a requirement to popup the name of the country when hovering over a country on the map.
On using the following code
layer.on({
mouseover: function over(e) {
layer.bindPopup(L.popup().setContent(feature.properties.name));
layer.openPopup();
},
mouseout: function out(e) {
layer.closePopup();
},
});
The Country name does pop up however it's slightly off in int's location. For example the US when hovered over the popup opens in the Pacific west of Mexico. All popups are slightly off from where the hover has occurred.
Do you know how the popups can be set to popup always directly on the country?
Thanks in advance for any help on this.
While not explicitly documented, when you bindPopup on a Leaflet path (vector) Layer, it will position the popup tip on the Layer "center", i.e. the middle compared to its bounds.
In your case with USA, the Layer is probably a multipolygon that includes Hawaii. That shifts the Layer bounds far to the South West, leading to a layer "center" off Mexico.
You could compute a more sensible "center" for your use case, and set the popup position explicitly on map rather than binding it to a Layer (center).
However you will probably in some cases (typically for small Layers) hit the classic usability issue of blinking mouseover popup: if the popup is open under the mouse, a mouseout event fires, which closes your popup. Then a new mouseover event fires, which opens a new popup, etc.
The usual workaround is to use a Leaflet Tooltip instead, for which you do not need to implement the mouseover/mouseout stuff yourself. And you can use the sticky option to position it next to the mouse cursor, to get rid of any center computation.
If true, the tooltip will follow the mouse instead of being fixed at the feature center.
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'm working with D3+leaflet and have a question - my SVG elements seem to disappear outside the scope of the map frame when I zoom in. Meaning, that when I zoom in the map, and then drag to a different frame, the SVG elements aren't loaded. So i'd like to execute a map.on( ) function for drag events but I'm having trouble.
So for when you zoom in, replotting the SVGs work fine with the map.on("viewreset") - but map.on("drag") or map.on("dragend") seems to have no effect.
var cheat_function = function() { reset(data); drawHour( orderedColumns[currentFrame] )};
map.on("viewreset", cheat_function);
map.on("dragend", cheat_function)
The contents inside cheat_function just do stuff like recalculating the coordinates and redrawing the SVGs.
Any ideas or hacks? thanks guys.
Try with the moveend event:
Fired when the view of the map stops changing (e.g. user stopped
dragging the map).
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).
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.