I'm using markers with data from a *.geojson file. It works with
var Symbol = L.icon({iconUrl: 'sonne.png'});
...
function onEachFeature(feature, layer) {layer.bindPopup(feature.properties.popupContent);}
$.ajax(myGeojsonFile).done(function(data) {
data = JSON.parse(data);
// Symbol = L.icon ({iconUrl: feature.properties.marker-symbol});
L.geoJson(data,
{pointToLayer: function (feature, latlng) {return L.marker(latlng, {icon: Symbol});},
onEachFeature: onEachFeature}).addTo(map);
});
But I want to set the marker-symbol in the *.geojson file. I altered the *.geojson file with a geojson editor, therefoere it schould be correct.
But it does not work, if I try to set the marker symbol with the "//-line" in the code above. How to fix this?
Thanks for thinking about the problem!
Gruss, wonk
it works with this:
$.ajax(overlay).done(function(data) {
data = JSON.parse(data);
L.geoJson(data,
{pointToLayer: function (feature, latlng) {return L.marker(latlng, {icon: L.icon({iconUrl: feature.properties.markerSymbol})});},
onEachFeature: onEachFeature}).addTo(map);
});
The property "marker-symbol" in the *.geojson file must not have a "-"character!
Gruss, wonk
Related
I am trying to load a .csv file into crossfilter for further use it with dc.js and d3. However, if the ndx = crossfilter(data_) is not inside d3.csv(..., it does not work. Is it possible to load data using d3 inside a global/outside variable (in this case ndx)?
var ndx;
private method(){
var data_;
d3.csv("samples.csv", function(data){
var format = d3.timeParse("%m-%y");
data.forEach(function(d: any) {
d.date = format(d.date);
});
data_ = d3.csvParse(data);
});
ndx = crossfilter(data_);
}
How can I load it into crossfilter?
Am I obligated to use crossfilter inside the d3.csv(.. call?
Solution:
I made my .csv became a .json and I loaded it 'synchronously'. Observe below.
var ndx;
private method(){
var data_ = (function() {
var json: any = null;
$.ajax({
'async': false,
'global': false,
'url': "samples.json",
'dataType': "json",
'success': function (data:any) {
json = data;
}
});
return json;
})();
ndx = crossfilter(data_);
}
Observe:
'async': false
This happens because the callback function is executed asynchronously, once the data is returned. This means that if you put the charting code outside of the callback, you are going to get the empty array that you defined because no data has been returned yet.
I´m having a hard time understanding how to perform this action(as the title says), and maybe someone could help me understand the process, my code is below:
My home-view-model:
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var http = require("http");
function createViewModel() {
http.getJSON("http://myJsonfile").then(function (r) {
var arrNoticias = new ObservableArray(r.data);
return arrNoticias;
}, function (e) {
});
}
exports.createViewModel = createViewModel;
I have done a console.log of the arrNoticias before i have putted it inside a callback function and it returns [object object] etc...and then i have done this:
console.log(arrNoticias.getItem(0).titulo);
and it returns the info i need!.
Then in my home.js file i have this:
var observableModule = require("data/observable")
var ObservableArray = require("data/observable-array").ObservableArray;
var arrNoticias = require('./home-view-model.js');
console.log(arrNoticias.getItem(0).titulo);
and the result in the console is:
TypeError: arrNoticias.getItem is not a function. (In 'arrNoticias.getItem(0)', 'arrNoticias.getItem' is undefined)
My question is, how does this action is perform? passing the data from view-model to the .js file?
Thanks for your time
Regards
As that function send a URL request so probably it's an async function, which is on hold while requesting so that's why you get undefined. Normally, you will want your function that sends a URL request to return a promise. Based on that promise, you will the result as expected after the request is done. So:
function createViewModel() {
return new Promise<>((resolve, reject) => {
http.getJSON("http://myJsonfile").then(function (r) {
var arrNoticias = new ObservableArray(r.data);
resolve(arrNoticias);
}, function(e) {
reject(e);
});
}), (e) => {
console.log(e);
})
}
In home.js:
var homeVM= require('./home-view-model.js');
var arrNoticias;
homeVM.createViewModel().then(function(r) {
arrNoticias = r;
});
Hi Im doing a Windows 8 Javascript App, y what to know how to get a file witch name is example2.dat from C:\Users\Me\Pictures\thifolder I tried using Windows.Storage.StorageFile.getFileFromPathAsync("C:\Users\Me\Pictures\thisfolder");
but it didnt work since i have another files like example1.dat, example3.dat example.jpg etc.
Hope i made my self clear, thanks in advance
Here is my code so far
function here() {
var getJsonStringAsync = function () {
return Windows.Storage.StorageFile.getFileFromPathAsync("C:\Users\Me\Pictures\thisfolder")
//Also tried this
//return Windows.Storage.KnownFolders.picturesLibrary.getFileAsync(u_u + "_" + u + "_" + ".dat")
.then(function (file) {
return Windows.Storage.FileIO.readTextAsync(file);
});
};
getJsonStringAsync().then(function (text) {
document.getElementById("line").innerHTML = text;
});
}
The correct way to read a file in the pictures library is this:
(don't forget to declare in the manifest of your app the access to the picturesLibrary)
var getJsonStringAsync = function () {
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
return picturesLibrary.getFolderAsync("thisfolder").then(function (folder){
return folder.getFileAsync("example2.dat").then(function (file) {
return Windows.Storage.FileIO.readTextAsync(file);
});
});
};
In JavaScript, here is how to play "song.mp3" which is in the music library:
Html:
<audio id="player1">Your browser does not support audio </audio>
JavaScript:
var ml = Windows.Storage.KnownFolders.musicLibrary;
ml.getFileAsync("song.mp3").then(function (file) {
// its a storage file, so create URL from it
var s = window.URL.createObjectURL(file);
player1.setAttribute("src", s);
player1.play();
//});
});
How do I do this asynchronously?
var getData, myFunc;
getData = function() {
var data = "";
$.get("http://somewhere.com/data.xml", function(d) {
data = $("#selector", d).html();
});
return data; // does not work, because async callback not yet fired
};
myFunc = function() {
var data = getData();
// do something with data here
};
I am happy to completely re-factor to achieve what I want. I am just don't know what design pattern achieves this.
Well, you can't. You can return a promise though:
var getData, myFunc;
getData = function () {
var d = $.Deferred();
$.get("http://somewhere.com/data.xml", function (data) {
d.resolve($("#selector", data).html())
});
return d.promise();
};
getData().then(function (data) {
alert(data);
});
demo http://jsfiddle.net/W75Kt/2/
A while back I found some code that allows you to filter the contents of a SELECT by typing in a text element. It works well however, over time the performance degrades pretty badly. I'm not sure if it is the filter code or the way in which I am activating it.
The SELECT shows up in a modal dialog (bootstrap) so I have the following code:
$('#myModal').on('shown', function () {
$(".focusable").val("").focus();
var select = $('#myModal').find(".modal-body").find("select");
var text = $('#myModal').find(".modal-body").find("input[type='text']");
select.filterByText(text, true);
});
And here is the filter code:
jQuery.fn.filterByText = function (textbox, selectSingleMatch) {
return this.each(function () {
var select = this;
var options = [];
$(select).find('option').each(function () {
options.push({value:$(this).val(), text:$(this).text(), data:$(this).data("short-name")});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function () {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search, 'gi');
$.each(options, function (i) {
var option = options[i];
if (option.text.match(regex) !== null) {
var copyOption = $('<option>').text(option.text).val(option.value);
copyOption.data("short-name", option.data);
$(select).append(copyOption);
}
});
if (selectSingleMatch === true &&
$(select).children().length === 1) {
$(select).children().get(0).selected = true;
}
});
});
};
Can anyone shed some light on where my performance issue(s) might be and how to solve it?
reading through the comments I would suggest to add the following:
$(textbox).bind('change keyup', function(event) {
console.log(event);
// your code
});
Is the event triggered more than once on a single keyup after some times the dialog is shown?
$('#myModal').on('hidden', function () {
$('#myModal').find(".modal-body").find("input[type='text']").off("change keyup");
});