I am building an online map app, using Openlayers, which enables popup information by clicking on features. The info was brought by wms getfeatureinfo.
I wonder if there is a simple way to change the mouse cursor to, say, hand when the mouse hovers over the selectable feature. This is to help users identify that the features are clickable and info can be retrieved.
The attached is my current code. Thanks!
shelter_info = new OpenLayers.Control.WMSGetFeatureInfo ({
url:"****",
title: 'Identify evacuation centres by clicking',
layers:[evacuation_center],
queryVisible: true,
hover: true,
eventListeners:{
getfeatureinfo: function(event){
if (event.text.indexOf("<b>") != -1){ //only display popup when selected the WMS object.
var popup = new OpenLayers.Popup.FramedCloud(
"shelter_popup",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true,
null
);
popup.autoSize = true;
popup.minSize = new OpenLayers.Size(180,180);
//feature.popup = popup;
map.addPopup(popup);
}
}
}
});
Related
I'm working on Mapbox Studio Tutorial and practicing adding interactivity on POIs on map.
https://docs.mapbox.com/help/tutorials/add-points-pt-3/
map.on('click', (event) => {
// If the user clicked on one of your markers, get its information.
const features = map.queryRenderedFeatures(event.point, {
layers: ['layer1',"layer2","layer3"]
});
if (!features.length) {
return;
}
const feature = features[0];
/*
Create a popup, specify its options
and properties, and add it to the map.
*/
const popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML(
`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
)
.addTo(map);
});
The error I get is that the title of POIs from layer2 and layer3 is shown as "undefined" while layer1's title can be shown when clicking it on the map.
I think "undefined" comes because the title is not stored in the feature property but have no clear idea how to do that correctly.
I tried some codes I got from the internet such as below:
if (features.length > 0) {
// Loop feature and concatenate property as HTML strings
let propertiesHTML = '';
features.forEach(feature => {
Object.entries(feature.properties).forEach(([key, value]) => {
propertiesHTML += `<p><strong>${key}:</strong> ${value}</p>`;
});
});
// Create and add a popup
const popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(features[0].geometry.coordinates)
.setHTML(propertiesHTML)
.addTo(map);
With code at least map is shown, but there is no interactive popup shown when I click it.
I am using the WMSGetFeatureInfo control to retrieve feature attributes from geoserver and display in popups.
I've setup the proxyhost at localhost and the popup is working fine now. I am using eventListeners.
After it executes the last line, map.addPopup(popup), the layout of the html file changes as shown in the attached images.
The codes is as below:
shelter_info = new OpenLayers.Control.WMSGetFeatureInfo ({
url:"http://130.95.44.145:8080/geoserver/Bushfire_Com_Study/wms",
title: 'Identify features by clicking',
layers:[evacuation_center],
queryVisible: true,
hover: true,
eventListeners:{
getfeatureinfo: function(event){
//only display popup when selected the WMS object
if (event.text.indexOf("<table class=\"featureInfo\">") != -1) {
var popup = new OpenLayers.Popup.FramedCloud(
"shelter_popup",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true,
null
);
popup.autoSize = true;
popup.minSize = new OpenLayers.Size(180,180);
map.addPopup(popup);
}
}
}
});
Before adding popups:
After adding popups:
I have done point layer overlay with openlayer. Whenever i click any point, its showing me all the data of the table in popup. How to control amount of data in the popup?
Code is:
....
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://localhost:8080/geoserver/layername/wms', // geoserver point layer
title: 'Identify features by clicking',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event) {
map.addPopup(new OpenLayers.Popup.FramedCloud(
"ABCD",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true
));
}
}
});
map.addControl(info);
info.activate();
Screenshot of current popup is
()
I just want location_name and some html content in popup. How to do that?
The SelectFeature method in Control class provides a way of adding and removing popups on the Vector layer by listening to events featureselected and featureunselected respectively. Below shows a sample code that I obtained from an example in the openlayers website:
// create the layer with listeners to create and destroy popups
var vector = new OpenLayers.Layer.Vector("Points",{
eventListeners:{
'featureselected':function(evt){
var feature = evt.feature;
var popup = new OpenLayers.Popup.FramedCloud("popup",
OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
null,
"<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: </div>",
null,
true
);
feature.popup = popup;
map.addPopup(popup);
},
'featureunselected':function(evt){
var feature = evt.feature;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
});
vector.addFeatures(features);
// create the select feature control
var selector = new OpenLayers.Control.SelectFeature(vector,{
hover:true, # this line
autoActivate:true
});
The code above will allow a popup to be shown upon mouseover on the Geometry object (icon or marker on the map). If the line hover:true is removed, the popup will be shown only upon a mouse click on the Geometry object.
What I want, is to be able to display one type of popup (example, an image plus a title) upon mouseover and another type (example, detailed description) upon a mouse click. I am not sure how this could be done. Some help would be much appreciated. Thanks.
Also, there another way, it's rather hack than correct usage of API, but seems to work. You can overwrite over and out callbacks.
var selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, {
callbacks: {
over: function(feat) {
console.log('Show popup type 1');
},
out: function(feat) {
console.log('Hide popup type 1');
}
},
eventListeners: {
featurehighlighted: function(feat) {
console.log('Show popup type 2');
},
featureunhighlighted: function(feat) {
console.log('Hide popup type 2');
}
}
});
Here's working example: http://jsfiddle.net/eW8DV/1/
Take a look on select control's source to understand details.
I use Bing Maps Ajax V7. I want on right click to get an infobox and show my links inside.
function GetMap(){
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:""});
attachrightclick = Microsoft.Maps.Events.addHandler(map, 'rightclick',showPopupMenu);
}
function showPopupMenu(e){
var latlong = new Microsoft.Maps.Location(e.getY(),e.getX());
var defaultInfobox = new Microsoft.Maps.Infobox(latlong, {title: '<div>My Pushpin<div>', visible: true} );
map.entities.push(defaultInfobox);
}
Infobox added but unfortunately have no sense with to point I clicks... I adds on other latlon...
Have a anyone an idea:
1)How to make info window load on position where I right click.
2)Disable default right click of browser so only shows info box and not and right click menu
Thanks a lot.
Question number 1:
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
pushpinClick= Microsoft.Maps.Events.addHandler(pushpin, 'rightclick', displayEventInfo);
map.entities.push(pushpin);
function displayEventInfo(e){
var pushpin = e.target;
var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
var defaultInfobox = new Microsoft.Maps.Infobox(pushpin.getLocation(), infoboxOptions );
map.entities.push(defaultInfobox);
defaultInfobox.setHtmlContent('html content goes here!');
}
Question number 2:
<body oncontextmenu="return false">
...
</body>