Mapping in ArcGIS

In this example below you will see how to do a Mapping in ArcGIS with some HTML / CSS and Javascript

Simple example on how to use ArcGIS javascript API to create and display a map.

Thumbnail
This awesome code was written by avaccari, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright avaccari ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mapping in ArcGIS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Get started with MapView - Create a 2D map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0/"></script>
</head>

<body>
  <div id="title">
    <h1>Mapping in ArcGIS-Javascript</h1>
  </div>
  <div id="viewDiv"></div> 
</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/avaccari/mapping-in-arcgis-dXWzPN */
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#title {
  text-align: center;
  font-family: Helvetica;
  font-size: 2em;
  line-height: 100%;
  padding: 0;
  margin: 0;
  height: 10%;
  width: 100%;
}

#viewDiv {
  padding: 0;
  margin: 0;
  height: 90%;
  width: 100%;
}

/*Downloaded from https://www.codeseek.co/avaccari/mapping-in-arcgis-dXWzPN */
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/widgets/BasemapToggle",
  "dojo/domReady!"
], function(
  Map,
  MapView,
  BasemapToggle
) {

  // Create the Map with an initial basemap
  var map = new Map({
    basemap: "topo"
  });

  // Create the MapView and reference the map in the instance
  var view = new MapView({
    container: "viewDiv", // Reference to the scene div
    map: map, // Reference to the map object created before the scene
    zoom: 10, // Sets the zoom level based on level of detail (LOD)
    center: [-79, 38] // Sets the center point of view in lon/lat
  });

  // Create a widget
  var toggle = new BasemapToggle({
    view: view,
    nextBasemap: "hybrid"
  });
  toggle.startup();
  view.ui.add(toggle, "top-right");
});

Comments