Develop Reference

Leaflet: sort and edit geojson data in a table with if-statements

I'm having trouble with displaying json data in a table. I am working on a map that shows data wich is directly exported as a geojson file from Openstreetmap via overpass-turbo.eu. This means that every point has different features. I want to show as much information in the popup as possible, but keep unessesary information out of the table, plus I want the links to be clickable. This is my code so far, that provides a basic table view of each point. Here is a demo: http://stefang.cepheus.uberspace.de/stackexample/
function everyPoint (feature, layer){
var popupcontent = [];
for (var prop in feature.properties) {
popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
}
var innerTable = popupcontent.join("");
layer.bindPopup(
"<h1>" +feature.properties.name +"</h1>"
+"<table>" +innerTable + "</table>"
+"<p> Old or outdated data? Change it on <a href='http://openstreetmap.org/" +feature.id +"'> on openstreetmap.org</a>.</p>"
);
};
L.geoJson(karlsruhe, {
onEachFeature: everyPoint
}).addTo(map);
I want to do three things here:
Hide unnessesary data, basically #ID, Shop:Farm
Switch URLs to hyperlinks, mainly website and contact.website
Show everything else as a text in the table
I tried to solve this with a simple if-statement, but only the else block runs:
var popupcontent = [];
for (var prop in feature.properties) {
if (prop == "id" ){
//do nothing
}
else if (prop == "website"){
popupcontent.push("<tr><td>" +prop + ": </td><td>" + "<a link href='" + feature.properties[prop] + "'></a></td></tr>");
}
else {
popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
}
}
I believe there is something wrong with the statement in the if function, but I can't figure it out. Thanks for any help :)

I found the solution, just a few typos plus no text in the link:
var popupcontent = [];
for (var prop in feature.properties) {
if (prop == "#id" ){
//do nothing
}
else if (prop == "website"){
popupcontent.push("<tr><td>" +prop + ": </td><td>" + "<a link href='" + feature.properties[prop] + "'>" +feature.properties[prop] +"</a></td></tr>");
}
else {
popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
}
}

How to leave a placeholder within a variable to be filled later using Javascript?

On paper this paper this seems like a very simple operation, but for some reason Javascript does not seem to like it. Basically I have the following code:
var news = "<b>" + place_name + ", " + county + ""<img id = 'centre' src=" + picture + ">" + "</b><ul><br>";
The general idea is that picture is a variable that will be filled later via:
news.picture = entry2.picture;
which is a link to provide to the img source. However, when I do:
console.log(news.picture);
The variable remains undefined. Is this the correct way to go about things?

That's not the way you are supposed to do that. You have to have your variables set and then you can construct a string like that.
What you need now, is basically a function, like this:
var createNews = function(place_name,county,picture) {
return "<b>" + place_name + ", " + county + "<img id = 'centre' src=" + picture + ">" + "</b><ul><br>";
}
var news = createNews("Place","county","pic.jpg");
console.log(news);
Or you can do it like this, if you prefer:
var createNews = function(obj) {
return "<b>" + obj.place_name + ", " + obj.county + "<img id = 'centre' src=" + obj.picture + ">" + "</b><ul><br>";
}
var news = {
place_name : "Someplace",
county : "Somewhere",
picture : "foo.png"
};
var newsItem = createNews(news);
console.log(newsItem);

news is a variable made out of strings and variables.
So you cant use news.picture.
Though you can make the variable a function object.
var news = function() }
this.picture = "something";
this.getString = function() {
return this.picture+"some string";
};
};
Then you can get and set the picture variable inside news with news.picture and get the string with news.getString().

Manipulating JQuery .text() output

I am building a Twitter like site that is fed random tweets that I want to export to the website in a particular manner. I have most of my requirements met up to this point, the only issue I am having is turning the jQuery text of a Twitter user and handle it into a link that can be clicked.
My code snippet below exhibits my work so far:
<script>
$(document).ready(function(){
var $body = $('.middle');
$body.html();
var index = streams.home.length - 1;
var newTweets = function(index){
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class=tweetBox></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message + tweet.created_at);
$tweet.appendTo($body);
index -= 1;
}
}
newTweets(index);
$('button').on('click', function(){
index = streams.home.length - 1;
newTweets(index);
});
});
</script>
The line that is giving the issue is $tweet.text('#' + tweet.user + ': ' + tweet.message + tweet.created_at);
I want to take tweet.user and convert it into a click-able link. Any suggestions on ways to attack this would be very much appreciated.

You have to use the HTML function of jQuery. http://api.jquery.com/html/
like this:
var link = $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML');
$tweet.html('#' + link + ': ' + tweet.message + tweet.created_at);
it will do the work.

If I understand correctly, then this is what you want
var link = $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML');
$tweet.html('#' + link + ': ' + tweet.message + tweet.created_at);

jQuery: redrawing function extremely slow when called repeatedly

