I need a popup to be opened when clicking on the features of a vector layer. I used the Vector Icon Example as starting point. My problem is that when a feature is covered by the popup, you can still click it (Fiddle-Demo: click the lower point and you can click the upper one through the popup). How can prevent this behavior?
Relevant code:
map.on('click', function(evt) {
var element = popup.getElement();
$(element).popover({
"placement": "top",
"html": true
});
var popover = $(element).data("bs.popover");
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return feature;
});
if (feature) {
popup.setPosition(feature.getGeometry().getCoordinates());
popover.options.content = feature.get("name");
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
Set stopEvent: true to your ol.Overlay object, as such:
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: true
});
See your updated Fiddle demo.
Related
This code fine work in all browser, except firefox browser.
Event click don't work.
var marker = new RichMarker({
position: new google.maps.LatLng( _latitude, _longitude ),
map: map,
draggable: draggableMarker,
content: markerContent,
flat: true
});
google.maps.event.addListener(marker, "click", function(event) {
alert(this.position);
});
How I can fix that? Thx.
The issue seems to be line 615 of http://googlemaps.github.io/js-rich-marker/src/richmarker.js
this.markerWrapper_.setCapture(true);
When you add a click-listener to a marker internally the click-event will be triggered when you click on the content of the marker. With the above line the click-event will fire for the wrapper of the content only(happens when a marker is draggable).
You'll need to modify the function addDraggingListeners_, set it to:
RichMarker.prototype.addDraggingListeners_ = function() {
var that = this;
this.draggingListeners_ = [
google.maps.event.addDomListener(window, 'mousemove', function(e) {
that.drag(e);
}, true),
google.maps.event.addDomListener(window, 'mouseup', function() {
that.stopDrag();
}, true)
];
};
My project is related with gps and tracking system. I draw geofences on google maps api v3 with drawingManager. And i need a button, clicking on which it will be show/hide all drawingManager figures. In my project i also use angularJS. I have 2 different directives. In 1-st i declare drawingManager
var polyOption = {
fillColor: '#ffff00',
fillOpacity: 0.4,
strokeWeight: 1,
clickable: true,
editable: true,
zIndex: 1
};
drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
circleOptions: polyOption,
rectangleOptions: polyOption,
polygonOptions: polyOption,
polylineOptions: polyOption,
});
scope.geozonesConfig.tempDrawManagerVar = true;
scope.geozonesConfig.tempDrawManagerHide = false;
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// To hide:
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
scope.$apply (function () {
scope.geozonesConfig.showGeozoneConfig = true;
});
});
setSelection(newShape);
});
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
buildColorPalette();
there is my button. i used ng-click:
<i class="icon-globe"></i>
`and my function is located into another directive:
scope.onGeozoneClick = function () {
alert('Show/Hide all figures');
};
How can i show/hide these drawingManager figures? Thanks.
EDIT: Update from OP's reply as an Answer
How can i do it in js? I dont know how to refer to my figures. And there is no any method in google maps api for these figures, as i know. Now i tried to do it using visible property of figuresOptions:
var anchorShowHideFigure = true; var polyOption = {visible = anchorShowHideFigure };
and then i want change flag to false after click on button. If i will write in my 1-st directive:
function showHideDrawingFigures () { anchorShowHideFigure = false; };
in console i get: "showHideDrawingFigures is not definied". if i will write it into 2-nd directive i get: "anchorShowHideFigure is not definied" i get this, because my html file use 2-nd directive. sorry if i explained intricately –
Checkout ng-show & ng-hide directives for this.
Create one flag say showFigures, in $scope. For toggling the fla
$scope.onGeozoneClick = function () {
$scope.showFigures = false;
};
In HTML,
<div ng-show="showFigures"></div>
i am currently working with leaflet.
and i am trying to create a popup with with clickable content.
now i found how i can bind popups on click event with content:
marker.on('click', function(e){
marker.bindPopup("<div />").openPopup();
}
and i found out how to create the popup on hover:
marker.on('mouseover', function(e){
e.target.bindPopup("<div />").openPopup();
}});
marker.on('mouseout', function(e){
e.target.closePopup();
}});
now what i cant seem to do is make the popup stay open in order for the user to click on links inside the popup.
i would appreciate any help.
one approach is this http://jsfiddle.net/cxZRM/98/
basically it's adding a timer to your setup and you only close the popup after an arbitrarily long time has passed so as to give the user some time to interact on your div.
marker.on('mouseover', function(e){
e.target.bindPopup("dsdsdsdsd").openPopup();
start = new Date().getTime();
});
marker.on('mouseout', function(e){
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
if(time > 700){
e.target.closePopup();
}
});
a better approach would be to use http://jsfiddle.net/AMsK9/
to determine your mouse position and keep the popup open while the mouse is still within an area around the popup.
I had the same issue, I wanted a different pop up for mouseover and another one for click, and the problem was that when I hovered out the click pop up closed, so what I did was adding a flag:
var modal = true;
function onEachFeature(feature, Polygon)
{
if (feature.properties && feature.properties.popupContent && feature.properties.modal)
{
Polygon.on('mouseover', function (e) {
Polygon.bindPopup(feature.properties.popupContent);
this.openPopup();
modal = false;
});
Polygon.on('mouseout', function (e) {
if(!modal)
this.closePopup();
});
Polygon.on('click', function (e) {
modal = true;
Polygon.bindPopup(feature.properties.modal).openPopup();
});
}
}
I created a toggle switch in jQuery. If you click on a marker, a sidebar is sliding inside the screen, and when you click the same marker, it slides back. But, I have multiple markers on my screen, and if you click another marker, the animation continues to slide inside, so the sidebar is getting bigger. What I want is that when you click any marker, that the sidebar is staying the same size, but I cannot achieve it with what I tried myself. The code:
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
if(windowOpen)
{
sidebar.animate({
width: "-=300px"
}, 500, function()
{
console.log('complete');
});
windowOpen = false;
}
else
{
sidebar.animate({
width: "+=300px"
}, 500, function()
{
});
windowOpen = true;
}
});
Can anyone point me in the right direction?
Many thanks!
Looks like you haven't defined windowOpen outside of the eventHandler. Thus, on every click windowOpen is undefined leading to your else code being executed. Try this:
var windowOpen = false;
google.maps.event.addListener(marker, 'click', function() {
// your code
}
I am using Infobox with Google Map V3 (attached image). While clicking on Infobox, I want to go to a details page. But I am not able to add a click listener on the infobox. Here is the code I am using:
This is my infobox config:
var ib = new InfoBox({
alignBottom : true,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-125, -50),
zIndex: null,
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation:false
});
And I added listener to this infobox like this:
google.maps.event.addListener(ib, 'domready', function() {
if(Ext.get(ib.div_)){
Ext.get(ib.div_).on('click', function(){
console.log('test on click')
}, this);
Ext.get(ib.div_).on('mousedown', function(){
console.log('test on click')
}, this);
}
});
While enableEventPropagation = false, the event doesn't propagate to MAP but no event is working on the infobox.
While enableEventPropagation = true, the events (click, mousedown) works but clicking on other part of the infobox, it takes me to map or another marker.
Any idea how to solve this?
You need to add domready event to infobox's eventListener not to google maps' one. Only after infobox's html is on screen, you can bind event. To prevent multi event binding, close other infobox before you load a new one.
infobox= new InfoBox();
google.maps.event.addListener(marker, 'click', function() {
infobox.close();
infobox= new InfoBox({ ... });
infobox.open(map, this);
infobox.addListener("domready", function() {
$("#target").on("click", function(e) { /* do something */ });
});
});
You can attach a listener to whatever is the content of your InfoBox.
var boxText = document.createElement('div');
var myOptions = {
content: boxText,
...
}
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
boxText.setAttribute('onclick', 'alert("InfoBox clicked")');
Would that work for you ?