In Openlayers 3.9.0 I use loader to get a vector layer from Geoserver. Here is the code
var sourceVector = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent) {
$.ajax('http://localhost:5550/geoserver/mymap/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=mymap:mylayer&outputFormat=application/json',
{type: 'GET'})
.done(
function(response) {
var geojsonFormat = new ol.format.GeoJSON({});
sourceVector.addFeatures(geojsonFormat.readFeatures(response,{dataProjection :projection,featureProjection : projection}));
})
.fail(function () {alert("BAD");});
},
strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}))
});
I try to change strategy to strategy: new ol.loadingstrategy.bbox but I get Uncaught TypeError: this.strategy_ is not a function.
Most of the examples set bbox strategy and also a BBOX on the url. If I add ....&BBOX='+extent.join(',') at the end of the url I still get the same error. What am I missing? Is it the strategy, the url, the settings? How do I fix this?
Thanks
You should not initialize a new ol.loadingstrategy.bbox, it is already an ol.LoadingStrategy (unlike ol.loadingstrategy.tile which is a factory returning an ol.LoadingStrategy based on a TileGrid.
// when using the bbox strategy:
strategy: ol.loadingstrategy.bbox
// when using the tile strategy:
strategy: new ol.loadingstrategy.tile(tileGrid)
Related
How can i send to server a Blob, File and FormData Instance Object using these two way Ext.Ajax.request and Ext.form.Panel.submit?
var blob = new Blob(chunks, {type: chunks[0].type});
var file = new File(["lorem.."], "test.txt", {type: "text/plain"});
var formData = new FormData();
formData.append("text", file);
formData.append("video", blob, "video.webm");
How to add "formData" or simple "blob" and/or "file" into Ext.Ajax.request(options) and Ext.form.Panel.submit(options)?
Another doubt: How to set "file" into value of "filefield" component?
Thanks!
Something in the line of this might work:
Ext.Ajax.request({url: 'https://some.url.com', method: 'POST', rawData: formData, contentType: false})
You can check out this thread as well.
I load an XYZ layer as
var layer = new ol.layer.Tile({
title: advanced.name ? advanced.name : "XYZ Layer " + new Date().getTime,
source: source ? source :new ol.source.XYZ({
url: url
})
})
map.addLayer(layer);
It successfully will add the layer, but it doesn't request the tiles until the map is moved, so to the user nothing has changed. Is there a way around this?
I am building a ruby on rails app that creates a unique map for each Product model in the database and inserts it into a slide of a flexslider slideshow.
This is working perfectly for json requests that only contain 1 marker. However, when json requests are made with 2 markers, the map's tiles do not render (but both markers are displayed and fit to view).
The rendering issue is solved by moving the "map.fitBounds(featureLayer.getBounds());" into the featureLayer.on('click') function. But I need the functionality to fitBounds after the JSON is loaded rather than on click.
The error I get in the browswer console is: "Uncaught TypeError: Cannot read property 'lat' of undefined" I have searched dozens of threads for help with this, but cannot solve it. I am a newbie to all of this, so your help would be greatly appreciated.
MY JAVASCRIPT
function initProductMap(product) {
var map;
map = L.mapbox.map(document.getElementById(product), 'jasonpearson.ha88l84b');
var featureLayer;
featureLayer = L.mapbox.featureLayer().loadURL('/products/' + product + '.json').addTo(map);
map.scrollWheelZoom.disable();
map.zoomControl.setPosition('bottomright');
featureLayer.on('ready', function() {
map.fitBounds(featureLayer.getBounds());
featureLayer.on('click', function(e) {
e.layer.unbindPopup();
window.open(e.layer.feature.properties.url, '_self');
});
});
$('ul.slides li').show();
map.invalidateSize();
};
MY RAILS CONTROLLER
def show
#product = Product.find(params[:id])
#geojson = Array.new
#product.producers.each do |producer|
#geojson << {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [producer.longitude, producer.latitude]
},
properties: {
name: producer.name,
'marker-color' => '#9f3335',
'marker-symbol' => 'circle',
'marker-size' => 'medium',
url: Rails.application.routes.url_helpers.producer_path(producer)
}
}
]
}
end
I have gone from incorporating extjs in my original asp.net application which worked when hardcoding any data stores and binding them to the charts/grids. When I tried proxy url calls or even fetching the data from code behind and wrapping in json I still do not get the data into the grid. So I gave up and went with extjs and nodejs and still using mongodb; this worked perfectly but I still have to learn to create a better UI using express/jade etc which is a different project now. But then I came across using MVC with extjs and with a sample project tried the same thing (the sample had hardcoded data) and I cannot for the life of me get it to display the data.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'username', type: 'string' }
]
});
Ext.define('UserStore', {
extend: 'Ext.data.Store',
model: 'User',
autoload: true,
proxy: {
type: 'ajax',
url: '/dashboard.aspx/getDBData',
reader: {
type: 'json',
root: 'users'
},
listeners:
{
exception: function (proxy, response, operation) {
Ext.MessageBox.show(
{
title: 'REMOTE EXCEPTION',
msg: operation.getError(), icon: Ext.MessageBox.ERROR, buttons: Ext.Msg.OK
});
}
}
}
});
var myStore = Ext.getStore('UserStore');
the url I am including here is the codebehind function that I initially tried which accesses the mongodb and returns json result. Not working.
Now from the extjs node.js application I have results coming into localhost:3000/userlist which returns a list from mongodb and displays it as follows:
extends layout
block content
h1.
User List
u1
each user, i in userlist
li
a(href="mailto:#{user.email}")= user.username
Now would it be possible to use the same server and call the base url and then change the route.js file to return the mongodb json result or call the mongodb localhost:27017 and get a result. Really confused here
exports.index = function(db) {
return function(req, res) {
var collection = db.get('usercollection');
collection.find({},{}, function(e,docs){
res.render('userlist', {
"userlist" : docs
});
});
};
};
EDIT:
First thing I realized from asp.net perspective was that I was not calling a webservice just a codebehind method. Any comments will still be appreciated.
EDIT 2:
{"connTime":null,"userName":"101591196589145","clientName":null,
"feedUrl":null,"dconnTime":null,"errMessage":null,"ip":null}
You have identified a root in your store as 'users'
reader: {
type: 'json',
root: 'users'
},
But there is no root in your returned json such as:
{"users":[{"connTime":null,"userName":"101591196589145","clientName":null,
"feedUrl":null,"dconnTime":null,"errMessage":null,"ip":null}]}
I'm trying to create a filemanager using Angularjs and I recently discovered Breezejs and was interested in trying to use it to communicate with my backend and manage my model relations. The backend is a rest api over which I have full control.
I am however running into a problem. I know the id of the file, so I would like to make a request to url of the form backend_url/files/:fileId where :fileId is the url of the file base64 encoded. According to the documentation I should use EntityManager.fetchEntityByKey() for this purpose. This is the function that i use to create the Angularjs service:
var FilestoreService = function () {
var dataService, manager;
dataService = new breeze.DataService({
serviceName: "../VFS-Symfony-Backend/web/app_dev.php/filesystems/local/",
hasServerMetadata: false
});
manager = new breeze.EntityManager({
dataService: dataService
});
manager.metadataStore.addEntityType(fileEntityType);
return {
findOneById: function (id) {
/* I have tried to leave the 3th argument empty or changing it to false with the same results */
return manager.fetchEntityByKey("File", id, true).then(function(){console.log("success");}).fail(function(){console.log("failure");});
/* I have also tried the following approach with the same result:
var type, key, query;
type = manager.metadataStore.getEntityType("File");
key = new breeze.EntityKey(type, id);
query = breeze.EntityQuery.fromEntityKey(key);
return manager.executeQuery(query);
*/
}
};
};
where fileEntityType is defined as:
var FileEntityType = new breeze.EntityType({
shortName: "File"
});
FileEntityType.addProperty(new breeze.DataProperty({
name: "uri",
dataType: breeze.DataType.String,
isNullable: false
}));
FileEntityType.addProperty(new breeze.DataProperty({
name: "mTime",
dataType: breeze.DataType.Int16,
isNullable: false
}));
FileEntityType.addProperty(new breeze.DataProperty({
name: "type",
dataType: breeze.DataType.String,
isNullable: false
}));
FileEntityType.addProperty(new breeze.DataProperty({
name: "size",
dataType: breeze.DataType.int16,
isNullable: true
}));
However, when I call findOneById no request is made to the server and 2 lines are logged to the console:
Should be empty:[] by q.js
failure (as per the fail() callback function)
A 'normal' query (manager.executeQuery(new breeze.EntityQuery().from("Files"));) does result in a request to the server as expected.
I am really quite lost here. I have searched for a solution all weekend and finaly decided to post on SO hoping someone might be able to help me.
Thanks very much for reading.
At least one problem is that you haven't identified the key ('id'?) in your metadata description of the "File" entity type. You have defined every other property except the 'id' property.
You know this but let me tell other readers of this question who may not understand that you are defining the metadata on the JS client rather than retrieving it from the server.
I'm also curious why you are using int16? Is that really the right type? Do you really need to shave off the two bytes?
Finally, Breeze's fetchEntityByKey won't make a request URL in the form "backend_url/files /:fileId". Instead, the request URL will be "backend_url/files /?id=:fileId" as befits an OData query. See the network traffic for Id queries in the queryTests.cs of the DocCode sample.
You can still get that file if the server expects the URL you specified. You won't be using the Breeze query syntax. You'll just hit the service with the URL it expects, e.g.,
function findOne(id) {
// check cache first
var file = manager.getEntityByKey('File', id);
if (file) {
console.log("got it from cache");
return Q(file); // got it; return in resolved promise
}
// not in cache; get from server
return breeze.EntityQuery
.from('Files/'+id) // constructs the URL you want
.using(manager).execute()
.then(function(data){
console.log("success");}
// return the file in a resolved promise
return data.results[0] || null;
})
.fail(function(error){
console.log("failure: "+ error.message);
});
}
This is a variation on the getByIdCacheOrRemote method in queryTest.cs in the DocCode sample.
Yes, it's longer. You're reimplementing fetchEntityByKey so you can hit the remote service the way it expects.
The method begins by looking for the file in cache. The getEntityByKey is a synchronous search of the cache. The findOne method has async syntax ... returns a promise ... because it might have to go to the server. So if we find the file in cache (synchronously), we wrap the result in a resolved Q.js promise for the benefit of the caller which is expecting findOne to be asynchronous.
If the file is not found in cache, you go to the server with a "query" that is really just a request on the URL of your choice.
I haven't tried this a long time. I'm sure you'll tell me if it works ... or does not. If it doesn't, it should and we'll fix it so it does.
As Ward suggested the EnityType I created did need one of its field to be marked as the key field. Besides that the EntityType also needs to have a defaultResourceName to be supplied to its constructor. I think this explains why the 'normal' query did work (the resourceName is supplied by from()) and why fetchEntityByKey did not work. The updated FileEntityType now looks like this:
var FileEntityType = new breeze.EntityType({
shortName: "File",
defaultResourceName: "files"
});
FileEntityType.addProperty(new breeze.DataProperty({
name: "id",
dataType: breeze.DataType.String,
isNullable: false,
isPartOfKey: true
}));
// These properties were not altered
FileEntityType.addProperty(new breeze.DataProperty({
name: "uri",
dataType: breeze.DataType.String,
isNullable: false
}));
FileEntityType.addProperty(new breeze.DataProperty({
name: "mTime",
dataType: breeze.DataType.Int16,
isNullable: false
}));
FileEntityType.addProperty(new breeze.DataProperty({
name: "type",
dataType: breeze.DataType.String,
isNullable: false
}));
FileEntityType.addProperty(new breeze.DataProperty({
name: "size",
dataType: breeze.DataType.int16,
isNullable: true
}));