FIrestore: .add() returns large numbered array - firebase

I'm using firebase-tools emulator to locally test saving a record to Cloud Firestore.
$ firebase serve --only functions,firestore
i firestore: Serving ALL traffic (including WebChannel) on http://localhost:8080
⚠ firestore: Support for WebChannel on a separate port (8081) is DEPRECATED and will go away soon. Please use port above instead.
i firestore: Emulator logging to firestore-debug.log
⚠ Your requested "node" version "8" doesn't match your global version "12"
✔ functions: Emulator started at http://localhost:5000
✔ firestore: Emulator started at http://localhost:8080
My code:
// FirestoreConnection.ts
import {firestore} from "firebase-admin";
export default class FirestoreConnection {
protected shopDomain: string;
protected database: firestore.Firestore;
constructor(shopDomain: string, database: firestore.Firestore) {
this.shopDomain = shopDomain;
this.database = database;
}
// --------------- Public Methods
public async createNew(type: RecordTypes, documentData: object): Promise<firestore.DocumentSnapshot|null> {
try {
return await this.addDocument(collectionName, documentData);
}
catch (e) {
console.log(e, `=====error createNew()=====`);
return null;
}
}
// --------------- Protected/Private Methods
protected async addDocument(collectionName: string, documentData: object): Promise<firestore.DocumentSnapshot|null> {
try {
const newlyAddedDocument = await this.database
.collection(collectionName)
.add(documentData);
return await newlyAddedDocument.get();
}
catch (e) {
console.log(e, `=====error addDocument()=====`);
return null;
}
}
// FirestoreConnection.test.ts
import * as firebaseTesting from "#firebase/testing";
import {Logger} from "#firebase/logger";
import {RecordTypes} from "../../../../shared";
import FirestoreConnection from "../FirestoreConnection";
/* * * * * * * * * * * * * * * * * * * * *
Setup
* * * * * * * * * * * * * * * * * * * * */
// setup firebase logging
const logClient = new Logger("#firebase/testing");
logClient.log("FirestoreConnection.test.ts");
// --------------- Helpers
const createTestDatabase = (credentials): any => {
return firebaseTesting
.initializeTestApp({
projectId: 'testproject',
auth: credentials
})
.firestore();
};
const nullAllApps = firebaseTesting
.apps().map(app => app.delete());
const db = new FirestoreConnection('testshopdomain', createTestDatabase(null));
// --------------- Before / After
beforeEach(() => {
});
afterEach(async () => {
try {
await Promise.all(nullAllApps);
await firebaseTesting.clearFirestoreData({
projectId : "testproject"
})
}
catch (e) {
console.log(e, `=====error=====`);
}
});
/* * * * * * * * * * * * * * * * * * * * *
Tests
* * * * * * * * * * * * * * * * * * * * */
test("creates new record", async () => {
try {
const addedDocument = await db
.createNew(RecordTypes.globalRule, {
storeId : "dummystoreid"
, globalPercent : 40
});
expect(addedDocument).toEqual({
storeId : "dummystoreid"
, globalPercent : 40
, badProp : 0
});
}
catch (e) {
console.log(e, `=====error test("creates new record"=====`);
}
}, 100000);
I receive a long error when running jest. Thousands of rows show + 118, or similar number, along with object properties, all red text. Then a stack trace in white text.
// terminal
+ 116,
+ 111,
+ 51,
// continues for thousands of lines...
+ ],
+ "type": "Buffer",
+ },
+ ],
+ "format": "Protocol Buffer 3 DescriptorProto",
+ "type": Object {
+ "enumType": Array [],
+ "extension": Array [],
+ "extensionRange": Array [],
+ "field": Array [
+ Object {
+ "defaultValue": "",
+ "extendee": "",
+ "jsonName": "",
+ "label": "LABEL_OPTIONAL",
+ "name": "updateTime",
+ "number": 1,
+ "oneofIndex": 0,
+ "options": null,
+ "type": "TYPE_MESSAGE",
+ "typeName": "protobuf.Timestamp",
+ },
+ Object {
+ "defaultValue": "",
+ "extendee": "",
+ "jsonName": "",
+ "label": "LABEL_REPEATED",
+ "name": "transformResults",
+ "number": 2,
+ "oneofIndex": 0,
+ "options": null,
+ "type": "TYPE_MESSAGE",
+ "typeName": "Value",
+ },
+ ],
+ "name": "WriteResult",
+ "nestedType": Array [],
+ "oneofDecl": Array [],
+ "options": null,
+ "reservedName": Array [],
+ "reservedRange": Array [],
+ },
+ },
+ },
+ },
+ "credentialsProvider": FirebaseCredentialsProvider {
+ "auth": null,
+ "changeListener": [Function anonymous],
+ "currentUser": User {
+ "uid": null,
+ },
+ "forceRefresh": false,
+ "receivedInitialUser": true,
+ "tokenCounter": 1,
+ "tokenListener": [Function anonymous],
+ },
+ "handshakeComplete_": true,
+ "idleTimer": DelayedOperation {
+ "asyncQueue": AsyncQueue {
+ "_isShuttingDown": false,
+ "delayedOperations": Array [
+ [Circular],
+ ],
+ "failure": null,
+ "operationInProgress": true,
+ "tail": Promise {},
+ "timerIdsToSkip": Array [],
+ },
+ "catch": [Function bound catch],
+ "deferred": Deferred {
+ "promise": Promise {},
+ "reject": [Function anonymous],
+ "resolve": [Function anonymous],
+ },
+ "op": [Function anonymous],
+ "removalCallback": [Function anonymous],
+ "targetTimeMs": 1579867383588,
+ "then": [Function bound then],
+ "timerHandle": Timeout {
+ "_destroyed": false,
+ "_idleNext": TimersList {
+ "_idleNext": [Circular],
+ "_idlePrev": [Circular],
+ "expiry": 79350,
+ "id": -9007199254740987,
+ "msecs": 60000,
+ "priorityQueuePosition": 1,
+ },
+ "_idlePrev": TimersList {
+ "_idleNext": [Circular],
+ "_idlePrev": [Circular],
+ "expiry": 79350,
+ "id": -9007199254740987,
+ "msecs": 60000,
+ "priorityQueuePosition": 1,
+ },
+ "_idleStart": 19350,
+ "_idleTimeout": 60000,
+ "_onTimeout": [Function anonymous],
+ "_repeat": null,
+ "_timerArgs": undefined,
+ Symbol(refed): true,
+ Symbol(asyncId): 152,
+ Symbol(triggerId): 0,
+ },
+ "timerId": "write_stream_idle",
+ },
+ "idleTimerId": "write_stream_idle",
+ "lastStreamToken": Object {
+ "data": Array [
+ 49,
+ ],
+ "type": "Buffer",
+ },
+ "listener": Object {
+ "onClose": [Function bound ],
+ "onHandshakeComplete": [Function bound ],
+ "onMutationResult": [Function bound ],
+ "onOpen": [Function bound ],
+ },
+ "queue": AsyncQueue {
+ "_isShuttingDown": false,
+ "delayedOperations": Array [
+ DelayedOperation {
+ "asyncQueue": [Circular],
+ "catch": [Function bound catch],
+ "deferred": Deferred {
+ "promise": Promise {},
+ "reject": [Function anonymous],
+ "resolve": [Function anonymous],
+ },
+ "op": [Function anonymous],
+ "removalCallback": [Function anonymous],
+ "targetTimeMs": 1579867383588,
+ "then": [Function bound then],
+ "timerHandle": Timeout {
+ "_destroyed": false,
+ "_idleNext": TimersList {
+ "_idleNext": [Circular],
+ "_idlePrev": [Circular],
+ "expiry": 79350,
+ "id": -9007199254740987,
+ "msecs": 60000,
+ "priorityQueuePosition": 1,
+ },
+ "_idlePrev": TimersList {
+ "_idleNext": [Circular],
+ "_idlePrev": [Circular],
+ "expiry": 79350,
+ "id": -9007199254740987,
+ "msecs": 60000,
+ "priorityQueuePosition": 1,
+ },
+ "_idleStart": 19350,
+ "_idleTimeout": 60000,
+ "_onTimeout": [Function anonymous],
+ "_repeat": null,
+ "_timerArgs": undefined,
+ Symbol(refed): true,
+ Symbol(asyncId): 152,
+ Symbol(triggerId): 0,
+ },
+ "timerId": "write_stream_idle",
+ },
+ ],
+ "failure": null,
+ "operationInProgress": true,
+ "tail": Promise {},
+ "timerIdsToSkip": Array [],
+ },
+ "serializer": JsonProtoSerializer {
+ "databaseId": DatabaseId {
+ "database": "(default)",
+ "projectId": "testproject",
+ },
+ "options": Object {
+ "useProto3Json": false,
+ },
+ },
+ "state": 2,
+ "stream": StreamBridge {
+ "closeFn": [Function closeFn],
+ "sendFn": [Function sendFn],
+ "wrappedOnClose": [Function anonymous],
+ "wrappedOnMessage": [Function anonymous],
+ "wrappedOnOpen": [Function anonymous],
+ },
+ },
+ },
+ "sharedClientState": MemorySharedClientState {
+ "localState": LocalClientState {
+ "activeTargetIds": SortedSet {
+ "comparator": [Function primitiveComparator],
+ "data": SortedMap {
+ "comparator": [Function primitiveComparator],
+ "root": LLRBEmptyNode {
+ "size": 0,
+ },
+ },
+ },
+ },
+ "onlineStateHandler": [Function sharedClientStateOnlineStateChangedHandler],
+ "queryState": Object {
+ "2": "current",
+ },
+ "sequenceNumberHandler": null,
+ "syncEngine": [Circular],
+ },
+ "syncEngineListener": EventManager {
+ "onlineState": 1,
+ "queries": ObjectMap {
+ "inner": Object {},
+ "mapKeyFn": [Function anonymous],
+ },
+ "snapshotsInSyncListeners": Set {},
+ "syncEngine": [Circular],
+ },
+ },
+ },
+ "_persistenceKey": "app-1579867322226-0.11944467708511985",
+ "_queue": AsyncQueue {
+ "_isShuttingDown": false,
+ "delayedOperations": Array [
+ DelayedOperation {
+ "asyncQueue": [Circular],
+ "catch": [Function bound catch],
+ "deferred": Deferred {
+ "promise": Promise {},
+ "reject": [Function anonymous],
+ "resolve": [Function anonymous],
+ },
+ "op": [Function anonymous],
+ "removalCallback": [Function anonymous],
+ "targetTimeMs": 1579867383588,
+ "then": [Function bound then],
+ "timerHandle": Timeout {
+ "_destroyed": false,
+ "_idleNext": TimersList {
+ "_idleNext": [Circular],
+ "_idlePrev": [Circular],
+ "expiry": 79350,
+ "id": -9007199254740987,
+ "msecs": 60000,
+ "priorityQueuePosition": 1,
+ },
+ "_idlePrev": TimersList {
+ "_idleNext": [Circular],
+ "_idlePrev": [Circular],
+ "expiry": 79350,
+ "id": -9007199254740987,
+ "msecs": 60000,
+ "priorityQueuePosition": 1,
+ },
+ "_idleStart": 19350,
+ "_idleTimeout": 60000,
+ "_onTimeout": [Function anonymous],
+ "_repeat": null,
+ "_timerArgs": undefined,
+ Symbol(refed): true,
+ Symbol(asyncId): 152,
+ Symbol(triggerId): 0,
+ },
+ "timerId": "write_stream_idle",
+ },
+ ],
+ "failure": null,
+ "operationInProgress": true,
+ "tail": Promise {},
+ "timerIdsToSkip": Array [],
+ },
+ "_settings": FirestoreSettings {
+ "cacheSizeBytes": 41943040,
+ "credentials": undefined,
+ "forceLongPolling": false,
+ "host": "localhost:8080",
+ "ssl": false,
+ "timestampsInSnapshots": true,
+ },
+ },
+ "_fromCache": false,
+ "_hasPendingWrites": false,
+ "_key": DocumentKey {
+ "path": ResourcePath {
+ "len": 2,
+ "offset": 0,
+ "segments": Array [
+ "globalRule",
+ "YaGhEFEv3kFI0uUWWsSQ",
+ ],
+ },
+ },
// text turns from red to white exactly here (including } )
}
at /home/owner/PhpstormProjects/shopify/buyUsedServer/functions/src/classes/__tests__/FirestoreConnection.test.ts:73:27
at step (/home/owner/PhpstormProjects/shopify/buyUsedServer/functions/src/classes/__tests__/FirestoreConnection.test.ts:33:23)
at Object.next (/home/owner/PhpstormProjects/shopify/buyUsedServer/functions/src/classes/__tests__/FirestoreConnection.test.ts:14:53)
at fulfilled (/home/owner/PhpstormProjects/shopify/buyUsedServer/functions/src/classes/__tests__/FirestoreConnection.test.ts:5:58) {
matcherResult: {
actual: DocumentSnapshot {
_firestore: [Firestore],
_key: [DocumentKey],
_document: [Document],
_fromCache: false,
_hasPendingWrites: false,
_converter: undefined
},
expected: { storeId: 'dummystoreid', globalPercent: 40, badProp: 0 },
message: [Function],
name: 'toEqual',
pass: false
}
} =====error test("creates new record"=====
Can anyone tell what is causing the catch to return an error here? The lack of error message is making this hard to debug for me.

A couple things stand out to me in your addDocument() method:
You are first adding the document, then immediately performing a get() on the document. This will needlessly trigger a database read to pull down the same information you just provided.
That get() returns a DocumentSnapshot which is a container object for a Firestore document value. Printing out its raw contents probably includes all kinds of things you don't want.
Your test isn't really testing any of your own logic, it's essentially testing the Firestore SDK (which is already quite well tested!). What you might want is to return a data object with the Firestore Document ID inserted into it. That might look something like this:
async function addDocument(collectionName: string, documentData: object): Promise<object|null> {
try {
const newDocRef = await this.database
.collection(collectionName)
.add(documentData);
return Object.assign({}, documentData, {
__id__: newDocRef.id
});
}
catch (e) {
console.log(e, `=====error addDocument()=====`);
return null;
}
}
Then you can write a test to make sure that the resulting object has a __id__ field set.

Related

when Jqgrid Expand with all Sub grid there is problem of some columns hide at the end more over jqgrid width is auto

here, I'm using subgridOptions to expand all subgrid but the problem is subgrid columns hidden what is the solution of that.
expand problem in treejqgrid columns hide at the end and columns width is not set according to the treeview.
so, I want some concrete solution of this problem as soon as possible.
```
function showChildGridExtend(parentRowID, parentRowKey) {
debugger;
var formname = "B/s Group";
var childGridID = parentRowID + "_table";
var childGridPagerID = parentRowID + "_pager";
// send the parent row primary key to the server so that we know which grid to show
var childGridURL = parentRowKey + ".json";
// add a table and pager HTML elements to the parent grid row - we will render the child grid here
$('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');
$("#" + childGridID).jqGrid('GridUnload');
$("#" + childGridID).jqGrid({
autowidth: true,
shrinkToFit: true,
url: '../ChartofAccounts/GetTreeJqgrid',
mtype: "GET",
datatype: "json",
postData: { searchstr: parentRowID, TableName: globaltablename, formname: formname },
page: 1,
colNames: globalcolnames,
colModel: globalcolmodal,
subGridOptions: {
//expand all rows on load
"expandOnLoad": true
},
jsonReader: {
repeatitems: false,
id: "code",
root: function (obj) {
var data;
data = JSON.parse(obj["Data"]);
//alert(data);
const myJSON = JSON.stringify(data);
// alert(myJSON.length);
subGridlength = myJSON.length;
if (subGridlength == 2) {
// $($('#' + parentRowKey + ' td a span')[0]).addClass('safallast');
}
return JSON.parse(obj["Data"]);
},
},
gridComplete: function () {
if (subGridlength == 2) {
// $('.safallast').css('display', 'none');
}
var objRows = $("#" + parentRowID + "_table tr");
$("#" + parentRowID + "_table").addClass('table-responsive');
$("#" + parentRowID + "_table").css('overflow', 'visible');
var objHeader = $("#" + parentRowID + "_table .jqgfirstrow td");
var objLable = $("#gbox_" + parentRowID + "_table .ui-jqgrid-labels th");
$("#" + parentRowID + "_table").css("overflow-x", "hidden");
if (objRows.length > 1) {
var objFirstRowColumns = $(objRows[1]).children("td");
for (i = 0; i < objFirstRowColumns.length; i++) {
$(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width"));
var jqgridlblwidth = parseFloat(parseFloat($(objHeader[i]).css("width")));
$(objLable[i]).css("width", jqgridlblwidth + 'px');
}
}
if (objRows.length == 1) {
$("#gbox_" + parentRowID + "_table").css('display', 'none');
}
DropDownTreeView();
$('#' + parentRowID + '_table_subgrid').css('width', '35px').css('overflow-x', 'hidden');
$($('#' + parentRowID + '_table tr td')[0]).css('width', '35px');
$(".ui-jqgrid-htable").addClass("bg-primary-600");
$(".ui-jqgrid-bdiv").css("min-height", "auto").css('overflow-x', 'hidden');
//$('#jq-grid').children("ui-sgcollapsed sgexpanded").unbind().html("");
},
pgbuttons: false,
pginput: false,
pgtext: "",
//width: 500,
height: "auto",
subGrid: true, // set the subGrid property to true to show expand buttons for each row
subGridRowExpanded: showChildGridExtend, // javascript function that will take care of showing the child grid
// pager: "#" + childGridPagerID
});
$(".ui-jqgrid-bdiv").css("min-height", "auto");
$("#" + parentRowID + "_table").css('word-break', 'break-word');
$("#" + parentRowID + "_table").css('overflow-x', 'hidden');
// $($('#jqgh_jq-grid_GroupAlias span')[0]).css("display", "none");
jQuery("#" + parentRowID + "_table").removeClass('table-responsive');
}
```

Wordpress: ID is returned instead of object

I'm currently working on a wordpress site. I created a relationship field called link_to_content basically what I', trying to do is to connect a tout to a program. The relationship field is set to return a Post Object.
So when I go into the tout and select the program schoolFood as the value for link_to_content I should be getting the object with the porgram's data.
Instead what I get is an array with the program's id.
{{ dump(tout.link_to_content) }}
I also see from the ACF JSON file the field being updated
+ "label": "Link Content",
+ "name": "link_to_content",
+ "type": "relationship",
+ "instructions": "",
+ "required": 0,
+ "conditional_logic": [
+ [
+ {
+ "field": "field_5f21c1d39f170",
+ "operator": "==",
+ "value": "Internal"
+ }
+ ]
+ ],
+ "wrapper": {
+ "width": "",
+ "class": "",
+ "id": ""
+ },
+ "show_in_rest": 0,
+ "wpml_cf_preferences": 0,
+ "post_type": [
+ "post",
+ "page",
+ "programs",
+ "location"
+ ],
+ "taxonomy": "",
+ "filters": [
+ "search",
+ "post_type",
+ "taxonomy"
+ ],
+ "elements": "",
+ "min": "",
+ "max": "",
+ "return_format": "object"
+ },
Any idea on why this might be?

