OpenLayers 3 Remote JSON Data - openlayers-3

I have a remote JSON file with a list of houses in inventory. I wan't to plot these on an OL map. The JSON is coming from an API and isn't in standard GeoJSON. I need to get the coordinates from a collection called inventory which is nested one level down from the root object. How can I do this OL 3. In OL2 I did this using the protocol.Script() and on read parsing out the nested items that I needed. So far I have:
var myLayer = new ol.layer.Vector({
title: "Inventory",
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
projection : "EPSG:4326",
url: "http://some.closed.api/inventory/",
strategy: ol.loadingstrategy.bbox
})
})
});
Any pointers to the most efficient way to do this would be appreciated.

I ended up with this solution:
var olSource = new ol.source.Vector(),
layer = new ol.layer.Vector({
source: olSource
});
function successHandler( data ) {
var transform = ol.proj.getTransform(
"EPSG:4326",
map.getView().getProjection()
);
var rootObj = "inventory",
items = data[ rootObj ] ? data[ rootObj ] : data;
items.forEach( function( item ) {
var feature = new ol.Feature( item );
var coordinate = transform(
[ parseFloat( item.longitude ), parseFloat( item.latitude) ]
);
var geometry = new ol.geom.Point( coordinate );
feature.setGeometry( geometry );
olSource.addFeature( feature );
});
}
$.ajax({
url: "http://some.closed.api/inventory",
dataType: 'jsonp',
params: { q: "seattle" },
jsonpCallback: "callback",
success: successHandler
});

Related

UI5 OData Search Help not displaying values

this is the odata response i am getting:
my desired result would be a search help that displays the "TypRolle", "RolleNr" and "RolleOri" columns of the odata response. But right now i am stuck at trying to just display one of them, the "TypRolle" one.
this is what my search help looks like right now:
As you can see, no values are being displayed.
Here is my valueHelpRequest method:
var roletypeUrl = "my odata url";
var attModel = new sap.ui.model.json.JSONModel();
var link = this.getView().byId("roletype"); // roletype input field
var oDataModel = new sap.ui.model.odata.v2.ODataModel(roletypeUrl, {
json: true,
loadMetadataAsync: true
});
oDataModel.read("/ZshNsiAgr01xxlEinzelTypSet", {
success: function(oData, response) {
attModel.setData(oData);
var oValueHelpDialog = new sap.m.Popover({
title: "Rollentyp auswählen",
footer: [new sap.m.Button({
text: "Ok"
})]
});
oValueHelpDialog.openBy(link);
var oItemTemplate = new sap.m.StandardListItem({
title: "test",
description: "{TypRolle}"
});
var oHelpTable = new sap.m.Table({
width: "300pt",
columns: [
new sap.m.Column({
header: [
new sap.m.Label({
text: "Rollentyp"
})
]
})
],
items: {
path: "/results",
template: oItemTemplate
},
items: [
new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{TypRolle}"
})
]
})
]
})
oHelpTable.setModel(attModel);
oValueHelpDialog.addContent(oHelpTable);
I am very thankful for any kind of suggestion and look forward to your answers :)
If you have to do it with JSON model ... here it is
]
})
]
})
oHelpTable.bindAggregation("items", "/results", new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{TypRolle}"
})
]
}));
oHelpTable.setModel(attModel);
oValueHelpDialog.addContent(oHelpTable);
Or else you can directly bind to your default OData model as well and it can fetch the data automatically without you writing the read

How to view a single entry with oModel.read in UI5 Application

I want to display a single entry with oModel.read in my UI5 application and store it in a variable.
What i want to do is, to select a single entry of my Model and store it in a variable:
If i execute my code i get the following in the Browser-Console:
https://ibb.co/FmPNSPm
Here is my code (but is not working):
var hostPort = "";
var oDataPath = "/.../KOMMI_SERVICE/";
var sServiceUrl= hostPort + oDataPath;
var oModel = new sap.ui.model.odata.ODataModel (sServiceUrl, true);
var oJsonModel = new sap.ui.model.json.JSONModel();
var text123;
oModel.read("/Komm(ZSMATERIALTEXT ='"+text123+")",oEntry,null,false,
function(oData, oResponse){
},function(err){
console.log("err");
});
I think that this path "/Komm(ZSMATERIALTEXT ='"+text123+")" is not correct.
You can try using filter. For example:
var sPath = "/Komm";
var oFilter = [
new Filter("ZSMATERIALTEXT", "EQ", text123)
];
oModel.read(sPath, {
filters: oFilter,
success: function (oData, oResponse) {
// save variable
},
error: function (oError) {
// show error
}
});
Try this:
I think you're missing a " ' "...
oModel.read("/Komm(ZSMATERIALTEXT ='"+text123+"')",oEntry,null,false,
function(oData, oResponse){
},function(err){
console.log("err");
});
Or
oModel.read("/Komm", {
filters: [
new sap.ui.model.Filter("ZSMATERIALTEXT", sap.ui.model.FilterOperator.EQ, text123)
],
success: function (oData, oResponse) {
// do some...
},
error: function (oError) {
// error
}
});

creating dynamic table with data from odata service in ui5

