¿Cómo hacer un bloque fijo de texto en cartodb en lugar de en las ventanas de información?

Question

Yo empecé a usar CartoDB hoy para un proyecto de la escuela, es aquí : https://elenab.cartodb.com/viz/3c08e76a-ec4a-11e5-8d14-0ecfd53eb7d3/public_map

Pero lo que me gustaría hacer es tener un bloque de texto debajo de mi mapa, donde mi textes aparecerá cuando hago clic en el país. No quiero un pop-up ventana de información, debido a que mis textos son largos.

Vi este mapa, lo hizo por un periódico francés : http://www.liberation.fr/apps/2015/03/carto-fn/

Cuando usted haga clic en los marcadores, el cambio de texto en un bloque fijo. Me gustaría hacerlo con mi propio mapa.

Hay alguna manera de hacerlo?

Answer 1

Usted puede hacer eso con CartoDB.js (en lugar del Editor). Usted puede encontrar aquí cómo hacer un mapa de la tierra para arriba. Y aquí hago un ejemplo de que se puede replicar con sus propios datos.

En primer lugar, usted tiene que crear un div dentro de su plantilla de html con un id de "caja". En el interior se han de agregar los campos que usted necesita para mostrar. En mi caso elegí la latitud, la longitud, el nombre de la ciudad y max. población:

<div id ="box">
  <h4>Latitude</h4>
  <p id="lat">Click on point</p>
  <h4>Longitude</h4>
  <p id="lon">Click on point</p>
  <h4>City</h4>
  <p id="city">Click on point</p>
  <h4>Max. Population</h4>
  <p id="pop">Click on point</p>
</div>

En segundo lugar, después de la creación de la capa debe generar un evento de clic en la función que le permite asociar los valores de la función seleccionada con el id del div:

    layer.on('featureClick',function(e,latlng,pos,data){
      lat = (latlng[0]).toFixed(2)
      lon = (latlng[1]).toFixed(2)
      city = data.name
      pop = data.pop_max

       document.getElementById("lat").innerHTML = lat;
       document.getElementById("lon").innerHTML = lon;
       document.getElementById("city").innerHTML = city;
       document.getElementById("pop").innerHTML = pop;

R.

Answer 2

No está seguro de cómo hacerlo en CartoDB, pero.... el bloque que se ve es un HTML DIV que es absolutamente colocado en la parte superior del mapa. Tendrás que colocar por separado un div en la parte inferior de la página donde usted podría utilizar JavaScript para llamar a las atribuciones que cuando usted haga clic en una función.

Usted puede hacer esto fácilmente siguiendo el tutorial aquí http://leafletjs.com/examples/choropleth.html

Basta con mover el div a la parte inferior o donde usted lo desee. CartoDB utiliza Folleto como una base para su asignación dinámica. Hay muchos recursos en MapBox, Folleto, Esri Prospecto, CartoDB, etc. donde se puede entender cómo construir un mapa personalizado exactamente cómo usted desea. Prospecto es ligero y fácil de aprender. Aquí es un gran punto de partida: http://bl.ocks.org/uafrazier/e02e7cdf8e5d26a19c8a