ArcGIS Location Platform made easy

Jan Tschada

ArcGIS Location Platform is our offering for developers to integrate powerful location services such as map display, routing, geocoding, and places search directly into innovative web applications. In this article, we take a detailed look at the official GitHub demo repository from Esri Inc. and explain how the individual functions are technically implemented and work together meaningfully.

The application is based on HTML and JavaScript and uses our ArcGIS Maps SDK for JavaScript. The central file main.js contains all the logic for initializing the map, integrating data, and interacting with the location services.

When the application starts, a map with a selectable basemap is loaded. This happens by initializing a Map object with the desired map type. In the following code example, a navigation-optimized basemap is used:

const map = new Map({
  basemap: "arcgis/navigation"
});

Next, a MapView is created, which renders the map in an HTML container. The starting position is also set to Palm Springs:

const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-116.5453, 33.8303],
  zoom: 13
});

A central feature of the demo is loading Points of Interest (POIs) from a CSV file. This file is previously uploaded to a Feature Service. The following code shows how this service is integrated as a FeatureLayer:

const featureLayer = new FeatureLayer({
  url: "https://services.arcgis.com/026/FeatureServer/0",
  popupTemplate: {
    title: "{Name}",
    content: "{Description}"
  },
  renderer: {
    type: "unique-value",
    field: "Type",
    uniqueValueInfos: [...]
  }
});
map.add(featureLayer);

The popupTemplate property defines which information is displayed when clicking on an object. The renderer ensures that different types of POIs are displayed differently.

For route calculation, a RouteTask is used, to which start and end points are passed. After successful calculation, the route is displayed on the map as a Graphic:

route.solve(routeParams).then(function(data) {
  const routeResult = data.routeResults[0].route;
  routeLayer.add(new Graphic({
    geometry: routeResult.geometry,
    symbol: routeSymbol
  }));
});

The routeParams include, among other things, the geometries of the start and end points as well as optional settings such as traffic information.

The application also allows toggling traffic data from our ArcGIS Living Atlas of the World. This is done via a simple visibility switch:

trafficLayer.visible = !trafficLayer.visible;

ArcGIS Location Platform enables querying elevation at a specific point. For this purpose, our Elevation Service is used; it returns the Z-coordinate (elevation) for a given point:

elevationLayer.queryElevation(point).then(function(result) {
  console.log("Elevation:", result.geometry.z);
});

Please note that this function only works with certain basemaps that contain elevation information.

Finally, the application also provides access to our Places Service, which allows searching for nearby places of certain categories. In the following example, places like cafés or museums near the map center are queried:

placesService.searchNearby({
  location: view.center,
  categories: ["Coffee shop", "Museum"],
  maxResults: 10
}).then(showResults);

When working with ArcGIS Location Platform, developers should consider some special cases. For example, a valid API key must be created in the secret.js to use the corresponding location services. Also, problems can occur when using your own CSV files if they are not UTF-8 encoded or contain special characters. Traffic data also only works with certain basemaps, which should be considered during configuration.

ArcGIS Location Platform offers an impressive range of functions that can be integrated into modern web applications with just a few lines of code. Whether routing, places search, or displaying traffic data – it is a powerful tool for anyone who wants to leverage geoinformation.

If you want to develop an application yourself with our location services, we recommend forking the official demo repository and experimenting with your own use cases. The documentation is clearly structured, and the examples are easy to adapt.

Just take a look at our Developer Hub.