is there a way to click marker created by OpenLayers.Marker() to be able to redirect to another link.
i have tried
var marker = new OpenLayers.Marker(position, icon.clone());
marker.events.register("click", map, function(e) {
location.href = "http:www.google.com"
});
by doing so, i am able to have a click event when i click the marker and redirects me to www.google.com. But what i am interested to know is, am i able to set the url directly to the marker when i create the marker in the first place?
You should be able to add any property to your marker like this:
marker.URL = "http://www.google.com/";
Then your event handler can be written once like this:
function linkHandler(e) {
location.href = this.URL;
}
marker.events.register("click", marker, linkHandler);
Note that the "map" parameter in the marker.events.register call was changed to "marker".
Related
I have this code https://jsfiddle.net/delux123/62Lmskbx/11/ where user can draw circle, segment and arrow-segment. When each annotation is selected, there is a "delete" button available, which should normally delete the selected annotation.
But this does not works! I tried the following ways for removing them:
1 ) using thischart.currentAnnotation.destroy() will delete the annotation (works for all three types) but then all the further actions stops from working
document
.querySelectorAll('.highcharts-popup-annotations .deletebutton')[0]
.addEventListener(
'click',
function() {
thischart.currentAnnotation.destroy(); //this stops further drawing
thischart.annotationsPopupContainer.style.display = 'none';
}
);
2 ) using deletion by ID thischart.removeAnnotation(thischart.currentAnnotation.options.id) does not works, since the annotations are created dynamically and they do not have IDs assigned to them.
document
.querySelectorAll('.highcharts-popup-annotations .deletebutton')[0]
.addEventListener(
'click',
thischart.removeAnnotation(thischart.currentAnnotation.options.id); //this requires elements to have IDs (which they do not have)
thischart.annotationsPopupContainer.style.display = 'none';
}
);
For the second approach, I even tried to intersect the drawing and to assign a random string as an ID (since the reason that deletion by id does not works, is because the ID is undefined). So under navigation -> bindings I added the object:
circleAnnotation: {
start: function(e) {
var navigation = this.chart.options.navigation;
return this.chart.addAnnotation(
Highcharts.merge({
id: randomStr() //this is a method that generates random string
},
navigation
.annotationsOptions,
navigation
.bindings
.circleAnnotation
.annotationsOptions
)
);
}
}
The both approaches are not working.
You can pass a direct annotation object to the removeAnnotation method:
thischart.removeAnnotation(thischart.currentAnnotation);
Live demo: https://jsfiddle.net/BlackLabel/5ycf3s4o/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#removeAnnotation
I am trying to populate a Google map infowindow with content from a partial (via ajax) when the map marker is clicked.
apneadivings wiki post here has helped: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Adding-an-id-to-markers-and-access-them-later
I do have the id for the model instance I want to retrieve in the marker (from the source: "marker.json({ :id => user.id })"). But I cannot figure out how to use this to attach a listener to the markers click action, and then put the resulting HTML into the infowindow.
After you create your markers:
markers = handler.addMarkers(...);
_.each(markers, function(marker){
google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
$.get(expectedUrl)
.done(function(data){
//only you know how `data` is structured
var infowindow = new google.maps.InfoWindow({content: 'content' });
infowindow.open( handler.getMap(), marker.getServiceObject());
})
})
});
I have the following code:
for (var i=0; i<len; i++){
var benID = results.rows.item(i).ID;
$('#'+element_id).append(
"<li><a>"+results.rows.item(i).nombres+" "+results.rows.item(i).apellidos+'</a>'+
'Eliminar</li>');
$("."+page+"_dis_ben_"+benID).click(function(){
console.log("Item to disable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').addClass('ui-btn-inner-red');
$(this).removeClass(page+"_dis_ben_"+benID).addClass(page+"_enable_ben_"+benID);
});
$("."+page+"_enable_ben_"+benID).click(function(){
//NOT WORKING
console.log("Item to enable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').removeClass('ui-btn-inner-red');
$(this).removeClass(page+"_enable_ben_"+benID).addClass(page+"_dis_ben_"+benID);
});
}
I have a list that is split in two, the right part being a button, to accept or reject. What I am attempting to do is that the check button, when clicked changes color and becomes a delete button, also performs an action. That I have been successful at it.
Now th problem is that I want to get it back to a check button, but as it is dynamically created I it doesn't trigger when I click the "delete" icon or the *_enable_ben_*. I assume it is because when I create the event the class/element doesn't exist yet.
Do you have any ideas?
Use .on
http://api.jquery.com/on/
var selector = "."+page+"_enable_ben_"+benID;
$("#yourList").on("click", selector, function(event){
//Insert handler code
});
Found the solution to the last question in the comment right here in stackoverflow:
jQuery Mobile click events on dynamic list items
I'm using gmap4rails to draw a bunch of fairly complicated polygons that serve as district boundaries. I've got two things i would like help with:
Firstly, I want to associate an info window on click with these polygons. This is an example of my use-case: https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays
I've tried registering a click event handler in the gmap's callback but it doesn't work and I don't think it's the right approach.
Gmaps.map.callback = function()
{
console.log("'sup");
var infowindow = new google.maps.InfoWindow
({
content: 'you clicked me!',
suppressMapPan:true
});
google.maps.event.addListener(Gmaps.map.polygons[0], 'click', function()
{
console.log("the click event fired");
infowindow.open(map, Gmaps.map.polygons[0]);
});
}
Secondly, I'd like to be able to change the fill-color of these polygons via jquery on some user-events (user clicks a checkbox for example). How would I go about that using the gem?
Replace your method with:
Gmaps.map.callback = function()
{
console.log("'sup");
Gmaps.map.polygons[0].infowindow = new google.maps.InfoWindow
({
content: 'you clicked me!'
});
google.maps.event.addListener(Gmaps.map.polygons[0].serviceObject, 'click', function(event)
{
console.log("the click event fired");
infowindow = Gmaps.map.polygons[0].infowindow;
infowindow.setPosition(event.latLng);
infowindow.open(Gmaps.map.map);
});
}
And change this gem's js line to put true instead of false. I did set to false since I didn't like the cursor change. Anyway it should be in configuration options. Please create an issue on github so that I remember to fix it.
I'm using gmaps4rails sidebar function to allow jumping to individual marker on the map.
My question is:
how can I trigger the click event on the first sidebar item so the 1st marker's info window will be display by default?
You should just add a callback:
Gmaps.map.callback = function() {
var firstMarker = Gmaps.map.markers[0];
var map = Gmaps.map.map;
firstMarker.infowindow.open(map, firstMarker.serviceObject);
}
Be sure to put this callback after the gmaps helper in your view.