[GIS] way to customize the zoom button and legend in cartodb js

cartocarto-jscartocsslegendzoom

I am following this tutorial, http://docs.cartodb.com/tutorials/toggle_map_view.html, and have been successful in developing an application with similar functionality, currently I am working on customizing the appearance of the application. I would to customize the the appearance of the zoom button and the legend (font, color, location) in the application. Is there any wall to do this? In the css or js?

Best Answer

You can do it with plain css. For example. html body .leaflet-control-container .leaflet-top .leaflet-control-zoom a.leaflet-control-zoom-in { color: red; } changes zoom in control color.

Related Solutions

[GIS] CartoDB – How to customize the legend to not be white and have blocks instead of bullets

It's not posible to change the styles of the legend container from the CartoDB UI, although you can change the styles of the legend content. To build what you want I'd recommend you to create a simple visualization using CartoDB.js

Cheers!

[GIS] CartoDB adding custom legend to sublayer

There's a working example in the CartoDB.js library's example section that does most of what you seem to be looking for.

Key portion--you can define your legend as follows:

var customLegend = new cdb.geo.ui.Legend.Custom({
        title: "Custom Legend",
        data: [
          { name: "Natural Parks",  value: "#58A062" },
          { name: "Villages",       value: "#F07971" },
          { name: "Rivers",         value: "#54BFDE" },
          { name: "Fields",         value: "#9BC562" },
          { name: "Caves",          value: "#FABB5C" }
        ]
      });

Note that the value for the key data can be dynamically changed and updated depending on user interactions, data types, etc...

Best Answer

Related Solutions

[GIS] CartoDB – How to customize the legend to not be white and have blocks instead of bullets

[GIS] CartoDB adding custom legend to sublayer

Related Question