getjbb

BaseMap Giving Error: ReferenceError: require is not defined

Discussion created by getjbb on May 10, 2013
Latest reply on May 13, 2013 by svakil-esristaff
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">
<!-- Load the library references for ArcGIS API for JavaScript -->
<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.

Outcomes