cosi' funziona.
suppongo che il problema fosse: 1) non gestisci mai ol.Overlay (non lo
chiami, vedi esempio ufficiale ol); 2) non gestisci la chiusura (ci sono
sia il css che l'html ma manca la parte js)
fammi sapere se hai problemi, ciao!
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var maxExtent = [14.068, 40.911, 14.2339, 41.0039];
var boundary = ol.proj.transformExtent(maxExtent, 'EPSG:4326',
'EPSG:3857');
var center = ol.proj.transform([14.15, 40.95], 'EPSG:4326',
'EPSG:3857');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
var edificato = new ol.layer.Vector({
title: 'Edificato',
source: new ol.source.Vector({
url:
'https://cors-anywhere.herokuapp.com/http://massimilianomoraca.it/download/test/edificato.geojson',
format: new ol.format.GeoJSON(),
}),
zIndex: 1
});
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel,
function(feature) {
return feature;
});
var info = document.getElementById('popup-content');
if (feature) {
info.innerHTML =
'<div>' + '<table>' + '<thead><td scope="row"
align="center" colspan="2">Informazioni</td></thead>' + '<tbody>' +
'<tr><th scope="row" align="left" colspan="1">Destinazione d\'uso:
</th><td colspan="1" align="right">' + feature.get('dest_uso') +
'</td></tr>' + '<tr><th scope="row" align="left" colspan="1">Altezza
stimata: </th><td colspan="1" align="right">' + feature.get('altezza') +
' m</td></tr>' + '<tr><th scope="row" align="left" colspan="1">Volume
stimato: </th><td colspan="1" align="right">' + feature.get('volume') +
' m<sup>3</sup></td></tr>' + '</tbody>' + '</table>' + '</div>';
} else {
info.innerHTML = 'Clicca su un poligono per leggere le
statistiche';
}
};
/**
* Create the map.
*/
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url:
'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
crossOrigin: 'anonymous'
})
}),
edificato
],
overlays: [overlay],
target: 'map',
view: new ol.View({
extent: boundary,
center: center,
zoom: 2,
maxZoom: 20,
minZoom: 14,
})
});
/**
* Add a click handler to the map to render the popup.
*/
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
displayFeatureInfo(evt.pixel);
overlay.setPosition(coordinate);
});
On 04/06/2018 13:18, Massimiliano Moraca wrote:
Ciao ok, grazie :)
Il lun 4 giu 2018, 12:37 <umbertofili...@tiscali.it
<mailto:umbertofili...@tiscali.it>> ha scritto:
no, scusa, non c’entra, ci riguardo e se capisco meglio ti dico 😊
-----Messaggio originale-----
Da: Gfoss <gfoss-boun...@lists.gfoss.it
<mailto:gfoss-boun...@lists.gfoss.it>> Per conto di
umbertofili...@tiscali.it <mailto:umbertofili...@tiscali.it>
Inviato: lunedì 4 giugno 2018 12:31
A: 'Massimiliano Moraca' <massimilianomor...@gmail.com
<mailto:massimilianomor...@gmail.com>>
Cc: 'GFOSS.it' <gfoss@lists.gfoss.it <mailto:gfoss@lists.gfoss.it>>
Oggetto: [Gfoss] R: Openlayers 4: Popup sulle feature
Suppongo sia legato a un problema di coorindate.
probabilmente devi trasformare le coordinate di pixel nel sistema
giusto.
solo un suggerimento, dato che non riesco a darti supporto più
specifico.
Starei attento all’ultima parte dell’esempio linkato, dove si fa
una trasformazione:
/**
* Add a click handler to the map to render the popup.
*/
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
'</code>';
overlay.setPosition(coordinate);
});
Da: Massimiliano Moraca <massimilianomor...@gmail.com
<mailto:massimilianomor...@gmail.com>>
Inviato: domenica 3 giugno 2018 13:04
A: Tiscali <umbertofili...@tiscali.it
<mailto:umbertofili...@tiscali.it>>
Cc: GFOSS.it <gfoss@lists.gfoss.it <mailto:gfoss@lists.gfoss.it>>
Oggetto: Re: [Gfoss] Openlayers 4: Popup sulle feature
Proprio questo esempio ho usato, come puoi vedere anche dal codice
allegato. Ma il popup non va dove deve ed anche per questo ho
allegato il codice così magari se c'è un errore me lo fate notare...
2018-06-03 12:09 GMT+02:00 Tiscali <umbertofili...@tiscali.it
<mailto:umbertofili...@tiscali.it
<mailto:umbertofili...@tiscali.it%20%3cmailto:umbertofili...@tiscali.it>>
>:
http://openlayers.org/en/latest/examples/popup.html
_______________________________________________
Gfoss@lists.gfoss.it <mailto:Gfoss@lists.gfoss.it>
http://lists.gfoss.it/cgi-bin/mailman/listinfo/gfoss
Questa e' una lista di discussione pubblica aperta a tutti.
I messaggi di questa lista non hanno relazione diretta con le
posizioni dell'Associazione GFOSS.it.
796 iscritti al 28/12/2017
_______________________________________________
Gfoss@lists.gfoss.it
http://lists.gfoss.it/cgi-bin/mailman/listinfo/gfoss
Questa e' una lista di discussione pubblica aperta a tutti.
I messaggi di questa lista non hanno relazione diretta con le posizioni
dell'Associazione GFOSS.it.
796 iscritti al 28/12/2017
