|
POST
|
Yep: better to not bake the css into the TypeScript. What was I thinking? If I get the base css from a CDN: <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"> and <body class="claro">
<div id="viewDiv"></div>
</body> this yields which gets me closer to the styling I am after. Now I can host some local css to pretty up the dijits.
... View more
04-26-2017
11:02 AM
|
0
|
0
|
841
|
|
POST
|
The sample for building a widget is a fine start: Custom Recenter Widget | ArcGIS API for JavaScript 4.3 All the style information is inline, which is...well, inline. Now I want to add dijits to my widget: comboboxes, buttons, stuff. Styling is pretty intense and best handled someplace other than inline. Also, the css is available via CDN from dojo and ArcGIS. When I compile the TypeScript below and drop it into my map app, the styling is, well, primitive. (Sorry, no jsbin). Any clues on how to start building more complex and styled widgets that I can add to my map apps would be greatly appreciated. TIA THE RESULT: HTML: var styledStuff = new StyledStuff({
title: "This is the styled stuff",
subtitle: "And this is the sub styled stuff"
});
view.ui.add(styledStuff, "top-right"); TYPESCRIPT: /// <amd-dependency path="esri/core/tsSupport/declareExtendsHelper" name="__extends" />
/// <amd-dependency path="esri/core/tsSupport/decorateHelper" name="__decorate" />
import {subclass, declared, property} from "esri/core/accessorSupport/decorators";
import Widget = require("esri/widgets/Widget");
import Button = require("dijit/form/Button");
import ComboBox = require("dijit/form/ComboBox");
import Memory = require("dojo/store/Memory");
import on = require("dojo/on");
import dom = require("dojo/dom");
import req = require("dojo/require");
import { renderable, jsxFactory } from "esri/widgets/support/widget";
const CSS = {
base: "styledstuff"
};
interface Style {
textShadow: string;
}
@subclass("esri.widgets.MapTitle")
class StyledStuff extends declared(Widget) {
//--------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------
//----------------------------------
// title
//----------------------------------
@property()
@renderable()
title: string;
//----------------------------------
// subtitle
//----------------------------------
@property()
@renderable()
subtitle: string;
//----------------------------------
// button
//----------------------------------
@property()
@renderable()
button: Button;
//-------------------------------------------------------------------
//
// Public methods
//
//-------------------------------------------------------------------
render() {
const title = this._getTitle();
const subtitle = this._getSubtitle();
const button = this._getButton();
const comboBox = this._getComboBox();
return (
<div
bind={this}
class={CSS.base}>
<p id="title" class="title">{title}</p>
<p id="subtitle" class="subtitle">{subtitle}</p>
<p><span><div id="progButtonNode"></div></span></p>
<p><span><div id="progComboBoxNode"></div></span></p>
</div>
);
}
//-------------------------------------------------------------------
//
// Private methods
//
//-------------------------------------------------------------------
private _getTitle() {
return this.title;
}
private _getSubtitle() {
return this.subtitle;
}
private _getButton() {
var myButton = new Button({
label: "Click this button, man!",
onClick: function(){
alert("Please and thank you, man! ");
}
}, "progButtonNode");
return myButton;
}
private _getComboBox() {
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
var comboBox = new ComboBox({
name: "state",
value: "California",
store: stateStore,
searchAttr: "name"
}, "progComboBoxNode").startup();
return comboBox;
}
}
export = StyledStuff;
... View more
04-26-2017
09:09 AM
|
0
|
2
|
1854
|
|
POST
|
I'm trying to add multiple Expands, each at their own manual location e.g., right side, left side, top, bottom, etc. These host OOTB widgets and custom widgets we are writing ourselves. Thank you for the input for one element - that solved part of the problem. Any idea how to handle multiple widgets?
... View more
04-25-2017
10:21 AM
|
1
|
4
|
3913
|
|
POST
|
var searchWidget = new Search({
view: view
});
var expand = new Expand({
expandIconClass: "esri-icon-search",
view: view,
content: searchWidget
});
view.ui.add(expand, "manual"); By default the Expand gets placed in the upper-left corner, flush with the content of the container. I want to place the Expand someplace else (e.g., flush with the left side of the container, 300px from the top). I assume I can do it in a style, however I cannot create a class and set the location properties of the class. I can a handle on the element. I can inspect it in the debugger. But I cannot change the location properties of the element. Any help please. A clue. Anything...
... View more
04-24-2017
12:53 PM
|
0
|
11
|
6829
|
|
POST
|
Thank you, I missed the parameter as an object. Funny thing is, I had just solved another problem using that pattern.
... View more
03-23-2017
01:29 PM
|
0
|
0
|
692
|
|
POST
|
According to the API reference ScreenPoint | API Reference | ArcGIS API for JavaScript 4.3 In my custom widget I have a method that does something with a ScreenPoint. Below are two attempt at the method: private _onPointerDown(evt:PointerEvent) {
const xx:Number = Number(evt.x);
const yy:Number = Number(evt.y);
const screenPoint:ScreenPoint = new ScreenPoint('esri.folder.className', xx, yy); // Errors at TSC with: Supplied parameters do not match any signature of call target.
// but still transpiles successfully
// do something with the screenPoint
} private _onPointerDown(evt:PointerEvent) {
const xx:Number = Number(evt.x);
const yy:Number = Number(evt.y);
const screenPoint:ScreenPoint = new ScreenPoint(xx, yy); // Errors at TSC with: Supplied parameters do not match any signature of call target.
// but still transpiles successfully
// do something with the screenPoint
} Both tsx files expose this problem 'Error'message: 'Supplied parameters do not match any signature of call target.' yet both compile to JavaScript the execute correctly. In the name of a clean build, how can I remove that problem from my build? TIA
... View more
03-23-2017
09:19 AM
|
0
|
3
|
1598
|
|
POST
|
Thanks Rohit, that's what I figured but was no certain. We are using ADFS and SAML, although we have retained one ArcGIS Portal named user account for administrative purposes. For business reasons we want all our uses to access Portal content via their ADFS SAML security. We are looking forward to your support of ADFS SAML. Thank you for your reply! --Dirk
... View more
03-20-2017
07:27 PM
|
0
|
1
|
2383
|
|
POST
|
Shameless bump - I'm still trying to figure this out. TIA
... View more
03-20-2017
01:46 PM
|
0
|
3
|
2383
|
|
POST
|
Yep! this.view.on("pointer-down",(evt:PointerEvent) => this._onPointerDown(evt));
and private _onPointerDown(evt:PointerEvent) {
// do something with the evt
} Brilliant!
... View more
03-18-2017
11:19 AM
|
0
|
0
|
1092
|
|
POST
|
I'm trying to figure out how to listen for pointer events on a MapView in my widget. I'm not getting very far... For example: postInitialize() {
watchUtils.on(this, "view", "pointer-down", () => this._onPointerDown());
} will fire the _onPointerDown method when the MapView is clicked on. However, what I'm really interested in are the properties of the pointer-down event. e.g., x, y, etc. : MapView | API Reference | ArcGIS API for JavaScript 4.3 Any advice is appreciated - I'm just looking for an opening TIA
... View more
03-17-2017
03:34 PM
|
0
|
3
|
1614
|
|
POST
|
Let me clarify with code - am referring to webmap hosted on AGOL/Portal that have a basemap. The code below is linear. This also occurs when the mapView is returned in a promise: var webMap = new WebMap({ // has "national-geographic" basemap portalItem: { id: <CRYPTIC_WEBMAP_ID_IN_AGOL_OR_PORTAL> } }); var mapView = new MapView({ map: webMap, container: "mapDiv" }) var basemapToggle = new BasemapToggle({ view: mapView, nextBasemap: "hybrid" // Allows for toggling to the "hybrid" basemap }); mapView.ui.add(basemapToggle, "top-right");
... View more
03-11-2017
11:10 AM
|
0
|
2
|
1575
|
|
POST
|
My map app loads a webmap hosted on our Portal. The webmap has the national-geographic as its basemap. I've added a BasemapToggle to the map app - it uses hybrid. When the map loads the BasemapToggle icon displays with a generic appearance - and not as icon representing the national-geographic basemap. Then the basemap gets toggled, the generic icon gets put under the hybrid icon. My question is: When the map loads in I add the BasemapToggle to the scene, can I interrogate the webmap to get the correct icon for the basemap? TIA
... View more
03-11-2017
09:03 AM
|
0
|
6
|
2145
|
|
POST
|
Our Portal uses ADFS as our security model. In my Jupyter notebook, when if try to create a GIS: gis = GIS("https://webadaptor.mydomain.com/portal", "my.username@mydomain.com", "mypassword") I am informed that I cannot obtain a token: Unable to generate token. Invalid username or password With an extensive traceback and the bottom line of: RuntimeError: Unable to generate token. Invalid username or password. (Error Code: 400) The questions I have are: Can we use our ADFS security to create a GIS in the API? If yes, how do I do this? TIA --Dirk
... View more
03-09-2017
07:31 PM
|
0
|
4
|
5747
|
|
POST
|
I create a simple renderer with an extrusion and assign it to a feature layer: var symbol = new PolygonSymbol3D({ symbolLayers: [new ExtrudeSymbol3DLayer({ size: 50000, // meters in height extruded })] }); var renderer = new SimpleRenderer({ symbol: symbol, label: "Tract by ROW Acquisition Status", visualVariables: [{ type: "color", field: "Acquisition_Status", stops: [ { value: 'Not Acquired', color: "green", // DISPLAYS AS ***RED*** IN THE WEB SCENE label: "Not Acquired" },{ value: 'Acquired', color: "red", // DISPLAYS AS ***GREEN*** IN THE WEB SCENE label: "Acquired" } ]} ] }); Then when I view the results in a scene the colors are reversed; i.e., "Acquired" is green and "Not Acquired" is red, even though the code told the renderer to have "Acquired" to be red and "Not Acquired" to be green. WUWT?
... View more
01-19-2017
08:37 AM
|
0
|
1
|
1372
|
|
POST
|
Yes, I have read that blog several times. It does not answer my questions. Ismael states "You will also need to install the ArcGIS Data Store and register it with your ArcGIS Server instance.", but he never states why - which is what I need to know. I'm asking for technical details. I also need to understand why Survey123 operates without the Data Store when submission_url is used. I also need to understand why Survey123 apparently only needs the ArcGIS Data Store to allow Survey123 to connect a Portal for ArcGIS instance when submission_url is used. Thanks for helping continue the dialog!
... View more
12-30-2016
07:45 AM
|
1
|
1
|
1103
|
| Title | Kudos | Posted |
|---|---|---|
| 5 | 11-10-2021 12:27 PM | |
| 1 | 10-02-2019 10:47 AM | |
| 1 | 09-24-2021 08:40 AM | |
| 1 | 09-28-2018 10:16 PM | |
| 1 | 10-09-2015 08:26 PM |
| Online Status |
Offline
|
| Date Last Visited |
05-05-2023
03:51 AM
|