0

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);
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? – Devils Dream Dec 5 '13 at 9:45
  • @DevilsDream Sure! – Farhat Abbas Dec 5 '13 at 10:44
  • Would you please describe the code in jsFiddle? – Devils Dream Dec 5 '13 at 10:56
  • Not sure if jsFiddle can handle server side scripting languages :) – Farhat Abbas Dec 5 '13 at 11:29

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.