ASP.NET

Learn MVC Using Angular - Maps

Introduction

In this article, we will learn working with MVC using Angular Maps with two types of maps, which are given below.

  • Google Maps
  • Vector Map

Follow the steps given below to use the Angular map in MVC

  • Create MVC Project
  • Configure the Google /Vector Map
  • Work with Maps

Create MVC Project

Open Visual Studio 2015.

MVC

Go to New menu, click New >> Project. Now, it will open New Project window.

MVC

Select ASP.NET Web Application on Framework 4.6. Enter the name of project in “Solution name” textbox and click OK button.

MVC

One more window should be appearing. Select MVC Template in this popup & click OK button.

Configure the Google Maps

We will download the google ui-map from

Open the _Layout.cshtml and must refer ui-map.min.js file in this View page 

  1. <script src="~/Plugin/angular/angular.min.js"></script>  
  2. <script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>  
  3. <script src="~/Plugin/angular-ui-map/ui-map.min.js"></script>  
  4. <script src="~/Plugin/angular-ui-event/dist/event.min.js"></script><script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>   

Open the HTML page, then make its design using map attribute.

HTML Code 

  1. <section id="map">  
  2.         <div class="row">  
  3.             <div class="col-md-10">  
  4.                 <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div>  
  5.                 <div ui-map-info-window="myInfoWindow">  
  6.                     <h1>Marker</h1>Lat:  
  7.                     <input ng-model="currentMarkerLat" />, Lng:  
  8.                     <input ng-model="currentMarkerLng" /><a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>  
  9.                 </div>  
  10.                 <div id="map_canvas" ui-map="myMap" ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }" ui-options="mapOptions" class="gmap"></div>  
  11.             </div>  
  12.             <div class="col-md-2">  
  13.                 <p ng-if="gmap.myMarkers.length">Markers</p>  
  14.                 <ul>  
  15.                     <li ng-repeat="marker in gmap.myMarkers">  
  16.                         <a href="" ng-click="gmap.myMap.panTo(marker.getPosition())">Marker {{$index}}</a>  
  17.                     </li>  
  18.                 </ul>  
  19.             </div>  
  20.         </div>  
  21.     </section>   

We have pointed the Map marker directive at an existing google.maps.Marker object, so that it can hook up events -

  • ui-map-marker
  • ui-event

JavaScript Code

Angular Module

Add the ui-map dependency to the Angular module.

  1. var uiroute = angular .module('uiroute', ['ui.router', "ui.map"]);   

Angular Controller

Set the values for attribute. Open the “angular controller” files and hard code an input or you may get & bind the values. 

  1. function MapController($timeout) {  
  2.         $scope.myMarkers = [];  
  3.         $scope.mapOptions = {  
  4.             center: new google.maps.LatLng(35.784, -78.670),  
  5.             zoom: 15,  
  6.             mapTypeId: google.maps.MapTypeId.ROADMAP  
  7.         };  
  8.         $scope.addMarker = function ($event, $params) {  
  9.             $scope.myMarkers.push(new google.maps.Marker({  
  10.                 map: $scope.myMap,  
  11.                 position: $params[0].latLng  
  12.             }));  
  13.         };  
  14.         $scope.openMarkerInfo = function (marker) {  
  15.             $scope.currentMarker = marker;  
  16.             $scope.currentMarkerLat = marker.getPosition().lat();  
  17.             $scope.currentMarkerLng = marker.getPosition().lng();  
  18.             $scope.myInfoWindow.open($scope.myMap, marker);  
  19.         };  
  20.         $scope.setMarkerPosition = function (marker, lat, lng) {  
  21.             marker.setPosition(new google.maps.LatLng(lat, lng));  
  22.         };  
  23.         $scope.refreshMap = function () {  
  24.   
  25.             $timeout(function () {  
  26.                 google.maps.event.trigger($scope.myMap, 'resize');  
  27.             }, 100);  
  28.         };  
  29.   
  30.     }    

Here, Google Maps MapOptions object can be passed through the main directive attribute ui-map. 

  1. $scope.mapOptions = {  
  2.             center: new google.maps.LatLng(35.784, -78.670),  
  3.             zoom: 15,  
  4.             mapTypeId: google.maps.MapTypeId.ROADMAP  
  5.         };   

ui-event allows you to specify custom behavior over user event. You just need to prefix the official event by map- to bind a callback it.

  1. <div id="map_canvas" ui-map="myMap" ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }" ui-options="mapOptions" class="gmap"></div>   

After completing the entire configuration, add the reference file in _Layout.CSHTML page.

  1. <script src="~/App/App.module.js"></script>  
  2. <script src="~/App/App.config.js"></script>  
  3. <script src="~/App/MapController.js"></script>   

Run the application. We will see the Google Maps with marker.

Output 1

MVC

If you have any doubt in configuration, visit the following of my articles -

Configure the Vector Map

You can get this plug-in from here.

You will find various maps in here

Open the _Layout.cshtml and refer the jQuery link in my application.

  1. <script src="~/Plugin/ika.jvectormap/jquery-jvectormap-1.2.2.min.js"></script>  
  2. <link href="~/Plugin/ika.jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" />   