DynamoDB: Handling ProvisionedThroughputExceededException without increasing Read/Write Capacity

Is there a good way to handle the ProvisionedThroughputExceededException without increasing the Read/Write capacity of the table? Ideally, I would like to decrease the throughput on the scripting side such that the exception won't be triggered.
function saveDataToDynamodb(data, scriptName){
let items = [];
var processItemsCallback = function (err, data) {
if (err) {
console.log(err);
setTimeout(() => {console.log('sleep for error')}, Math.floor(0.5 * 1000 + 1000));
}else {
if (Object.keys(data.UnprocessedItems).length > 0) {
//setTimeout(() => {console.log('sleep to wait')}, Math.floor(Math.random() * 1000 + 1000));
var params = {};
params.RequestItems = data.UnprocessedItems;
docClient.batchWrite(params, processItemsCallback);
}
}
};
data.forEach(station => {
let stationName = station.stationName
if (stationName == null) {
stationName = "null"
}
//console.log(station.stationId + "_" + stationName)
let pollutants = station.pollutants
let unique_set = new Set()
let aqiArr = [];
let sortedKey;
let timestamp;
pollutants.forEach(pollutant => {
timestamp = pollutant.utcMoment
sortedKey = station.stationId + "_" + timestamp + "_" + station.latitude + "_" + station.longitude + "_" + pollutant.pollutant;
if (!unique_set.has(sortedKey)) {
unique_set.add(sortedKey)
if (!scriptName.includes("Pollen")) { // calculate AQI if it's not pollen data
let polValue = processPollutant(pollutant.value, pollutant.pollutant);
let pollutantAQI;
if (pollutant.pollutant == "o3" && pollutant.avgInterval == "1h") {
pollutantAQI = aqiCalc.calcEpaAqi(polValue, pollutant.pollutant, true);
} else {
pollutantAQI = aqiCalc.calcEpaAqi(polValue, pollutant.pollutant, false);
}
//console.log("polValue: " + polValue + ", Pollutant value: " + pollutant.value + ", pollutant: " + pollutant.pollutant + ", AQI: " + pollutantAQI)
aqiArr.push(pollutantAQI);
}
items.push({
PutRequest: {
Item: {
"stationId": station.stationId,
"stationName": String(station.stationName),
"latitude": station.latitude,
"longitude": station.longitude,
"pollutant": pollutant.pollutant,
"avgInterval": pollutant.avgInterval,
"units": pollutant.units,
"initialUnits": pollutant.initialUnits,
"value": pollutant.value,
"sortedKey": sortedKey,
"timestamp": timestamp
}
}
});
if (items.length >= 24) {
let params = {
RequestItems: {
pollutantFullData: items
}
};
docClient.batchWrite(params, processItemsCallback);
items = []
}
}
});
if (aqiArr.length > 0) {
var finalAqi = getMaxAsInteger(aqiArr);
if (finalAqi > 500) {
finalAqi = 500;
}
items.push({
PutRequest: {
Item: {
"stationId": station.stationId,
"stationName": String(station.stationName),
"latitude": station.latitude,
"longitude": station.longitude,
"pollutant": "aqi",
"avgInterval": "1h",
"units": "ppb",
"initialUnits": "ppm",
"value": finalAqi,
"sortedKey": station.stationId + "_" + timestamp + "_" + station.latitude + "_" + station.longitude + "_aqi",
"timestamp": timestamp
}
}
});
}
if (items.length > 0) {
let params = {
RequestItems: {
pollutantFullData: items
}
};
docClient.batchWrite(params, processItemsCallback);
}
});
}
It seems as though the batchWrite operation is running asynchronously, such that the various threads are hitting the API endpoint at the same time, thus causing the error. How can the previous code be changed to resolve the error?

