create web map layers from multiple mbtiles on multiple servers

Question

I'm using this http://blog.carte-libre.fr/index.php?post/2012/02/12/Serve-all-MBTtile-features-with-PHP-script to create a web map with mbtiles hosted on my server.

I want to create selectable layers using several mbtiles (mb1, mb2, mb3) which are stored on different servers (serv1, serv2, serv3).

The script is

wax.tilejson(
    'mbtiles-server.php?db=mb1.mbtiles',
    function(tilejson) {

        var omq = new L.TileLayer(
            'http://otile2.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
                maxZoom: 14,
                attribution: 'OpenStreetMap - MapQuest',
                opacity: 0.4,
        });//modify to call mb2 from serv3

        var power = new L.TileLayer(
            "mbtiles-server.php?db=mb1.mbtiles&z={z}&x={x}&y={y}", {
                maxZoom: 14,
                attribution: 'OpenStreetMap - CL 2012-02-05',
        });

        var map = new L.Map('map', {
            center: new L.LatLng(46, 0),
            zoom: 6,
            layers: [omq, power]
        });

        map.addControl( new L.Control.Layers( { "OpenMapQuest": omq }, { "Power": power }));

        wax.leaf.interaction(map, tilejson);
        document.getElementById("legend").innerHTML = tilejson.legend;
});

Assuming there is a php script file in each mbtiles folder, how can I modify the script to be able to call mb2 from serv3 so that i have 2 layers from 2 mbtiles hosted on 2 servers?

any advice would be welcomed!

Answer 1

An update...

The issue was trying to load several mbtiles while having respective popup interactions for each layer (each mbtile included interaction, created in TileMill).

I opted to load the mbtiles to the map using:

var base1 = L.tileLayer("http://ms1.mysite.com/folder1/mbtiles-server.php?db=base1layer.mbtiles&z={z}&x={x}&y={y}.png"
var base2 = L.tileLayer("http://ms2.mysite.com/folder2/mbtiles-server.php?db=base2layer.mbtiles&z={z}&x={x}&y={y}.png"

Then added interaction from a separate geojson file.

var onEachFeature_Polygon = function (feature, layer) {
    //polygon geojson file contains center points
    var centerLat = feature.properties.y;
    var centerLon = feature.properties.x;
    var centLatLon = new L.LatLng(centerLat, centerLon); //this is used to place the popup in the "mouseover" function
    layer.setStyle(tooltip_default_style);
    if (feature.properties && feature.properties.Name) {//fields Name, Population, RI10K
        var list = "<b>" + feature.properties.Name + "</b>" + "<br>" + "<i>" + "Population: " + feature.properties.Population + "</i>" + "<br>" + "<i>" + "Income 10,000+: " + feature.properties.RI10K + "</i>" + "<br>";//end of tooltip list
    layer.bindPopup(list);
    }
    layer.on("mouseover", function (e) {
        layer.setStyle(tooltip_hover_style);              
        layer.openPopup(centLatLon);
    });
    layer.on("mouseout", function (e) { layer.setStyle(tooltip_default_style) });         
}

//this is the onEachFeature function called when the statsJSON layer is added to the map 
var statsinteractive = new L.GeoJSON(statsgeo, { onEachFeature: onEachFeature_Polygon }); 
statsinteractive.addTo(map);

Would still like to understand or be directed to a clearly outlined method to 'call' interaction from an mbtile file.

In the meantime, I hope this is helpful for someone with a similar issue.