cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Locate an Address</title>
  <!--Link to the claro style from underlying dojo toolkit.  For more info: https://dojotoolkit.org/reference-guide/1.10/dijit/themes.html-->
  <link rel="stylesheet" href="https://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <!-- Link to Esri css to style widgets, including the map.  More information at: https://developers.arcgis.com/javascript/jshelp/css.html -->
  <link rel="stylesheet" href="https://js.arcgis.com/3.14/esri/css/esri.css">
  <!--Access the ArcGIS API for Javascript via the CDN. https://developers.arcgis.com/javascript/jshelp/intro_firstmap_amd.html#step2 .  The API is built on top of Dojo.  For more information check out: https://dojotoolkit.org/-->
  <script src="https://js.arcgis.com/3.14/"></script>

</head>
<!--Apply the claro css class to the html body-->

<body class="claro">
  <!--a div to contain the map-->
  <div id="mapDiv"></div>
  <!--a div to contain the Locate Botton Widget-->
  <div id="LocateButton"></div>

</body>

</html>
            
          
!
            
                 /* css to style all the following elements*/
   
   html,
   body,
   #mapDiv {
     padding: 0;
     margin: 0;
     height: 100%;
   }
   /* css to style the Locate Button Widget*/
   
   #LocateButton {
     position: absolute;
     top: 95px;
     left: 20px;
     z-index: 50;
   }
            
          
!
            
              //global map variable
var map;
//AMD require statement to all in the classes that we be used from the API.  More info at: https://dojotoolkit.org/documentation/tutorials/1.10/modules/
require([
    "esri/map",
    "esri/dijit/LocateButton",
    "dojo/parser",
    "dojo/domReady!"
  ],
  //The following are the class names that you will use when each object is created in the function.  The order of the class names must be in the same order as the require statements.  More info at: https://developers.arcgis.com/javascript/jshelp/intro_firstmap_amd.html#step3
  function(
    Map,
    LocateButton,
    parser
  ) {
    // To parse out dijits: https://dojotoolkit.org/reference-guide/1.10/dojo/parser.html
    parser.parse();
    //Create a new map. To see all the map constructors go to: https://developers.arcgis.com/javascript/jsapi/map-amd.html#map1
    map = new Map("mapDiv", {
      //set basemap to topo.  All the ArcGIS basemap options: "streets" , "satellite" , "hybrid", "topo", "gray", "dark-gray", "oceans", "national-geographic", "terrain", "osm", "terrain" and "dark-gray".  
      basemap: "topo",
      //Center the map at a Lat Long coordinate.  To find a lat long, type in "<City Name of your choice> lat long" into a browser search.
      center: [-78.9072, 35.9886],
      //Zoom level to start at, based on the basemap.
      zoom: 10
    });

    //The following code adds the Locate Button Widget.  
    //API Reference: https://developers.arcgis.com/javascript/jsapi/locatebutton-amd.html
    //More infomation on Dojo Dijits at: https://dojotoolkit.org/reference-guide/1.10/dijit/
    //Create a new Locate Button Widget
    var geoLocate = new LocateButton({
      //Bind the Widget to the map
      map: map,
      //Show a point on the map where the user is located
      highlightLocation: true
        //Connect the widget to the "LocateButton" div that will contain the widget
    }, "LocateButton");
    //Startup the Widget
    geoLocate.startup();

  });
            
          
!
999px
Loading ..................

Console