cthcarr

Merge Dijit Widgets into Simple Web Map

Discussion created by cthcarr on May 1, 2014
Latest reply on May 6, 2014 by JGravois-esristaff
Hi, I'm a newbie getting my feet wet with creating JavaScript Applications and it seems I know just enough to make a small amount of headway and then get stuck.  On a current project I'm working on, I'm trying to create a simple embeddable map using a web map made in AGOL.

I'd like both the search and home button widgets in the map as well.

https://github.com/Esri/arcgis-dijit-home-button-js
https://github.com/Esri/arcgis-dijit-geocoder-js

I'm currently able to create a generic web map with both of these widgets, but when I try and create a web map by id, I end up getting nothing back.  See my code attached, anyone have any suggestions?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Web Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:400px;
        width:100%;
        margin:0;
        padding:0;
      }
      #HomeButton {
        position: absolute;
        top: 95px;
        left: 20px;
        z-index: 50;
      }
      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 74px;
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map,
        webmapId = "1a40fa5cc1ab4569b79f45444d728067";
      var geocoder;

      require([
        "esri/map",
        "esri/arcgis/utils",
        "esri/dijit/HomeButton",
        "esri/dijit/Geocoder", 
        "dojo/domReady!"
      ], function(Map, arcgisUtils, HomeButton, Geocoder) {
        arcgisUtils.createMap("1a40fa5cc1ab4569b79f45444d728067", "map").then(function (response) {
          map = response.map;
          }); 
        });
        
        home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();

        geocoder = new Geocoder({ 
          map: map 
        }, "search");
        geocoder.startup();
      });
    </script>
  </head>
  <body>
    <div id="map" class="map">
    <div id="HomeButton"></div>
    <div id="search"></div>
  </body>
</html>

Outcomes