by
1 Solution
Accepted Solutions
by
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.
by
by
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
by
by
