Related
This is how my current map looks like.
const selectslider = vl.param("maxrentalcost")
.value(400)
.bind(vl.slider(400, 1700, 50).name("Max Rental Cost"));
const buildings = vl
.markGeoshape()
.data({
values: somedata6,
format: {
type: "json",
property: "features"
}
})
.project(vl.projection("identity").reflectY(true))
.encode(
vl.fill({
value: "#ffffff"
}),
vl.stroke({
value: "black"
})
);
const apartments = vl
.markGeoshape()
.data({
values: somedata6,
format: {
type: "json",
property: "features"
}
})
.params(selectslider)
.transform(
vl.filter('maxrentalcost > datum.properties.rentalcost')
)
.project(vl.projection("identity").reflectY(true))
.encode(
vl.stroke({
value: "black"
}),
vl.fill({
field: "properties.rent",
type: "quantitative",
title: "Average Building Rent",
scale: { scheme: "reds", domainMax: 1200 }
})
);
return vl.layer(buildings, apartments).width(850).height(850).render();
I can't get the slider to work to show only the polygons(apartments) with rent property less than the slider value.
The geoshape has two layers. The bottom layer draws all the buildings. The top layer only draws buildings with nonnull rent property.
I would appreciate any help.
Sample data:
I use openlayers 6.
I have an issue with displaying a layer on the map.
I load the layer as XML in GML format and try to display, but the layer doesn't show on the map.
Here is the vector definition:
function createLayer(layer, strategy, extent, projection) {
if (!strategy) strategy = allStrategy;
let vsource = createSourceLayer(strategy, layer, extent, projection);
var vector = new VectorLayer({
source: vsource,
visible: true,
style: new Style({
image: new Icon({
src: '/images/icon-alert-blue.png',
size: [30, 30],
})
})
});
return vector;
}
Here is the vector source definition:
function createSourceLayer(strategy, layer, extent, projection) {
let url = "url resources";
let vectorSource = new VectorSource({
format: new WFS({
gmlFormat: new GML({
featureType: "WW_MONITOR",
featureNS: "http://www.opengis.net/wfs",
srsName: "EPSG:2039"
})
}),
loader: function (extent, resolution, projection) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function () {
if (xhr.status === 200) {
vectorSource.addFeatures(
vectorSource.getFormat().readFeatures(xhr.responseText, {
dataProjection: projection,
extent: [195380.430213, 739554.42288, 207900.538587, 750611.382494]
})
);
} else {
console.log("loader fail");
}
},
xhr.send();
},
strategy: strategy
});
return vectorSource;
}
Here is the map definition:
map = new Map({
layers: [baseLayer,layer],
view: view,
target: 'map',
});
Here is view definition:
view = new View({
extent: [195380.430213, 739554.42288, 207900.538587, 750611.382494],
maxResolution: 80000,
center: [201640.48440000002, 745082.902687],
projection: israeliTM,
zoom: 0
});
UPDATE:
Here is example of single featuere in GML that I get from server:
<?xml version="1.0" encoding="UTF-8"?>
<wfs:FeatureCollection xsi:schemaLocation="http://www.opengis.net/gml http://schemas.opengis.net/gml/2.1.2/feature.xsd http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ns216630453="http://fdo.osgeo.org/schemas/feature/ns216630453"
xmlns:wfs="http://www.opengis.net/wfs"
xmlns:gml="http://www.opengis.net/gml">
<!-- Feature 1 -->
<gml:featureMember>
<ns216630453:WW_MONITOR>
<ns216630453:FeatId>1</ns216630453:FeatId>
<ns216630453:Name>Donald garage</ns216630453:Name>
<ns216630453:Street>Dundas str </ns216630453:Street>
<ns216630453:Building>128</ns216630453:Building>
<ns216630453:StreetCode>354</ns216630453:StreetCode>
<ns216630453:FK_Category>11</ns216630453:FK_Category>
<ns216630453:WaterUsing>27</ns216630453:WaterUsing>
<ns216630453:Exceptions>0</ns216630453:Exceptions>
<ns216630453:Geometry>
<gml:Point>
<gml:coordinates>199480.000000,747711.000000</gml:coordinates>
</gml:Point>
</ns216630453:Geometry>
</ns216630453:WW_MONITOR>
</gml:featureMember>
<!-- Feature 2 -->
.
.
.
</wfs:FeatureCollection>
And here how it looks after parsing:
0: Feature
dispatching_: {}
disposed_: false
geometryChangeKey_: null
geometryName_: "geometry"
id_: undefined
listeners_: {change: geometry: Array(1)}
ol_uid: "130"
pendingRemovals_: {}
revision_: 0
styleFunction_: undefined
style_: null
target_: undefined
values_:
Building: "128"
Exceptions: "0"
FK_Category: "11"
FeatId: "1"
Geometry:
Point:
coordinates: "199480.000000,747711.000000"
__proto__: Object
__proto__: Object
Name: "Donald garage"
Street: "Dundas str"
StreetCode: "354"
WaterUsing: "27"
__proto__: Object
__proto__: BaseObject
The projection that I use in vector layer is the same projection that I use in view.
Here the defenition of the projection:
proj4.defs("EPSG:2039", "+proj=tmerc +lat_0=31.73439361111111 +lon_0=35.20451694444445 +k=1.0000067 +x_0=219529.584 +y_0=626907.39 +ellps=GRS80 +towgs84=-48,55,52,0,0,0,0 +units=m +no_defs");
register(proj4);
let israeliTM = getProjection('EPSG:2039');
Any idea why the map doesn't show?
The source is WFS 1.0.0 which uses GML 2.1.2
<wfs:FeatureCollection xsi:schemaLocation="http://www.opengis.net/gml http://schemas.opengis.net/gml/2.1.2/feature.xsd http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd"
So the parser format must be specified as GML2
format: new WFS({
gmlFormat: new GML2({
featureType: "WW_MONITOR",
featureNS: "http://www.opengis.net/wfs",
srsName: "EPSG:2039"
})
}),
Based on the explanation here
of how to use json with fabricjs I've written some code to serialise and deserialise my fabricjs canvas. But it doesn't work and I think the difficulty is that my lines have triangle properties. When deserialising a line, the relevant triangle may not yet exist, so I'm not surprised that they seem to be unrelated to the lines after this is done. How do I resolve this? Should I give each triangle a name so that I can find it after deserialisation and set it to be the appropriate triangle for the line? Or is subclassing the way forward? Thanks.
var line = new fabric.Line([0, 0, 0, 0], {
fill: '#444',
stroke: '#444',
strokeWidth: 2,
id: 'arrow',
name: 'arrow',
selectable: true, //if turn this off hovercursor doesn't work. So arrow is selectable. But setting hasBorders to false stops blue rectangle appearing around it so there's no problem.
lockMovementX: true,
lockMovementY: true,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
strokeDashArray:[10,5],
hasControls: true,
lockRotation: true,
hasBorders: false,
sourceObject: sourceObject,
targetObject: targetObject,
offset: offset,
cornerColor: 'rgba(255,0,0,1)',
stateProperties: ['triangle'],
});
/** [Create triangle attached to the end of the line */
line.triangle = new fabric.Triangle({
originX: 'left',
originY: 'top',
selectable: true,
hasBorders: true,
hasControls: true,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: false,
lockRotation: true,
pointType: 'arrow_start',
width: TRI_WIDTH,
height: TRI_HEIGHT,
fill: '#444',
selectable: false,
});
setxy(line, offset);
line.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
triangle: this.triangle
});
};
})(line.toObject);
canvas.add(line, line.triangle);
i have 100000 records in database...i have to display 50 at a time in enhanced grid when i scroll down next request goes to server and get next 50 like wise ......
i came across that this can be achieved by jsonRestStore....i tried with that but i am not getting that..how to use jsonRest for this purpose ????..plz sugggest me answer
my code is
require([
"dojo/_base/lang", "dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Search","dojox/grid/enhanced/plugins/Filter",
"dojox/grid/enhanced/plugins/Pagination","dojo/data/ItemFileWriteStore",
"dojo/store/JsonRest","dijit/form/Button","dojo/request/xhr", "dojo/dom",
"dojo/dom-construct", "dojo/json", "dojo/on", "dojox/grid/cells/dijit",
"dojo/domReady!"
], function(lang,EnhancedGrid,Search,Filter,Pagination,ItemFileWriteStore,JsonRest,Button,xhr, dom, domConst, JSON, on) {
xhr("//myipaddress/GridExample/string", {
handleAs : "json"
}).then(function(dataa){
/* domConst.place("<p>response: <code>" + JSON.stringify(dataa) + "</code></p>", "output"); */
/* domConst.place("<p>response: <code>" + JSON.stringify(dataa) + "</code></p>", "output"); */
var mydata=dataa;
var yourStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: "sno",
/* items: mydata.aa */
items:mydata
}
});
grid = new EnhancedGrid({
id:'grid',
store : yourStore,
structure : layout,
rowSelector: '20px',
plugins: {
search:true,
pagination: {
pageSizes: ["50","100","500","1000"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 2,
position: "bottom"
},
filter: {
closeFilterbarButton: true,
ruleCount: 5,
itemsName: "rows"
}
}
});
grid.placeAt("myGrid");
grid.startup();
}, function(err) {
alert("error");
}, function(evt) {
});
var id=100000;
var addbutton = new Button({
onClick: function (){
id++;
/* alert(dojox.grid.scroller.firstVisibleRow);
alert(dojox.grid.scroller.lastVisibleRow); */
console.log(arguments);
grid.store.newItem({
sno:id,
sname:'san',
salary:'25000'
});
store.save();
grid.render();
}
}, "addRow");
var removebutton = new Button({
onClick: function (){
var items = grid.selection.getSelected();
alert(items);
if(items.length){
dojo.forEach(items, function(selectedItem){
if(selectedItem !== null){
store.deleteItem(selectedItem);
store.save();
}
});
}
grid.render();
}
}, "removeRow");
var updatebutton = new Button({
onClick: function (){
}
}, "updateRow");
var store1 = new JsonRest({
target: "http://localhost:7080/GridExample/string"
});
store.get(3).then(function(item){
alert(item);
});
});
I am sure you must have found answer to your question by now. But to help others, You haven't tied your JsonRest store (store1) to grid.
Here is example code that does this:
//jsonstore
var jsonStore = new dojo.store.Cache(new dojo.store.JsonRest({
target : "http://localhost:7080/GridExample/string",
idProperty : "id"
}), dojo.store.Memory({
idProperty : "id"
}));
grid = new dojox.grid.EnhancedGrid({
store : dataStore = dojo.data.ObjectStore({
objectStore : jsonStore
}),
id: "grid_id",
structure : layout,
rowSelector : '20px',
selectionMode : "single",
clientSort : true,
plugins : {
selector : true,
/**nestedSorting : true,**/
pagination : {
defaultPageSize : 20,
pageSizes : [ 20, 50, 100, "All" ],
description : true, // display the current position
sizeSwitch : true, // display the page length menu
pageStepper : true, // display the page navigation choices
gotoButton : true, // go to page button
/*page step to be displayed*/
maxPageStep : 4,
/*position of the pagination bar*/
position : "bottom"
}
}
}, "search_results_grid"); // make sure you have a target HTML element with this id
i'm having trouble trying to figure out how this is happening. i'm using Extjs and AJAX with JsonStore from my callback my page in ASP call the database and return some fields in this fields there is a Date and this date return the proper date ex.: "date_creat_post": "29\u002F04\u002F2011"...
Now once i look at my output from this in my page in a datagrid i'm getting the following:
04/05/2013 <----> the date it return in the callback is 04/05/2011
06/05/2012 <----> the date it return in the callback is 06/05/2010
07/04/2012 <----> the date it return in the callback is 07/04/2010
I looked all threw my code to see if they're is a place where i am adding 1 year to the date.
but can't find it. i have been trying now for at least 2 days to figure this out.
Here's my code:
Ext.onReady(function(){
Ext.QuickTips.init();
// for this demo configure local and remote urls for demo purposes
var url = {
local: '', // static data file
remote: '../myurl.asp'
};
// configure whether filter query is encoded or not (initially)
var encode = true;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
var PostStore = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
baseParams : {filter : '[{"type":"boolean","value":false,"field":"is_sent_post"}]'},// we start only with is_sent == false
url: url.remote,
remoteSort: false,
sortInfo: {
field: 'date_creat_post',
direction: 'DESC'
},
storeId: 'Post_Store',
// reader configs
idProperty: 'id_post',
root: 'Post',
totalProperty: 'totalcount',
fields: [{
name: 'id_post',
type: 'number'
}, {
name: 'name_post',
type: 'string'
}, {
name: 'date_creat_post',
type: 'date'//,
//dateFormat: 'Y-m-d H:i:s'
}, {
name: 'from_addr_post',
type: 'string'
}, {
name: 'sender_name_post',
type: 'string'
}, {
name: 'is_sent_post',
type: 'boolean'
}, {
name: 'date_sending_post',
type: 'date'//,
//dateFormat: 'Y-m-d H:i:s'
}, {
name: 'html_post',
type: 'string'
}, {
name: 'list_send_post',
type: 'number'
}],
writer: new Ext.data.JsonWriter({
writeAllFields: true
}),
autoSave: false,
batch: true
});
var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [{
type: 'numeric',
dataIndex: 'id_post'
}, {
type: 'string',
dataIndex: 'name_post'
}, {
type: 'date',
dataIndex: 'date_creat_post'
}, {
type: 'string',
dataIndex: 'from_addr_post'
}, {
type: 'string',
dataIndex: 'sender_name_post'
}, {
type: 'boolean',
dataIndex: 'is_sent_post'
}, {
type: 'date',
dataIndex: 'date_sending_post'
}, {
type: 'string',
dataIndex: 'html_post'
}, {
type: 'numeric',
dataIndex: 'list_send_post'
}]
});
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColModel = function (finish, start) {
var columns = [{
dataIndex: 'id_post',
hidden:true,
header: 'Id',
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'name_post',
header: 'Subject',
width: 150,
id: 'postname',
filter: {
type: 'string'
// specify disabled to disable the filter menu
//, disabled: true
}
}, {
dataIndex: 'date_creat_post',
header: 'Date Created',
renderer: Ext.util.Format.dateRenderer('d/m/Y'),
filter: {
type: 'date' // specify type here or in store fields config
}
}, {
dataIndex: 'from_addr_post',
header: 'From Address',
hidden:true,
id: 'fromaddress',
filter: {
type: 'string'
// specify disabled to disable the filter menu
//, disabled: true
}
}, {
dataIndex: 'sender_name_post',
header: 'Sender Name',
id: 'sendername',
filter: {
type: 'string'
// specify disabled to disable the filter menu
//, disabled: true
}
}, {
dataIndex: 'is_sent_post',
header: 'Status',
filter: {
type: 'boolean' // specify type here or in store fields config
},
renderer: function(value) {
var rtn = (value == 1) ? 'sent' : 'stand-by';
return rtn
}
}, {
dataIndex: 'date_sending_post',
header: 'Sending Date',
hidden:true,
//renderer: Ext.util.Format.dateRenderer('d/m/Y'),
filter: {
type: 'date' // specify type here or in store fields config
}
}, {
dataIndex: 'list_send_post',
header: 'Opticians list',
hidden:true,
id: 'optlist',
filter: {
type: 'number'
// specify disabled to disable the filter menu
//, disabled: true
}
}];
return new Ext.grid.ColumnModel({
columns: columns.slice(start || 0, finish),
defaults: {
sortable: true
}
});
};
/*
//======================contextMenu triggered by right click========================================
*/
var doRowCtxMenu = function ( thisGrid, rowIndex,cellIndex, evtObj )
{
//Ext.popup.msg('Done !', 'Right clicked !');
evtObj.stopEvent();
var sm = thisGrid.getSelectionModel();
var records = sm.getSelections(); // returns an array of Ext.data.Records
try
{
//var r = records[0]; // get the 1st Ext.data.Record of the list
thisGrid.rowCtxMenu = new Ext.menu.Menu({
items: [{
text : '<span style="color:red;">Delete Selected Email ?</span>',
handler : function () {
deletePost(records,thisGrid);
}
}]
});
thisGrid.rowCtxMenu.showAt(evtObj.getXY());
}
catch(err)
{
Ext.popup.msg('Warning !', 'You need to select a row first !');
}
};
/*
//======================END contextMenu triggered by right click========================================
//======================Delete Post Fonction =================================================
*/
function deletePost(records,thisGrid)
{
Ext.Msg.show({
title :'Warning !',
msg : 'You are about to delete 1 email !',
buttons : Ext.Msg.YESNOCANCEL,
fn : function(btn){
if (btn=='yes')
{
var store = thisGrid.getStore();
var s = thisGrid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
store.proxy.conn.url = '../myurl.asp';
store.save();
lastOptions = store.lastOptions;
/*Ext.apply(lastOptions.params, {
//myNewParam: true
});*/
store.load(lastOptions);
}
},
animEl : 'elId'
});
}
/*
//======================End delete Function========================================
*/
var Postgrid = new Ext.grid.GridPanel({
id:'post_grid',
border: false,
width: 462,
height:250,
store: PostStore,
colModel: createColModel(8),
loadMask: true,
viewConfig:{
emptyText:'No Post to display, change/clear your filters, refresh the grid or add a new Email!'
},
plugins: [filters],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("post_form").getForm().loadRecord(rec);
//Ext.getCmp("htmlEdit").setValue("sdcdsdcdscsdc");
}
}
}),
//autoExpandColumn: 'company',
listeners: {
cellcontextmenu : doRowCtxMenu,
render: {
fn: function(){
PostStore.load({
params: {
start: 0,
limit: 50
}
});
}
}
},
bbar: new Ext.PagingToolbar({
store: PostStore,
pageSize: 50,
plugins: [filters]
})
});
// add some buttons to bottom toolbar just for demonstration purposes
Postgrid.getBottomToolbar().add([
'->',
{
text: 'Clear Filter Data',
handler: function () {
Postgrid.filters.clearFilters();
}
}
]);
var panelGrid = new Ext.Panel({
width : 462,
height : 250,
layout : 'fit',
renderTo: 'post-grid',
items: Postgrid
});
});
i will give my callback in firebug json:
{"totalcount":3, "Post": [{"id_post": 83,"name_post": "ghfgh","date_creat_post": "29\u002F04\u002F2011","from_addr_post": "fgh#sdf.com","sender_name_post": "gfh","is_sent_post": false,"date_sending_post": "29\u002F04\u002F2011","html_post": "<p>dfgdgdgd<\u002Fp>","list_send_post": null},{"id_post": 61,"name_post": "thomas test","date_creat_post": "28\u002F07\u002F2010","from_addr_post": "","sender_name_post": "","is_sent_post": false,"date_sending_post": "28\u002F07\u002F2010","html_post": "<p>test test test ets<\u002Fp>","list_send_post": null},{"id_post": 59,"name_post": "kevin test","date_creat_post": "29\u002F06\u002F2010","from_addr_post": "kevin#art-systems.net","sender_name_post": "kevin#art-systems.net","is_sent_post": false,"date_sending_post": "29\u002F06\u002F2010","html_post": "<p>jkljljoi ioijiio ijiojio oijio joijoi<\u002Fp>\u000A<p> <\u002Fp>\u000A<p><span style=\u0022background-color: #ffffff;\u0022>igiuihhuhi<\u002Fspan><\u002Fp>","list_send_post": null}]}
Thanks in advance i hope some on on the wicked web can help me....
cheers.
so after trying many solution giving to be i came to this has problem
finally the the date example after many attemps to format and inserting in my msSQL database
this problem is the problem : 13\09\2011 (d/m/Y) becomes this 09/01/2012 (d/m/Y) so for some reason the month 13 is being added to the month so say the 13 month doesn't exist so the date will go to 09/01/2012....
after looking again it's the format that doesn't seem ok so i changed it de (m/d/Y) and now im getting a sql error when i hit 13 day on my datefield in (extjs).
"The conversion of a varchar data type to a datetime data type resulted in an out-of-range value."
and on and on does anyone have any ideas now ????
Instead of using the built in Ext.util.Format.dateRenderer, you could try creating one of your own that parses the Date as desired.
ataIndex: 'date_creat_post',
header: 'Date Created',
renderer: daterenderer
And then a function for your daterenderer:
function dateRenderer(value, id, r) {
var myDate = r.data['date_creat_post'];
// do some things here to strip out the date and make it into a happy format
var d = new Date(myDate);
return d.format('d/m/Y');
}