[Valencia] Proyecto inquieto webmap interactivo+gráfico

Saludos,

He estado estos dos últimos fines de semana en el curso del CFP
OPENSTREETMAP, TILEMILL Y MAPPROXY: METODOLOGÍA MODERNA DE PUBLICACIÓN DE
CARTOGRAFÍA EN LA WEB, con Jorge y Pedro... una experiencia muy interesante
y provechosa. Ahora aprovecho que han insistido en que participemos en este
grupo y sé que está activo para hacer una consulta a ver si me podéis echar
una mano.

Tengo el proyecto de realizar un visor web con algunos de los resultados de
una investigación académica (una tesis doctoral), para facilitar la lectura
y comprensión de los datos. Básicamente consiste en un visor de mapas que
interactúe con un gráfico de dispersión, de manera que al clicar sobre un
objeto del mapa se seleccione el punto del gráfico que representa a ese
objeto. Como con un ejemplo se entenderá mejor, dejo el siguiente enlace
(http://maps.amsterdam.nl/FUNCTIEMIX/) en el que yo busco algo bastante
similar al Spacemate.

Tal como lo tengo pensado, necesitaría:

*(1)* Un mapa con:
-La capa vectorial (KML o GeoJSON) con las áreas.
-Una capa de ortofoto, o bien, una capa con los polígonos de la edificación
(esto sería distinto al enlace de ejemplo).

....Supongo que esto podría hacerse con Openlayers o con Leaflet, ¿alguna
preferencia entre ellas?

*(2)* Un gráfico de dispersión interactivo.

....¿alguna librería javascript recomendable?

*(3)* El código javascript que al seleccionar un área del mapa o un punto
del gráfico llevara el identificador que les une al otro elemento.

....de esto tengo algo hecho porque intenté hacer esto con las api de
googlemaps y de googlefusiontables hasta que al final descubrí que no era
posible.

¿Alguien aquí tiene experiencia en este tipo de cosas?

Muchas gracias!

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Proyecto-inquieto-webmap-interactivo-grafico-tp5135117.html
Sent from the Valencia mailing list archive at Nabble.com.

El 15 de abril de 2014, 13:37, sinorfavela <fircorreo@yahoo.es> escribió:

Saludos,

He estado estos dos últimos fines de semana en el curso del CFP
OPENSTREETMAP, TILEMILL Y MAPPROXY: METODOLOGÍA MODERNA DE PUBLICACIÓN DE
CARTOGRAFÍA EN LA WEB, con Jorge y Pedro... una experiencia muy interesante
y provechosa. Ahora aprovecho que han insistido en que participemos en este
grupo y sé que está activo para hacer una consulta a ver si me podéis echar
una mano.

Tengo el proyecto de realizar un visor web con algunos de los resultados de
una investigación académica (una tesis doctoral), para facilitar la lectura
y comprensión de los datos. Básicamente consiste en un visor de mapas que
interactúe con un gráfico de dispersión, de manera que al clicar sobre un
objeto del mapa se seleccione el punto del gráfico que representa a ese
objeto. Como con un ejemplo se entenderá mejor, dejo el siguiente enlace
(http://maps.amsterdam.nl/FUNCTIEMIX/) en el que yo busco algo bastante
similar al Spacemate.

Tal como lo tengo pensado, necesitaría:

*(1)* Un mapa con:
-La capa vectorial (KML o GeoJSON) con las áreas.
-Una capa de ortofoto, o bien, una capa con los polígonos de la edificación
(esto sería distinto al enlace de ejemplo).

Te recomiendo GeoJSON, es un formato bastante compacto que ofrece cualquier
servidor de mapas moderno (GeoServer, MapServer, etc).

....Supongo que esto podría hacerse con Openlayers o con Leaflet, ¿alguna
preferencia entre ellas?

Yo prefiero OpenLayers, tiene buena documentación y hay muchos ejemplos y
gente que sabe de ella. Hay hasta libros (fui revisor de [1] y es muy
recomendable). De todas formas en las Jornadas de SIG Libre de Girona María
Arias y Moisés Arcos (Geoinquietos sevillanos) prepararon una presentación
y artículo comparando ambas bibliotecas, te recomiendo ver la charla (hasta
que publiquen el vídeo tienes las diapos[2]) y leer el artículo[3].

*(2)* Un gráfico de dispersión interactivo.

....¿alguna librería javascript recomendable?

*(3)* El código javascript que al seleccionar un área del mapa o un punto
del gráfico llevara el identificador que les une al otro elemento.

....de esto tengo algo hecho porque intenté hacer esto con las api de
googlemaps y de googlefusiontables hasta que al final descubrí que no era
posible.

¿Alguien aquí tiene experiencia en este tipo de cosas?

Muchas gracias!

Esa parte tiene pinta de que con D3js lo podrías hacer bien. D3 no es
sencillo de usar, ojo. No es una librería para gráficas, es bastante más
genérico pero hay mucha gente usándola por lo que encontrarás montones de
ejemplos, tutoriales, etc. Tendrías que enlazar eventos en el mapa (del
control de selección) con el gráfico dibujado con D3.

Puede que exista alguna librería más concreta para tu caso pero yo no la
conozco.

[1]
https://www.packtpub.com/openlayers-create-gis-web-applications-cookbook/book

[2] http://delawen.github.io/siglibre/2014/code-combat/#/
[3]
http://www.sigte.udg.edu/jornadassiglibre/uploads/2014/articulos/art2.pdf
[4] http://d3js.org/

--
Jorge Sanz
http://www.osgeo.org
http://wiki.osgeo.org/wiki/Jorge_Sanz

Hola,

yo también estoy con Jorge en que D3 es una de las mejores opciones
hoy en día... cada día hay más ejemplos de mapas interactivos
espectaculares hechos con D3, te apunto tres direcciones que te
ayudarán a encaminar el asunto (si decides tirar por ahí)

http://bl.ocks.org/mbostock/4060606
http://techslides.com/d3-world-maps-tooltips-zooming-and-queue/
http://www.gislounge.com/maps-with-d3/

Me gustaría mucho que alguien que sepa (manquesea solo lo básico)
presentara D3 en geoinquietos...

¿alguien se anima a preparar una charla de 20 min que sea resumen de
las 3 webs anteriores?

Un saludo,

2014-04-16 9:47 GMT+02:00 Jorge Sanz <jsanz@osgeo.org>:

El 15 de abril de 2014, 13:37, sinorfavela <fircorreo@yahoo.es> escribió:

Saludos,

He estado estos dos últimos fines de semana en el curso del CFP
OPENSTREETMAP, TILEMILL Y MAPPROXY: METODOLOGÍA MODERNA DE PUBLICACIÓN DE
CARTOGRAFÍA EN LA WEB, con Jorge y Pedro... una experiencia muy
interesante
y provechosa. Ahora aprovecho que han insistido en que participemos en
este
grupo y sé que está activo para hacer una consulta a ver si me podéis
echar
una mano.

Tengo el proyecto de realizar un visor web con algunos de los resultados
de
una investigación académica (una tesis doctoral), para facilitar la
lectura
y comprensión de los datos. Básicamente consiste en un visor de mapas que
interactúe con un gráfico de dispersión, de manera que al clicar sobre un
objeto del mapa se seleccione el punto del gráfico que representa a ese
objeto. Como con un ejemplo se entenderá mejor, dejo el siguiente enlace
(http://maps.amsterdam.nl/FUNCTIEMIX/) en el que yo busco algo bastante
similar al Spacemate.

Tal como lo tengo pensado, necesitaría:

*(1)* Un mapa con:
-La capa vectorial (KML o GeoJSON) con las áreas.
-Una capa de ortofoto, o bien, una capa con los polígonos de la
edificación
(esto sería distinto al enlace de ejemplo).

Te recomiendo GeoJSON, es un formato bastante compacto que ofrece cualquier
servidor de mapas moderno (GeoServer, MapServer, etc).

....Supongo que esto podría hacerse con Openlayers o con Leaflet, ¿alguna
preferencia entre ellas?

Yo prefiero OpenLayers, tiene buena documentación y hay muchos ejemplos y
gente que sabe de ella. Hay hasta libros (fui revisor de [1] y es muy
recomendable). De todas formas en las Jornadas de SIG Libre de Girona María
Arias y Moisés Arcos (Geoinquietos sevillanos) prepararon una presentación y
artículo comparando ambas bibliotecas, te recomiendo ver la charla (hasta
que publiquen el vídeo tienes las diapos[2]) y leer el artículo[3].

*(2)* Un gráfico de dispersión interactivo.

....¿alguna librería javascript recomendable?

*(3)* El código javascript que al seleccionar un área del mapa o un punto
del gráfico llevara el identificador que les une al otro elemento.

....de esto tengo algo hecho porque intenté hacer esto con las api de
googlemaps y de googlefusiontables hasta que al final descubrí que no era
posible.

¿Alguien aquí tiene experiencia en este tipo de cosas?

Muchas gracias!

Esa parte tiene pinta de que con D3js lo podrías hacer bien. D3 no es
sencillo de usar, ojo. No es una librería para gráficas, es bastante más
genérico pero hay mucha gente usándola por lo que encontrarás montones de
ejemplos, tutoriales, etc. Tendrías que enlazar eventos en el mapa (del
control de selección) con el gráfico dibujado con D3.

Puede que exista alguna librería más concreta para tu caso pero yo no la
conozco.

[1]
https://www.packtpub.com/openlayers-create-gis-web-applications-cookbook/book
[2] http://delawen.github.io/siglibre/2014/code-combat/#/
[3]
http://www.sigte.udg.edu/jornadassiglibre/uploads/2014/articulos/art2.pdf
[4] http://d3js.org/

--
Jorge Sanz
http://www.osgeo.org
http://wiki.osgeo.org/wiki/Jorge_Sanz

_______________________________________________
Valencia mailing list
Valencia@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/valencia

--
Pedro-Juan Ferrer Matoses
Valencia (España)

Gracias por vuestros comentarios,

y... no os lo toméis a mal, pero de momento mi inquietud me está llevando a
desoír algunos de los consejos.

He estado trasteando un poco con D3 para montar el gráfico y, como decía
Jorge, no es fácil de primeras. Hay varios tutoriales de aprendizaje y, en
ellos se puede ver que hay mil maneras de hacer lo mismo. Para mi gráfico de
dispersión he conseguido primeros resultados gracias a este tuto:
http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/

D3 trabaja consultando datos (lo puede hacer de diversas fuentes y formatos)
que utiliza para crear SVG (scalable vector graphics). Cómo conviertas eso
en una gráfico o un mapa ya depende de tí... lo que lo hace un poco cuesta
arriba al principio.

Mi problema es que a este proyecto le puedo dedicar sólo una cantidad de
tiempo limitada dentro de mi investigación, así que ahora estoy probando si
podría apañarme cargando el gráfico de dispersión como layers en Leaflet. No
sé hasta qué punto esto es una chapuza, pero teniendo las distintas capas ya
montadas como capas espaciales en el SIG me ahorro volver a utilizarlo como
una base de datos a partir de la cual se monta una representación espacial.

De momento con leaflet he conseguido montar el plano y el gráfico por
separado, ahora toca juntarlos (como dos ventanas en la misma página) y
tratar de que interactuen entre ellos.

PD: ¿Quizá este hilo debiera ir a una lista de correo más general?

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Proyecto-inquieto-webmap-interactivo-grafico-tp5135117p5135565.html
Sent from the Valencia mailing list archive at Nabble.com.