I try to make custom wab widget for my app, can help me someone

272
5
02-18-2020 04:23 AM
Highlighted
New Contributor

Hi all,

like a say, I try to make custom wab widget for my app, can help me someone. I have ArcGIS API for JavaScript Sandbox code and need code for WAB..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>

<title>CoordinateConversion widget - Custom Formats - 4.14</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>


<style>
html,
body,
#viewDiv
{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>


<script src="https://js.arcgis.com/4.14/"></script>

<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/widgets/CoordinateConversion",
"esri/widgets/CoordinateConversion/support/Format",
"esri/widgets/CoordinateConversion/support/Conversion",
"esri/geometry/Point",
"esri/geometry/support/webMercatorUtils",
"esri/geometry/SpatialReference"
], function(
Map,
SceneView,
CoordinateConversion,
Format,
Conversion,
Point,
webMercatorUtils,
SpatialReference
) {
var map = new Map({
basemap: "hybrid",
ground: "world-elevation"
});

var view = new SceneView({
container: "viewDiv",
map: map,
// Clip the view to the extent covered by
// by NAD 1983 HARN StatePlane California I
clippingArea: {
xmin: -124.45,
xmax: -119.99,
ymax: 43.01,
ymin: 39.59
},
center: {
x: -122.22,
y: 41.3
},
zoom: 10,
viewingMode: "local"
});

view.when(function(view) {
view.goTo({ tilt: 45 });
});

var ccWidget = new CoordinateConversion({
view: view
});

view.ui.add(ccWidget, "top-right");

// Regular expression to find a number
var numberSearchPattern = /-?\d+[\.]?\d*/;

/**
* Create a new Format called XYZ, which looks like: "<Latitude>, <Longitude>, <Z>"
*
* We need to define a convert function, a reverse convert function,
* and some formatting information.
*/

var newFormat = new Format({
// The format's name should be unique with respect to other formats used by the widget
name: "XYZ",
conversionInfo: {
// Define a convert function
// Point -> Position
convert: function(point) {
var returnPoint = point.spatialReference.isWGS84
? point
: webMercatorUtils.webMercatorToGeographic(point);
var x = returnPoint.x.toFixed(4);
var y = returnPoint.y.toFixed(4);
var z = returnPoint.z.toFixed(4);
return {
location: returnPoint,
coordinate: `${x}, ${y}, ${z}`
};
},
// Define a reverse convert function
// String -> Point
reverseConvert: function(string) {
var parts = string.split(",");
return new Point({
x: parseFloat(parts[0]),
y: parseFloat(parts[1]),
z: parseFloat(parts[2]),
spatialReference: { wkid: 4326 }
});
}
},
// Define each segment of the coordinate
coordinateSegments: [
{
alias: "X",
description: "Longitude",
searchPattern: numberSearchPattern
},
{
alias: "Y",
description: "Latitude",
searchPattern: numberSearchPattern
},
{
alias: "Z",
description: "Elevation",
searchPattern: numberSearchPattern
}
],
defaultPattern: "X°, Y°, Z"
});

// add our new format to the widget's dropdown
ccWidget.formats.add(newFormat);

/**
* Create a new Format 'SPS I', which looks like: "<X>, <Y>" in the
* California StatePlane Zone I Spatial Reference, described by wkid 102241
*
* For this Format, we only need to provide a spatialReference with the correct
* wkid. The geometry service can take care of the rest.
*/

var stateplaneCA = new Format({
name: "SPS I",
conversionInfo: {
spatialReference: new SpatialReference({ wkid: 102241 }),
reverseConvert: function(string, format) {
var parts = string.split(",");
return new Point({
x: parseFloat(parts[0]),
y: parseFloat(parts[1]),
spatialReference: { wkid: 102241 }
});
}
},
coordinateSegments: [
{
alias: "X",
description: "easting",
searchPattern: numberSearchPattern
},
{
alias: "Y",
description: "northing",
searchPattern: numberSearchPattern
}
],
defaultPattern: "X, Y"
});

// Add our new format to the widget's dropdown
ccWidget.formats.add(stateplaneCA);

// Add the two custom formats to the top of the widget's display
ccWidget.conversions.splice(
0,
0,
new Conversion({
format: newFormat
}),
new Conversion({
format: stateplaneCA
})
);
});
</script>

</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Reply
0 Kudos
5 Replies
Highlighted
MVP Regular Contributor

Jasmin Geko

What do you want this widget to do? 

Here is documentation how to build the widget yourself. 

Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer... 

Reply
0 Kudos
Highlighted
New Contributor

Ah sory, i copied vrong code 

I make some changes on this demo and add custom WKID to show me a projected coordinate on widget. but i am not sure to right code on WAB widget. I am not sure where put this coed to make custom widget, on widget.js file and is the right syntax ect....

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>

