Buondì, sto cercando di mostrare al click su una feature un popup con i dati
tabellari della feature selezionata. Purtroppo non riesco a far comparire il popup sulla feature e nemmeno a chiuderlo. Compare in basso a sinistra come vedete dall'immagine. Come posso farlo comparire nella giusta posizione? In Leaflet i popup sono molto più semplici da gestire e configurare, in OL li ho sempre trovati molto ostici ed alla fine ho sempre ripiegato sul sidebar ma ora mi serve un popup. Su GIST ho caricato il codice che ho usato[0] e qui[1] trovate il geojson da cui attingere le informazioni. <http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/file/t395848/Schermata_del_2018-06-02_19-44-50.png> PS: non fate caso ai dati null, mancano ed il risultato è corretto ______________- [0] https://gist.github.com/MaxDragonheart/9c383c4d08dfdd0d86018778a1e77f45 [1] http://massimilianomoraca.it/download/test/edificato.geojson ----- Ingegnere, consulente GIS e ciclista urbano -- Sent from: http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/ _______________________________________________ [hidden email] 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
Consulente GIS, Formatore, Blogger e Ciclista Urbano
email: info@massimilianomoraca.it
cell: 333 5949583 (lun-ven, 9.00-18.00)
website: massimilianomoraca.it
|
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 <[hidden email]>: > http://openlayers.org/en/latest/examples/popup.html > _______________________________________________ [hidden email] 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
Consulente GIS, Formatore, Blogger e Ciclista Urbano
email: info@massimilianomoraca.it
cell: 333 5949583 (lun-ven, 9.00-18.00)
website: massimilianomoraca.it
|
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 <[hidden email]> Inviato: domenica 3 giugno 2018 13:04 A: Tiscali <[hidden email]> Cc: GFOSS.it <[hidden email]> 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 <[hidden email] <mailto:[hidden email]> >: http://openlayers.org/en/latest/examples/popup.html _______________________________________________ [hidden email] 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 |
no, scusa, non c’entra, ci riguardo e se capisco meglio ti dico 😊
-----Messaggio originale----- Da: Gfoss <[hidden email]> Per conto di [hidden email] Inviato: lunedì 4 giugno 2018 12:31 A: 'Massimiliano Moraca' <[hidden email]> Cc: 'GFOSS.it' <[hidden email]> 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 < <mailto:[hidden email]> [hidden email]> Inviato: domenica 3 giugno 2018 13:04 A: Tiscali < <mailto:[hidden email]> [hidden email]> Cc: GFOSS.it < <mailto:[hidden email]> [hidden email]> 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 < <mailto:[hidden email]%20%3cmailto:[hidden email]> [hidden email] <mailto:[hidden email]> >: <http://openlayers.org/en/latest/examples/popup.html> http://openlayers.org/en/latest/examples/popup.html _______________________________________________ <mailto:[hidden email]> [hidden email] <http://lists.gfoss.it/cgi-bin/mailman/listinfo/gfoss> 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 _______________________________________________ [hidden email] 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 |
Ciao ok, grazie :)
Il lun 4 giu 2018, 12:37 <[hidden email]> ha scritto: > no, scusa, non c’entra, ci riguardo e se capisco meglio ti dico 😊 > > > > -----Messaggio originale----- > Da: Gfoss <[hidden email]> Per conto di > [hidden email] > Inviato: lunedì 4 giugno 2018 12:31 > A: 'Massimiliano Moraca' <[hidden email]> > Cc: 'GFOSS.it' <[hidden email]> > 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 <[hidden email]> > > Inviato: domenica 3 giugno 2018 13:04 > > A: Tiscali <[hidden email]> > > Cc: GFOSS.it <[hidden email]> > > 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 <[hidden email] > <mailto:[hidden email]> >: > > > > http://openlayers.org/en/latest/examples/popup.html > > > > > > _______________________________________________ > > [hidden email] > > 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 > [hidden email] 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
Consulente GIS, Formatore, Blogger e Ciclista Urbano
email: info@massimilianomoraca.it
cell: 333 5949583 (lun-ven, 9.00-18.00)
website: massimilianomoraca.it
|
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 <[hidden email] > <mailto:[hidden email]>> ha scritto: > > no, scusa, non c’entra, ci riguardo e se capisco meglio ti dico 😊 > > -----Messaggio originale----- > Da: Gfoss <[hidden email] > <mailto:[hidden email]>> Per conto di > [hidden email] <mailto:[hidden email]> > Inviato: lunedì 4 giugno 2018 12:31 > A: 'Massimiliano Moraca' <[hidden email] > <mailto:[hidden email]>> > Cc: 'GFOSS.it' <[hidden email] <mailto:[hidden email]>> > 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 <[hidden email] > <mailto:[hidden email]>> > > Inviato: domenica 3 giugno 2018 13:04 > > A: Tiscali <[hidden email] > <mailto:[hidden email]>> > > Cc: GFOSS.it <[hidden email] <mailto:[hidden email]>> > > 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 <[hidden email] > <mailto:[hidden email] > <mailto:[hidden email]%20%3cmailto:[hidden email]>> > >: > > http://openlayers.org/en/latest/examples/popup.html > > _______________________________________________ > > [hidden email] <mailto:[hidden email]> > > 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 > _______________________________________________ [hidden email] 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 |
Ciao si funziona, grazie :)
Al di là del fatto che non facessi uso di ol.overlay ho visto che sbagliavo anche ad impostare il map.on. Se uso tutto il codice in un solo file html funziona ma se cerco di ricreare la struttura dei miei progetti no. Ti allego una immagine che riassume come gestisco le webmap <http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/file/t395848/schema.png> Quando cerco di riprodurla inserendo il popup(parte in verde) nel momento in cui clicco mi compare il messaggio "TypeError: map.on is not a function[Learn More] popup.js:53:1 <anonymous> http://localhost/dev/OpenLayers4/In_sviluppo/parete/webmap/test/js/popup.js:53:1 " La webmap funziona bene a parte il fatto che non compare il popup. Secondo te dove sbaglio? ----- Ingegnere, consulente GIS e ciclista urbano -- Sent from: http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/ _______________________________________________ [hidden email] 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
Consulente GIS, Formatore, Blogger e Ciclista Urbano
email: info@massimilianomoraca.it
cell: 333 5949583 (lun-ven, 9.00-18.00)
website: massimilianomoraca.it
|
Forse il codice del popup viene caricato PRIMA del codice della map?
Amefad Il giorno 5 giugno 2018 10:16, Massimiliano Moraca < [hidden email]> ha scritto: > Ciao si funziona, grazie :) > > Al di là del fatto che non facessi uso di ol.overlay ho visto che sbagliavo > anche ad impostare il map.on. > > Se uso tutto il codice in un solo file html funziona ma se cerco di > ricreare > la struttura dei miei progetti no. Ti allego una immagine che riassume come > gestisco le webmap > <http://gfoss-geographic-free-and-open-source-software- > italian-mailing.3056002.n2.nabble.com/file/t395848/schema.png> > > Quando cerco di riprodurla inserendo il popup(parte in verde) nel momento > in > cui clicco mi compare il messaggio > "TypeError: map.on is not a function[Learn More] popup.js:53:1 > <anonymous> > http://localhost/dev/OpenLayers4/In_sviluppo/parete/webmap/test/js/popup. > js:53:1 > " > > La webmap funziona bene a parte il fatto che non compare il popup. Secondo > te dove sbaglio? > > ----- > Ingegnere, consulente GIS e ciclista urbano > -- > Sent from: http://gfoss-geographic-free-and-open-source-software- > italian-mailing.3056002.n2.nabble.com/ > _______________________________________________ > [hidden email] > 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 > [hidden email] 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 |
In reply to this post by Massimiliano Moraca
suppongo proprio che il problema stia nel fatto che nel codice che chiami "popup.js" ci sia una variabile chiamata "map" che non è mai stata dichiarata in quel codice, ma solo nel "main.js".
Dovresti a mio avviso togliere il map.on dal popup.js e gestirlo dal main.js -----Messaggio originale----- Da: Gfoss <[hidden email]> Per conto di Massimiliano Moraca Inviato: martedì 5 giugno 2018 10:16 A: [hidden email] Oggetto: Re: [Gfoss] R: Openlayers 4: Popup sulle feature Ciao si funziona, grazie :) Al di là del fatto che non facessi uso di ol.overlay ho visto che sbagliavo anche ad impostare il map.on. Se uso tutto il codice in un solo file html funziona ma se cerco di ricreare la struttura dei miei progetti no. Ti allego una immagine che riassume come gestisco le webmap <http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/file/t395848/schema.png> Quando cerco di riprodurla inserendo il popup(parte in verde) nel momento in cui clicco mi compare il messaggio "TypeError: map.on is not a function[Learn More] popup.js:53:1 <anonymous> http://localhost/dev/OpenLayers4/In_sviluppo/parete/webmap/test/js/popup.js:53:1 " La webmap funziona bene a parte il fatto che non compare il popup. Secondo te dove sbaglio? ----- Ingegnere, consulente GIS e ciclista urbano -- Sent from: http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/ _______________________________________________ [hidden email] 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 _______________________________________________ [hidden email] 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 |
Si ci avevo provato portando quel blocco con map.on infondo a main.js ma al
click sulla geometria mi compare questo errore: " TypeError: info is null[Learn More] popup.js:42:82 displayFeatureInfo http://localhost/dev/OpenLayers4/In_sviluppo/parete/webmap/test/js/popup.js:42:82 <anonymous> http://localhost/dev/OpenLayers4/In_sviluppo/parete/webmap/test/js/main.js:130:5 b https://openlayers.org/en/v4.6.5/build/ol.js:46:348 Sc.prototype.b https://openlayers.org/en/v4.6.5/build/ol.js:49:206 k.bi https://openlayers.org/en/v4.6.5/build/ol.js:129:352 b https://openlayers.org/en/v4.6.5/build/ol.js:46:348 Sc.prototype.b https://openlayers.org/en/v4.6.5/build/ol.js:49:206 ce/a.j< https://openlayers.org/en/v4.6.5/build/ol.js:71:882 <anonymous> self-hosted:982:17 " La riga indicata in popup.js è quella che inizia con l'ultimo "tr" della tabella che contiene i contenuti del popup, mentre la riga di main.js coincide con quella di "displayFeatureInfo" di map.on ----- Ingegnere, consulente GIS e ciclista urbano -- Sent from: http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/ _______________________________________________ [hidden email] 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
Consulente GIS, Formatore, Blogger e Ciclista Urbano
email: info@massimilianomoraca.it
cell: 333 5949583 (lun-ven, 9.00-18.00)
website: massimilianomoraca.it
|
Piccolo aggiornamento.
Non credo che il problema del messaggio "popup is null...."(come test ho cambiato info in popup) dipenda dal fatto che qualcosa non torna nella distribuzione dei .js. Ho infatti riportato tutto il contenuto dei file nella pagina html principale ed il messaggio di errore compare lo stesso quando si clicca su una geometria. Per il resto la webmap funziona. Non vorrei che la problematica fosse dovuta al fatto che rispetto all'esempio con cui ho iniziato questa discussione ho 3 geojson in più. ----- Ingegnere, consulente GIS e ciclista urbano -- Sent from: http://gfoss-geographic-free-and-open-source-software-italian-mailing.3056002.n2.nabble.com/ _______________________________________________ [hidden email] 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
Consulente GIS, Formatore, Blogger e Ciclista Urbano
email: info@massimilianomoraca.it
cell: 333 5949583 (lun-ven, 9.00-18.00)
website: massimilianomoraca.it
|
Free forum by Nabble | Edit this page |