Latest Contributions by EssaddekMohammed

Thank you Ting for your reply. Do you have any idea please about the estimated release date? ... View more

Hello, At the first call editGraphics's value is null, The error comes after this line of code :        sketchViewModel.update(editGraphic); Regards. ... View more

Hello Robert, I am waiting for your intervention. Regards Mohammed ... View more

Hello, the error in the consol could be find in the image bellow; In the line :   else if (!editGraphic && gra.layer.id === "tempGraphics") { isSearchGra = true; // Save a reference to the graphic we intend to update editGraphic = results[i].graphic; // Remove the graphic from the GraphicsLayer // Sketch will handle displaying the graphic while being updated graphicsLayer.remove(editGraphic); sketchViewModel.update(editGraphic); break; }‍‍‍‍‍‍‍‍‍‍ in the line  : sketchViewModel.update(editGraphic); Regards ... View more

Hello, this solved the problem. What about the second ? moving the search result ? I've mentioned your above help in a link. Thanks in advance. ... View more

Hello, this is my code combining two solutions in one page,  by the way,  your help mentioned here is not working in this page. initView = function (settings) { var isSearchGra = false; require([ "esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/Locate", "esri/widgets/Compass", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Sketch/SketchViewModel", "esri/widgets/BasemapGallery", "esri/widgets/Expand", "esri/geometry/Point", "esri/geometry/support/webMercatorUtils", "esri/portal/Portal", "esri/widgets/BasemapGallery/support/PortalBasemapsSource", "esri/support/basemapUtils", ], function (Map, MapView, Search, Locate, Compass, Graphic, GraphicsLayer, BasemapGallery, SketchViewModel, Expand, Point, webMercatorUtils, Portal, PortalBasemapsSource, basemapUtils, ) { function GeoLocatePosition(longitude, latitude) { $.post("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?f=pjson&featureTypes=&location=" + longitude + "," + latitude + "", function (data) { var json = JSON.parse(data); if (json.address) { $("#location").val(json.address.Match_addr); } }); } var basemap = settings.basemap !== "" ? settings.basemap : "hybrid"; let editGraphic; // GraphicsLayer to hold graphics created via sketch view model const graphicsLayer = new GraphicsLayer({ id: "tempGraphics" }); var map = new Map({ basemap: basemap, layers: [graphicsLayer] }); var mapCenter = { latitude: settings.latitude !== '' ? settings.latitude : 34.01325, longitude: settings.longitude !== '' ? settings.longitude : -6.83255 }; var view = new MapView({ container: settings.mapDivId, // Reference to the DOM node that will contain the view map: map, // References the map object created in step 3 zoom: 14, // Sets zoom level based on level of detail (LOD) center: [mapCenter.longitude, mapCenter.latitude] // Sets center point of view using longitude,latitude }); var searchWidget = new Search({ view: view }); var locate = new Locate({ view: view }); if (settings.showlocation) { view.ui.add(locate, { position: settings.topleft }); } var compass = new Compass({ view: view }); if (settings.showcompass) { view.ui.add(compass, { position: settings.topleft }); } // Add the search widget to the top right corner of the view view.ui.add(searchWidget, { position: settings.topright, }); // Create a BasemapGallery widget instance and set // its container to a div element var allThoseEsriBasemaps = new PortalBasemapsSource({ query: { // title: "ArcGIS Online Basemaps",owner: "esri" id: '702026e41f6641fb85da88efe79dc166' } }); var basemapGallery = new BasemapGallery({ source: allThoseEsriBasemaps, view: view, container: document.createElement("div") }); // Create an Expand instance and set the content // property to the DOM node of the basemap gallery widget var bgExpand = new Expand({ view: view, content: basemapGallery }); // Add the expand instance to the ui view.ui.add(bgExpand, settings.bottomright); var point = { type: "point", // autocasts as new Point() longitude: mapCenter.longitude, latitude: mapCenter.latitude }; // Create a symbol for drawing the point const pointSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 2 } }; const polylineSymbol = { type: "simple-line", // autocasts as new SimpleLineSymbol() color: "#8A2BE2", width: "4", style: "dash" }; const polygonSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: "rgba(138,43,226, 0.8)", style: "solid", outline: { color: "white", width: 1 } }; var pointGraphic = new Graphic({ geometry: webMercatorUtils.geographicToWebMercator(point), symbol: pointSymbol }); GeoLocatePosition(mapCenter.longitude, mapCenter.latitude); $("#ShowCompassButton").on("ifChecked", function (e) { if (compass.destroyed) { compass = new Compass({ view: view }); } view.ui.add(compass, { position: settings.topleft }); }); $("#ShowCompassButton").on("ifUnchecked", function (e) { compass.destroy(); }); $("#ShowLocationButton").on("ifChecked", function (e) { if (locate.destroyed) { locate = new Locate({ view: view }); } view.ui.add(locate, { position: settings.topleft }); }); $("#ShowLocationButton").on("ifUnchecked", function (e) { locate.destroy(); }); searchWidget.on("select-result", function (event) { $("#location").val(event.result.name); $("#longitude").val(event.result.feature.geometry.longitude); $("#latitude").val(event.result.feature.geometry.latitude); console.log("The selected search result: ", event); }); view.when(function () { graphicsLayer.graphics.add(pointGraphic); const sketchViewModel = new SketchViewModel({ view, layer: graphicsLayer, pointSymbol, polylineSymbol, polygonSymbol }); setUpClickHandler(); // Listen the sketchViewModel's update-complete and update-cancel events sketchViewModel.on("update-complete", updateGraphic); sketchViewModel.on("update-cancel", updateGraphic); // Runs when sketchViewModel's update-complete or update-cancel // events are fired. function updateGraphic(event) { // Create a new graphic and set its geometry event.geometry debugger; var graphic = new Graphic({ geometry: event.geometry, symbol: editGraphic.symbol }); if (isSearchGra) { graphic.attributes = editGraphic.attributes; view.graphics.add(graphic); } else { graphicsLayer.add(graphic); } // set the editGraphic to null update is complete or cancelled. editGraphic = null; } // set up logic to handle geometry update and reflect the update on "graphicsLayer" function setUpClickHandler() { view.on("click", function (event) { view.hitTest(event).then(function (response) { var results = response.results; if (results.length > 0) { for (var i = 0; i < results.length; i++) { // Check if we're already editing a graphic var gra = results[i].graphic; if (!editGraphic && gra.attributes && gra.attributes.hasOwnProperty("Match_addr")) { isSearchGra = true; editGraphic = results[i].graphic; view.graphics.remove(editGraphic); sketchViewModel.update(editGraphic); break; } else if (!editGraphic && gra.layer.id === "tempGraphics") { isSearchGra = true; // Save a reference to the graphic we intend to update editGraphic = results[i].graphic; // Remove the graphic from the GraphicsLayer // Sketch will handle displaying the graphic while being updated graphicsLayer.remove(editGraphic); sketchViewModel.update(editGraphic); break; } } } }); }); } }); map.watch('basemap', function (evt) { console.info(evt.portalItem.id); switch (evt.portalItem.id) { case '8bf7167d20924cbf8e25e7b11c7c502c': sbasemap = 'streets'; break; case '86de95d4e0244cba80f0fa2c9403a7b2': sbasemap = 'satellite'; break; case '28f49811a6974659988fd279de5ce39f': sbasemap = 'hybrid'; break; case '6e03e8c26aad4b9c92a87c1063ddb0e3': sbasemap = 'topo'; break; case '979c6cc89af9449cbeb5342a439c6a76': sbasemap = 'gray'; break; case '8b3d38c0819547faa83f7b7aca80bd76': sbasemap = 'gray-vector'; break; case '358ec1e175ea41c3bf5c68f0da11ae2b': sbasemap = 'dark-gray'; break; case '5ae9e138a17842688b0b79283a4353f6': sbasemap = 'oceans'; break; case 'd94dcdbe78e141c2b2d3a91d5ca8b9c9': sbasemap = 'national-geographic'; break; case 'aab054ab883c4a4094c72e949566ad40': sbasemap = 'terrain'; break; case 'b834a68d7a484c5fb473d4ba90d35e71': sbasemap = 'osm'; break; case 'c50de463235e4161b206d000587af18b': sbasemap = 'streets-navigation-vector'; break; case '00f90f3f3c9141e4bea329679b257142': sbasemap = 'streets-vector'; break; default: sbasemap = 'noStringConstant'; } $("#MapType").val(sbasemap); console.info(sbasemap); }); }); };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Regards. ... View more

Hello Robert, Is it possible to use the sketchviewmodel to edit data drawn by this code ? Regards  Mohammed ... View more

Thank You, it works ! ... View more

Hello, Since my application is multilingual, it would be harder to hold up all the names. Thanks for your answer. Regards ... View more