Chorpleth Data visualization in Mapbox Leaflet API

Question

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

https://www.mapbox.com/mapbox.js/

(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');
            this.update();
            return this._div;
        };

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

        info.addTo(map);

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