Basemaps with different projections

Explore in the sandboxView live

You can create Basemaps in your ArcGIS API for JavaScript applications using a Portal. This sample shows how to add basemaps from a ArcGIS Online group to the BasemapGallery widget. The group used as a PortalBasemapsSource for the BasemapGallery's source property. The group contains basemaps with different projections.

Use dark colors for code blocks
                                                                                              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Basemaps with different projections | Sample | ArcGIS API for JavaScript 4.23</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      #srDiv{
        height: 40px;
        padding: 10px;
    </style>

    <script>
      require([
      "esri/Map",
      "esri/views/MapView",
      "esri/portal/Portal",
      "esri/widgets/BasemapGallery",
      "esri/widgets/BasemapGallery/support/PortalBasemapsSource",
      "esri/widgets/Expand"
    ], function(
      Map,
    ) {
      const portal = new Portal();

      // source for basemaps from a portal group
      // containing basemaps with different projections
      const source = new PortalBasemapsSource({
        portal,
        query: {
          id: "bdb9d65e0b5c480c8dcc6916e7f4e099"
        }
      });
      const map = new Map({
        basemap: {
          portalItem: {
            id: "8d91bd39e873417ea21673e0fee87604" // nova basemap
      // center the view over 48 states
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-100, 35],
        zoom: 2,
        constraints: {
          snapToZoom: false
      view.ui.add("srDiv", "top-right");
      const bgExpand = new Expand({
        content: new BasemapGallery({ source, view }),
        expandIconClass: "esri-icon-basemap"
      view.ui.add(bgExpand, "top-right");
      view.watch("spatialReference", ()=> {
        document.getElementById("srDiv").innerHTML = `view.spatialReference.wkid = <b>${view.spatialReference.wkid}</b>`;
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="srDiv" class="esri-widget"></div>
  </body>
</html>

At 4.23, MapView's spatialReference can be changed at runtime by directly setting the MapView's spatialReference or changing the basemap from the BasemapGallery or BasemapToggle widgets. To disable this option set the MapView.spatialReferenceLocked to true.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.