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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.


  <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>

<!--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>


                 /* css to style all the following elements*/
   #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/
  //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
  ) {
    // To parse out dijits: https://dojotoolkit.org/reference-guide/1.10/dojo/parser.html
    //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


Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................