Hi,
I am trying to display a popup as Info window for my vector Layer but I am not getting any result.
Please have a look at my code below and suggest the way forward.
LongLat = [obj.longitude,obj.latitude];
siteLonLat = ol.proj.fromLonLat(LongLat);
var point = new ol.geom.Point([siteLonLat[0],siteLonLat[1]]);
var feature = new ol.Feature({
geometry: point,
properties : obj,
geometryName : 'Site'
});
vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);
// Create vector layer attached to the vector source.
vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
src: 'img/radio-tower.png'
}))
});
map.addLayer(vectorLayer);
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
var _geomproperties = feature.getProperties();
popup.setPosition(evt.coordinate);
//alert(_lineproperties.geometryName);
if(_geomproperties.geometryName == 'Site')
{
s = "<code>Link Name : " + _geomproperties.properties['site'] + "</code>"+
"<br><code>ES A : " + _geomproperties.properties['latitude'] + "</code>"+
"<br><code>ES B : " +_geomproperties.properties['longitude'] + "</code>";
}
$(element).popover({
'placement': 'top',
'html': true,
'title' : '<span class="text-info"><strong>Site Details...</strong></span> <button type="button" style="float:right">×</button>',
'content': s
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
$('.close').click(function() {
$(element).popover('destroy');
});
});
$(map.getViewport()).on('mousemove', function(e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
return true;
});
if (hit) {
document.getElementById('map').style.cursor = 'pointer';
} else {
document.getElementById('map').style.cursor = '';
}
});
Hi, I am trying to display a popup as Info window for my vector Layer but I am not getting any result. Please have a look at my code below and suggest the way forward. LongLat = [obj.longitude,obj.latitude]; siteLonLat = ol.proj.fromLonLat(LongLat);
var point = new ol.geom.Point([siteLonLat[0],siteLonLat[1]]); var feature = new ol.Feature({ geometry: point, properties : obj, geometryName : 'Site' });
$(map.getViewport()).on('mousemove', function(e) { var pixel = map.getEventPixel(e.originalEvent); var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return true; }); if (hit) { document.getElementById('map').style.cursor = 'pointer'; } else { document.getElementById('map').style.cursor = ''; } });