<title>CoordinateConversion widget - Custom Formats - 4.14</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>


<style>
html,
body,
#viewDiv
{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>


<script src="https://js.arcgis.com/4.14/"></script>

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/CoordinateConversion",
"esri/widgets/CoordinateConversion/support/Format",
"esri/widgets/CoordinateConversion/support/Conversion",
"esri/geometry/Point",
"esri/geometry/support/webMercatorUtils",
"esri/geometry/SpatialReference"
], function(
Map,
MapView,
CoordinateConversion,
Format,
Conversion,
Point,
webMercatorUtils,
SpatialReference
) {
var map = new Map({
basemap: "hybrid",
ground: "world-elevation"
});

var view = new MapView({
container: "viewDiv",
map: map,
// Clip the view to the extent covered by
// by NAD 1983 HARN StatePlane California I

center: {
x: 17.72,
y: 44.1
},

zoom: 8,
viewingMode: "local"
});



var ccWidget = new CoordinateConversion({
view: view
});

view.ui.add(ccWidget, "top-right");

// Regular expression to find a number
var numberSearchPattern = /-?\d+[\.]?\d*/;

/**
* Create a new Format called XYZ, which looks like: "<Latitude>, <Longitude>, <Z>"
*
* We need to define a convert function, a reverse convert function,
* and some formatting information.
*/



/**
* Create a new Format 'SPS I', which looks like: "<X>, <Y>" in the
* California StatePlane Zone I Spatial Reference, described by wkid 102241
*
* For this Format, we only need to provide a spatialReference with the correct
* wkid. The geometry service can take care of the rest.
*/

var Balkan6 = new Format({
name: "Balkan zona 6",
conversionInfo: {
spatialReference: new SpatialReference({ wkid: 31276 }),
reverseConvert: function(string, format) {
var parts = string.split(",");
return new Point({
x: parseFloat(parts[0]),
y: parseFloat(parts[1]),
spatialReference: { wkid: 31276 }
});
}
},
coordinateSegments: [
{
alias: "X",
description: "easting",
searchPattern: numberSearchPattern
},
{
alias: "Y",
description: "northing",
searchPattern: numberSearchPattern
}
],
defaultPattern: "X, Y"
});

// Add our new format to the widget's dropdown
ccWidget.formats.add(Balkan6);


var Balkan6 = new Format({
name: "Balkan zona 5",
conversionInfo: {
spatialReference: new SpatialReference({ wkid: 31275 }),
reverseConvert: function(string, format) {
var parts = string.split(",");
return new Point({
x: parseFloat(parts[0]),
y: parseFloat(parts[1]),
spatialReference: { wkid: 31275 }
});
}
},
coordinateSegments: [
{
alias: "X",
description: "easting",
searchPattern: numberSearchPattern
},
{
alias: "Y",
description: "northing",
searchPattern: numberSearchPattern
}
],
defaultPattern: "X, Y"
});

// Add our new format to the widget's dropdown
ccWidget.formats.add(Balkan6);


// Add the two custom formats to the top of the widget's display
ccWidget.conversions.splice(
0,
0,
new Conversion({
format: newFormat
}),
new Conversion({
format: Balkan6
}),

new Conversion({
format: Balkan5
})



);
});
</script>

</head>

<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>
Reply
0 Kudos
Highlighted
Occasional Contributor

Hi Jasmin,

You can follow Rickey's suggestion to create a custom 3D widget.

Make sure you have an UI with a dojo attach point in your Widget.html: 

<div>
<div data-dojo-attach-point="myCoordinateConversionWidget"></div>
</div>

and then in your Widget.js, create the CoordinateConversion widget and attach it to the element by 'container' property: 

define(['dojo/_base/declare', 'jimu/BaseWidget', 'esri/widgets/CoordinateConversion'],
function(declare, BaseWidget, CoordinateConversion) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
//Please note that the widget depends on the 4.0 API
// DemoWidget code goes here

baseClass: 'jimu-widget-demo',

postCreate: function() {
this.inherited(arguments);
var ccWidget = new CoordinateConversion({
container: this.myCoordinateConversionWidget,
view: this.sceneView
});
},

startup: function() {
this.inherited(arguments);
console.log('startup');
},

onOpen: function(){
console.log('onOpen');
},

onClose: function(){
console.log('onClose');
},

onMinimize: function(){
console.log('onMinimize');
},

onMaximize: function(){
console.log('onMaximize');
}
});
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Highlighted
MVP Regular Contributor

Jasmin Geko

Have you seen the widget talked about here? 

Maybe you could adapt this one to meet your needs

https://community.esri.com/thread/248305-open-coordinate-conversion-widget-with-multiple-conversions... 

Reply
0 Kudos
Highlighted
New Contributor

Thx all for suggestions, i will try something  

Every advice is welcome..

Reply
0 Kudos