Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
  <html>
  <head>
<meta name="description" content="SF ArcGIS JSMap">
  <title>Create a Web Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
​
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <style>
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
    #legendDiv{
      background-color: #fff;
      position: absolute !important;
      z-index: 99;
      bottom:20px;
      left:20px;
      max-height: 200px;
      overflow: auto;
      padding: 20px;
      font-family: Arial;
    }
  </style>
​
  <script>var dojoConfig = { parseOnLoad: true };</script>
  <script src="http://js.arcgis.com/3.12compact/"></script>
  <script>
    var map,
        webmapId = "b9ba04d69d1e4fa28eb30ce1b50cd039";
    
    require([
      "esri/map",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "dojo/domReady!"
      ], function (Map, arcgisUtils, Legend) {
        arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) {
        map = response.map;
​
        var legend = new Legend({
            map: map,
            layerInfos:(arcgisUtils.getLegendLayers(response))
        }, "legendDiv");
        
        legend.startup();
    });
    });
  </script>
​
  </head>
​
  <body>
    <div id="mapDiv"></div>
    <div id="legendDiv"></div>
  </body>
  </html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alaframboisepro
0viewers