I am trying to pull data from a database and then map it using Leaflet. My hunch is that directly querying my database with Javascript isn't a good idea (because I found another stackoverflow answer that said "that isn't a good idea), but I'm not sure what a good alternative might be.

I'm extremely new to Javascript (and Leaflet) and moderately capable with SQL. I do know some PHP and XML if I need to make some intermediate querying page (and then Leaflet grabs that info...?)

I am trying to pull data from a database and then map it using Leaflet. My hunch is that directly querying my database with Javascript isn't a good idea (because I found another stackoverflow answer that said "that isn't a good idea), but I'm not sure what a good alternative might be.

I'm extremely new to Javascript (and Leaflet) and moderately capable with SQL. I do know some PHP and XML if I need to make some intermediate querying page (and then Leaflet grabs that info...?)

• javascript
• sql
• leaflet

• @JayWalker: It's largely been googling -- AJAX seems like a possibility, although it may not be able to execute a stored procedure that would create the XML files? This is the SO question: link. – Erica Commented Mar 4, 2013 at 20:10
• 1 You don't want to embed the connection string in the client. You could expose the data via OData so it can be easily consumed by javascript. See this post: stackoverflow./questions/10112376/… – Jay Walker Commented Mar 4, 2013 at 20:19
• Thank you Jay -- the connection string security was my biggest worry, so that was the answer I needed. Now to go learn how to do it :-) – Erica Commented Mar 4, 2013 at 20:28

1 Answer 1

Apart from the issue of directly querying from your db with javascript...

Once you get the data from your db you'll want to loop through each data point and add it to the map. For example, if you had your 'intermediate querying page' return a JSON formatted object, then you could do something like this:

$.getJSON('path-to/intermediate-querying-page.php', function(data) {

    $.each(data, function(key, place) {
        var marker = L.marker([place.latitude, place.longitude]).addTo(map);
    });

});