Animating Symbol on Polyline with GeoJson Using Google Map Api v.3

i have geojson like this :
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Name": "Saluran I", "descriptio": null, "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": 1, "extrude": -1, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "LineString", "coordinates": [ [ 115.16149264388849, -8.692345779607091 ], [ 115.1619799975747, -8.693099022961922 ], [ 115.1621209969948, -8.693450580043523 ], [ 115.1621893956145, -8.69367970180001 ], [ 115.1622369286341, -8.693885376054253 ], [ 115.16248624315379, -8.694125330077087 ], [ 115.1625293838875, -8.694297689361708 ], [ 115.1625662929434, -8.694480291402353 ], [ 115.1638244075253, -8.694489484612449 ] ] } },
{ "type": "Feature", "properties": { "Name": "Saluran II", "descriptio": null, "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": 1, "extrude": -1, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "LineString", "coordinates": [ [ 115.1647420393289, -8.691263798416188 ], [ 115.16480885306601, -8.691910749059817 ], [ 115.1648021389716, -8.692020041570267 ], [ 115.16476460026691, -8.692197857370241 ], [ 115.16467300953239, -8.692311184386924 ], [ 115.1645832229062, -8.692570845169653 ], [ 115.164590403574, -8.69280000074686 ], [ 115.1642184661912, -8.692878192437396 ], [ 115.16418831658579, -8.693471791565786 ], [ 115.16411080877791, -8.69417746825723 ], [ 115.1639500244154, -8.694469415766308 ], [ 115.1638498474275, -8.69450385891758 ], [ 115.1637726241196, -8.6949183073729 ], [ 115.1637482310352, -8.695106949243888 ], [ 115.16369576938609, -8.695516868583109 ], [ 115.1633930487843, -8.695552277605064 ], [ 115.1628619559151, -8.695616245099258 ], [ 115.1628453449146, -8.695861398016726 ], [ 115.1625531407406, -8.695981675836846 ], [ 115.1619167160671, -8.696110249672243 ], [ 115.1621001879372, -8.697348692504496 ], [ 115.1619454016469, -8.697429501488445 ] ] } },
{ "type": "Feature", "properties": { "Name": "Saluran III", "descriptio": null, "timestamp": null, "begin": null, "end": null, "altitudeMo": null, "tessellate": 1, "extrude": -1, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "LineString", "coordinates": [ [ 115.1649918428157, -8.698726927918452 ], [ 115.1647717936939, -8.698771893626452 ], [ 115.16464767674699, -8.698766178177538 ], [ 115.164531974608, -8.698766747854149 ], [ 115.1643076171094, -8.698759607942607 ], [ 115.1639182931609, -8.698808262913275 ], [ 115.1637251462856, -8.69887278452787 ], [ 115.1633890383243, -8.698973728970067 ], [ 115.1626822904817, -8.699201749498535 ], [ 115.1626359629325, -8.699082282748639 ], [ 115.1621957225977, -8.698410881596306 ], [ 115.16193358395429, -8.69743434218265 ] ] } }
]
}
i can showing that geojson on my map,
line.loadGeoJson(urlBase + 'peta/aliran.geojson');
// styling features aliran
line.setStyle(function(feature){
return {
strokeColor : '#0000FF',
strokeWeight : 5,
zIndex : 1
}
});
// set map;
line.setMap(map);
but i have problem when i want to animating symbols on the line like this : https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate. could anybody help me ?
Leveraging the code in this related example (which animates a marker along a polyline from the directions service) to animate a symbol along one of the polylines in your data:
proof of concept fiddle
code snippet:
var map;
var position;
var marker = null;
var polyline = null;
var poly2 = null;
var speed = 0.000005,
wait = 1;
var infowindow = null;
var myPano;
var panoClient;
var nextPanoId;
var timerHandle = null;
var polyline;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
map.data.addListener('addfeature', function(e) {
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
if (e.feature.getGeometry().getType() == "LineString") {
polyline = new google.maps.Polyline({
map: map,
path: e.feature.getGeometry().getArray(),
strokeWeight: 5,
strokeOpacity: 0.4,
strokeColor: 'red'
});
marker = createMarker(polyline.getPath().getAt(0), "here", "marker text");
setTimeout(startAnimation, 2000);
}
map.fitBounds(bounds);
});
// var line = google.maps.Data;
map.data.addGeoJson(geoJson);
// styling features aliran
map.data.setStyle(function(feature) {
return {
strokeColor: '#0000FF',
strokeWeight: 1,
zIndex: 1
}
});
// set map;
map.data.setMap(map);
}
var step = 5; // metres
var tick = 100; // milliseconds
var eol;
var k = 0;
var stepnum = 0;
var speed = "";
var lastVertex = 1;
//=============== animation functions ======================
function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
if (poly2.getPath().getLength() > 20) {
poly2 = new google.maps.Polyline([polyline.getPath().getAt(lastVertex - 1)]);
}
if (polyline.GetIndexAtDistance(d) < lastVertex + 2) {
if (poly2.getPath().getLength() > 1) {
poly2.getPath().removeAt(poly2.getPath().getLength() - 1)
}
poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.GetPointAtDistance(d));
} else {
poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.getPath().getAt(polyline.getPath().getLength() - 1));
}
}
function animate(d) {
if (d > eol) {
map.panTo(endLocation.latlng);
marker.setPosition(endLocation.latlng);
return;
}
var p = polyline.GetPointAtDistance(d);
map.panTo(p);
marker.setPosition(p);
updatePoly(d);
timerHandle = setTimeout("animate(" + (d + step) + ")", tick);
}
function startAnimation() {
if (timerHandle) clearTimeout(timerHandle);
eol = google.maps.geometry.spherical.computeLength(polyline.getPath());
map.setCenter(polyline.getPath().getAt(0));
poly2 = new google.maps.Polyline({
path: [polyline.getPath().getAt(0)],
strokeColor: "#0000FF",
strokeWeight: 10
});
setTimeout("animate(0)", tick); // Allow time for the initial map display
}
function processPoints(geometry, callback, thisArg) {
if (geometry instanceof google.maps.LatLng) {
callback.call(thisArg, geometry);
} else if (geometry instanceof google.maps.Data.Point) {
callback.call(thisArg, geometry.get());
} else {
geometry.getArray().forEach(function(g) {
processPoints(g, callback, thisArg);
});
}
}
// ==================================================
function createMarker(latlng, label, html) {
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: label,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
},
zIndex: Math.round(latlng.lat() * -100000) << 5
});
marker.myname = label;
// gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
return marker;
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"Name": "Saluran II",
"descriptio": null,
"timestamp": null,
"begin": null,
"end": null,
"altitudeMo": null,
"tessellate": 1,
"extrude": -1,
"visibility": -1,
"drawOrder": null,
"icon": null
},
"geometry": {
"type": "LineString",
"coordinates": [
[115.1647420393289, -8.691263798416188],
[115.16480885306601, -8.691910749059817],
[115.1648021389716, -8.692020041570267],
[115.16476460026691, -8.692197857370241],
[115.16467300953239, -8.692311184386924],
[115.1645832229062, -8.692570845169653],
[115.164590403574, -8.69280000074686],
[115.1642184661912, -8.692878192437396],
[115.16418831658579, -8.693471791565786],
[115.16411080877791, -8.69417746825723],
[115.1639500244154, -8.694469415766308],
[115.1638498474275, -8.69450385891758],
[115.1637726241196, -8.6949183073729],
[115.1637482310352, -8.695106949243888],
[115.16369576938609, -8.695516868583109],
[115.1633930487843, -8.695552277605064],
[115.1628619559151, -8.695616245099258],
[115.1628453449146, -8.695861398016726],
[115.1625531407406, -8.695981675836846],
[115.1619167160671, -8.696110249672243],
[115.1621001879372, -8.697348692504496],
[115.1619454016469, -8.697429501488445]
]
}
}]
};
/*********************************************************************\
* *
* epolys.js by Mike Williams *
* updated to API v3 by Larry Ross *
* *
* A Google Maps API Extension *
* *
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
* *
* .Contains(latlng) returns true is the poly contains the specified *
* GLatLng *
* *
* .Area() returns the approximate area of a poly that is *
* not self-intersecting *
* *
* .Distance() returns the length of the poly path *
* *
* .Bounds() returns a GLatLngBounds that bounds the poly *
* *
* .GetPointAtDistance() returns a GLatLng at the specified distance *
* along the path. *
* The distance is specified in metres *
* Reurns null if the path is shorter than that *
* *
* .GetPointsAtDistance() returns an array of GLatLngs at the *
* specified interval along the path. *
* The distance is specified in metres *
* *
* .GetIndexAtDistance() returns the vertex number at the specified *
* distance along the path. *
* The distance is specified in metres *
* Returns null if the path is shorter than that *
* *
* .Bearing(v1?,v2?) returns the bearing between two vertices *
* if v1 is null, returns bearing from first to last *
* if v2 is null, returns bearing from v1 to next *
* *
* *
***********************************************************************
* *
* This Javascript is provided by Mike Williams *
* Blackpool Community Church Javascript Team *
* http://www.blackpoolchurch.org/ *
* http://econym.org.uk/gmap/ *
* *
* This work is licenced under a Creative Commons Licence *
* http://creativecommons.org/licenses/by/2.0/uk/ *
* *
***********************************************************************
* *
* Version 1.1 6-Jun-2007 *
* Version 1.2 1-Jul-2007 - fix: Bounds was omitting vertex zero *
* add: Bearing *
* Version 1.3 28-Nov-2008 add: GetPointsAtDistance() *
* Version 1.4 12-Jan-2009 fix: GetPointsAtDistance() *
* Version 3.0 11-Aug-2010 update to v3 *
* *
\*********************************************************************/
// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polyline.prototype.GetPointAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
var p1 = this.getPath().getAt(i - 2);
var p2 = this.getPath().getAt(i - 1);
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m);
}
// === A method which returns the Vertex number at a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polyline.prototype.GetIndexAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
return i;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" value="restart animation" onclick="startAnimation()" />
<div id="map_canvas"></div>

