I am trying to get geojson data (point coordinates of a track) using the arcgis online REST API.
var data = {
};
// sends AJAX request and forwards the returned data to the visualiser
data.requestJSON = function(requestParameters) {
$.ajax({
url: "https://services.arcgis.com/........=*&f=geojson" ,
method: 'GET',
success: function(response) {
visualizer.sendDataToMap(response);
},
error: function(error) {
}
});
};
The geojson data should the be processed in another .js and added to a map.
But I cannot turn the data in a vector.
I found some helpful answers here in the forum, but it still does not work.
var visualizer = {}
//prepare the data for visualisation
visualizer.sendDataToMap = function(jsonData) {
console.log("jsondata",jsonData);
var track = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(jsonData)
});
console.log("track",track);
}
The geojson data from the ajax request shown in the console looks as if the right data is passed.
But turning it into a vector, according to some code line I found here in the forum, does not seem to work. I do not understand the console.log.
Can anyone give a hint how to do that?
The console error message looks like
ol.js:319 Uncaught TypeError: b.R is not a function
at mn.l.Va (ol.js:319)
at Object.visualizer.sendDataToMap (visualizer.js:40)
at Object.success (dataProvider.js:10)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at z (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)
Or maybe someone has done the same and could provide an example I could try to follow.
Thanks.
Related
I'm working on a Cloud Code function that uses facebook graph API to retrieve users profile picture. So I have access to the proper picture URL but I'm not being able to acreate a Parse.File from this URL.
This is pretty much what I'm trying:
Parse.Cloud.httpRequest({
url: httpResponse.data["attending"]["data"][key]["picture"]["data"]["url"],
success: function(httpImgFile)
{
var imgFile = new Parse.File("file", httpImgFile);
fbPerson.set("profilePicture", imgFile);
},
error: function(httpResponse)
{
console.log("unsuccessful http request");
}
});
And its returning the following:
Result: TypeError: Cannot create a Parse.File with that data.
at new e (Parse.js:13:25175)
at Object.Parse.Cloud.httpRequest.success (main.js:57:26)
at Object.<anonymous> (<anonymous>:842:19)
Ideas?
I was having trouble with this exact same problem right now. For some reason this question is already top on Google results for parsefile from httprequest buffer!
The Parse.File documentation says
The data for the file, as 1. an Array of byte value Numbers, or 2. an Object like { base64: "..." } with a base64-encoded String. 3. a File object selected with a file upload control. (3) only works in Firefox 3.6+, Safari 6.0.2+, Chrome 7+, and IE 10+.
I believe for CloudCode the easiest solution is 2. The thing that was tripping me earlier is that I didn't notice it expects an Object with the format { base64: {{your base64 encoded data here}} }.
Also Parse.Files can only be set to a Parse.Object after being saved (this behaviour is also present on all client SDKs). I strongly recommend using the Promise version of the API as it makes much easier to compose such asynchronous operations.
So the following code will solve your problem:
Parse.Cloud.httpRequest({...}).then(function (httpImgFile) {
var data = {
base64: httpImgFile.buffer.toString('base64')
};
var file = new Parse.File("file", data);
return file.save();
}).then(function (file) {
fbPerson.set("profilePicture", file);
return fbPerson.save();
}).then(function (fbPerson) {
// fbPerson is saved with the image
});
Is it is possible to send image through meteor call to the API?
Client js
var r = {image : image};
Meteor.apply('callToServer', r, function(error, result){
console.log(result);
});
Server js
Meteor.methods({
uploadAndSaveToDB: function(data){
var result = Meteor.http.post(apiUrl, {
params: { image : data['image']}
});
var result = JSON.parse(result.content);
return result;
},
});
If your question is about how to get the image data and send it to your api, it depends on a couple factors:
How are you getting the image's data in the first place from your app (a submission form, a URL, some drawing library...)
In what format does the API you are calling expects the image data to be sent (URL, raw data, encrypted...)
If you are simply asking if it is doable, then yes, definitely. You will just need to add the http package for this:
meteor add http
You can then make requests to your api pretty much like you wrote it. Just make sure to give the right name to your method call (also use call and not apply if you are not submitting an array of arguments):
Client js
var r = {image : image};
Meteor.call('uploadAndSaveToDB', r, function(error, result){
console.log(result);
});
Server js
Meteor.methods({
uploadAndSaveToDB: function(data){
var result = HTTP.post(apiUrl, {
params: { image : data['image']}
});
var result = JSON.parse(result.content);
return result;
},
});
How show something from parse.com data base ? Give me code please. I just only sturted learning js. For example how show all users. Or how show information about one user. Help please )
Hi I would suggest you to start learning parse ans JS with all the proper documentation provided. Documentations
If you are looking for a simple example using Parse and JS, take a look at the below code,
myObject.fetch({
success: function(myObject) {
// The object was refreshed successfully.
},
error: function(myObject, error) {
// The object was not refreshed successfully.
// error is a Parse.Error with an error code and message.
}
});
Or you can refer to the below example also, where we can make use of handlebar.js to display each blog object.
$(function() {
Parse.$ = jQuery;
// Replace this line with the one on your Quickstart Guide Page
Parse.initialize("KEYS", "KEYS");
// Your Parse application key
var Blog = Parse.Object.extend("Blog");
var Blogs = Parse.Collection.extend({
model: Blog
});
var blogs = new Blogs();
blogs.fetch({
success: function(blogs){
console.log(blogs);
var blogsView = new BlogsView({ collection: blogs });
blogsView.render();
$('.main-container').html(blogsView.el);
},
error: function(blog, error){
console.log(error);_
}
});
var BlogsView = Parse.View.extend({
template: Handlebars.compile($('#blogs-tpl').html()),
render: function(){
var collection = { blog: this.collection.toJSON() };
this.$el.html(this.template(collection));
}
});
});
Our team has developed a JS HTML5 canvas based paint application. In the following code, the image data is fetched from the canvas as base 64 encoding and posted to a servlet via ajax. The data post behaves erratically. If the image is simple , as in a straight line, I get Ajax status = 200 and the image gets saved. If the image is complex, then I get a status = 400 and the data is not saved.
Why should the content of the POST create issues with posting of the data itself?
function getCode(){
var canvas = document.getElementById('imageView');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
// save canvas image as data url
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
var uri= document.getElementById('canvasImg').src;
uri = uri.replace('data:image/png;base64,','');
uri = uri.replace('=', '');
uri = uri.trim();
alert("uri is "+uri);
var ajaxobject ;
if(window.XMLHttpRequest){
ajaxobject = new XMLHttpRequest();
} else if(window.ActiveXObject){
ajaxobject = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.ActiveXObject){
ajaxobject = new ActiveXObject("Msxml2.XMLHTTP");
}
ajaxobject.open("POST", "SaveImageServlet?image="+uri, true);
ajaxobject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajaxobject.onreadystatechange = function(){
if(ajaxobject.readyState==4){
alert(ajaxobject.status);
if(ajaxobject.status==200){
alert(ajaxobject.responseText);
}}
};
ajaxobject.send(null);
}
From looking at your code, the problem seems that you're passing the data in querystring instead of using the request body (as you should be doing since you're setting the POST verb).
Your uri should look like this:
SaveImageServlet
without the question mark and the parameter. The parameter should be set in the request body. Using jquery ajax your request would look like this:
$.ajax({
contentType: 'text/plain',
data: {
"image": yourBase64string
},
dataType: 'application/json', // or whatever return dataType you want
success: function(data){
// callback in case of success
},
error: function(){
// callback in case of error
},
type: 'POST',
url: '/SaveImageServlet'
});
On server side you should be reading the data from the appropriate place. For example, if you're using .Net read it like this:
Request.Form["image"]
instead of:
Request.Querystring["image"]
This should work as intended and consistently.
#Matteo, Thanks for your help and effort. However, AJAX issue never got solved. I found a way to send the base64 image data to the servlet. Just appended it to a hidden field and sent it as a regular form field.
I'm trying to upload a photo to Appcelerator Cloud Services (ACS) storage using Trigger.io.
I can't figure out the correct syntax to use for the file object.
I'm getting an error "Error: Syntax error, unrecognized expression: #[object Object]"
Here's my relevant code:
$("#photograph-record").on("click", function(){
forge.file.getImage({source:"camera", width: 280, height: 280},function(file) {
var data = {
photo: file //the ID of file input control
};
sdk.sendRequest('photos/create.json', 'POST', data, callback);
});
});
Here's the Docs for the ACS Photo class - http://cloud.appcelerator.com/docs/api/v1/photos/create
Required Parameters - photo: the attached binary file
Since it needs to be a binary I tried "photo: forge.file.string(file)" (http://docs.trigger.io/en/v1.4/modules/file.html#modules-file), but got an error on the Appcelerator side "Photo parameter required for photo upload".
I have no problem passing the image into my App page views using forge.file.url, so I know there's no problems with the file object, it's just figuring out the correct syntax to pass it as a binary to the sdk.sendRequest call.
Any ideas on what I need to be passing in the data variable to get this to work?
The Appcelerator docs are pretty good here - it looks like they're expecting a POST parameter called photo which contains the binary image data.
To do that using our request module:
$("#photograph-record").on("click", function(){
forge.file.getImage({source:"camera", width: 280, height: 280},function(file) {
file.name = 'photo'; // the magic
forge.request.ajax({
url: 'https://api.cloud.appcelerator.com/v1/photos/create.json',
files: [file],
success: function () { ... },
error: function () { ... }
});
});
});
I don't see a way to use their JS library here, because they're expecting you to pass in the id of a HTML form element to get data from, but we're interacting with the camera or gallery directly...