I'm trying to learn angular, and using Angular-Google-Maps with Angular Seed.
I'm just trying to get the map to show up, but I don't think it's receiving the latitude, longitude and zoom parameters, and thus nothing is there. I am not showing any errors in the web developer inspector in Chrome.
I do believe the issue is in adding this
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
To my scope like the angular-google-maps documentation reads.
If I skip the above instruction and do this in my index.html file instead, it works.
<ui-gmap-google-map center='{ latitude: 45, longitude: -73 }' zoom='zoom: 8'></ui-gmap-google-map>
This is my app.js file:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.version',
'uiGmapgoogle-maps'
])
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi){
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
This is my index.html file:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project R</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
<ul class="menu">
<li>Add Memory</li>
<li>Profile</li>
<li>Search</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src='bower_components/lodash/dist/lodash.min.js'></script>
<script src='bower_components/angular-google-maps/dist/angular-google-maps.min.js'></script>
</body>
</html>
my app.css file includes these styles:
#map-container{
height:400px;
width:100%;
position: absolute;
z-index: -1;
left:0;
top:0;
}
.ng-isolate-scope{
height:400px;
width:100%;
}
.angular-google-map{
height:400px;
width:100%;
}
.angular-google-map-container{
position: absolute;
height:400px;
width:100%;
}
It does not look like you declared ng-app or ng-controller in your html. Try the below at the beginning of your code (and obviously close out that div wherever you want that controller's scope to end):
<body ng-app="myApp">
<div ng-controller="mapCtrl">
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
/**
* itSimpleGoogleMap Module
*
* Just a google maps api wrapper
*/
(function(){
'use strict';
angular.module('itSimpleGoogleMap', [])
.directive('itSimpleGoogleMap', function($compile, $timeout){
// Runs during compile
var _currentMarkers = [];
var _overlays = [];
var newdiv = document.createElement('div');
newdiv.style.width = "100%";
newdiv.style.height = "100%";
var map = new google.maps.Map(newdiv, {
center: {lat: 41.90, lng: -87.65},
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
return {
// name: '',
// priority: 1,
// terminal: true,
scope: {
markers:'=',
overlays:'=',
triggerResize:'='
}, // {} = isolate, true = child, false/undefined = no change
// controller: function(scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function(scope, iElm) {
iElm[0].appendChild(newdiv);
_.each(_currentMarkers, function(marker){
marker.setMap(null);
})
_.each(_overlays, function(overlay){
overlay.setMap(null);
})
google.maps.event.trigger(map, 'resize');
scope.$watch('triggerResize', function(){
google.maps.event.trigger(map, 'resize');
});
$timeout(function(){
var mapOptions = {
center: {lat: 41.90, lng: -87.65},
zoom: 10
};
// scope.$watchCollection('options', function(){
// if(!scope.options || !map){
// return ;
// }
// map.setCenter({lat:scope.options.center.lat,lng:scope.options.center.lng});
// });
scope.$watch('overlays', function(){
if(!scope.overlays || !map){
return ;
}
_.forEach(_overlays, function(curOverlay){
curOverlay.setMap(null);
});
_.forEach(scope.overlays, function(overlayData){
var newOverlay = new google.maps.KmlLayer({
url: overlayData,
map:map
});
_overlays.push(newOverlay);
});
});
scope.$watchCollection('markers', function(){
if(!scope.markers || !scope.markers[0] || !scope.markers[0].coords.latitude)
{
return;
}
_.forEach(_currentMarkers, function(curMarker){
curMarker.setMap(null);
google.maps.event.clearInstanceListeners(curMarker);
});
_currentMarkers = [];
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
if(scope.markers.length==0){
map.setCenter({lat: 41.90, lng: -87.65});
return;
}
_.forEach(scope.markers, function(markerData){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markerData.coords.latitude,markerData.coords.longitude),
map: map,
icon:markerData.icon
// title:markerData.data['Growing Site Name'].answer
});
bounds.extend(marker.position);
var infoWindowElement;
$compile(markerData.infoWindow)(scope, function(cloneElm){
infoWindowElement = cloneElm[0];
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(infoWindowElement);
infowindow.open(map,marker);
});
_currentMarkers.push(marker);
});
map.fitBounds(bounds);
});
},100)
}
};
});
})();
Usage would be something like:
<it-simple-google-map
overlays="model.mapOpts.overlays"
markers="model.mapOpts.markers"
trigger-resize="resizeMap">
</it-simple-google-map>
In my implementation here I'm actually only ever creating 1 map object and just appending it wherever this directive is found, so this can't work with more than one on screen but was an optimization that was good for my project. If you move the creation of the map object inside the link function then you'd get one created every time the directive is encountered for compiling.
The trigger-resize is a bit of a hack to make a call on the maps function for resizing itself when the directive is being re-used with different container sizes on different pages.
Just noticed I also only had this deal with taking a set of markers and then fitting to bounds as the means to set the location but if you're interested in building on this let me know and can help add the parts to deal with center/zoom appropriately.
Related
I want to display map in my angularJS page like below.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="abc">
<div id="controller" ng-controller="def as ctrl">
<div id="googlemap" style="height:100%; width:100%"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=displayMap"></script>
</body>
</html>
And my scripts.js file is as follows.
var mainApp = angular.module('abc',[]);
mainApp.controller('def', function($scope,$http) {
this.displayMap=function() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.googlemap = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
}
}
I am getting displayMap is not a function InvalidValueError message. How can it be resolved?
displayMap function passed via callback parameter is expected to be visible from the global scope but in the provided example it is only accessible in the scope of def controller.
In Angular app instead of invoking displayMap function via callback parameter you could invoke it from the contoller like this:
google.maps.event.addDomListener(window, 'load', displayMap);
Example
angular.module('mapApp', [])
.controller("mapCtrl", function ($scope, $http) {
var displayMap = function (data) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(48.209500, 16.370691),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_div"), mapOptions);
};
google.maps.event.addDomListener(window, 'load', displayMap);
});
#map_div {
height: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="app.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<div id="map_div" ></div>
</div>
I am new to angular-leaflet-directive.
I want to have a context menu when i right click on a marker.
I couldn't find any examples in angular way.
Can anyone please guide to achieve it.
Is that functionality exists in angular-leaflet-directive ?, because I couldn't find anything about in the documentation.
first download required files for angular context menu from this link
here is the example,
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<script src=" leaflet.contextmenu-src"></script>
<link rel="stylesheet" href="leaflet.contextmenu.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MarkersSimpleController', ['$scope', function($scope) {
$scope.showCoordinates = function(e) {
alert(e.latlng);
}
var mainMarker = {
lat: 51,
lng: 0,
focus: true,
draggable: true,
message: "hey marker",
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{
text: 'Show coordinates',
callback: $scope.showCoordinates
}]
};
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 8
},
markers: {
mainMarker: angular.copy(mainMarker)
},
position: {
lat: 51,
lng: 0
},
events: { // or just {} //all events
markers: {
enable: ['dragend']
//logic: 'emit'
}
}
});
$scope.$on("leafletDirectiveMarker.dragend", function(event, args) {
$scope.position.lat = args.model.lat;
$scope.position.lng = args.model.lng;
});
}]);
</script>
</head>
<body ng-controller="MarkersSimpleController">
<!-- <leaflet lf-center="london" markers="markers" height="480px" width="100%"></leaflet> EVENTS WILL STILL FIRE but all will for each directive-->
<!-- NOTICE events attribute is optional it is more for options in whitelisting (enable), blacklisting (disable), and logic (emit or broadcast) -->
<leaflet lf-center="london" event-broadcast="events" markers="markers" height="480px" width="100%"></leaflet>
<h1>Markers simple example</h1>
<p>Initial marker position (lat/lng): <strong ng-bind="markers.mainMarker.lat"></strong> / <strong ng-bind="markers.mainMarker.lng"></strong></p>
<p>Actual marker position (lat/lng): <strong ng-bind="position.lat"></strong> / <strong ng-bind="position.lng"></strong></p>
</p>
</body>
</html>
Plunker link for the same
I am new to Angular. I have been trying to load Google Maps, but it's still failing to work. I found a link on the web and followed all of the steps they used, but it still fails to load. I also tried other samples found on the net, but it still fails. Here is the link to the document I followed:
http://www.saintsatplay.com/blog/2015/03/using-google-maps-in-angular-js#.VmLTBaeIZCU
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<style>
.angular-google-map-container {
height: 300px; // Or whatever pixel value you require :)
}
</style>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="http://js.pusher.com/2.2/pusher.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="scripts/lodash.min.js"></script>
<script type="text/javascript" src="scripts/controllers/Drivermap_controllers.js"></script>
</head>
<body ng-app='driverapp'>
<div ng-view>
</div>
</body>
</html>
Drivermap_controllers.js
"use strict";
var app = angular.module('driverapp', ['uiGmapgoogle-maps'])
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '***********',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
})
.controller("DrivermapController", function($scope, uiGmapGoogleMapApi) {
// Define variables for our Map object
var areaLat = 44.2126995,
areaLng = -100.2471641,
areaZoom = 3;
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: areaLat, longitude: areaLng }, zoom: areaZoom };
$scope.options = { scrollwheel: false };
});
});
main.js:
var app = angular.module('driverapp', ['ngRoute','ngResource']);
app.config(function($routeProvider){
$routeProvider
.when('/customers', {
templateUrl: 'views/customers/new.html',
controller: 'CustomersListController'
})
.when('/drivermap', {
templateUrl: 'views/drivermap/new.html',
controller: 'DrivermapController'
})
.otherwise({
redirectTo: '/customers'
});
});
views/drivermap/new.html:
<div ng-controller="DrivermapController">
<ui-gmap-google-map center="map.center" options="options" zoom="map.zoom"></ui-gmap-google-map>
</div>
error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=driverapp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3DuiGmapgoogle-maps%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%252Fnomod%253Fp0%253DuiGmapgoogle-maps%250AG%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A24%253A186%250Ab%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A251%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A117%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A134%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Aeb%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A41%253A249%250Ayc%252Fc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A463%250Ayc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A294%253A192%250An.Callbacks%252Fj%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A26920%250An.Callbacks%252Fk.fireWith%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A27738%250A.ready%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29530%250AI%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29721%250A%0AG%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A6%3A416%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A391%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A134%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Aeb%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A41%3A249%0Ayc%2Fc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A463%0Ayc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A294%3A192%0An.Callbacks%2Fj%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A26920%0An.Callbacks%2Fk.fireWith%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A27738%0A.ready%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29530%0AI%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29721%0A
I suspect (in your comment you did not provided the complete console error) you are using version 2.2.X of angular-google-maps, this version has an additional dependency on angular-simple-logger. The solution would be to explicitly add reference to angular-simple-logger, modify index.html file:
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
Plunker
I am building an AngularJS app which exposes an OpenLayers map. I used this simple example (literally just copy and pasted into an HTML file) ran it in the browser and - no surprise - it worked.
I then added the AngularJS Wrapping to it so that I could include it in a partial declared and routed to via app.js (below) and the OpenLayers library doesn't seem to be working any more. I am not getting errors in the console (running it on IE11) but I am not getting a visible map either. I have tried substituting the map for some simple data binding in the controller and it's working, and I am getting the sub-heading displayed just above the map too.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.2/build/ol.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>Map Viewer</h1>
<div ng-view></div>
</body>
</html>
app.js
angular.module("app", ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo: "/main"});
});
main.html
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
main.ctrl.js
angular.module("app")
.controller("MainController", function($scope){
//Do something
});
If you consider in using directives check this
Plunker
EDIT
I modified it for a more simple use
angular.module("app")
.controller("MainController", function($scope){
//Do something
})
.directive('mapDir', function () {
return {
restrict: 'A',
link: function ($scope) {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
}
};
});
and view
<h2>My Map</h2>
<div map-dir id="map" class="map"></div>
Tell me if it was this what you are looking for
I have a situation. I'm currently testing out angularjs routing abilities with angular-route. But when I take out the HTML snippet code out of the index.html and put it in a views folder and call it from a routeprovider it doesn't seem to work.I've checked my console and there is no errors. I'm working from MAMP for my webserver.
My NET Tab
My Console
Here is my index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="customersApp">
<head>
<meta charset="UTF-8">
<title>Weather</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui">
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/customersController.js"></script>
</body>
</html>
Here is my app.js
(function(){
var app = angular.module("customersApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/',{
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.otherwise({redirectTo: '/'});
});
}());
and Finally my customersController.js
(function(){
var CustomersController = function ($scope){
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [
{
joined: "2004-12-24",
name: "Charles",
city: "Fairfax",
orderTotal: "124.45"
},
{
joined: "2023-09-12",
name: "Donte",
city: "Altamonte Springs",
orderTotal: "5.9943"
},
{
joined: "2013-01-25",
name: "Jelon",
city: "Waldorf",
orderTotal: "100"
}
],
$scope.doSort = function(propName){
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
};
angular.module("customersApp").controller("CustomersController", ['$scope',CustomersController]);
}());
It's probably this in customersController.js
angular.module("customersApp", [])
Get rid of the second argument as it recreates the module. It should be
angular.module('customerApp').controller(...
See https://docs.angularjs.org/api/ng/function/angular.module#usage