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>I Want My Data Points on the Map</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">

                 /* css to style all the following elements*/
   #mapDiv {
     padding: 0;
     margin: 0;
     height: 100%;
              //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

    //Symbol used to draw farmers market points.  Default style is circle. 
    var pointSymbol = new SimpleMarkerSymbol(); 
    //set circle size to 14 point
    //create outline and set it to green
    pointSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([50, 255, 50]), 1));
    //set circle color to purple
    pointSymbol.setColor(new Color([207, 34, 171]));

    //Create the info window using HTML to reference the field values and construct the output
    var infoTemplate = new InfoTemplate("${BLDGDESC}", "Address:  ${FAC_ADDRESS} <br> Status: ${STATUS} <br> Type: ${TYPE}");
    //Create a new feature layer. More info at: https://developers.arcgis.com/javascript/jshelp/inside_feature_layers.html
    var featureLayer = new FeatureLayer
      //set the url to the rest endpoint of your data
      ("http://maps.wakegov.com/arcgis/rest/services/Property/CountyFacilities/MapServer/0", {
        //See all the constructor options at: https://developers.arcgis.com/javascript/jsapi/featurelayer-amd.html#featurelayer1
        //Requests only the points from the server that are within the current map extent
        mode: FeatureLayer.MODE_ONDEMAND,
        //Returns all the fields in the JSON object coming back from the server.  Limit unwanted fields for better performance
        outFields: ["*"],
        //Sets the infotemplate that was create above.  https://developers.arcgis.com/javascript/jsapi/infotemplate-amd.html
        infoTemplate: infoTemplate
    //Set render property of the feature Layer to a new simple renderer, applying the point symbol created above. https://developers.arcgis.com/javascript/jsapi/simplerenderer-amd.html
    //featureLayer.setRenderer(new SimpleRenderer(pointSymbol));
    //add the feature layer to the map
    //Re-size the info window to properly hold the Name field value
    map.infoWindow.resize(250, 75);


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