Having trouble creating a polygon from JSON in ESRI ArcGIS Javascript framework?

Can anyone assist with understanding the issue of trying to draw a polygon using the ESRI ArcGIS Javascript API? The image, JSON string, and code snippets provided below outline the code, console output, and expected behavior. Any help would be greatly appreciated!

Here is the JSON String:

{"geometry":{"rings":[[[-91.89013671874848,38.03029444608522],[-91.653930664061,38.00865683368494],[-91.64843749999851,38.00432854459864],[-91.5935058593735,37.93070854451552],[-91.577026367186,37.88303274722063],[-91.577026367186,37.79192956603227],[-91.631958007811,37.73982010276601],[-91.70886230468598,37.73547599031287],[-91.763793945311,37.76587942393493],[-91.85168457031098,37.85701474874939],[-91.88464355468598,37.9956711998967],[-91.89013671874848,38.03029444608522]]],"spatialReference":{"wkid":4326}},"symbol":{"color":[0,0,0,64],"outline":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}

Below is the Code snippet used to add Shape to Map:

    function createFromJSON(JSONText){
      console.log("In Create Function");
      dojo.disconnect(handle);

      var jsontext = JSON.parse(JSONText);
      var polygon = new esri.geometry.Polygon(jsontext);
      console.log("Here is the polygon object:");
      console.log(polygon);
      console.log("Now drawing polygon");
       map.graphics.add(new Graphic(polygon, new SimpleFillSymbol()));
      console.log("Polygon should be there");
    }

https://i.stack.imgur.com/s3sK8.jpg

Answer №1

What you see in the JSON string displayed is specific to the Graphic object, not a representation of geometry. It includes both geometry and symbol. If you use it with Graphic, it will function properly.

map.graphics.add(new Graphic(jsontext));

If your goal is to extract just the polygon, consider writing your code like this:

var polygon = new esri.geometry.Polygon(jsontext.geometry);

Make sure you do not mix legacy and AMD styles together.

Answer №2

According to T Kambi, the string provided is meant for graphics and not geometry. However, I will demonstrate some approaches for converting between json and esriGeometry.

To convert json into esri.Geometry, you can utilize any of the following methods:

  • JsonUtils (esri/geometry/jsonUtils)
  • or the esri.geometry.fromJson method.

Here is an example code snippet for each method:

METHOD ONE (USING JsonUtils)

require(
    ["esri/map", "esri/geometry/jsonUtils", "esri/config", "dojo/domReady!"],
    function (Map, JsonUtils, esriConfig) {

    var jsonGeometry = {"x":10,"y":20,"spatialReference":{"wkid":3857}};

    //Note: Avoid using JsonUtils.fromJson(JSON.stringify(jsonGeometry))
    var geometry = JsonUtils.fromJson(jsonGeometry);
    var graphic = new esri.Graphic(geometry);
});

METHOD TWO (Using geometry.fromJson method)

var jsonGeometry = {"x":10,"y":20,"spatialReference":{"wkid":3857}};
var geometry = esri.geometry.fromJson(jsonGeometry);
var graphic = new esri.Graphic(geometry);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on testing a function with a dependency in Angular through unit testing

Attempting to dive into unit testing, I have grasped some of the basics. However, my current challenge lies in testing a method within my code. This particular method involves calling a function from oidc-client.js that handles user sign-ins. My spec fi ...

Using the express.Router instance for handling errors can be a useful tool in your development

Based on the documentation, it states that any nodejs express middleware function has the capability of being swapped out by App or Router instances: Given that router and app adhere to the middleware interface, they can be used just like any other midd ...

SoundCloud and Vimeo have the capability to link their players across separate tabs, and even between tabs and embedded players

I find it intriguing how SoundCloud and Vimeo are synchronized with their tabs, so that when you play something in one tab, the others pause. It's worth noting that this feature only works on SoundCloud when two instances of the website are open, wher ...

Having trouble with authenticating and logging in properly, can't seem to figure it out

Currently facing an issue while trying to log in and post my credentials along with the token. I keep receiving the error message: "ValueError: No element found in " Although I have searched on StackOverflow for a solution, I haven't been able to res ...

Combining JSON objects in MySQL using the primary key specified in a JSON document

I'm looking to perform atomic UPDATEs on a JSON column that stores documents. The challenge lies in updating the column with precision and efficiency. Consider the initial value: [{"substanceId": 182, "text": "substance_name_182"}, {"substanceId": 1 ...

Error detected at /register/ Invalid Fernet key format - it should be 32 bytes in length and encoded in url-safe base

I'm currently working on encoding the payload data from a form I've made using React on the frontend. Here's the code snippet I am using: const handleSubmit = (e) => { e.preventDefault(); const encryptedPassword = CryptoJS.AES.en ...

Dealing with JSON using a YAML parser can result in errors when encountering tab whitespace

When it comes to assigning blame, I find myself a bit lost. According to the YAML 1.2 specification, , JSON is considered a subset of YAML 1.2, with the statement "every JSON file is also a valid YAML file." Additionally, in JSON, tabs can be used as ...

please transmit the id (or retrieve the id from the router path)

I have a basic blog built with React/Redux for the frontend, featuring user registration and articles. I ran into an issue when trying to pass the article ID to the editor component. The form is the same, but the paths differ for adding new articles and ed ...

Error: Cannot locate module: Vue not found, incorrect path specified

I am facing an issue with my webpack configuration. I have placed my webpack.config.js and node_modules in a subfolder. When attempting to run the command npm run build, I encounter the following error: ERROR in ../public/Vue/Components/Rating.vue Module n ...

Utilize the Discord SDK to broadcast a message to every channel within a server whenever a command is utilized

In the process of development, I have crafted a new command: ! sir snd all -hello Essentially, this particular command instructs to dispatch the message specified after " - " to every channel located on the server where the command is initiated. Here&apo ...

Adjust the Scope in Angular-Charts.js Post-Rendering

I am currently facing a challenge with displaying multiple charts using the angular-charts.js framework. The issue is that I require all the charts to have the same scale, but each chart currently has its own scale based on the displayed data. Unfortunatel ...

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

How to effectively trigger a function to load images in React

When my react app loads, I want the images to load immediately. This involves calling the function collectionChanged(e.target.value) on application start. Inside a .jsx file, there is a function named getHomePage() which contains 4 functions. Upon calling ...

restore the HTML element to its initial position after being moved

I am utilizing document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)'; in order to relocate an HTML element. How can I return it to its original position for reusability without t ...

