add multiple geojson layers dynamically

[kab]

I was wondering if anyone has an example of how to dynamically add geojson layers. I realize this is probably a javascript issue rather than a leaflet issue, but help would be appreciated.

I am able to add one layer, but I want to add many, based on incoming data.

I can use getJSON to create a layer

<code>

$.getJSON(url, function(geojsonData) {

geojsonLayer.addGeoJSON(geojsonData); // comes in with an category

}

)</code>

I want each category to be in its own layer.  I realize there is some loop needed, and a dynamic naming of the layer, but can't figure it out.

thanks

[Bryan McBride]

You could try using a for loop to break your data into categories. Something like:

$.getJSON(url, function(data) {

    for (var i = 0; i < data.length; i++) {

        if (data.properties.Category == 'Category 1') {

            geojsonLayer1.addGeoJSON(data);

        };

        if (data.properties.Category == 'Category 2') {

            geojsonLayer2.addGeoJSON(data);

        };

    }

}

Assuming you GeoJSON has an attribute name 'Category'.

[kab]

Thanks for that - its exactly what I intend to do, but I don't know how many layers (categories) I will have so I need to be able to name the layers dynamically - ie  geojsonLayerFred,  geojsonJohn...

[Bryan McBride]

You could use a while loop to create the layers.

[Hafid]

Bryan

I'm using a part of your very nice code (leaflet map users) to create a map and adding the advice above to create layers according to categories.

Could you please help me to sort this problem?

***********************************
// Getusers
function getUsers() {
    $.getJSON("get_users.php", function(data) {

        for (var i = 0; i < data.length; i++) {

            var location = new L.LatLng(data[i].lat/scale_y, data[i].lng/scale_x);
            var name = data[i].name;
            var type = data[i].type;
            var yield = data[i].yield;
            var description = data[i].description;
            var contributor = data[i].contributor
            if (data[i].description.length > 7) {
                var title = "<div style='font-size: 18px; color: #0078A8;'><a href='" + data[i].description + "' target='_blank'>" + data[i].name + "</a></div>";
            }
            else {
                var title = "<div style='font-size: 18px; color: #0078A8;'>" + data[i].name + "</div>";
            }
            if (data[i].yield.length > 0) {
                var city = "<div style='font-size: 14px;'>" + data[i].yield + "</div>";
            }
            else {
                var city = "";
            }
            if (data[i].properties.type == 'NPC City') {
            group_npc.addGeoJSON(data);
        };
            var marker = new L.Marker(location, {
                title: name,
                icon: iconA
            });
            marker.bindPopup("<div style='text-align: left; margin-left: auto; margin-right: auto;'>" + "<h5>" + "<b>" + title + "</h5>" + "<ul>" + "<b>" + "Type: " + "</b>" + type + "</ul>" + "<ul>" + "<b>" + "Difficulty: " + "</b>" + yield + "</ul>" + "<ul>" + "<p>" + "<b>" + "Description: " + "</b>" + description + "<p>" + "</ul>" + "<ul>" + "<b>" + "Contributor: " + "</b>" + contributor + "</ul>" + "</div>", {
                maxWidth: '400'
            });
            map.addLayer(marker);           
        }
    });
}

// Layer group declarations
var group_npc = L.layerGroup(markers_npc);
var group_player = L.layerGroup(markers_player);
var group_hamlet = L.layerGroup(markers_hamlet);
var group_village = L.layerGroup(markers_village);
var group_chaos = L.layerGroup(markers_chaos);
var group_teleport = L.layerGroup(markers_teleport);
var group_portal = L.layerGroup(markers_portal);

// Create overlays
var overlays = {
            "NPC Cities": group_npc,
            "Player Cities": group_player,
            "Hamlet": group_hamlet,
            "Village": group_village,
            "Portal": group_portal,
            "Teleportation Entrances": group_teleport,
            "Chaos Stone": group_chaos,
        };

        layersControl = new L.Control.Layers(overlays, {
            collapsed: true
        });

        map.addControl(layersControl);

***********************************************************************

WebRep

Évaluation globale

 

[Bryan McBride]

I'm not sure what your problem is. Please describe the details of your issue and post a link to an example.

BRYAN

On Monday, March 12, 2012 12:36:39 PM UTC-4, kab wrote:

[Hafid]

I have a MySQL database in which all markers are stored: 7 categories (column "type")

name      || type   || etc...

marker 1  || type 1 || .....

marker 2  || type 3 || .....

marker 3  || type 3 || .....

marker 4  || type 1 || .....

marker 5  || type 2 || .....

....

I would like to automatically generate an overlay (control of the layers) based on the different "type" from the database.

- I understand that I have first to assign markers to layergroups and then create overlays.

- I'm looking forward to implement it in the code above.

 

I also to need to assign an icon for each marker depending on its category.

Nota: I'm actually using geojson formatted list in a datas.js file, but it is not as flexible as an SQL database.

I will try to upload a jsfiddle or a proto of the map asap.

Many thanks in advance.

Hafid

[Arnie Shore]

Hafid, please keep us informed on your progress on this. I have a similar task.

FYI, in the Gmaps/PHP application I'm porting to leaflet, I'm
generating PNG icons dynamically server-side using a PHP script with
some GD functions. I haven't done this yet in Leaflet, however, but
I don't anticipate any special issue.

AS

On 12/28/12, Hafid <elektr...@gmail.com> wrote:
> I have a MySQL database ...

[Tony Kidman]

Hello,

did you have any luck with this?

I am looking to do something similar with a data.js file.

I was looking to set vars so specific icons then enclose the var details as part of the layer markup when running the loop.

My main problem is the best way to read the data.js file.  The rest I am sure I can work out.

However my problem is that I want to also use an external list to set up a way to toggle popups for each marker as well - ambitious??