This script makes it as directive, so we can easily access in HTML.

Angular Directive 

  1. return {  
  2.         restrict: 'EA',  
  3.         scope: {  
  4.           mapOptions: '='  
  5.         },compile: compile};  
  6. function compile(tElement, tAttrs, transclude) {  
  7.         return {  
  8.           post: function(scope, element) {  
  9.             var options     = scope.mapOptions,  
  10.                 mapHeight   = options.height || '250';  
  11.             element.css('height', mapHeight);  
  12.             element.vectorMap(options)   }  
  13.         };  
  14.       }   

Now, set the options for this vector map.

Angular Controller 

  1. $scope.mapOptions = {  
  2.           height:          400,map: 'world_mill_en',  
  3.           backgroundColor: 'transparent',  
  4.           zoomMin:         0,  
  5.           zoomMax:         8,  
  6.           zoomOnScroll:    false,  
  7.           regionStyle: {  
  8.             initial: {  
  9.               'fill':           'red',  
  10.               'fill-opacity':   1,  
  11.               'stroke':         'none',  
  12.               'stroke-width':   1.5,  
  13.               'stroke-opacity': 1  
  14.             },  
  15.             hover: {  
  16.               'fill-opacity': 0.8  
  17.             },  
  18.             selected: {  
  19.               fill: 'blue'  
  20.             },  
  21.             selectedHover: {  
  22.             }  
  23.           },  
  24.           focusOn:{ x:0.4, y:0.6, scale: 1},  
  25.           markerStyle: {  
  26.             initial: {  
  27.               fill: 'yellow',  
  28.               stroke: 'yellow'  
  29.             }  
  30.           },  
  31.           onRegionLabelShow: function(e, el, code) {  
  32.             if ( vm.seriesData && vm.seriesData[code] )  
  33.               el.html(el.html() + ': ' + vm.seriesData[code] + ' visitors');  
  34.           },  
  35.           markers: vm.markersData,  
  36.           series: {  
  37.               regions: [{  
  38.                   values: vm.seriesData,  
  39.                   scale: [ 'gray' ],  
  40.                   normalizeFunction: 'polynomial'  
  41.               }]  
  42.           },  
  43.         };  
  1. $scope.mapOptions = {  
  2.           height:          400,map: 'world_mill_en',  
  3.           backgroundColor: 'transparent',  
  4.           zoomMin:         0,  
  5.           zoomMax:         8,  
  6.           zoomOnScroll:    false,  
  7.           regionStyle: {  
  8.             initial: {  
  9.               'fill':           'red',  
  10.               'fill-opacity':   1,  
  11.               'stroke':         'none',  
  12.               'stroke-width':   1.5,  
  13.               'stroke-opacity': 1  
  14.             },  
  15.             hover: {  
  16.               'fill-opacity': 0.8  
  17.             },  
  18.             selected: {  
  19.               fill: 'blue'  
  20.             },  
  21.             selectedHover: {  
  22.             }  
  23.           },  
  24.           focusOn:{ x:0.4, y:0.6, scale: 1},  
  25.           markerStyle: {  
  26.             initial: {  
  27.               fill: 'yellow',  
  28.               stroke: 'yellow'  
  29.             }  
  30.           },  
  31.           onRegionLabelShow: function(e, el, code) {  
  32.             if ( vm.seriesData && vm.seriesData[code] )  
  33.               el.html(el.html() + ': ' + vm.seriesData[code] + ' visitors');  
  34.           },  
  35.           markers: vm.markersData,  
  36.           series: {  
  37.               regions: [{  
  38.                   values: vm.seriesData,  
  39.                   scale: [ 'gray' ],  
  40.                   normalizeFunction: 'polynomial'  
  41.               }]  
  42.           },  
  43.         };   

Series data loading in world map 

  1. $scope.seriesData = {  
  2.         'AU': 15710,     
  3.         'RU': 17312,     
  4.         'CN': 123370  
  5. };   

Markers data loading in map 

  1. $scope.markersData = [  
  2.         {latLng:[41.90, 12.45],  name:'Vatican City'          },  
  3.         {latLng:[43.73, 7.41],   name:'Monaco'                },  
  4.         {latLng:[-0.52, 166.93], name:'Nauru'                 }  
  5.       ];   

HTML Code

Vector map will be exposed by using this directives vector-map.

  1. <vector-map map-options="mapOptions"></vector-map>   

Call the directive as element in HTML 

  1. <div class="col-lg-12">  
  2.             <div class="panel panel-default">  
  3.                 <div class="panel-body">  
  4.                     <p>Using series and markers data</p>  
  5.                     <vector-map map-options="mapOptions"></vector-map>  
  6.                 </div>  
  7.             </div>  
  8.         </div>   

Now, we are ready to look the vector world map with markers. So, run the application.

Output 2

MVC

Conclusion

In this article, we have learned MVC using Angular Maps. If you have any queries, please tell me through the comments section. 

Happy Coding ….

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs