elcaiaimar

I' ve solved this problem with the next: if (feature) { var objeto = feature.getProperties(), propiedades; for (propiedades in objeto){ content.innerHTML += propiedades + ':' + objeto[propiedades] + "<br />"; } return container.style.display = 'block';} Now, when I click on the features, I obtain its info. It's great! But, there is one problem more, when I click in the first feature, everything is ok, but when I click in the second I get the info about the first one and the second one. It's a problem of duplicity. It happens the same if I click in the same feature: first time, ok; second time, info appears twice, and successively. How could I solve this problem? Thank you very much!

So, if I get this in console when I click on a feature: Object { geometry: Object, codimbornal: "B12", coorx: 725694.19931, coory: 4372192.91419, tipo: "RECTANGULAR PEQUENO", origen: "SIRA-II", observaciones: "Imbornal Pl. Ayuntamiento" } I should write something similar to the next? content.innerHTML = feature.getId() + ': ' + feature.get('codimbornal') + feature.get('coorx') + feature.get('coory')...etc It works but only for this feature. Other features have different elements and then it appears 'undefined' in the news elements. I think you are speaking about other thing right? I know I have to add something to my code but I don't know what Could you tell me what would I have to do if, for example, all my features only had one element? (This element would have a different name to each feature) Thank you very much!

Hello everybody! I'm working with openlayers 3 and I have several features, such as buildings, sewers, etc in my map. This features contain differents elements with values which have been put for me, such as name, coordinates, etc. My purpose was get this information of this features and I got it, but only in console.log. I want to visualize this information but in a innerHTML. I 've tried to put this in my code: if (feature) { content.innerHTML = feature.getProperties(); return container.style.display = 'block'; } getProperties get an object of all property names and values and returns an Object. More information here: http://openlayers.org/en/master/apidoc/ol.Feature.html?unstable=true#getProperties With this code, when I click on the features I obtain: [object Object]. But I could check with console.log that when I click on the features, info is ok: if (feature) { console.log(feature.getProperties()); return container.style.display = 'block'; } Another way to get information is change the code such as: if (feature) { content.innerHTML = feature.getId() + ': ' + feature.get('name'); return container.style.display = 'block'; } But it's not the correct way to do it because each feature has different data. So, my question is: How could I show the feature data? I mean, the same info which appears using console but with innerHTML or something similar. Thank you very much!

Ok, I almost got it. I have my js functions clear, but now, I need to diferenciate them from html file. In my js file I have two functions map.on('click', function(evt)that return the information with popup-content or popup-content1. Now, I want to introduce some argument in {% if %} so if the JS function returns popup-content, only shows the popup with the popup-content, and the same with popup-content1. Would anybody know how can I solve this?HTML CODE:<span style="width:900px; height:500px" id="map"> {% if %} <span id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <span id="popup-content"></span> </span> {% endif %} {% if %} <span id="popup1" class="ol-popup"> <a href="#" id="popup-closer1" class="ol-popup-closer"></a> <span id="popup-content1"></span> </span> {% endif %}</span>JS CODE:var content = document.getElementById(' popup-content');var content1 = document.getElementById('popup-content1');var closer = document.getElementById('popup-closer');var closer1 = document.getElementById('popup-closer1');button.addEventListener('click', function(e) { map.on('click', function(evt) { document.getElementById('popup-content').innerHTML = ''; var coordinate = evt.coordinate; var viewResolution = /** @type {number} */ (view.getResolution()); var url = pozos_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay.setPosition(coordinate); if (url) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url + '"></iframe>'; } container.style.display = 'block'; }), map.on('click', function(evt1) { document.getElementById('popup-content1').innerHTML = ''; var coordinate = evt1.coordinate; var viewResolution = /** @type {number} */ (view.getResolution()); var url1 = manzanas_src.getGetFeatureInfoUrl( evt1.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay1.setPosition(coordinate); if (url1) { document.getElementById('popup-content1').innerHTML = '<iframe seamless src="' + url1 + '"></iframe>'; } container1.style.display = 'block'; }) });

Url1 has information (about buildings) but when I click on the buildings on my map, I get a popup without information, and it should appear. Url has information too (about wells) and when I click on him, I obtain the correct information. But if I changed the code like that: button.addEventListener('click', function(e) { map.on('click', function(evt) { document.getElementById('popup-content').innerHTML = ''; var coordinate = evt.coordinate; var viewResolution = /** @type {number} */ (view.getResolution()); var url1 = manzanas_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay.setPosition(coordinate); if (url1) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url1 + '"></iframe>'; } container.style.display = 'block'; }) }); Now, I would obtain information about buildings, but no about wells

