Add maps and location services to your apps
Tags: javascript, arcgis, mapping, location
Published: 2022-05-27 20:49:51

---
title: Add maps and location services to your apps
published: true
description: Take a look with a developer's eye at the many mapping and location services offered by Esri's ArcGIS Platform. Add maps, geocode and search, directions, data visualization, and others to power your location-aware apps.
tags: javascript, arcgis, mapping, location
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dftv2h49czdqljjm4nu6.png
---

We live in a global and digital world where everyone and everything is interconnected. Almost any app you can think of can be enhanced with maps and location technology. Customers are demanding home delivery services to be fast and transparent. Everyone wants to have access to geographic information in real-time (like elections, disasters, traffic, COVID, maps of wars, etc.) They want information about places near by (restaurants, bars, hotels, ATMs) as well as remotely explore places (find a home, trails, stores, explore a destination) or people (dating, freelancers, contractors) with customized experiences. Enterprises need to optimize and scale their operations (vehicle routing, indoor tracking, workforce management, land-use optimization) in a sustainable and innovative way. For these and many other applications, your apps will benefit from easy, affordable, and powerful mapping and location APIs.

You can build apps for web, mobile, desktops, IoT, as well as system-to-system integration. Many of these services can be utilized online and offline and for indoor and outdoor use.

In this post we cover code samples with JavaScript, but you can develop with the language of your choice: [ArcGIS APIs](https://developers.arcgis.com/documentation/mapping-apis-and-services/apis-and-sdks/) with JavaScript, TypeScript, Python, Swift, Kotlin, .NET, Qt, Java, and REST, or [open source third party APIs](https://developers.arcgis.com/documentation/mapping-apis-and-services/apis-and-sdks/#web-apis) including MapLibre, OpenLayers, Leaflet, CesiumJS, and ArcGIS REST JS.

## Location services

ArcGIS location services are web services hosted by Esri that you can use to build mapping and spatial analysis applications. The services are grouped into [ready-to-use](https://developers.arcgis.com/documentation/mapping-apis-and-services/services/#ready-to-use), [data hosting](https://developers.arcgis.com/documentation/mapping-apis-and-services/services/#data-hosting), and [content management](https://developers.arcgis.com/documentation/mapping-apis-and-services/services/#content-management) services.

* Ready-to-use services
  * [basemap layer service](#basemap-layer-service)
  * [geocode and search](#geocode-and-search)
  * [routing](#routing)
  * [demographics](#demographics)
  * [data visualization](#visualization)
* [data hosting](#data-hosting)
* [content management](#content-management)

Esri recently introduced ArcGIS Platform, a location-focused platform-as-a-service (PaaS). It is designed to bring mapping and location services as a set of independent services you can pick and choose in the form that you are expecting via easy to use [APIs](https://developers.arcgis.com/documentation/mapping-apis-and-services/apis-and-sdks/) and a great developer experience.

### Basemap layer service

The basemap layer service provides global basemap layers in a variety of styles to use in mapping applications. Basemap layers give geographic context to a map or scene by serving static tiles containing geographic reference data. This data includes, but is not limited to, topographic features, road networks, footpaths, building footprints, water features, administrative boundaries, and labels.

![basemap example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u84ox0e8qa3k9sxr7yy9.png)
 
Basemap layers include many different styles, including:
* Day and night navigation styles, useful for driving.
* Light and dark street focused styles, useful for urban areas.
* Topographic and terrain styles, useful for rural areas.
* Imagery from satellite and aerial sources that shows real-world geography.
* Light and dark gray canvas for accentuating overlaid data.
* Create your own custom basemap layer styles using the ArcGIS Vector Tile Style Editor.

You can integrate a map view into your app with just a few lines of code:

```JavaScript
    const mapView = new MapView({
      container: "viewDiv",
      map: new Map({
        basemap: "arcgis-navigation",
      }),
      center: [-15, 40],
      zoom: 9
    });
```

Learn more about [basemaps](https://developers.arcgis.com/documentation/mapping-apis-and-services/maps/) and get started quickly with the API of your choice with [basemaps tutorials](https://developers.arcgis.com/documentation/mapping-apis-and-services/maps/tutorials/apis/display-a-map/).

### Geocode and search

Search for an address or a place, find candidate matches, and return complete addresses with a location. It also supports searching for a specific business name within a certain distance from a location, or finding different places by category name such as restaurants, hotels, or bus stations, and many other categories.

![search example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45pnszwj3clatqro4mhf.png)

You can geocode an address by making an HTTPS request to the geocoding service `findAddressCandidates` or by using [client APIs](https://developers.arcgis.com/documentation/mapping-apis-and-services/apis-and-sdks/). Specify the address, output data fields, and optionally, additional parameters to refine the search.

```JavaScript
    const geocodingServiceUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
    const params = {
        address: {
            "address": "1600 Pennsylvania Ave NW, DC"
        }
    }
    locator.addressToLocations(geocodingServiceUrl, params).then((results) => {
        showResult(results);
    });
```

Learn more about the [geocode service](https://developers.arcgis.com/documentation/mapping-apis-and-services/search/) and get started quickly with the API of your choice with the [search tutorials](https://developers.arcgis.com/documentation/mapping-apis-and-services/search/tutorials/search-for-an-address/).

### Routing

Find routes, directions, and perform advanced analyses on street networks. The service can solve network problems such as creating an optimized route to visit many destinations, finding the closest emergency vehicle or facility, identifying a service area around a location, or servicing a set of orders with a fleet of vehicles.

![routing example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9e8enlv1huy1hih9xrv.png)
 
For example, routing finds the best path from an origin to a destination in a street network. Routing takes into consideration many different data parameters in the street network such as speed limit, number of lanes, and time of day. Routing can also take into consideration other real-time data such as road conditions, accidents, and other barriers.

```JavaScript
    const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World";
    const routeParams = new RouteParameters({
        stops: new FeatureSet({
            features: mapView.graphics.toArray()
        }),
        returnDirections: true,
        directionsLanguage: "es"
    });
    route.solve(routeUrl, routeParams)
    .then((serviceResponse) => {
        if (serviceResponse.routeResults.length > 0) {
            showRoute(serviceResponse.routeResults[0].route);
            showDirections(serviceResponse.routeResults[0].directions.features);
        }
    });
```

### Demographics

Find facts and demographic information about a location or area with the GeoEnrichment service. Choose from over 15,000 analysis variables in more than 130 countries and regions including demographics, lifestyle segmentation, consumer spending, and market potential. Enrich your own data with location based context about the people and places in an area. Analyze markets and consumers, identify under-served communities, and formulate better business and policy decisions.

![demographics example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxrgls83ss8mfsaf2qlz.png)
 
You can perform demographic queries with an HTTPS request to the GeoEnrichment service or by using client APIs. Specify the x, y, and optionally, additional parameters to refine the operation.

Submitting a point to the service is the most common use case and the default options create a 1 mile buffer around the point and return facts from the default data collection. To refine the options, you can use parameters such as study areas, data collections, analysis variables. These optional parameters provide control over how the point is buffered and which attributes are returned.

```JavaScript
    arcgisRest.queryDemographicData({
        studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }],
        authentication: authentication
    })
    .then((response) => {
        if (response.results[0].value.FeatureSet.length > 0 &&
        response.results[0].value.FeatureSet[0].features.length > 0) {
            const attributes = response.results[0].value.FeatureSet[0].features[0].attributes;
            showData(attributes, point);
        }
    });
```

Learn more about the capabilities of the [demographic services](https://developers.arcgis.com/documentation/mapping-apis-and-services/demographics/) and try the [tutorials](https://developers.arcgis.com/documentation/mapping-apis-and-services/demographics/tutorials/query-demographic-data/).
 
### Data visualization

ArcGIS APIs and tools give you the ability to style data and create meaningful visualizations for maps and scenes. You can style basemap layers, which are composed of vector tile data, or feature layers, which are composed of features. Styling helps tell a story about the data and it helps you build more meaningful applications.

![visualization example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/486gf9bt1xyafj5i1h06.png)
 
Geographic data can be styled on the client-side with a renderer. Renderers are responsible for using attribute values to apply the appropriate symbol to each feature when the layer is drawn on the map. Renderers can be used with visual variables and expressions to create more complex, data-driven visualizations. This is only a short sample of the many visualization techniques available.

```JavaScript
    const dotDensityRenderer = new DotDensityRenderer({
        dotValue: 400,
        outline: null,
        referenceScale: 18489297, // 1:577,790 view scale
        legendOptions: {
            unit: "people"
        },
        blendDots: false,
        attributes: [
            {
                field: "NOHS_CY",
                color: "#ffa300",
                label: "No high school"
            },
            {
                field: "HSGRAD_CY",
                color: "#50e991",
                label: "High school diploma"
            },
            {
                field: "GRADDEG_CY",
                color: "#0bb4ff",
                label: "Graduate degree"
            }
        ].reverse()
    });
```

Explore more visualization options at [Styles and data visualization](https://developers.arcgis.com/javascript/latest/visualization/).

### Data hosting

ArcGIS Platform allows you to store, manage, query and update your geographic data in the cloud. You can use tools such as the developer dashboard to import existing data, create new datasets, or publish data to different formats. All data is managed and accessed as a hosted layer and each layer is powered by a data service. Once hosted, you can easily access data services with applications. Your data remains your data, we secure the privacy of your data, and you always retain full ownership of your data as Esri does not collect any telemetry information.

![data hosting example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znk2pychzmwy5ix2xcc7.png)
 
```JavaScript
    const trailheadsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_styled/FeatureServer/0"
    });
    map.add(trailheadsLayer);
```

Learn about the many ways you can [host your data](https://developers.arcgis.com/documentation/mapping-apis-and-services/data-hosting/), use [online tools](https://developers.arcgis.com/documentation/mapping-apis-and-services/tools/) to manage your data, and try the [tutorials](https://developers.arcgis.com/documentation/mapping-apis-and-services/data-hosting/tutorials/apis/add-a-feature-layer/).

### Content management

With ArcGIS Platform you can store and manage your content in the cloud for your applications. You can store geospatial content, such as maps, scenes, layers, and services, application configurations for templates and builders, and files, such as Microsoft Word and PDF documents. You can access the portal with interactive tools, such as ArcGIS Online and the developer dashboard, or build custom applications that access the portal service. Once content is stored in the cloud, you can build content-driven applications that easily access and display 2D and 3D maps and data from services.

![content management example image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgrc5md1dtfzn1y7fpgi.png)
 
To create and access items, you can use interactive tools, client APIs, or the REST API.

```JavaScript
    const item = new PortalItem({
      id: "5a5147abe878444cbac68dea9f2f64e7",
      portal: "https://www.arcgis.com/sharing/rest"
    });
    item.load().then((response) => {
      ShowItemAttributes(response);
    });
```

Learn how to get started with [content management](https://developers.arcgis.com/documentation/mapping-apis-and-services/content-management/) and try the [tutorials](https://developers.arcgis.com/documentation/mapping-apis-and-services/maps/tutorials/tools/create-a-web-map/).

## Summary

This was a quick overview of ArcGIS location services. There is much more to explore. Mix and match these location services with the API of your choice and create something amazing!