I'm working on a graphing web-app and I've decided that leaflet would make a decent graph view. I have it displaying (sort of) but I need a way to force it to update when the user enters a new formula to graph.
I'm using JQuery as well, but that shouldn't matter. Here is the relevant code:
function formulaChange(formula){
//submits a request to the server to add a graph to display
map.setView(map.getCenter(),map.getZoom(),true);//doesn't work
//and neither does:
//map.fire('viewreset');
//tiles.redraw();
}
function enterHandler(event){
if(event.keyCode==13){
formulaChange(document.getElementById("formula").value);
}
}
var map;
var tiles;
$(document).ready(function(){
map=L.map('plot',{crs:L.CRS.Simple}).setView([0,0],10);
//url is actually a servlet on the server that generates an image on the fly
tiles = L.tileLayer('./GraphTile.png?x={x}&y={y}&z={z}&tilesize={tileSize}&{s}',
{
maxZoom: 20,
continuousWorld: true,
tileSize: 128,
//subdomains used as a random in the URL to prevent caching
subdomains: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
}
).addTo(map);
});
This works but won't refresh when the user clicks, the event is definitely running (I've omitted other code that updates a text display). It displays properly, but when the user adds a function to display the view never updates and leaflet continues to display cached images, only a new zoom level or panning to an area never before viewed causes it to update the tiles. The question I have is: How do I force leaflet to completely reload everything and drop and reload all the images?
EDIT added another failed attempt
I found the answer. Despite the no-cache headers my browser was caching the images anyway. The subdomains are not "randomly chosen" as the documentation claims, they are generated using a hash of the tile location. So I had to improvise a way to add "&RANDOM##" to the end of the URL instead of the subdomain.
The new code looks like this:
function enterHandler(event){
if(event.keyCode==13){
formulaChange(document.getElementById("formula").value);
}
}
function formulaChange(formula){
val.item=Math.random();
tiles.redraw();
}
var map;
var tiles;
var val={
item: Math.random(),
toString: function(){
return this.item;
}
};
$(document).ready(function(){
map=L.map('plot',{crs:L.CRS.Simple}).setView([0,0],10);
tiles = L.tileLayer('./GraphTile.png?x={x}&y={y}&z={z}&tilesize={tileSize}&{test}',
{
maxZoom: 20,
continuousWorld: true,
tileSize: 128,
test: val
}
).addTo(map);
});
Hope this helps someone else. Please comment if there's a better way to do this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With