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?

1 Answer 1


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.

  • Thanks! How did you know to call on this title "leaflet-control-container .leaflet-top .leaflet-control-zoom a.leaflet-control-zoom-in" in the css to color the zoom? Commented Jan 7, 2015 at 22:31
  • Reverse engineering as usual :) In Chrome, Right click --> inspect element. Chrome Dev Tools has some utilities to help you with that task. Maybe Leaflet has something more sophisticated for a complete replacement of the control, but if CSS is good enough... Could you please mark the answer as accepted if it's been useful? That way tracking unanswered questions is easier for us, thanks :) Commented Jan 8, 2015 at 8:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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