Community

Zoom stuck on -1 after updating from 4.4 to 4.10

378
0
03-29-2019 03:02 AM
OscarMartin
by
New Contributor
‎03-29-2019 03:02 AM

Hello, I'm having issues with auto zooming to coordinates/highlighted parts of the map after upgrading ArcGIS from 4.4 to 4.10. I haven't written the code and I'm quite new to ArcGIS and I could need some guidance.

The problem:

For some reason the zoom, no matter what I do is stuck on -1 and I cannot seem to find any changes in the patch notes that would cause this. And again, I'm very new to ArcGIS so bear with me if the issue is obvious.

What happens is the map loads zoomed out or it loads very zoomed in with no way to adjust it unless you manually zoom in. That would be fine if we didn't have certain maps that have several points marked which is the case.

Current code that's being used:

import { loadModules } from 'esri-loader';

function getAllLayers(map) {
	return new Promise(res => {
		loadModules(["dojo/promise/all"]).then(([all]) => {
			map.load()
				.then(() => map.basemap.load())
				.then(() => {
					var allLayers = map.allLayers;
					var promises = allLayers.map(layer => layer.load());
					res(all(promises.toArray()));
				});
		});
	});
}

async function highlightFeatures(features, view) {
	const [Graphic, SimpleFillSymbol] = await loadModules(["esri/Graphic", "esri/symbols/SimpleFillSymbol"]);
	features.forEach(feature => {
		const isCoordinate = !!feature.geometry.x;
		if (isCoordinate) {
			// If the feature is a coordinate, don't highlight it, and instead zoom in to it
			view.zoom = 10;
		} else {
			const isPolygon = !!feature.geometry.rings;
			const color = isPolygon ? [0, 255, 255, 0.2] : [0, 0, 0, 0];
			const style = {
				color: color,
				outline: {
					color: [0, 255, 255],
					width: 2
				}
			};

			const graphic = new Graphic({
				geometry: feature.geometry,
				symbol: new SimpleFillSymbol(style),
				attributes: feature.attributes
			});

			view.graphics.add(graphic);
		}
	});
}

async function find(queries, url) {
	const [FindTask, FindParameters] = await loadModules(["esri/tasks/FindTask", "esri/tasks/support/FindParameters"]);
	const findOperations = await queries.map(async (query) => {
		const findTask = new FindTask({
			url: url
		});
		const params = new FindParameters({
			layerIds: query.LayerIds,
			searchFields: [query.SearchField],
			searchText: query.SearchText,
			returnGeometry: true
		});
		const execution = await findTask.execute(params);
		return execution.results;
	});
	const values = await Promise.all(findOperations);
	return values.reduce((a, b) => a.concat(b), []);
}

async function showCoordinates(view, coordinates) {
	if (!coordinates) {
		return;
	}
	const [Graphic, SpatialReference, Point, SimpleMarkerSymbol] = await loadModules(['esri/Graphic', 'esri/geometry/SpatialReference', 'esri/geometry/Point', 'esri/symbols/SimpleMarkerSymbol'])
    const graphics = coordinates.map(coordinate => {
        const point = new Point({
            longitude: parseInt(coordinate.X),
            latitude: parseInt(coordinate.Y),
            spatialReference: new SpatialReference(3006)
        });

        const markerSymbol = new SimpleMarkerSymbol({
            color: [0, 255, 255],
            outline: {
                color: [0, 0, 0],
                width: 1
            }
        });

        const popupTemplate = {
            title: "{Label}",
            content: [{
                    type: "fields",
                    fieldInfos: [{
                            fieldName: "Label",
                            label: "Plats",
                            visible: false
                        }, {
                            fieldName: 'URL',
                            label: 'Länk till VISS',
                            visible: true
                        }
                    ]
                }
            ]
        };

        return new Graphic({
            geometry: point,
            symbol: markerSymbol,
            attributes: {
                "Label": coordinate.Label,
                "URL": coordinate.URL
            },
            popupTemplate: popupTemplate
        });
    });


	view.when(() => {
		view.graphics.addMany(graphics);
		if (graphics.length === 1) {
			view.goTo({ target: graphics, zoom: 10 });
		} else {
			view.goTo({ target: graphics }).then(() => view.zoom -= 1);
		}
	});
}

