3

I started to use CartoDB today for a school project, it is here : https://elenab.cartodb.com/viz/3c08e76a-ec4a-11e5-8d14-0ecfd53eb7d3/public_map

But what I would like to do is to have a block of text below my map, where my textes would appear when I click on country. I don't want a pop up info window, because my texts are long.

I saw this map, did by a french newspaper : http://www.liberation.fr/apps/2015/03/carto-fn/

When you click on the different markers, the text change in a fixed block. I would like to do that with my own map.

Is there any way to do that?

2

You can do that with CartoDB.js (instead of the Editor). You can find here how to make a map from the ground up. And here I make an example that you can replicate with your own data.

First, you have to create a div within your html template with a id of "box". Inside you have to add the fields you need to display. In my case I chose latitude, longitude, city name and max. population:

<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>

Secondly, after creating the layer you should generate a click event function that allows you to associate the values from the selected feature with the ids of the 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.

1

Not sure how to do it in CartoDB but.... the block you see is an HTML DIV that is absolutely positioned on top of the map. You would need to place a separate div at the bottom of your page where you would use JavaScript to call on the attributions when you click on a feature.

You can easily do this by following the tutorial here http://leafletjs.com/examples/choropleth.html

Just move your div over to the bottom or wherever you want it. CartoDB uses Leaflet as a foundation for its dynamic mapping. There are so many great resources on MapBox, Leaflet, Esri Leaflet, CartoDB, etc. where you can understand how to build a customized map exactly how you want it. Leaflet is lightweight and easy to learn. Here is a great starting point: http://bl.ocks.org/uafrazier/e02e7cdf8e5d26a19c8a

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.