Merge Dijit Widgets into Simple Web Map

ChristopherCarr · ‎05-01-2014

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>

JohnGravois · ‎05-02-2014

hi christopher,
you were incredibly close, i only had to make two changes

1. your code was throwing an "unexpected token '}'" error in the console at line 56 because you had an unmatched curly brace and parenthesis at the bottom of your code.
2. i moved the geocoder and home button widget instantiation to happen inside the createMap() callback, because otherwise they were getting called before there was actually a map available.

<!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";
      
      require([
        "esri/map",
        "esri/arcgis/utils",
        "esri/dijit/HomeButton",
        "esri/dijit/Geocoder",
        "dojo/domReady!"
       ], function (Map, arcgisUtils, HomeButton, Geocoder) {
       arcgisUtils.createMap(webmapId, "map").then(function (response) {
        map = response.map;

        var home = new HomeButton({
          map : map
         }, "HomeButton");
        home.startup();

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

ChristopherCarr · ‎05-06-2014

jgravois, thanks so much for your help on this.

JohnGravois · ‎05-06-2014

my pleasure Christopher. if you have a chance, please consider marking this thread as 'answered'