BaseMap Giving Error: ReferenceError: require is not defined

AngelaWright · ‎05-10-2013

I downloaded the sample index, basemaps.html, along with some other files. When I try rendering it I get the ReferenceError
error. I am using Chrome at this time, but I plan on using Firefox and IE 8 (have to).

Below is the html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Basemaps</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
<link rel="stylesheet" href="../../examples.css">

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4compact"></script>
<script>
require(["esri/map", "utils.js", "dojo/on", "dojo/dom", "dojo/domReady!"],
function(Map, utils, on, dom) {
// Create map
var map = new Map("mapDiv",{
basemap: "gray",
center: [-122.69, 45.52],
zoom: 3
});
utils.autoRecenter(map);

on(dom.byId("btnStreets"),"click", function() {
map.setBasemap("streets");
});
on(dom.byId("btnSatellite"),"click", function() {
map.setBasemap("satellite");
});
on(dom.byId("btnHybrid"),"click", function() {
map.setBasemap("hybrid");
});
on(dom.byId("btnTopo"),"click", function() {
map.setBasemap("topo");
});
on(dom.byId("btnGray"),"click", function() {
map.setBasemap("gray");
});
on(dom.byId("btnNatGeo"),"click", function() {
map.setBasemap("national-geographic");
});
}
);
</script>
</head>
<body>
<div class="panel">
<div class="titlearea"><span id="titleMessage" class="title-message">Basemaps</span></div>
<div class="controls">
<div class="buttons">
<button id="btnStreets" class="btn btn-primary btn-wide">Streets</button>
<button id="btnSatellite" class="btn btn-primary btn-wide">Satellite</button>
<button id="btnHybrid" class="btn btn-primary btn-wide">Hybrid</button>
<button id="btnTopo" class="btn btn-primary btn-wide">Topo</button>
<button id="btnGray" class="btn btn-primary btn-wide">Gray</button>
<button id="btnNatGeo" class="btn btn-primary btn-wide">National Geographic</button>
</div>
</div>
<div class="message"><span id="userMessage" class="user-message"></span></div>
</div>
<div id="mapDiv"></div>
</body>
</html>

Could you please help me to solve the problem. I would like to use the map.

Thanks.

ShreyasVakil · ‎05-13-2013

I made few changes to your code, can see if it works for you?

<!DOCTYPE html>
<html>
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 <title>ArcGIS API for JavaScript | Simple Geocoding</title>
 <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
 <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4"></script>
 <script>
  require(["esri/map", "dojo/on", "dojo/dom", "dojo/domReady!"],
   function(Map,on, dom,domReady) {
    // Create map
    var map = new Map("mapDiv",{
    basemap: "gray",
    center: [-122.69, 45.52],
    zoom: 3
    });
    //utils.autoRecenter(map);

    on(dom.byId("btnStreets"),"click", function() {
    map.setBasemap("streets");
    });
    on(dom.byId("btnSatellite"),"click", function() {
    map.setBasemap("satellite");
    });
    on(dom.byId("btnHybrid"),"click", function() {
    map.setBasemap("hybrid");
    });
    on(dom.byId("btnTopo"),"click", function() {
    map.setBasemap("topo");
    });
    on(dom.byId("btnGray"),"click", function() {
    map.setBasemap("gray");
    });
    on(dom.byId("btnNatGeo"),"click", function() {
    map.setBasemap("osm");
    });
   }
  );
</script>
</head>
<body>
<button id="btnStreets" type="button" >Streets</button>
<button id="btnSatellite" type="button">Satellite</button>
<button id="btnHybrid" type="button">Hybrid</button>
<button id="btnTopo" type="button">Topo</button>
<button id="btnNatGeo" type="button">Nat Geo</button>
<div id="mapDiv"></div>
</body>
</html>