Hello justsomeguy! Well, I have a button inside of my map, and when I click him, I active my function. This is that when I click in my map, I get information. You can see this: http://openlayers.org/en/v3.0.0/examples/getfeatureinfo-tile.html. (Here, you don't have any button to activate getfeatureinfo) In my case, when I click on the map, I get a popup with the information. But now, I have two layers (with different information). As you can see in my code or in the example code, var url only have information about one layer (bold words): EXAMPLE: var url = wmsSource.getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857',{'INFO_FORMAT': 'text/html'}); MY CODE: var url = pozos_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); Now, I'm looking for that when I click on one layer (wells) on my map, I get information about this layer, and when I click on the other layer (buildings), I obtain information about this one. I've added var url1 because it has information about manzanas_src (buildings) and I've tried with if (url1)...to obtain it, but It doesn't works, I continue obtaining information about only one layer. I'm sure is not a good way, I'm novice in JS yet. You will have seen that the information go through popup-content. May be I would have to do a popup-content1 for the new information and have on the html: <span style="width:900px; height:500px" id="map"> <span id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <span id="popup-content"></span> <span id="popup-content1"></span> </span> </span> But using some if with some argument. I don't know, if you know it, please tell me. Thank you very much!

Hello, first I put my code: html: <span style="width:900px; height:500px" id="map"> <span id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <span id="popup-content"></span> </span> </span> JS: button.addEventListener('click', function(e) { map.on('click', function(evt) { document.getElementById('popup-content').innerHTML = ''; var coordinate = evt.coordinate; var viewResolution = /** @type {number} */ (view.getResolution()); var url = pozos_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); var url1 = manzanas_src.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); overlay.setPosition(coordinate); if (url) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url + '"></iframe>'; } if (url1) { document.getElementById('popup-content').innerHTML = '<iframe seamless src="' + url1 + '"></iframe>'; } container.style.display = 'block'; }) }); In this moment, with this code, I obtain information only about one var (url or url1). Url have information about wells and url1 about flats. In my html page I have a map with openlayers and when I click on wells I get its information but when I click on flats I dont obtain anything. I think the problem is in the if, I would have to difference them with some argument, but I don't know what would anybody know how could I solve this? If we need more information, please, tell me Thank you very much!

Hello, I'm trying to do a search function in my viewer. I would like if anybody have already done this before and if can help me. I want to put a street name (for example) in a searcher and then the viewer visualizes the street. I'm using Openlayers3 with js buttons . Thank you!

Ah ok, if is so complicated I think I will continue with another thing, Thank you a lot

I'm using overlayers from geoserver (open source server for sharing geospatial data) and baselayers with wms service directly. Is this the problem? What can I do to solve this? Thank you Ingolme, you are great!

I continue with an error, If I only have baselayers in my viewer, the save button works, but if I have overlayers too no. It apperars this error: SecurityError: The operation is insecure. I don't know why. How can I solve this? Thank you a lot!

woow! It works! you have saved me! Thank you very much Ingolme! )

Thank you Ingolme but my button is a variable, Here is all my code: ol.control.SearchFeatures = function(opt_options) { var options = opt_options || {}; var hiddenClassName = 'ol-unselectable ol-control search-features'; this.hiddenClassName = hiddenClassName; var shownClassName = hiddenClassName + ' shown'; this.shownClassName = shownClassName; var element = document.createElement('div'); element.className = hiddenClassName; var button = document.createElement('button'); element.appendChild(button); this.panel = document.createElement('div'); this.panel.className = 'panel'; element.appendChild(this.panel); var this_ = this; button.addEventListener('click', function() { map.once('postcompose', function(event) { var canvas = event.context.canvas; button.href = canvas.toDataURL('image/png'); button.download = 'mapa.png'; }); map.renderSync(); }, false); ol.control.Control.call(this, { element: element, target: options.target });};ol.inherits(ol.control.SearchFeatures, ol.control.Control);

Hello everybody, I'm doing a viewer with openlayers 3 and I would like to have a button which run a function. This function must save a png image of the viewer. I have seen an example in the ol3 website (http://openlayers.org/en/v3.0.0/examples/export-map.html) but here the button is in the html file. My objective is to have this button inside the viewer. At the moment I have the button into the map, but I fail writing the code, because when I click it, it doesn't work Here my code: button.addEventListener('click', function() { map.once('postcompose', function(event) { var canvas = event.context.canvas; href = canvas.toDataURL('image/png'); }); map.renderSync(); }, false); Anybody know where is the problem? Thank you very much.