Question

I have a map with 4 layers, each layer having markers for various shops. What I need to do is this.

• User chooses shop from select
• Script grabs shop name and then finds the correct data for that shop from json.

I have a rough idea of how the script should look but don’t know how to write it correctly.

$('#shopselect').change(function() {
    $.ajax({
    type: "GET",
    url: "data.txt",
    dataType: "json",
    success: function(data) {

    var selected = $('#shopselect option:selected').text()

    if ($(".layer1:visible").length) {
        $("#viewport").mapbox("center", { 
            x: shops." + selected + ".l1x, 
            y: shops." + selected + ".l1y 
        });
    } else if ($(".layer2:visible").length) {
        $("#viewport").mapbox("center", { 
            x: shops." + selected + ".l2x, 
            y: shops." + selected + ".l1y 
        });
    } else if ($(".layer3:visible").length) {
        $("#viewport").mapbox("center", { 
            x: shops." + selected + ".l3x, 
            y: shops." + selected + ".l1y 
        });
    } else if ($(".layer4:visible").length) {
        $("#viewport").mapbox("center", { 
            x: shops." + selected + ".l4x, 
            y: shops." + selected + ".l1y 
        });
    }
}
});

The json looks like so.

{
shops:{
    primark:{
        l1x:310,
        l1y:132,
        l2x:388,
        l2y:264,            
        l3x:530,
        l3y:355,
        l4x:670,
        l4y:450
    },
    boots:{
        l1x:310,
        l1y:132,
        l2x:388,
        l2y:264,            
        l3x:530,
        l3y:355,
        l4x:670,
        l4y:450
    }       
}

}

Is there anyone who could point me in the right direction.

Answer 1

Instead of using this :

x: shops." + selected + ".l1x, 
y: shops." + selected + ".l1y 

What about something like that :

x: data.shops[selected].l1x, 
y: data.shops[selected].l1y