Skip to content

Instantly share code, notes, and snippets.

@fdq09eca

fdq09eca/arcgis-api-for-javascript-display-a-map.markdown

Last active September 30, 2022 12:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fdq09eca/56091654b229d737794fc8e1a26b8670 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fdq09eca/56091654b229d737794fc8e1a26b8670 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fdq09eca revised this gist Sep 30, 2022. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,10 +5,11 @@
    <title>ArcGIS API for JavaScript Tutorials: Display a map</title>

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

    <link rel="stylesheet" href="style.css">
    <script src="https://js.arcgis.com/4.24/"></script>
    </head>
    <body>
    <div id="viewDiv"></div>
    </body>
    <script type="text/javascript" src="script.js"></script>
    </html>
  2. fdq09eca created this gist Sep 30, 2022.
    7 changes: 7 additions & 0 deletions arcgis-api-for-javascript-display-a-map.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    ArcGIS API for JavaScript: Display a map
    ----------------------------------------


    A [Pen](https://codepen.io/chris-lam/pen/rNvdZzy) by [Chris Lam](https://codepen.io/chris-lam) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/rNvdZzy).
    14 changes: 14 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Display a map</title>

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

    </head>
    <body>
    <div id="viewDiv"></div>
    </body>
    </html>
    16 changes: 16 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {

    esriConfig.apiKey = "AAPK145053262bd6467ca1964310f4fa5dcbkBC4UJkiXHLfDU5QBdgqQiRIMvqYdlD4sxk5nECzG_HtbwDniS4FuUGs5BQoHDnm";

    const map = new Map({
    basemap: "arcgis-topographic" // Basemap layer service
    });

    const view = new MapView({
    map: map,
    center: [-118.805, 34.027], // Longitude, latitude
    zoom: 13, // Zoom level
    container: "viewDiv" // Div element
    });

    });
    8 changes: 8 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    html,
    body,
    #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    }