I'm a complete newb on sap ui5.
I'm trying to generating a table on my webpage generated in sap web ide.
The data for this table is a .json file accessed via odata service.
I've come this far:
oModel is generated:
function initModel() {
var sUrl = "/sap/opu/odata/sap/ZGWS_someService/CollectionSet?$format=json";
var oModel = new sap.ui.model.odata.ODataModel(sUrl, true);
sap.ui.getCore().setModel(oModel);
}
now I want to generate a table on my html site with the data in the .json file.
So I have to create columns based on the properties of the items and then filling the rows with the current data.
.json looks like this:
{
"d": {
"results": [
{
"property1": "123",
"property2": "346"
},
{
"property1": "123",
"property2": "555"
}
I have no solution for this yet - can you help me out?
greetz,
simon
I created the table in the controller and sorted the data via lodash.
Is that good practice?
var oTable = this.byId("table");
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Info1"
}),
sortProperty: "INTST",
template: new sap.ui.commons.TextView().bindProperty("text", "key")
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Count"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "value")
}));
$
.ajax({
url: '/.../ServiceSet',
jsonpCallback: 'getJSON',
contentType: "application/json",
dataType: 'json',
success: function(data, textStatus, jqXHR) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
//Create a model and bind the table rows to this model
//Get the forecastday array table from txt_forecast object
var aData = oModel.getProperty("/d/results");
var aData2 = _.countBy(_.map(aData, function(d) {
return d.VALUE;
}));
var aData3 = Object.keys(aData2).sort().map(key => ({
key,
value: aData2[key]
}));
oModel.setData({
modelData: aData3
});
oTable.setModel(oModel);
}
});
oTable.bindAggregation("rows", {
path: "/modelData"
});

Feature grid not taking data from geoserver layer WMS using geoext 3

this is my grid.js file which is included in the grid.html. I don't know what is wrong with my code. I have seen examples and tried to perform same with my geoserver layer but no output. My code after variable store is not working. I want to load my file on the web and display its data in feature grid using geoext 3.0.0. Kindly help.
Ext.require([
'Ext.container.Container',
'Ext.panel.Panel',
'Ext.grid.GridPanel',
'GeoExt.component.Map',
'GeoExt.data.store.Features'
]);
Ext.onReady(function () {
var wmsLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/opengeo/wms',
params: {'LAYERS': 'opengeo:abc'},
serverType: 'geoserver'
})
});
var baseLayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://ows.terrestris.de/osm-gray/service',
params: {'LAYERS': 'OSM-WMS', 'TILED': true}
})
});
var view = new ol.View({
center: ol.proj.fromLonLat([75, 36]),
zoom: 8
});
var map = new ol.Map({
layers: [ baseLayer, wmsLayer ],
target: 'map',
view: view
});
var store = Ext.create("GeoExt.data.store", {
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'opengeo:abc'},
autoLoad: true
});
grid1 = Ext.create('Ext.grid.Panel', {
title: 'Main Cities',
border: true,
region: 'east',
store: store,
columns: [
{text: 'CityName', dataIndex: 'Name'}
],
width: 300
});
var mapComponent = Ext.create('GeoExt.component.Map', {
map: olMap
});
var mapPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
height: 400,
layout: 'fit',
items: [mapComponent]
});
var description = Ext.create('Ext.panel.Panel', {
contentEl: 'description',
region: 'south',
title: 'Description',
height: 180,
border: false,
bodyPadding: 5,
autoScroll: true
});
Ext.create('Ext.Viewport', {
layout: 'border',
items: [mapPanel, grid1, description]
});
});
In the first lines you require GeoExt.data.store.Features but try to instantiate the package GeoExt.data.store later. Try this:
var store = Ext.create("GeoExt.data.store.Features", {
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'opengeo:abc'},
autoLoad: true
});
Also, you try to hand over a variable olMap to the GeoExt map component. You named it map some lines above. Try:
var mapComponent = Ext.create('GeoExt.component.Map', {
map: map
});

Backbone.js - How to save model by form and post to server

I'm n00b in BackboneJS/RequireJS and I'm developing an web app that use a RESTful API.
So I've a model like this:
models/pet.js
define([
'backbone'
], function(Backbone){
var PetModel = Backbone.Model.extend({
urlRoot: 'http://localhost:3000/pet',
idAttribute: '_id',
defaults: {
petId: "",
type: "",
name: "",
picture: "",
description: "",
breed: "",
size: "",
sex: "",
age: "",
adopted: false,
}
});
return PetModel;
});
a collection: collections/pets.js
define([
'backbone',
'models/pet'
], function(Backbone, PetModel){
var PetsCollection = Backbone.Collection.extend({
url: 'http://localhost:3000/pets',
model: PetModel,
});
return PetsCollection;
});
And a view that renders a form to add new models (Maybe it's possible another way more elegant)
views/petAddNew.js
define([
'jquery',
'backbone',
'models/pet',
'collections/pets',
'text!templates/pet/addNew.html'
], function($, Backbone, PetModel, PetsCollection, petAddNewTemplate){
var PetAddNewView = Backbone.View.extend({
el: $('#formAdd'),
template: _.template(petAddNewTemplate),
events: {
'click #add' : 'submitAdd',
},
initialize: function() {
this.model = new PetModel();
this.collection = new PetsCollection();
_.bindAll(this, 'submitAdd');
},
render: function() {
var view = this;
view.$el.html( view.template );
return view;
},
submitAdd: function(e) {
//Save Animal model to server data
e.preventDefault();
var pet_data = JSON.stringify( this.getFormData( this.$el.find('form') ) );
this.model.save(pet_data);
this.collection.add(this.model);
return false
},
//Auxiliar function
getFormData: function(form) {
var unindexed_array = form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
},
});
return PetAddNewView;
});
So when I submit the form I don't post any data to server. I don't know how to fix it.
Any ideas? Thanks in advance!
You need set the attributes first and then save.
//Auxiliar function
getFormData: function(form) {
var self = this;
var unindexed_array = form.serializeArray();
$.map(unindexed_array, function(n, i){
self.model.set({
n['name']: n['value']
});
});
}
Now this.model.save() works (saving on the server side).
You can see it work in a fiddle.
Model.save expect an object/hash of new values, just like Model.set. Here you're passing a string as the attributes arguments.

Resources