Unable to save and subsequently recover the image

Utilizing the sketchViewModel for editing layers, I follow this particular logic:

  • Upload the basic model;
  • Edit the model;
  • Save the edited model to localStorage;
  • Upload the model from localStorage.

However, upon uploading the model from local storage and adding it to graphicLayers, I encounter errors:

[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 
'esri.geometry.Extent', 'esri.geometry.Multipoint', 'esri.geometry.Point', 'esri.geometry.Polyline', 
'esri.geometry.Polygon', or a plain object that can autocast (having .type = 'extent', 'multipoint',
'point', 'polyline', 'polygon')

[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 
'esri.symbols.SimpleFillSymbol', 'esri.symbols.PictureFillSymbol', 'esri.symbols.PictureMarkerSymbol', 
'esri.symbols.SimpleLineSymbol', 'esri.symbols.SimpleMarkerSymbol', 'esri.symbols.TextSymbol', 
'esri.symbols.LabelSymbol3D', 'esri.symbols.LineSymbol3D', 'esri.symbols.MeshSymbol3D', 
'esri.symbols.PointSymbol3D', 'esri.symbols.PolygonSymbol3D', 'esri.symbols.WebStyleSymbol', 
'esri.symbols.CIMSymbol', or a plain object that can autocast (having .type = 'simple-fill', 'picture-
fill', 'picture-marker', 'simple-line', 'simple-marker', 'text', 'label-3d', 'line-3d', 'mesh-3d', 
'point-3d', 'polygon-3d', 'web-style', 'cim')

Below is the code snippet in question:

sketchViewModel.on("update", checkGraphicUpdate);

function checkGraphicUpdate(evt) {
    if(evt.state === 'complete'){
        // dispatchRecentChanges(geometryGraphics);
        localStorage.setItem('features', geometryGraphics.toJSON())
    }
}

if(uploadView){
    graphicsLayer.removeAll();

    JSON.parse(localStorage.feautures).forEach(
        function(featureJson){
            graphicsLayer.add(new Graphic(featureJson))}
    );
}

An illustration of an element in JSON format stored in LocalStorage:

{"geometry":{"spatialReference":{"wkid":4326},"paths":[[[-111.3, 52.68], [-98,
 49.5], [-93.94, 29.89]]]},"symbol":{"type":"esriSLS","color":
[0,255,0,255],"width":4,"style":"esriSLSSolid"},"attributes":
{"DATA_SOURSE":"3","AVERAGE_DEPTH":"1.2","MATERIAL":"14","PLACINGFORM":"2","MEAS
UREDLENGTH":"12.4","DIAMETER":"6","STREETNAME":"אבן 
עזרא","DIAMETERUNIT":"'אינצ","STATUS":"1","LOCATION":"13","INSTALLYEAR":"2018",
"Title":"Water_Pipe_Section [F3FA]","PURPOSE":"1"},"popupTemplate":
{"popupElements":[{"type":"fields","fieldInfos":
[{"fieldName":"DATA_SOURSE","visible":true},
{"fieldName":"AVERAGE_DEPTH","visible":true},
{"fieldName":"MATERIAL","visible":true},
{"fieldName":"PLACINGFORM","visible":true},
{"fieldName":"MEASUREDLENGTH","visible":true},
{"fieldName":"DIAMETER","visible":true},
{"fieldName":"STREETNAME","visible":true},
{"fieldName":"DIAMETERUNIT","visible":true},
{"fieldName":"STATUS","visible":true},{"fieldName":"LOCATION","visible":true},
{"fieldName":"INSTALLYEAR","visible":true},{"fieldName":"Title","visible":true},
{"fieldName":"PURPOSE","visible":true}]}],"title":"{Title}"}}

The root cause seems to stem from errors within the stored data. How can I save this data properly to avoid extraction errors later on?

Answer №1

The error was triggered due to the omission of geometry.type and symbol.type in the JSON data. To resolve this issue, ensure that you verify if ((data.symbol ['type'] === "esriSLS")) then extend new Polyline() and explicitly define symbol: {type: "simple-line"} in new Graphic().

Here is the code snippet for reference:

if (data.symbol['type'] === "esriSLS") {

        const {type, fieldInfos} = popupElements[0],
            {paths} = geometry;

        const pLine = new Polyline({spatialReference, paths});

        const symbol = {
            type: "simple-line",
            width: width,
            color: color
        };

        return new Graphic({
            geometry: pLine,
            symbol: symbol,
            attributes: attributes,
            popupTemplate: {
                title: "{Title}",
                content: [{type, fieldInfos}]
            }
        });
    }

Answer №2

When examining your code snippet, the uncertainty arises as to whether the variable geometryGraphics is referring to a collection of graphics or just a single graphic. In cases where you are working with a Graphic object, it is recommended to utilize the toJSON() and fromJSON() methods for serialization and deserialization. This approach eliminates concerns regarding the inner JSON structure.

var graphic = new Graphic({
  geometry: ...,
  symbol: ...,
  ...
});

var json = graphic.toJSON();
var newGraphic = Graphic.fromJSON(json);

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

Efficiently Filtering User Input and Other Things

Imagine I have a setup for organizing a television guide like this: <div class="day"> <p>A Date</p> <div class="time"> <p>A Time</p> <div class="show"> <p>A Show</p> ...

Title remains consistent | Angular 4

Struggling to change the document title on a specific route. The route is initially set with a default title. { path: 'artikel/:id/:slug', component: ArticleComponent, data: {title: 'Article', routeType: RouteType.ARTICLE, des ...

Removing the gridlines in a Linechart using Apexcharts

I am experiencing issues with the grid and Nodata options on my Apexchart line chart. noData: { text: none , align: 'center', verticalAlign: 'middle', offsetX: 0, offsetY: 0, style: { color: undefined, fontSize: &apo ...

How odd! Using window.location or location.replace redirects to the page and then reverses back!

While in debug mode, I am able to track which page is being accessed. Interestingly, whenever I use window.location or window.location.replace(..), the browser redirects to the specified page but then quickly returns to the original one! This strange beh ...

unable to retrieve data from MongoDB using db.find

I am currently working with a script that I run through the mongo shell. The first query for posts works perfectly and I am able to receive the data object without any issues. Even when I print the date after running it through the convertDate function, ...

Sending the method's URL in the controller through an AJAX call

Below is the code snippet for an ajax call: <script> jQuery(document).ready(function() { $("#VEGAS").submit(function(){ var form_data = $("#VEGAS").serialize(); var routeUrl = "<?= url('/'); ?> /PUBLIC/vpage"; $.ajax({ ...

What is the process for sending text messages in a local dialect using node.js?

Having an issue with sending bulk SMS using the textlocal.in API. Whenever I try to type a message in a regional language, it displays an error: {"errors":[{"code":204,"message":"Invalid message content"}],"status":"failure"} Is there a workaround for se ...

What are the pros and cons of passing an imported object from a parent component to its children as props versus directly importing that object within the children components?

My current project involves a helper object known as TimeHelper, which is used for time-related tasks. This object is required in multiple components within the top-level parent component. I am contemplating whether it would be advantageous to import Time ...

Activate the jQuery UI datepicker with a trigger

Within my code, I have a span element that displays a date in the format mm/dd/yyyy. <span class="editableDateTxt">06/10/2014</span> My goal is to have an inline editable date popup or utilize jQuery UI's datepicker when this span elemen ...

What is the best way to dismiss the additional modal popup?

Here is an example that I need help with: http://jsfiddle.net/zidski/Mz9QU/1/ When clicking on Link2 followed by Link1, I would like the Link2 box to close automatically. Is there anyone who can assist me with this issue? ...

Is it possible to distinguish and identify each separate window when a user opens multiple instances of your site?

Has anyone explored the possibility of distinguishing between multiple windows a user may open on the same site? My goal is to assign the initial window the name "window1" and subsequent windows "window2" and so forth. Is there a method for achieving this ...

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

The issue with jquery slideToggle is that it mistakenly opens all divs instead of just the specific div that should

My website has a dynamic page with a variable number of <div> elements. The concept is that users can click on the + symbol, which is represented by an <img> tag, to display the corresponding div. Currently, my code includes: PHP/HTML $plus ...

The git clone operation encounters a problem with the error message: unable to connect, connection refused on localhost port 80

Currently for my project, I'm utilizing isomorphic-git. However, when I try to implement the git.clone function, I encounter the error message Error: connect ECONNREFUSED 127.0.0.1:80. To provide an example of what I am attempting to achieve: import ...

Personalized 404 Error Page on Repl.it

Is it possible to create a custom 404-not found page for a website built on Repl.it? I understand that typically you would access the .htaccess file if hosting it yourself, but what is the process when using Repl.it? How can I design my own 404-not found p ...

On mobile devices, the height of the absolutely positioned element is larger than its

I currently have an element with a background image that includes an absolutely positioned element at the bottom. As the screen width decreases, the height of the absolutely positioned element increases and surpasses the parent element. Since absolutely p ...

Transmit information to the server via an AJAX request

$.ajax({ url:"http://192.168.0.74:8080/pimsdesign/JSONRequestHandler" , type: "POST", data: {name: "amit", id:1 }, dataType: "json", beforeSend: function(xhr) { if (xhr && xhr.overrideMimeType) { xhr.overrideMimeType("application/json;charset=UTF-8 ...

It is not possible to delete a class from an element once it has been added

Issue can be replicated by visiting the following URL: Click on the hamburger icon to open the navigation menu Click on "Services" Click "< Services" within the submenu to attempt to go back For some reason, the removeClass method is not removing t ...

The pop-up window is currently inactive

Utilizing the following example, I successfully created a modal window: jsfiddle The modal window allows me to display data from a table. Here is a snippet of my code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/c ...

Avoid reactivating focus when dismissing a pop-up menu triggered by hovering over it

I am currently utilizing @material-ui in conjunction with React. I have encountered the following issue: In my setup, there is an input component accompanied by a popup menu that triggers on mouseover. Whenever the menu pops up, the focus shifts away from ...