async function addScaleBar(view) {
	const [ScaleBar] = await loadModules(['esri/widgets/ScaleBar']);
    const scaleBar = new ScaleBar({
        view: view,
        unit: "metric"
    });

    view.when(() => {
        view.ui.add(scaleBar, {
            position: "bottom-left"
        });
    });
}

async function addLayerList(view) {
	const [LayerList, Expand] = await loadModules(['esri/widgets/LayerList', 'esri/widgets/Expand']);
	const layerList = new LayerList({
		view: view,
		listItemCreatedFunction: function(event) {
			const item = event.item;
			if (item.layer.type !== "group") { // don't show legend twice
				item.panel = {
					content: "legend",
					open: true
				};
			}
		},
		container: document.createElement('div')
	});

	const bgExpand = new Expand({
		view: view,
		content: layerList
	});

	view.ui.add(bgExpand, "top-right");
}

async function init() {
	const url = 'https://js.arcgis.com/4.10/';
	await loadModules([], { url });
	window.bootstrapMap = loadMap;
}

async function loadMap(mapOptions, item) {
	const [
		esriConfig,
		urlUtils,
		Map,
		MapView
	] = await loadModules([
		"esri/config",
		"esri/core/urlUtils",
		"esri/Map",
		"esri/views/MapView",
		"dojo/domReady!"
	]);

	if (!esriConfig.request.proxyUrl) {
		esriConfig.request.proxyUrl = mapOptions.proxyUrl;
	}

	urlUtils.addProxyRule({
		proxyUrl: mapOptions.proxyUrl,
		urlPrefix: 'geoportal.website.com/' // TODO: make dynamic, through mapOptions (or strip `/arcgis` from mapOptions.arcGisUrl)
	});

	if (!esriConfig.geometryServiceUrl) {
		esriConfig.geometryServiceUrl = mapOptions.arcGisUrl + '/rest/services/Utilities/Geometry/GeometryServer';
	}

	esriConfig.portalUrl = mapOptions.arcGisUrl + '/sharing/rest/content/items/';

	var map = new Map({
		portalItem: { id: item.portalId }
	});

	var view = new MapView({
		map: map,
		container: mapOptions.containerId
	});

	addScaleBar(view);

	if (mapOptions.showLayerList) {
		addLayerList(view);
	}

	const layers = await getAllLayers(map);
	layers.forEach(x => x.copyright = '© Lantmäteriet, SMHI, NVDB, ESRI Inc.');

	const visibleLayers = layers.filter(x => item.visibleLayers.includes(x.layerId));
	visibleLayers.forEach(layer => layer.visible = true);

	showCoordinates(view, item.coordinates);

	const results = await find(item.queries, mapOptions.findUrl);

	window.view = view;

	results.forEach(result => highlightFeatures([result.feature], view));
	const geometries = results && results.map(x => x.feature.geometry);
	if (geometries && geometries.length) {
		view.when(() => view.goTo({ target: geometries }).then(() => view.zoom -= 1));
	}
}

module.exports = {
	init
};
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This code fetches its information needed from something like this:

	(function () {
		
		var mapOptions = {
			proxyUrl: '/ArcGisProxy/proxy.ashx',
			arcGisUrl: 'https://geoportal.website.com/arcgis',
			findUrl: 'https://geoportal.website.com/arcgis/rest/services/MapServer/',
			containerId: 'map-1234567'
		};
		var item = {
			portalId: 'b6e986ce42b6e986ce42b6e986ce42',
			visibleLayers: [56],
			queries: [{"LayerIds":[56],"SearchField":"MS_CD","SearchText":"WA1234567"}],
			coordinates: null
		};
		var intervalId = setInterval(function() {
			if (window.bootstrapMap) {
				window.bootstrapMap(mapOptions, item);
				clearInterval(intervalId);
			}
		}, 500);
	})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Tags (1)
0 Kudos
0 Replies