Hello,
I am implementing basemap gallery expand as indicated in the sandbox, but it is not working.
Is there an api issue ?
Regards.
Solved! Go to Solution.
Then you need to debug why editGraphic is null.
Essadek,
There is no API issue that I am aware of. Most likely there is an issue in your code. Please share your code for review.
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.
Your require array and Subsequent vars are out of order. You had BasemapGallery then SketchViewModel instead of SketchViewModel then BasemapGallery.
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, SketchViewModel, BasemapGallery,
Expand, Point, webMercatorUtils, Portal, PortalBasemapsSource, basemapUtils, ) {
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.
So what is the error in the console and if there is no error then have you added a code break to be able to step through the code and see there it is failing?
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
Hello Robert,
I am waiting for your intervention.
Regards
Mohammed
Mohammed,
So have you tried as I suggested. Put a breakpoint in your code and inspect the editGraphic to see if it is undefined or null?
Hello,
At the first call editGraphics's value is null,
The error comes after this line of code :
sketchViewModel.update(editGraphic);
Regards.