StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>Here is a sample of the code if somone is interested.</p> <pre><code>$(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); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload