ArcGis javascript api 3.5 how to set visibility of a feature layer - arcgis

i am using ArcGis javascript api 3.5 and my code is
map = new esri.Map("mapDiv", {
basemap: "streets",
center: [-112.07102547942392, 46.75909704205151],
zoom: 12,
slider: false,
infoWindow: infoWindow
});
var featureLayer = new esri.layers.FeatureLayer("http:/abc/arcgis/rest/services/MTARNG/MapServer/1", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
infoTemplate: templateFuze,
outFields: ["*"]
});
var featureLayer1 = new esri.layers.FeatureLayer("http://abc/arcgis/rest/services/MTARNG/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
infoTemplate: templateParcel,
outFields: ["*"]
});
var featureLayer2 = new esri.layers.FeatureLayer("http://abc/arcgis/rest/services/MTARNG/MapServer/2", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
infoTemplate: templateGrid,
outFields: ["*"]
});
Ext.create('Ext.form.Panel', {
width: 400,
height: 600,
bodyPadding: 10,
renderTo: Ext.get('LayerDiv'),
items: [{
xtype: 'checkboxgroup',
columns: 1,
vertical: true,
items: layerInfo,
listeners: {
change: {
fn: function (checkbox, checked) {
for (var i = 0; i < checkbox.items.items.length; i++) {
if (checkbox.items.items[i].checked) {
//visible true checkbox.items.items[0].boxLabel
}
else {
//visible false
}
}
}
}
}
}]
});
});
So i am trying to set the visibilty of the layer but i am not able to do. after that how to refresh the map ?
I got some function but it is working e.g.- visibleAtMapScale = false,
defaultVisibility = false and for refreshing i got only map.resize=true;
What else i can try to achive this functionality.

You can change the visibility of an layer using the hide() and show() functions - FeatureLayer inherits them from GraphicsLayuer (Which inherits them from Layer). So in your example, given featureLayer is a global variable it should be in scope when the event fires so you could just do:
featureLayer.hide();
and
featureLayer.show();
You don't need to refresh the map, it will happen automatically.
Simon

When creating a new FeatureLayer, you can specify the default visibility using the optional parameters. The default is true.
var featureLayer = new esri.layers.FeatureLayer("http:/.../MapServer/1",
{visible:false}
});
To set the visibility of the existing layer, you can use the setVisibility() method.
featureLayer.setVisibility(false);

If you want to enable intellisense support in Visual Studio you can download and reference the code assist plugin from the Esri website. There is a help page about it here with links to the various versions supported and how to use it from VS.
If you just want to get the VS2012 version for v3.5 of the JS API it is here and to reference it:
If working in an HTML file, add a script tag to add a reference to the code assist
<script type='text/javascript' src='path_to_vsdoc.js'></script>
If working in a JavaScript file, add a reference directive to the VSDoc file:
/// <reference path="~/Scripts/esri-jsapi-vsdoc.js" />

Related

"orion" is undefined when integrating orion editor in dojo

I am new to dojo and I am trying to integrate orion editor(build downloaded from http://download.eclipse.org/orion/) in dojo but I get the error "orion" is undefined.
The code looks like below:
HTML file for placing editor
<div data-dojo-attach-point="embeddedEditor"></div>
A JS file
require([
"dojo/_base/declare",
"dijit/_WidgetBase",
"editorBuild/code_edit/built-codeEdit-amd",
"dijit/_TemplatedMixin",
"dojo/text!orionEditor.html"
], function(declare,_WidgetBase,
codeEditorAmd, _TemplatedMixin,template){
declare("orionEditor", [_WidgetBase,
_TemplatedMixin], {
templateString: template,
postCreate: function(){
var codeEdit = new orion.codeEdit();
var contents = '';
codeEdit.create({parent: this.embeddedEditor, contentType: "application/javascript", contents: contents}).
then(function(editorViewer) {
if (editorViewer.settings) {
editorViewer.settings.contentAssistAutoTrigger = true;
editorViewer.settings.showOccurrences = true;
}
});
}
});
});
The orion editor build is placed in editorBuild folder.
Standalone orion works fine - http://libingw.github.io/OrionCodeEdit/
When integrating with dojo I am not sure why orion is undefined.
Any help would be much appreciated.
If you want using orion name in amd module then it has to be defined as parameter in function passed as require's callback.
Check this guide - it has 2 solutions for using orion with amd modules.
Option 1 - define bundles once and use shorter name in all modules you need them:
require.config({
bundles: {
"editorBuild/code_edit/built-codeEdit-amd": ["orion/codeEdit", "orion/Deferred"]
}
});
require(
["orion/codeEdit", "orion/Deferred"],
function(mCodeEdit, Deferred) {
var codeEdit = new mCodeEdit();
var contents = 'var foo = "bar";';
codeEdit.create({parent: "embeddedEditor"/*editor parent node id*/})
.then(function(editorViewer) {
editorViewer.setContents(contents, "application/javascript");
});
});
Option 2 - nested require:
require(["editorBuild/code_edit/built-codeEdit-amd"], function() {
require(["orion/codeEdit", "orion/Deferred"], function(mCodeEdit, Deferred) {
var codeEdit = new mCodeEdit();
var contents = 'var foo = "bar";';
codeEdit.create({parent: "embeddedEditor"/*editor parent node id*/})
.then(function(editorViewer) {
editorViewer.setContents(contents, "application/javascript");
});
});
});
Note: you can replace mCodeEdit with any unique name (That wouldn't shadow other objects/modules)

Sencha Touch production builds breaks Ext.Map functionality

I am having problems with ST2.3. I've upgraded from 2.1 and I've had several regressions which are now working ok. However one problem that definitely seems to be broken is the Map wrapper around the google api. My app works fine in Testing and Development modes, but as soon as it is built for production the map stops working.
The code where it seems to break on is here within the Map code on the setMapCenter function.
setMapCenter:function(e){var b=this,d=b.getMap(),a=b.getMapOptions(),c=(window.google||{}).maps;if(c){if(!e){if(d&&d.getCenter){e=d.getCenter()}else{if(a.hasOwnProperty("center")){e=a.center}else{e=new c.LatLng(37.381592,-122.135672)}}}
The breakpoint seems to be on the line: new c.LatLng(37.381592,-122.135672).
Why would it suddenly start failing on a production build?
Update
This is the stack trace, but I can't find out what actually is the problem as the code is obfuscated/minified:
Uncaught TypeError: undefined is not a function VM1471:1
Ext.define.setMapCenterVM1471:1
Ext.define.updateUseCurrentLocationVM1471:1
jVM1471:1
b.implement.initConfigVM1471:1
etc...
The weird thing is, this worked using ST2.1. It also works in ST2.3 but only in Testing/Debug mode.
My code doesn't even set the center of the map when the view is initially shown:
This is the map view:
Ext.define('MyApp.view.offices.OfficeMap', {
extend: 'Ext.Panel',
alias: 'widget.officemapview',
requires: [
'Ext.Map'
],
config: {
layout: 'fit',
items: [
{
xtype: 'map',
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
console.log("activate fired");
},
maprender: function () {
console.log("maprender fired");
var gMap = this.getMap();
this.fireEvent('googleMapRender', gMap);
}
}
}
],
officeRecord: null
}
});
This is the controller code that receives the render event from the view:
onGoogleMapRender: function (googleMap) {
var record = this.selectedOffice;
var longi = record.get("Longitude");
var lati = record.get("Latitude");
console.log("About to create google maps pos")
console.log("About to create google maps marker")
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lati, longi)
});
console.log("About to set maps map object")
marker.setMap(googleMap);
setTimeout(function () {
console.log("map setTimeout")
// weird timeout issue? - http://stackoverflow.com/questions/15041697/sencha-touch-google-map-and-centering-a-marker
googleMap.setZoom(17);
googleMap.panTo(pos);
}, 500);
The error on the following browsers are:
Chrome - Uncaught TypeError: undefined is not a function
IE - Object does not support this function
Any ideas as to what is happening here?
Maybe check in chrome in developer tools on network tab what are the difference in loading javascript files between production mode and development mode.
That is because your javascript are loaded before the google maps javascript is loaded. So when setMapCenter get the function, there is no c yet (undefined). What you can do is use some callback, like "painted" and then set your "setMapCenter".
Update
Try to do this just to test:
xtype: "map",
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
me.config.mapOptions = {
center : new google.maps.LatLng(-42,-42), // your center
zoom : 14,
//others options
}
},
maprender: function(comp, map) {
var me = this;
var map = this.getMap();
// marker test
var position = new google.maps.LatLng(-42, -42);
var marker = new google.maps.Marker({
position: position,
title : 'Hello World',
map: map
});
}
}

EnhancedGrid scrolling (with large amount of data)

