Pre-Load (pre filter) points into Polymaps API
-
28-10-2019 - |
문제
I'm creating a project using Polymaps JS lybrary. I have to plot about 200,000 points. It takes a while to load the points into the browser and then navigazion is very sluggish.
I've read the documentation and there's no option for filtering a GeoJson before adding its data to the page.
Can someone suggest a better way then this:
var po = org.polymaps;
var map = po.map()
.container(document.body.appendChild(po.svg("svg")))
.center({lat: 45.468318, lon: 9.1709})
.zoom(13)
.add(po.interact());
//Skinning the map
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
//Importing the geoJSON
map.add(po.geoJson()
.url("test_4sq.json")
.id("streets")
.on("load", loadAreas)
.tile(false));
map.add(po.compass()
.pan("none"));
// This function loads all the data and then do the filtering (very sluggish method)
function loadAreas(obj) {
for (var i = 0; i < obj.features.length; i++) {
var f = obj.features[i];
var e = obj.features[i].element;
var p = obj.features[i].data.properties;
e.setAttribute('r', 4);
e.setAttribute('id', f.data.id);
e.setAttribute('title', p.venueName);
//console.log(e);
// Displaying the data in August (month propriety = '8')
if (p.month != "08")
console.log(e);
else
e.setAttribute('display', 'none');
}
}
해결책 2
I figured out how to make the script faster. First of all launching the app via localhost or server makes all work faster. I always open the app via file (file:///pathTo_file/index.html)! That's WRONG. It's better use a server instead (www.pathTo_file.com/ or localhost://pathTo_file/index.html) Second, I tried to minify the imported json. I leaved a lot of spaces and line breaks for better readability, but It' was quite heavy to load so I removed all this useless characters. Third, I load a file only if a user use the daypicker. In this way the app loads all the tiles first and in a second time the user chosen data.
Here is a sample of the code if somone is interested.
$(document).ready(function() {
// DAY AND MONTH CORRECTION RELATED TO FILENAME
function addZero(num){
console.log("Function launched: addZero")
parseInt(num);
if(num>=1 && num<=9){
num="0"+num;
}
return num;
}
$("#datepicker").datepicker({
dateFormat: 'yy/mm/dd',
inline: true,
minDate: new Date(2011, 8 - 1, 20),
maxDate:new Date(2011, 12 - 1, 31),
altField: '#datepicker_value',
onSelect: function(){
var selDay = $("#datepicker").datepicker('getDate').getDate();
var selMonth = $("#datepicker").datepicker('getDate').getMonth() + 1;
var selYear = $("#datepicker").datepicker('getDate').getFullYear();
//PLOTTING THE MAP WITH THE USER'S SELECTION - DATEPICKER PARAMETERS -
plotMap(addZero(selDay), addZero(selMonth));
}
});
//INITIALISATING THE DATEPICKER
$("#datepicker").datepicker('setDate', new Date());
// JSON DATA IMPORT
var po = org.polymaps;
var map = po.map()
.container(document.body.appendChild(po.svg("svg")))
.center({lat: 45.468318, lon: 9.1709})
.zoom(13)
.add(po.interact());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
function plotMap(day, month){
var jsonUrl = "json/4sq_"+day+"_"+month+"_min.json";
map.add(po.geoJson()
.url(jsonUrl)
.on("load", loadSingleEvents));
console.log("Ho caricato il file:" + jsonUrl);
};
map.add(po.compass()
.pan("none"));
//LOADING THE DATA
function loadSingleEvents(obj) {
console.log("Function launched: loadSingleEvents")
singleEvents=true;
$.each (obj.features, function (i, feat){
var point = feat.element;
var propriety = feat.data.properties;
point.setAttribute('r', 3.5);
point.setAttribute('id', feat.data.id);
point.setAttribute('data-venueName', propriety.venueName);
point.setAttribute('data-hour', propriety.hour);
});
console.log("Numero di Elementi visualizzati: (dovrebbe essere sui 3500) "+ obj.features.length);
}
});
다른 팁
Using a geoJSON tiling server seems like the only way to go with that many elements. Check out TileStache. This may be helpful as well: http://goalfinch.com/blog/2011/03/building-interactive-maps-with-polymaps-tilestache-and-mongodb-part-2/