Dear Friends,
Can we add cloudPopup using javascript for MarkerOverlay.
I added markers using markerOverlay. In that can we add cloud popup on click of the each markers.
Thanks
Raja
CloudPopup Using Javascipt
Raja,
Yes, we can.
Supposing that you are using SimpleMarkerOverlay, and you could add cloud popup in click event of every marker. Please refer to the sample code in the attachment. After you have added it to popup collection of map, and the it will show the popup when mouse over the maker.
Thanks,
Khalil
Markers.zip (2.71 KB)
Khalil Thanks you very much.
By your solution we increased the performance of map rentering. Previously we used the normal popup which inturn increase the size of the json and got error while no.of markers get increased. You gave us a great relief.
1. But we used a function when we click on the markers. Now I can't run the function due to the popup is assigned on the marker click. Is there any solution to get the right click event like marker click.
2. when I click the marker, the popup tip starts on the top-left corner of the marker.How do I place it on center of the marker?
Thanks.
Raja
Raja,
We faced the same challenge and by accident found a JavaScript library of functions compatible with ThinkGeo at openlayers.org. I encourage you to take a look at this.
We used some of their JavaScript methods to implement popups. Please go to mapexsa.com. The site is still under construction, but we have a rudimentary search function that displays popups. Enter Hotel in the search box and click on the magnifying glass and you will see what I mean.
Take a look at the attached code to see how we implemented. We are still trying to figure out how to use the function zoomToExtent(bounds, closest) to automatically determine the extent. If you figure it out, let us know. For the time being we are using MainMap.panTo(new OpenLayers.LonLat(list[0][‘Lon’], list[0][‘Lat’])); where Lon and Lat correspond to the first marker. MainMap, by the way, is a reference to the ThinkGeo map control.
Code:
function addMarkerOnMap(response) {
var list = eval(’(’ + response.d + ‘)’);
var ll, popupClass, popupContentHTML;
var SearchOptionVal = $(‘select#drpSearchOptions’).val();
markers.clearMarkers();
$(’#SearchText’).text(’ ‘);
$(’#SearchText’).removeClass();
$(’#OtherResultText’).text(’ ‘);
$(’#OtherResultText’).removeClass();
if (list.length == 0) {
$(’#SearchText’).text(setNoResultText()).addClass(‘norecordtext’);
return;
}
$.each(list, function(i) {
if (SearchOptionVal == 3) {
if (i == 0) {
ll = new OpenLayers.LonLat(this[‘Lon’], this[‘Lat’]);
popupClass = OpenLayers.Popup.FramedCloud;
popupContentHTML = ‘’ + this[‘DisplayText’] + ‘’;
$(’#SearchText’).append("" +
“” + (i + 1) + “”
+ this[‘DivText’] + “
”);
var feature = addMarker(ll, popupClass, popupContentHTML, true, true, (i + 1));
$("#Marker" + (i + 1)).click(function() {
if (feature.popup == null) {
feature.popup = feature.createPopup(feature.closeBox);
MainMap.addPopup(feature.popup);
feature.popup.show();
} else {
feature.popup.toggle();
}
currentPopup = feature.popup;
OpenLayers.Event.stop(evt);
});
if (list.length > 1) {
$(’#OtherResultText’).text(myLang.Mean).append("
").addClass(‘norecordtext’);
}
}
else {
$(’#OtherResultText’).append("" + this[‘DivText’] + “
”).bind(‘click’, function() {
//alert(this[‘DivText’]);
});
}
} else {
ll = new OpenLayers.LonLat(this[‘Lon’], this[‘Lat’]);
popupClass = OpenLayers.Popup.FramedCloud;
popupContentHTML = ‘’ + this[‘DisplayText’] + ‘’;
$(’#SearchText’).append("" +
“” + (i + 1) + “”
+ this[‘DivText’] + “
”);
var feature = addMarker(ll, popupClass, popupContentHTML, true, true, (i + 1));
$("#Marker" + (i + 1)).click(function() {
if (feature.popup == null) {
feature.popup = feature.createPopup(feature.closeBox);
MainMap.addPopup(feature.popup);
feature.popup.show();
} else {
feature.popup.toggle();
}
currentPopup = feature.popup;
OpenLayers.Event.stop(evt);
});
}
Al Vigil
Hi, Raja
If you want to add cloud popup on right click of each marker, and you need to register mousedown event on marker and judge whether the right click is triggered. Please see the attached code for full detail.
For the position of popup, and it will be adjusted dynamically depending on the size of your window and position of marker. For example, if the marker is right at the upper-left corner, and the popup will be displayed on the right-bottom corner of the marker.
If you have additional questions, please let us know.
Thanks,
Khalil
UseDraggableMarkers.zip (2.88 KB)
Hi Khalil.
I attached the image for your reference.
Check the image,the tip of the popup shows left end of the marker not exactly on the marker. Can I make it on the left top of the image.
Is there any script for control+click ? I want to raise a event when I do control+click.
Thanks
Raja.
Endpoint_click.JPG (4.92 KB)
Hi, Raja
If you just want to trigger the event by ctr+click, and only a very small number of changes needed. Please replace your OnMapCreated function with below one:
var OnMapCreated = function (map) {
// MarkerOverlay is the id for your SimpleMarkerOverlay
var markerOverlay = map.getLayer('MarkerOverlay');
for (var i in markerOverlay.markers) {
var marker = markerOverlay.markers;
marker.events.register('click', marker, function (evt) {
if (evt && evt.ctrlKey) {
var id = this.id;
// Add your popup like the code below:
AddPopup(this, id, this.lonlat.lon, this.lonlat.lat);
}
});
}
}
For your attached image and I can’t see it clearly. In fact, the position of Popup change dynamically, and it always stays in the four relative positions("tl", "tr", "bl", "br"). You can see the result from the attached screenshots.
Thanks,
Khalil
PopupRelativePositions.zip (472 KB)