I am using Mapbox Leaflet API. I have followed the following tutorial of Mapbox.


(Please change to Data visualization Tab)

Onclick its zooming on state and hover its showing popup. I am trying to get the state name on click to show more data from database in another div. If I can get the state name on click with zooming then my problem can be solved. How can I do this?

I used the following code. In which the hover data shows in top right corner. Can I show it in a fixed div?

            var info = L.control();         

        info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info');
            return this._div;

        info.update = function (props) {
            this._div.innerHTML = (props ?
                '<b>' + props.NAME + '</b>'
                : 'Hover over');


1 Answer 1


I have written down a short code to explain how to click and get further details for a feature from database.All you need to do is to change the "your_server_script_file" in ajax function to retrieve details from database and add response to your div (if properly formatted).

I hope it will help.

Try on JsFiddle

  • Thank you very much. Can you help a little bit more. Can I also add choropleth values from database instead of JSON on load? Dec 5, 2013 at 9:45
  • @DevilsDream Sure! Dec 5, 2013 at 10:44
  • Would you please describe the code in jsFiddle? Dec 5, 2013 at 10:56
  • Not sure if jsFiddle can handle server side scripting languages :) Dec 5, 2013 at 11:29

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.