I am currently facing an issue where I have multiple tileLayers each containing a shape file. These tile layers represent different datasets based on variables and adjust colors accordingly.
I have been able to achieve this by creating three separate Objects (L.shapefile("", { })...) and assigning each to its respective layer. However, the problem arises because my shapefile is quite large at 12MB. This means that when I follow this approach, the file gets downloaded three times.
Is there a way for me to download the zip file once and then create three instances from that single download?
shpfile = new L.Shapefile('/mydata/shpfile.zip', {
onEachFeature: function (feature, layer) {
console.log(feature, layer)
if (feature.properties) {
var data_name = feature.properties.Name;
val = -1
if (data)
val = data[days+'DAY']
if (val==-1)
val="No Data";
var tooltip_Html = data_name + "<hr>" + days + " " + val;
layer.bindPopup(tooltip_Html, {
maxHeight: 200
});
layer.prop = {data_name , days};
layer.setStyle({fillColor : getColor(val),
color: "black",
weight: 1,
opacity: 1,
fillOpacity: 0.3
});
layer.on("click", layerClick);
if (vw>768) {
layer.on("mouseover", function () {
info.update(layer.prop);
layer.bindTooltip('<b>'+layer.prop.loc + '</b> Name<br>' + layer.prop.val);
});
layer.on("mouseout", function () {
info.update();
});
}
}
}});
shpfile.once("data:loaded", function() {
console.log("Shape File Downloaded! "+ days + ' days');
});
L.tileLayer(mapboxUrl, {id: 'mapbox.streets', attribution: mbAttr}).addTo(shpfile)