I am trying to load an esri bootstrap map on my app with angularjs. My first view without the map shows up fine. When I click on the link to bring up the second view (the esri map), it brings up nothing.There are no errors on the console and the map pulls up fine when I don't try to insert it as a new view. I have tried looking at other answers on this site and can't seem to make any of those work. Here is my code if someone would be willing to take a look at it.
var app = angular.module('myIso', ['ngRoute']);
app.config(function ($routeProvider) {
"use strict";
$routeProvider
.when('/', {
controller:
'HomeController',
templateUrl:
'views/home.html'
})
.when('/map', {
controller:
'MapController',
templateUrl:
'views/map.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('MapController', ['$scope', function ($scope) {
"use strict";
}]);
And here is my views/map.html
<div class="container">
<div id="mapDiv"></div>
</div>
<!-- Step 3. Add JS to load the responsive map -->
<script>
var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
var dojoConfig = {
packages: [{
name: "application",
location: package_path + '/js'
}, {
name: "bootstrap",
location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
}]
};
</script>
<script src="//js.arcgis.com/3.13compact"></script>
<script>
require(["esri/map", "application/bootstrapmap", "esri/layers/FeatureLayer",
"esri/tasks/query", "esri/geometry/Circle",
"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
], function(
Map, BootstrapMap, FeatureLayer,
Query, Circle,
Graphic, InfoTemplate, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
esriConfig, Color, dom
){
// Get a reference to the ArcGIS Map class
var map = BootstrapMap.create("mapDiv",{
basemap:"streets",
center:[-111.962460, 40.665577],
zoom:11
});
var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
var circle;
//when the map is clicked create a buffer around the click point of the specified distance.
map.on("click", function(evt){
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 10,
radiusUnit: "esriMiles"
});
map.graphics.clear();
map.infoWindow.hide();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);
});
});
</script>
And my index.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--Angular Stuff -->
<script src="js/angular/library.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Step 1. Add CSS for the mapping components -->
<link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.13/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style type="text/css">
#mapDiv {
min-height: 100px;
max-height: 1000px;
}
</style>
<!-- HTML5 IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myIso">
<div class="header">
<div ng-view></div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/MapController.js"></script>
</body>
</html>