The subsequent block within the code is being initiated following the initial block in Node.js

It was expected that "1" would be printed before "2", but the output is incorrect. fs.readdir("./my_stocks", (err, files) => { for(each in files){ var file=files[each]; if(file!='portfolio.js'){ var fn="./my_sto ...

Exclusive Modal Pop-Up for First-Time Visitors - Utilizing Bootstrap, PHP, and JavaScript

Seeking assistance from the community as I have exhausted my online research efforts. I am currently working on implementing a welcome bootstrap modal in a php environment. Despite being new to php and js, I have managed to make it pop up only once using ...

The art of controlling iframe elements with jquery

I've been researching various topics related to this issue, but I'm still unable to achieve the desired outcome. Currently, I am embedding an iframe within an HTML document like so: <iframe class="full-screen-preview__frame" id="nitseditpre ...

Load jQuery results when scrolling to the top of the window

I have a function that triggers when I click a button to fetch more data from my table. I'm attempting to make it work when the button reaches a certain distance from the top of the window, but I've been unable to achieve this so far... $(funct ...

Retrieving a sequence of bytes from a JSON object

In my possession is a JSON structured as follows: [{"fingerprint":"[79,0,0,0,18,0,0,0,18,0,0,0,19,0,0,0,23,0,0,0,40,0,0,0,42,0,0,0,63,0,0,0,68,0,0,0,71,0,....]"}] I've been attempting to extract the byte array from it using this code snippet: JSONF ...

What is the best way to use createElement in JavaScript to insert <p> and <span> elements within a <div>?

I am currently experimenting with generating sentences accompanied by draggable text boxes. To achieve this, I intend to construct the following HTML structure using JavaScript exclusively: <div> <p>Data1<span class = "smallBox droppabl ...