I'm using dojox.grid.EnhancedGrid which is created by the class MyGrid, explained below.
var MyGrid = declare(null, {
constructor: function (app, id, opts) {
this.id = id;
this.app = app;
this.core_id = app.getCoreId();
var myStore;
var jquery = {
scope: 'core',
command: 'rest',
args: {
resource: this.id,
serve: 'cooked'
},
core_id: this.core_id
};
this.jsonStore = new custom.store.JsonRest({
target: app.get_dispatcher_url(),
jquery: jquery,
// setstruct is an object to provide a method that sets a new
// grid structure as soon as data arrives.
set_structure: dojo.hitch(this, this.set_structure),
app: this.app
});
// avoid closures from holding a reference
// to jquery and preventing its GCing
jquery = null;
this.memoryStore = new Memory();
myStore = new Cache(this.jsonStore, this.memoryStore);
this.dataStore = new ObjectStore({
objectStore: myStore,
onSet: onEdited,
onNew: onEdited,
onDelete: onEdited
});
myStore = null;
// create grid
this.grid = new EnhancedGrid({
store: this.dataStore,
height: '100%',
structure: [
{ name: 'Waiting for data...', field: 'no-field', width: '10em' }
],
plugins: {
menus: { rowMenu: this._create_menu() },
nestedSorting: true,
selector: { row: 'disabled', col: 'disabled', cell: 'multi' }
}
});
// start grid
this.grid.startup();
}
});
Note that I omitted code to focus just on the creation of the "grid/store". MyGrid displays the grid on a ContentPane.
So I create an object to display the grid (with a large amount of data) and scroll to the bottom, and it will request only the visible rows properly. However, it just so happens that when I create a second grid it will request the content for the second grid and all data for the first grid!!
How can this happen? Any idea of what can be causing this?
EDITED (22/02/13):
I created a jsfiddle to demonstrate the problem I'm getting: see jsfiddle
How to reproduce the problem:
Click on New Tab button, open the console and check how many rows were fetched.
Go to the bottom of the grid (quickly) and check the console again.
Click on New Tab again, go to the console and you can see that all rows, not loaded yet, from previous grid were fetched.
Note: I found out that this only happens on Google Chrome. I tested with Firefox and everything worked well.

APP SDK 2.0: Charts in the short term?

I know you guys will be making a really nice charting tool available for 2.0 SDK soon, but until then, I'd like to use Google Charts.
In the 1.x API, you could could define html object by id, and then use getElementById() to get a reference to that item. So for example:
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
But in the new SDK, you don't have an HTML block to work with-- how would you do the following? This question is relevant for any item where you want to pin an object to a place in your html.
In the new API the app base class is simply an extension of Ext.container.Container which itself is an extension of AbstractComponent and so has the getEl() method. (Note that by adding content directly to dom nodes you lose out on the automatic layout functionality provided by Ext containers).
Here's a quick example to illustrate doing something like this though:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
}
});
In the last answer (your code snippet), you were just missing the items child of the app, which creates the chartContainer element you want to render the chart into. I think this code should work for you:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
Here's the code. It crashes with "Uncaught TypeError: Cannot read property 'parentNode' of null" inside of "Ext.define.initComponent" initiated from "Ext.define.Rally.loadScripts". Never gets to _drawChart():
I've also added the following line to the rake script to reference the google API:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
And here's App.js:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
The first draft of the SDK 2.0 charting component is now live.
You can find out about it here.

Constrain position of Dojo FloatingPane

I have a dojox.layout.FloatingPane (as a custom dijit) which can be positioned anywhere within its enclosing div. My problem is that the user can potentially drag the FloatingPane completely outside of its container and be unable to retrieve it. Is there any easy way to force the FloatingPane to remain entirely visible at all times?
Here's my code:
dojo.provide("ne.trim.dijits.SearchDialog");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.layout.FloatingPane");
dojo.declare("ne.trim.dijits.SearchDialog", [dijit._Widget, dijit._Templated], {
templateString: dojo.cache("ne.trim.dijits", "templates/SearchDialog.html"),
initialised:false,
floatingPane: null,
postCreate: function() {
this.init();
},
init: function() {
console.debug("SearchDialog.init()", "start");
if ( this.initialised === false ) {
this.createSearchDialog();
}
//ne.trim.AppGlobals.searchDialog = this;
console.debug("SearchDialog.init()", "end");
},
createSearchDialog: function() {
var node = dojo.byId('searchbox');
floatingPane = new dojox.layout.FloatingPane({
title: "A floating pane",
resizable: true, dockable: true, constrainToContainer: true,
style: "position:absolute;top:100;right:100;width:400px;height:300px;z-index:100",
}, node );
this.initialised=true;
floatingPane.startup();
}
});
First of all, see the working example at jsFiddle: http://jsfiddle.net/phusick/3vTXW/
And now some explanation;) The DnD functionality of FloatingPane is achieved via dojo.dnd.Moveable class instantialized in pane's postCreate method. To constrain the movement of the FloatingPane you should use one of these moveables instead:
dojo.dnd.parentConstainedMoveable - to constrain by a DOM node
dojo.dnd.boxConstrainedMoveable - to constrain by co-ordinates: {l: 10, t: 10, w: 100, h: 100}
dojo.dnd.constrainedMoveable - to constrain by co-ordinates calculated in a provided function
For more details see aforementioned jsFiddle.
According to documentation you should call destroy() on Moveable instance to remove it, but as FloatingPane's original Moveable is not assigned to any object property, I do not destroy it, I just instantiate one of those three moveables on the same DOM node in a subclass:
var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {
postCreate: function() {
this.inherited(arguments);
this.moveable = new dojo.dnd.move.constrainedMoveable(this.domNode, {
handle: this.focusNode,
constraints: function() {
return dojo.coords(dojo.body());
}
});
}
});
Now you can use ConstainedFloatingPane instead of dojox.layout.FloatingPane:
var floatingPane = new ConstrainedFloatingPane({
title: "A Constrained Floating Pane",
resizable: true
}, searchboxNode);