I try to make custom wab widget for my app, can help me someone
1216
5
02-18-2020 04:23 AM
by
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>
by
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>
by
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');
}
});
});
by
Thx all for suggestions, i will try something 
Every advice is welcome..