I have a method called refreshHistory() that basically reads locally stored list of json (using https://github.com/marcuswestin/store.js/) and populates a list in the order they were stored at.
Everytime a user action happens, this method is called. But as the list gets bigger and bigger, it slows down the browser to a crawl.
function refreshHistory() {
var records = typeof store.get('history') == "undefined" ? 0 : store.get('history').history;
;
if (records == 0) {
$('#content #historyView').html('<i>history show up here in order.</i>');
} else {
var xhistory = '<div id="history">';
for (var i = 0; i < records.length; i++) {
var xaction = records[i]
xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>'
}
xhistory += "</div>"
$('#qtip-0-content #historyView').html(xhistory);
}
}

Rendering everything on every event is a simple strategy, which is good, but it does run into the performance problems you are describing. It's hard to give specific advice, but you could either:
Implement a more detailed rendering logic, where only new items are rendered and added to the DOM.
Use ReactJs or Virtual DOM libraries, which allow your code to use the render everything pattern, but make the actual updates to the DOM faster by doing the minimum needed.

The only way to really make this efficient is to implement it in a different way.
I've been using knockout.js personally and am very happy with it. Basically you write a template and the library handles the DOM node changes, only updating the parts needed. You will need to learn how to think slightly differently, but there are some great tutorials available.
That said, one simple trick you can try is move the selectors outside the function so they are only ran once instead of each time you call the function.
For sanity I would also keep records variable the same type whether or not the .get('history') returns undefined.
var contentHistoryView = $('#content #historyView');
var qtipHistoryView = $('#qtip-0-content #historyView');
function refreshHistory() {
var records = typeof store.get('history') == "undefined" ? [] : store.get('history').history;
if (records.length) {
contentHistoryView.html('<i>history show up here in order.</i>');
} else {
var xhistory = '<div id="history">';
for (var i = 0; i < records.length; i++) {
var xaction = records[i]
xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>'
}
xhistory += "</div>"
qtipHistoryView.html(xhistory);
}
}
I doubt this will have a huge impact though, as I suspect most of the execution time is spent in the loop.

Image Currently Unavailable from Flickr

In my Firefox OS app i use Flickr API to show relevant images, My URL for the call is like this.
https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lat=42.86366&lon=-75.91438&radius=3&format=json&nojsoncallback=1
and i use created a function to call the flicker api for the images. This is the function where i create the URL with the api key and latitude and longitude for the api call
function displayObject(id) {
console.log('In diaplayObject()');
var objectStore = db.transaction(dbTable).objectStore(dbTable);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
if (cursor.value.ID == id) {
var lat = cursor.value.Lat;
var lon = cursor.value.Lon;
showPosOnMap (lat, lon);
// create the URL
var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search';
url += '&api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
url += '&lat=' + lat + '';
url += '&lon=' + lon + '';
url += '&radius=3';
url += '&format=json&nojsoncallback=1';
$.getJSON(url, jsonFlickrFeed);
return;
}
cursor.continue();
} else {
$('#detailsTitle').html('No DATA');
}
};
}
This function gets the JSON object received from flickr. This function displays the thumbnails of the images in a jquery mobile grid.
function jsonFlickrFeed (data) {
console.log(data);
var output = '';
// http://farm{farmId}.staticflickr.com/{server-id}/{id}_{secret}{size}.jpg
for (var i = 0; i < data.photos.photo.length; i++) {
// generate thumbnail link
var linkThumb = '';
linkThumb += 'http://farm' + data.photos.photo[i].farm + '.staticflickr.com/' + data.photos.photo[i].server + '/' + data.photos.photo[i].id + '_' + data.photos.photo[i].secret + '_s.jpg';
// generate Full image link
var linkFull = '';
linkFull += 'http://farm' + data.photos.photo[i].farm + '.staticflickr.com/' + data.photos.photo[i].server + '/' + data.photos.photo[i].id + '_' + data.photos.photo[i].secret + '_b.jpg';
if (i < 20)
console.log(linkThumb);
//console.log(linkFull);
var title = data.photos.photo[i].title;
var blocktype = ((i % 3) == 2) ? 'c' : ((i % 3) == 1) ? 'b' : 'a';
output += '<div class="ui-block-' + blocktype + '">';
output += '<a href="#showphoto" data-transition="fade" onclick="showPhoto(\'' + linkFull + '\',\'' + title + '\')">';
output += '<img src="' + linkThumb + '_q.jpg" alt="' + title + '" />';
output += '</a>';
output += '</div>';
};
$('#photolist').html(output);
}
Then finally this function show the full screen view of the image. When the user taps on the thumbnail a larger image is taken and shown.
function showPhoto (link, title) {
var output = '<a href="#photos" data-transition="fade">';
output += '<img src="' + link + '_b.jpg" alt="' + title + '" />';
output += '</a>';
$('#myphoto').html(output);
}
My problem is that, i get the JSON object with the images by calling the API. i have console.log() where i output the json object and i checked all the image info is there. But when i go to the grid view and even the full view i get the default image that states that the This image or video is currently unavailable. I can't figure out what im doing wrong here.. Please help.

You may be requesting an image size that flickr does not have for that image. You are appending "_s", "_q" and "_b" to select a few sizes - so perhaps those are not available. You can check the flickr API 'photos.getSizes' to see what sizes are available. The Flickr API seems to be pretty inconvenient sometimes.
https://www.flickr.com/services/api/flickr.photos.getSizes.html