Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About jaykapalczynski
jaykapalczynski
Honored Contributor
since
07-04-2014
09-19-2022
1466
Posts created
78
Kudos given
69
Solutions
161
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by jaykapalczynski
|
POST
|
The data is coming in from a Word Press RestEP and a bit messy...
... View more
09-19-2022
08:07 AM
|
0
|
0
|
1250
|
|
POST
|
Ok think I got it.... BUT please if there is a better way please let me know. def fModifyValue(processResults, charlength):
initialMod = str(processResults)
characterLength = int(charlength)
newmod1 = initialMod.replace("u'", "").replace('[', '').replace(']', '').replace(r"'", r'')
newmod2 = newmod1[:characterLength]
return newmod2
... View more
09-16-2022
08:33 AM
|
0
|
2
|
1295
|
|
POST
|
Maybe newmod2 = newmod1[: {} ].format(characterLength) UPDATE: Nope that does not work
... View more
09-16-2022
08:25 AM
|
0
|
3
|
1309
|
|
POST
|
I am trying to remove characters from a string but this Numeric value changes. I'm passing in the string and the number of characters that should remain. Below there are two ways I am trying this both doing the same thing... But the number of characters is hardcoded '75' How do I replace the '75' with the variable 'characterLength' that is being passed into the def??? newmod2 = newmod1[: {characterLength} ] def fModifyValue(processResults, charlength):
initialMod = str(processResults)
characterLength = charlength
newmod1 = initialMod.replace("u'", "")
newmod2 = (newmod1[:75] + '..') if len(newmod1) > 75 else newmod1
#OR
newmod2 = newmod1[:75]
return newmod2
... View more
09-16-2022
08:22 AM
|
0
|
5
|
1311
|
|
POST
|
@RobertScheitlin__GISP Cool I like the timeout draw-complete showing the Geometry JSON Results being displayed.. Yea the initial code I submitted had an issue with the Point not buffering properly. It was all down to the Variable set up for "geometryType" Other changes to the text reporting as well were done well... Cheers and thanks for your input.... learn more and more every day....
... View more
09-15-2022
11:02 AM
|
1
|
0
|
694
|
|
POST
|
That was it.... implemented perfectly.... Thanks @RobertScheitlin__GISP
... View more
09-15-2022
07:36 AM
|
0
|
0
|
696
|
|
POST
|
@RobertScheitlin__GISP Follow up question.... I was able to write to a global variable and get the geometry so that's all good to go... But I have been trying to get your other approach to work and have been unsuccessful...not sure how to incorporate this into my code. Do you have any further hints? A far as querying the buffer graphic. Just get the graphic from the bufferGraLayer graphics property. let buffGeom = bufferGraLayer.graphics[0].geometry;
... View more
09-15-2022
05:02 AM
|
0
|
2
|
2898
|
|
POST
|
If anyone is interested here is the full code... Chose between geometry types, draw shapes, buffer shapes, return geometry <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 20;
padding: 20;
}
.ext-box {
display: table;
width:350px;
height:100%;
}
.int-box {
display: table-cell;
vertical-align: top;
width:340px;
height:260px;
}
.FixedHeightContainer{
float:left;
height: 380px;
width:230px;
padding:3px;
background:rgb(112,128,144,0.5);
}
.header{
height: 30px;
padding-top: 5px;
}
.geometryResultsdiv
{
height:345px;
overflow:auto;
background:#fff;
font-size: 8px;
}
.menu {
display: table;
width: 65%;
border: 1px solid black;
border-right: none;
box-sizing: border-box;
}
.menu > div {
display: table-row;
background-color: white;
}
.menu > div >div {
border-right: 1px solid black;
display: table-cell;
text-align: center;
vertical-align: middle;
}
@media screen and (max-width: 240px) {
.menu {
display: block;
float: left;
width: auto;
border: none;
}
.menu > div {
display: block;
}
.menu > div > div {
border: none;
padding-right: 10px;
display: block;
text-align: left;
}
}
.boxpadding{
padding: 0px 0px 5px 8px;
}
.float-container {
border: 3px solid #fff;
padding: 2px;
}
.float-child1 {
width: 40%;
float: left;
padding: 2px;
}
.float-child2 {
width: 25%;
float: left;
padding: 2px;
}
</style>
<script>
function valDistance() {
d = document.getElementById("distance").value;
document.getElementById("infoDistance").textContent = "Distance: " + d;
}
function valType() {
t = document.getElementById("distanceType").value;
document.getElementById("infoType").textContent = "Type: " + t;
}
require([
"esri/Map", "esri/views/MapView", "esri/views/draw/Draw", "esri/Graphic", "esri/geometry/geometryEngine",
"esri/geometry/support/webMercatorUtils",
"esri/layers/GraphicsLayer",
"dojo/dom",
"dojo/domReady!"
], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, GraphicsLayer, dom) => {
// https://developers.arcgis.com/javascript/latest/esri-icon-font/
var geometryType = ""
var geometryInfo = "No Geometry Selected"
let bufferGralayer = new GraphicsLayer({id: "BufferGraLyr",});
bufferGralayer.opacity = 0.5;
const map = new Map({
basemap: "gray-vector",
layers: [bufferGralayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [-77.367, 37.55]
});
// add the button for the draw tool
view.ui.add("clear-button", "top-left");
view.ui.add("line-button", "top-left");
view.ui.add("point-button", "top-left");
view.ui.add("polygon-button", "top-left");
const draw = new Draw({
view: view
});
// THIS IS FOR THE BUTTONS IN THE SIDE BAR
document.getElementById("clear-button2").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "No Geometry Selected";
document.getElementById("info2").textContent = geometryInfo;
document.getElementById("geometryResultsdiv").textContent = "";
};
document.getElementById("point-button2").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "point";
document.getElementById("info2").textContent = "Geometry: " + geometryInfo;
const action = draw.create("point");
view.focus();
action.on("cursor-update", function (evt) {
updateVerticesPoint(evt.coordinates);
});
action.on("draw-complete", function (evt) {
updateVerticesPoint(evt.coordinates);
});
};
document.getElementById("polygon-button2").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "polygon";
document.getElementById("info2").textContent = "Geometry: " + geometryInfo;
const action = draw.create("polygon");
view.focus();
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesPolygon
);
};
document.getElementById("line-button2").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "line";
document.getElementById("info2").textContent = "Geometry: " + geometryInfo;
const action = draw.create("polyline");
view.focus();
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesLine
);
};
// THIS IS FOR THE BUTTONS IN THE VIEW ITSELF
document.getElementById("clear-button").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "No Geometry Selected";
document.getElementById("info2").textContent = geometryInfo;
document.getElementById("geometryResultsdiv").textContent = "";
};
document.getElementById("point-button").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "point";
document.getElementById("info2").textContent = "Geometry: " + geometryInfo;
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("point");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// PointDrawAction.cursor-update
// Give a visual feedback to users as they move the pointer over the view
action.on("cursor-update", function (evt) {
updateVerticesPoint(evt.coordinates);
});
// PointDrawAction.draw-complete
// Create a point when user clicks on the view or presses "C" key.
action.on("draw-complete", function (evt) {
updateVerticesPoint(evt.coordinates);
});
};
document.getElementById("polygon-button").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "polygon";
document.getElementById("info2").textContent = "Geometry: " + geometryInfo;
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polygon");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesPolygon
);
};
document.getElementById("line-button").onclick = () => {
view.graphics.removeAll();
bufferGralayer.removeAll();
geometryInfo = "line";
document.getElementById("info2").textContent = "Geometry: " + geometryInfo;
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polyline");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesLine
);
};
// Set variable to hold the Geometry that the Users Created.
var userDefinedGeometry = "";
function updateVerticesPoint(coordinates) {
//// create a polyline from returned vertices
view.graphics.removeAll();
let point = {
type: "point", // autocasts as /Point
x: coordinates[0],
y: coordinates[1],
spatialReference: view.spatialReference
};
let graphicPoint = new Graphic({
geometry: point,
symbol: {
type: "simple-marker", // autocasts as SimpleMarkerSymbol
style: "circle",
size: "16px",
color: [70,90,141, 0.4],
outline: {
color: [47,76,119,0.5],
width: 1
}
}
});
view.graphics.add(graphicPoint);
BufferGeom(graphicPoint.geometry);
}
function updateVerticesPolygon(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphicPolygon(event);
}
}
function updateVerticesLine(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphicLine(event);
// if the last vertex is making the line intersects itself,
// prevent the events from firing
if (result.selfIntersects) {
event.preventDefault();
}
}
}
/*
function createGraphicPoint(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicPnt= new Graphic({
geometry: {
type: "point",
paths: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-marker", // autocasts as new SimpleFillSymbol
color: [255,255,255,0.9], //[70,90,141,0.2],
opacity: 0.2,
outline: {
color: [255,255,255, 0.9], //[47,76,119, 0.2],
width: 1
}
}
});
view.graphics.add(graphicPnt);
BufferGeom(graphicPnt.geometry);
}
*/
function createGraphicPolygon(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicPoly = new Graphic({
geometry: {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol
color: [70,90,141, 0.4],
outline: {
color: [47,76,119],
width: 1
}
}
});
view.graphics.add(graphicPoly);
BufferGeom(graphicPoly.geometry);
}
function createGraphicLine(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicLine = new Graphic({
geometry: {
type: "polyline",
paths: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-line", // autocasts as new SimpleFillSymbol
color: [70,90,141, 0.4],
width: 1,
cap: "round",
join: "round"
}
});
// check if the polyline intersects itself.
const intersectingSegment = getIntersectingSegment(graphicLine.geometry);
// Add a new graphic for the intersecting segment.
if (intersectingSegment) {
view.graphics.addMany([graphicLine, intersectingSegment]);
}
// Just add the graphic representing the polyline if no intersection
else {
view.graphics.add(graphicLine);
BufferGeom(graphicLine.geometry);
}
// return intersectingSegment
return {
selfIntersects: intersectingSegment
};
}
function BufferGeom(geom) {
var d = document.getElementById("distance").value;
var t = document.getElementById("distanceType").value;
const buffGeom = geometryEngine.buffer(geom, d, t);
// Set Global Variable to hold the Geometry
userDefinedGeometry = buffGeom;
const buffgra = new Graphic({
geometry: buffGeom,
symbol: getGeomSymbol()
});
bufferGralayer.removeAll();
bufferGralayer.add(buffgra)
document.getElementById("geometryResultsdiv").innerText = JSON.stringify(userDefinedGeometry);
}
function getGeomSymbol() {
let sym;
switch(geometryType) {
case "point":
sym = {
style: "circle",
size: 22,
type: "simple-marker",
color: [112,128,144, 0.9],
outline: {
color: [112,128,144, 0.9],
width: 1
}
}
break;
case "line":
case "polygon":
sym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol
color: [112,128,144],
width: 1,
cap: "round",
join: "round"
}
break;
default :
sym = null;
}
return sym;
}
// function that checks if the line intersects itself
function isSelfIntersecting(polyline) {
if (polyline.paths[0].length < 3) {
return false;
}
const line = polyline.clone();
//get the last segment from the polyline that is being drawn
const lastSegment = getLastSegment(polyline);
line.removePoint(0, line.paths[0].length - 1);
// returns true if the line intersects itself, false otherwise
return geometryEngine.crosses(lastSegment, line);
}
// Checks if the line intersects itself. If yes, change the last
// segment's symbol giving a visual feedback to the user.
function getIntersectingSegment(polyline) {
if (isSelfIntersecting(polyline)) {
return new Graphic({
geometry: getLastSegment(polyline),
symbol: {
type: "simple-line", // autocasts as new SimpleLineSymbol
style: "short-dot",
width: 3.5,
color: "yellow"
}
});
}
return null;
}
// Get the last segment of the polyline that is being drawn
function getLastSegment(polyline) {
const line = polyline.clone();
const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
const existingLineFinalPoint = line.getPoint(
0,
line.paths[0].length - 1
);
return {
type: "polyline",
spatialReference: view.spatialReference,
hasZ: false,
paths: [
[
[existingLineFinalPoint.x, existingLineFinalPoint.y],
[lastXYPoint.x, lastXYPoint.y]
]
]
};
}
function showCoordinates(evt) {
var point = view.toMap({
x: evt.x,
y: evt.y
});
//the map is in web mercator but display coordinates in geographic (lat, long)
var mp = webMercatorUtils.webMercatorToGeographic(point);
//display mouse coordinates
dom.byId("info").innerHTML = mp.x.toFixed(6) + ", " + mp.y.toFixed(6);
}
view.when(function () {
//after map loads, connect to listen to mouse move & drag events
view.on("pointer-move", showCoordinates);
});
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
<span class="esri-icon-erase"></span>
</div>
<div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
<span class="esri-icon-map-pin"></span>
</div>
<div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
<span class="esri-icon-polyline"></span>
</div>
<div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
<span class="esri-icon-polygon"></span>
</div>
<div class="ext-box">
<div class="int-box">
<h2 class="boxpadding">Geometry Selection</h2>
<span id="info"></span></br></br>
<div class="float-container">
<div class="float-child1">
<div>Distance</div>
</div>
<div class="float-child2">
<select name="distance" id="distance" onchange="valDistance()" style="width:75px;">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="5"> 5</option>
<option value="10"> 10</option>
</select>
</div>
</div>
</br>
<div class="float-container">
<div class="float-child1">
<div>Measurement</div>
</div>
<div class="float-child2">
<select name="distanceType" id="distanceType" onchange="valType()" style="width:75px;">
<option value="miles">miles</option>
<option value="feet">feet</option>
<option value="meters">meters</option>
</select>
</div>
</div>
</br></br>
<div class="boxpadding" id="infoDistance">Distance:</div>
<span class="boxpadding" id="infoType">Type:</span></br></br>
<div class="menu">
<div>
<div id="clear-button2" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
<span class="esri-icon-erase"></span>
</div>
<div id="point-button2" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
<span class="esri-icon-map-pin"></span>
</div>
<div id="line-button2" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
<span class="esri-icon-polyline"></span>
</div>
<div id="polygon-button2" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
<span class="esri-icon-polygon"></span>
</div>
</div>
</div>
</br>
<span id="info2" class="boxpadding">Geometry:</span></br></br>
<div class="FixedHeightContainer">
<div class="header" id="header">Results</div>
<div class="geometryResultsdiv" id="geometryResultsdiv"> </div>
</div>
</div> <!-- End of int box -->
</div> <!-- End of ent box -->
</div>
</body>
</html>
... View more
09-14-2022
11:04 AM
|
0
|
0
|
2907
|
|
POST
|
I got it....wrote it to a global variable like you mentioned...firing the result off by Button click to verify it was working.... THANKS @RobertScheitlin__GISP var testGeometry = "";
document.getElementById("getGeometry-button").onclick = () => {
alert(JSON.stringify(testGeometry));
};
function BufferGeom(geom, dist) {
var d = document.getElementById("distance").value;
var t = document.getElementById("distanceType").value;
const buffGeom = geometryEngine.buffer(geom, d, t);
testGeometry = buffGeom;
const buffgra = new Graphic({
geometry: buffGeom,
symbol: getGeomSymbol()
});
bufferGralayer.removeAll();
bufferGralayer.add(buffgra)
}
... View more
09-14-2022
07:50 AM
|
0
|
1
|
2920
|
|
POST
|
Ok thanks... One more question... How then do I query for the geometry of the buffered section... I need to get this geometry to pass onto a GP tool to do further processing... I assume that I can query for the graphics in the new Graphics Layer that was created "bufferGraLayer"?
... View more
09-13-2022
06:41 AM
|
0
|
7
|
2939
|
|
POST
|
OK so I tried to simply this script to just polygons. I am confused on how to get the geometry of the graphic the user draws to a buffer function, then to write that buffer to a new graphic. Any thoughts? Am I off the mark here. <html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([
"esri/Map","esri/views/MapView","esri/views/draw/Draw","esri/Graphic","esri/geometry/geometryEngine","esri/geometry/support/webMercatorUtils",
"esri/rest/geometryService",
"dojo/dom",
"dojo/domReady!"
], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, geometryService, dom) => {
//esriConfig.defaults.geometryService = new GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
const map = new Map({
basemap: "gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [-77.367, 37.55]
});
// add the button for the draw tool
view.ui.add("clear-button", "top-left");
view.ui.add("polygon-button", "top-left");
const draw = new Draw({
view: view
});
document.getElementById("clear-button").onclick = () => {
view.graphics.removeAll();
};
document.getElementById("polygon-button").onclick = () => {
view.graphics.removeAll();
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polygon");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesPolygon
);
};
function updateVerticesPolygon(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphicPolygon(event);
}
}
function createGraphicPolygon(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicPoly = new Graphic({
geometry: {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol
color: [227, 139, 79, 0.8],
outline: {
color: [45, 55, 255],
width: 1
}
}
});
view.graphics.add(graphicPoly)
// PASS GEOMETRY TO BUFFER FUNCTION AND ADD TO NEW GRAPHIC???
}
function createBuffer(event) {
const graphicsFinal = new Graphic({
geometry: {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol
color: [227, 139, 79, 0.8],
outline: {
color: [45, 55, 255],
width: 1
}
}
});
//bufferSpatialReference: new SpatialReference({wkid: 3857}),
// geometries: graphicPoly
const params = new BufferParameters({
distances: [560],
unit: "kilometers",
geodesic: true,
outSpatialReference: view.spatialReference //,
});
var url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
buffer(url, params).then(function(results){
graphicsFinal.add(new Graphic({
geometry: results[0]
}));
});
}
});
</script>
</head>
<body>
<!-- https://developers.arcgis.com/javascript/latest/esri-icon-font/ -->
<div id="viewDiv">
<div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
<span class="esri-icon-erase"></span>
</div>
<div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
<span class="esri-icon-polygon"></span>
</div>
</div>
</body>
</html>
... View more
09-13-2022
05:43 AM
|
0
|
9
|
2944
|
|
POST
|
I have seen this example but this is JS 3.x https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=util_buffergraphic I am in 4.x... I think I should be able to do something similar right after I draw one of the graphics? Im not finding a buffer like the one in 3.x Maybe I should be doing this a different way?
... View more
09-12-2022
11:50 AM
|
0
|
0
|
2967
|
|
POST
|
I have some code below that i am using to allow the user to create a point line or polygon Each click of the toolbox to chose between each geometry type clears the graphic layer. What I want to do is: After the geometry is drawn Buffer the graphic and write that geometry to another graphic and display it in the map. I will then need to query for the new graphics geometry and pass this to another function for processing I have a DIV that has the current text for the graphic but I figured it might be better to query the graphic and determine the geometry type? Do I need to select the single graphic in the graphic layer? Thoughts on the easiest way to do this? Snip from a JSFiddle I was testing in: <html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.topcorner{
position:absolute;
top:0;
right:0;
width: 185px;
border: 1px solid black;
text-align: center;
}
.topcorner2{
position:absolute;
bottom:0;
right:0;
width: 185px;
border: 1px solid black;
text-align: center;
}
</style>
<script>
require([
"esri/Map","esri/views/MapView","esri/views/draw/Draw","esri/Graphic","esri/geometry/geometryEngine","esri/geometry/support/webMercatorUtils",
"dojo/dom",
"dojo/domReady!"
], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, dom) => {
var geometryType = "nothing"
const map = new Map({
basemap: "gray-vector"
});
const view = new MapView({
container: "viewDiv",map: map,
zoom: 10,
center: [-77.367, 37.55]
});
// add the button for the draw tool
view.ui.add("clear-button", "top-left");
view.ui.add("line-button", "top-left");
view.ui.add("point-button", "top-left");
view.ui.add("polygon-button", "top-left");
const draw = new Draw({
view: view
});
document.getElementById("clear-button").onclick = () => {
view.graphics.removeAll();
geometryType = "nothing";
document.getElementById("info2").textContent=geometryType;
};
document.getElementById("point-button").onclick = () => {
view.graphics.removeAll();
geometryType = "point";
document.getElementById("info2").textContent=geometryType;
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("point");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// PointDrawAction.cursor-update
// Give a visual feedback to users as they move the pointer over the view
action.on("cursor-update", function (evt) {
updateVerticesPoint(evt.coordinates);
});
// PointDrawAction.draw-complete
// Create a point when user clicks on the view or presses "C" key.
action.on("draw-complete", function (evt) {
updateVerticesPoint(evt.coordinates);
});
};
document.getElementById("polygon-button").onclick = () => {
view.graphics.removeAll();
geometryType = "polygon";
document.getElementById("info2").textContent=geometryType;
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polygon");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesPolygon
);
};
document.getElementById("line-button").onclick = () => {
view.graphics.removeAll();
geometryType = "line";
document.getElementById("info2").textContent=geometryType;
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polyline");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesLine
);
};
// https://developers.arcgis.com/javascript/latest/esri-icon-font/
function updateVerticesPoint(coordinates) {
//// create a polyline from returned vertices
//if (event.vertices.length > 0) {
// const result = createGraphicPoint(event);
//}
view.graphics.removeAll();
let point = {
type: "point", // autocasts as /Point
x: coordinates[0],
y: coordinates[1],
spatialReference: view.spatialReference
};
let graphic = new Graphic({
geometry: point,
symbol: {
type: "simple-marker", // autocasts as SimpleMarkerSymbol
style: "circle",
color: [51, 102, 153, 0.8],
size: "16px",
outline: { // autocasts as SimpleLineSymbol
color: [0, 0, 0],
width: 1
}
}
});
view.graphics.add(graphic);
}
function updateVerticesPolygon(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphicPolygon(event);
}
}
function updateVerticesLine(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphicLine(event);
// if the last vertex is making the line intersects itself,
// prevent the events from firing
if (result.selfIntersects) {
event.preventDefault();
}
}
}
function createGraphicPoint(event) {
const vertices = event.vertices;
view.graphics.removeAll();
//
// a graphic representing the polyline that is being drawn
const graphicPoly = new Graphic({
geometry: {
type: "point",
spatialReference: view.spatialReference
},
symbol: {
type: "simple-marker", // autocasts as new SimpleFillSymbol
color: [51, 102, 153, 0.8],
outline: {
color: [255, 255, 255],
width: 1
}
}
});
view.graphics.add(graphicPoly);
}
function createGraphicPolygon(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicPoly = new Graphic({
geometry: {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol
color: [227, 139, 79, 0.8],
outline: {
color: [45, 55, 255],
width: 1
}
}
});
view.graphics.add(graphicPoly);
}
function createGraphicLine(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicLine = new Graphic({
geometry: {
type: "polyline",
paths: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-line", // autocasts as new SimpleFillSymbol
color: [4, 90, 141],
width: 1,
cap: "round",
join: "round"
}
});
// check if the polyline intersects itself.
const intersectingSegment = getIntersectingSegment(graphicLine.geometry);
// Add a new graphic for the intersecting segment.
if (intersectingSegment) {
view.graphics.addMany([graphicLine, intersectingSegment]);
}
// Just add the graphic representing the polyline if no intersection
else {
view.graphics.add(graphicLine);
}
// return intersectingSegment
return {
selfIntersects: intersectingSegment
};
}
// function that checks if the line intersects itself
function isSelfIntersecting(polyline) {
if (polyline.paths[0].length < 3) {
return false;
}
const line = polyline.clone();
//get the last segment from the polyline that is being drawn
const lastSegment = getLastSegment(polyline);
line.removePoint(0, line.paths[0].length - 1);
// returns true if the line intersects itself, false otherwise
return geometryEngine.crosses(lastSegment, line);
}
// Checks if the line intersects itself. If yes, change the last
// segment's symbol giving a visual feedback to the user.
function getIntersectingSegment(polyline) {
if (isSelfIntersecting(polyline)) {
return new Graphic({
geometry: getLastSegment(polyline),
symbol: {
type: "simple-line", // autocasts as new SimpleLineSymbol
style: "short-dot",
width: 3.5,
color: "yellow"
}
});
}
return null;
}
// Get the last segment of the polyline that is being drawn
function getLastSegment(polyline) {
const line = polyline.clone();
const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
const existingLineFinalPoint = line.getPoint(
0,
line.paths[0].length - 1
);
return {
type: "polyline",
spatialReference: view.spatialReference,
hasZ: false,
paths: [
[
[existingLineFinalPoint.x, existingLineFinalPoint.y],
[lastXYPoint.x, lastXYPoint.y]
]
]
};
}
function showCoordinates(evt) {
var point = view.toMap({x: evt.x, y: evt.y});
//the map is in web mercator but display coordinates in geographic (lat, long)
var mp = webMercatorUtils.webMercatorToGeographic(point);
//display mouse coordinates
dom.byId("info").innerHTML = mp.x.toFixed(6) + ", " + mp.y.toFixed(6);
}
view.when(function(){
//after map loads, connect to listen to mouse move & drag events
view.on("pointer-move", showCoordinates);
});
});
</script>
</head>
<body>
<!-- https://developers.arcgis.com/javascript/latest/esri-icon-font/ -->
<div id="viewDiv">
<div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
<span class="esri-icon-erase"></span>
</div>
<div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
<span class="esri-icon-map-pin"></span>
</div>
<div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
<span class="esri-icon-polyline"></span>
</div>
<div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
<span class="esri-icon-polygon"></span>
</div>
<div class="topcorner">
<span id="info" ></span>
</div>
<div class="topcorner2">
<div id="info2">fghfghf</div>
</div>
</div>
</body>
</html>
... View more
09-12-2022
11:36 AM
|
0
|
13
|
3671
|
|
POST
|
Got it... Sorry to waste your time... If anyone can benefit then great.. <html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Draw polyline | Sample | ArcGIS API for JavaScript 4.24</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/views/draw/Draw",
"esri/Graphic",
"esri/geometry/geometryEngine"
], (Map, MapView, Draw, Graphic, geometryEngine) => {
const map = new Map({
basemap: "gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [18.06, 59.34]
});
// add the button for the draw tool
view.ui.add("line-button", "top-left");
view.ui.add("point-button", "top-left");
view.ui.add("polygon-button", "top-left");
const draw = new Draw({
view: view
});
document.getElementById("point-button").onclick = () => {
view.graphics.removeAll();
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("point");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// PointDrawAction.cursor-update
// Give a visual feedback to users as they move the pointer over the view
action.on("cursor-update", function (evt) {
updateVerticesPoint(evt.coordinates);
});
// PointDrawAction.draw-complete
// Create a point when user clicks on the view or presses "C" key.
action.on("draw-complete", function (evt) {
updateVerticesPoint(evt.coordinates);
});
};
document.getElementById("polygon-button").onclick = () => {
view.graphics.removeAll();
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polygon");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesPolygon
);
};
// draw polyline button
document.getElementById("line-button").onclick = () => {
view.graphics.removeAll();
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polyline");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVerticesLine
);
};
function updateVerticesPoint(coordinates) {
//// create a polyline from returned vertices
//if (event.vertices.length > 0) {
// const result = createGraphicPoint(event);
//}
view.graphics.removeAll();
let point = {
type: "point", // autocasts as /Point
x: coordinates[0],
y: coordinates[1],
spatialReference: view.spatialReference
};
let graphic = new Graphic({
geometry: point,
symbol: {
type: "simple-marker", // autocasts as SimpleMarkerSymbol
style: "square",
color: "red",
size: "16px",
outline: { // autocasts as SimpleLineSymbol
color: [255, 255, 0],
width: 3
}
}
});
view.graphics.add(graphic);
}
// Checks if the last vertex is making the line intersect itself.
function updateVerticesPolygon(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphicPolygon(event);
}
}
function updateVerticesLine(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphicLine(event);
// if the last vertex is making the line intersects itself,
// prevent the events from firing
if (result.selfIntersects) {
event.preventDefault();
}
}
}
function createGraphicPoint(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicPoly = new Graphic({
geometry: {
type: "point",
spatialReference: view.spatialReference
},
symbol: {
type: "simple-marker", // autocasts as new SimpleFillSymbol
color: [227, 139, 79, 0.8],
outline: {
color: [255, 255, 255],
width: 1
}
}
});
view.graphics.add(graphicPoly);
}
// create a new graphic presenting the polyline that is being drawn on the view
function createGraphicPolygon(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicPoly = new Graphic({
geometry: {
type: "polygon",
rings: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol
color: [227, 139, 79, 0.8],
outline: {
color: [255, 255, 255],
width: 1
}
}
});
view.graphics.add(graphicPoly);
}
function createGraphicLine(event) {
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
const graphicLine = new Graphic({
geometry: {
type: "polyline",
paths: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-line", // autocasts as new SimpleFillSymbol
color: [4, 90, 141],
width: 4,
cap: "round",
join: "round"
}
});
// check if the polyline intersects itself.
const intersectingSegment = getIntersectingSegment(graphicLine.geometry);
// Add a new graphic for the intersecting segment.
if (intersectingSegment) {
view.graphics.addMany([graphicLine, intersectingSegment]);
}
// Just add the graphic representing the polyline if no intersection
else {
view.graphics.add(graphicLine);
}
// return intersectingSegment
return {
selfIntersects: intersectingSegment
};
}
// function that checks if the line intersects itself
function isSelfIntersecting(polyline) {
if (polyline.paths[0].length < 3) {
return false;
}
const line = polyline.clone();
//get the last segment from the polyline that is being drawn
const lastSegment = getLastSegment(polyline);
line.removePoint(0, line.paths[0].length - 1);
// returns true if the line intersects itself, false otherwise
return geometryEngine.crosses(lastSegment, line);
}
// Checks if the line intersects itself. If yes, change the last
// segment's symbol giving a visual feedback to the user.
function getIntersectingSegment(polyline) {
if (isSelfIntersecting(polyline)) {
return new Graphic({
geometry: getLastSegment(polyline),
symbol: {
type: "simple-line", // autocasts as new SimpleLineSymbol
style: "short-dot",
width: 3.5,
color: "yellow"
}
});
}
return null;
}
// Get the last segment of the polyline that is being drawn
function getLastSegment(polyline) {
const line = polyline.clone();
const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
const existingLineFinalPoint = line.getPoint(
0,
line.paths[0].length - 1
);
return {
type: "polyline",
spatialReference: view.spatialReference,
hasZ: false,
paths: [
[
[existingLineFinalPoint.x, existingLineFinalPoint.y],
[lastXYPoint.x, lastXYPoint.y]
]
]
};
}
});
</script>
</head>
<body>
<!-- https://developers.arcgis.com/javascript/latest/esri-icon-font/ -->
<div id="viewDiv">
<div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
<span class="esri-icon-map-pin"></span>
</div>
<div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polyline">
<span class="esri-icon-polyline"></span>
</div>
<div id="polygon-button" class="esri-widget esri-widget--button esri-interactive" title="Draw polygon">
<span class="esri-icon-polygon"></span>
</div>
</div>
</body>
</html>
... View more
09-08-2022
11:00 AM
|
0
|
0
|
2579
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 09-20-2018 11:09 AM | |
| 1 | 09-10-2018 06:26 AM | |
| 1 | 09-15-2022 11:02 AM | |
| 1 | 05-21-2021 07:35 AM | |
| 1 | 08-09-2022 12:39 PM |
Activity Feed
- Got a Kudo for Coded values show up not description. 09-23-2024 11:17 PM
- Got a Kudo for Re: Coded values show up not description. 09-23-2024 11:17 PM
- Got a Kudo for Re: Density and convert to polygon. 01-23-2024 07:45 AM
- Got a Kudo for Re: Buffer Graphic. 08-02-2023 12:54 PM
- Got a Kudo for Re: Count Points in Polygon and symbolize on number of occurrences. 04-29-2023 09:56 AM
- Got a Kudo for Re: Density and convert to polygon. 02-16-2023 01:38 PM
- Got a Kudo for Re: Move point locations. 02-16-2023 12:37 PM
- Kudoed Re: Remove characters in string using a variable for DavidAnderson_1701. 09-19-2022 08:08 AM
- Posted Re: Remove characters in string using a variable on ArcGIS API for Python Questions. 09-19-2022 08:07 AM
- Posted Re: Remove characters in string using a variable on ArcGIS API for Python Questions. 09-16-2022 08:33 AM
- Posted Re: Remove characters in string using a variable on ArcGIS API for Python Questions. 09-16-2022 08:25 AM
- Posted Remove characters in string using a variable on ArcGIS API for Python Questions. 09-16-2022 08:22 AM
- Posted Re: Buffer Graphic on ArcGIS JavaScript Maps SDK Questions. 09-15-2022 11:02 AM
- Kudoed Re: Buffer Graphic for RobertScheitlin__GISP. 09-15-2022 11:02 AM
- Posted Re: Buffer Graphic on ArcGIS JavaScript Maps SDK Questions. 09-15-2022 07:36 AM
- Kudoed Re: Buffer Graphic for RobertScheitlin__GISP. 09-15-2022 07:35 AM
- Posted Re: Buffer Graphic on ArcGIS JavaScript Maps SDK Questions. 09-15-2022 05:02 AM
- Posted Re: Buffer Graphic on ArcGIS JavaScript Maps SDK Questions. 09-14-2022 11:04 AM
- Posted Re: Buffer Graphic on ArcGIS JavaScript Maps SDK Questions. 09-14-2022 07:50 AM
- Posted Re: Buffer Graphic on ArcGIS JavaScript Maps SDK Questions. 09-14-2022 06:38 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
09-19-2022
09:23 PM
|