How to enable working of jqgrid Filter Toolbar From Server In asp.net

Hii Guys!!!.
I developed a Jqgrid to diaplay database.Now I want to add JQgrid filter Toolbar to refine the data as per user need so i added filter toolbar.But Filter Toolbar is working with only when 'loadonce:true' means locally with first page data whereas I want it to work for whole database...from server response...
Below I am posting my code for refrence ...
$(function () {
$("#UsersGrid").jqGrid({
url: 'getGriddahico.ashx',
datatype: 'json',
height: 250,
colNames: ['UserID', 'username', 'ordinal', 'authcode', 'extension', 'trunk', 'dialnumber', 'dialdate', 'dialtime', 'duration', 'destination', 'price', 'toc'],
colModel: [
{ name: 'UserID', index: 'UserID', width: 100, sortable: true, align: 'center',hidden:true },
{ name: 'username', width: 100, sortable: true, align: 'center' },
{ name: 'ordinal', width: 100, sortable: true, align: 'center' },
{ name: 'authcode', width: 100, sortable: true },
{ name: 'extension', width: 100, sortable: true, align: 'center' },
{ name: 'trunk', width: 100, sortable: true, align: 'center' },
{ name: 'dialnumber', width: 100, sortable: true, align: 'center' },
{ name: 'dialdate', width: 100, sortable: true, align: 'center' },
{ name: 'dialtime', width: 100, sortable: true, align: 'center' },
{ name: 'duration', width: 100, sortable: true, align: 'center' },
{ name: 'destination', width: 100, sortable: true, align: 'center' },
{ name: 'price', width: 100, sortable: true, align: 'center' },
{ name: 'toc', width: 150, sortable: true, align: 'center' }
],
rowNum: 100,
rowList: [100, 200, 300],
pager: '#UsersGridPager',
sortname: 'username',
//loadonce: true,
viewrecords: true,
ignoreCase:true,
sortorder: 'asc',
autowidth: true,
toppager: true,
height: '100%'
});
$("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false, search: false });
jQuery("#UsersGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
});
My Handler(.ashx) file code:
int start=0;
int total=0;
int total_pages =0;
int intpage =Convert.ToInt32(request["page"]);
int limit=Convert.ToInt32(request["rows"]);
// int intpage = new Integer(request.getParameter("page"));
//int limit = new Integer(request.getParameter("rows"));
string sidx = request["sidx"];
string sord = request["sord"];
// String sidx = request.getParameter("sidx");
//String sord = request.getParameter("sord");
String strQuery="";
String json ="";
Boolean rc ;
MySqlDataReader rs;
//ResultSet rs = null;
if(sidx ==""){
sidx ="1";
}
/*-----------------------------------Conexión a la base de datos MySql-------------------------------------------*/
conexion conexiondb = new conexion();
conexiondb.Conectar();
/*-----------------------------------------------------------------------------------------------------------*/
total = conexiondb.countRec("price", "processeddata_table");
if( total>0 ) {
double d = Math.Ceiling( (double)(total) / (double)(limit) );
total_pages = (int)(d);
} else {
total_pages = 0;
}
if (intpage > total_pages) {
intpage=total_pages;
}
start = limit * intpage - limit;
if(start < 0 ){
start = 0;
}
//strQuery = "SELECT username,ordinal,authcode,extension,trunk,dialnumber,dialdate,dialtime,duration,destination,price,toc FROM processeddata_table ORDER BY username asc";
strQuery = "SELECT username,ordinal,authcode,extension,trunk,dialnumber,dialdate,dialtime,duration,destination,price,toc FROM processeddata_table ORDER BY " + sidx + " " + sord + " LIMIT " + start + " , " + limit;
rs = conexiondb.Consulta(strQuery);
total = conexiondb.countRec("price", "processeddata_table");
response.ContentType="text/x-json";
response.ContentType = "charset=utf-8";
//response.ContentEncoding="utf-8";
response.AddHeader("Pragma", "no-cache");
response.AddHeader("Cache-Control", "no-cache, must-revalidate");
response.AddHeader("Pragma", "no-cache");
json ="";
json = json + "{\n";
json = json + " \"page\":\""+intpage+"\",\n";
json = json + "\"total\":"+total_pages+",\n";
json = json + "\"records\":"+total+",\n";
json = json + "\"rows\": [";
rc =false;
while(rs.Read()){
if(rc){
json = json + ",";
}
json = json + "\n{";
json = json + "\"price\":\"" + Convert.ToInt32(rs["price"]) + "\",";
json = json + "\"cell\":[" + Convert.ToInt32(rs["price"]) + "";
json = json + ",\"" + Convert.ToString(rs["username"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["ordinal"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["authcode"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["extension"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["trunk"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["dialnumber"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["dialdate"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["dialtime"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["duration"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["destination"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["price"]) + "\"";
json = json + ",\"" + Convert.ToString(rs["toc"]) + "\"]";
json = json + "}";
rc=true;
}
json = json +"]\n";
json = json +"}";
HttpContext.Current.Response.Write(json);
Plz guys help me to resolve the issue..
Thanx in advance..
If you use loadonce: true option then the data will be loaded from the server at once and later searching, sorting and paging of the previously loaded data will be implemented locally by jqGrid.
If you don't want to use loadonce: true option then you have to implement the features in your server code. In the answer for example you can find an example of such implementation in the code which uses ASHX like you do.

Resources