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.



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



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



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

• ui-map
• ui-event
• Google Map API

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

<script src="~/Plugin/angular/angular.min.js"></script>
<script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/Plugin/angular-ui-map/ui-map.min.js"></script>
<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 

<section id="map">
        <div class="row">
            <div class="col-md-10">
                <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div>
                <div ui-map-info-window="myInfoWindow">
                    <h1>Marker</h1>Lat:
                    <input ng-model="currentMarkerLat" />, Lng:
                    <input ng-model="currentMarkerLng" /><a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
                </div>
                <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>
            </div>
            <div class="col-md-2">
                <p ng-if="gmap.myMarkers.length">Markers</p>
                <ul>
                    <li ng-repeat="marker in gmap.myMarkers">
                        <a href="" ng-click="gmap.myMap.panTo(marker.getPosition())">Marker {{$index}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </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.

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. 

function MapController($timeout) {
        $scope.myMarkers = [];
        $scope.mapOptions = {
            center: new google.maps.LatLng(35.784, -78.670),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        $scope.addMarker = function ($event, $params) {
            $scope.myMarkers.push(new google.maps.Marker({
                map: $scope.myMap,
                position: $params[0].latLng
            }));
        };
        $scope.openMarkerInfo = function (marker) {
            $scope.currentMarker = marker;
            $scope.currentMarkerLat = marker.getPosition().lat();
            $scope.currentMarkerLng = marker.getPosition().lng();
            $scope.myInfoWindow.open($scope.myMap, marker);
        };
        $scope.setMarkerPosition = function (marker, lat, lng) {
            marker.setPosition(new google.maps.LatLng(lat, lng));
        };
        $scope.refreshMap = function () {

            $timeout(function () {
                google.maps.event.trigger($scope.myMap, 'resize');
            }, 100);
        };

    }

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

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

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.

<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.

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

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

Output 1



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

• Learn Basics Of MVC Using AngularJS
• Learn MVC Using Angular UI-Route
• Learn MVC Using Angular Role Based Login
• Learn MVC Using Angular Datatable
• Learn MVC Using Angular Crystal Report
• Learn MVC Using Angular Pie Chart
• Learn MVC Using Angular Flot Chart
• Learn MVC Using Angular xEditable
• Learn MVC Using Angular Idle
• Learn MVC Using Angular Wizard

Configure the Vector Map

You can get this plug-in from here.

• JVector Map

You will find various maps in here

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

<script src="~/Plugin/ika.jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<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 

return {
        restrict: 'EA',
        scope: {
          mapOptions: '='
        },compile: compile};
function compile(tElement, tAttrs, transclude) {
        return {
          post: function(scope, element) {
            var options     = scope.mapOptions,
                mapHeight   = options.height || '250';
            element.css('height', mapHeight);
            element.vectorMap(options)   }
        };
      }

Now, set the options for this vector map.

Angular Controller 

$scope.mapOptions = {
          height:          400,map: 'world_mill_en',
          backgroundColor: 'transparent',
          zoomMin:         0,
          zoomMax:         8,
          zoomOnScroll:    false,
          regionStyle: {
            initial: {
              'fill':           'red',
              'fill-opacity':   1,
              'stroke':         'none',
              'stroke-width':   1.5,
              'stroke-opacity': 1
            },
            hover: {
              'fill-opacity': 0.8
            },
            selected: {
              fill: 'blue'
            },
            selectedHover: {
            }
          },
          focusOn:{ x:0.4, y:0.6, scale: 1},
          markerStyle: {
            initial: {
              fill: 'yellow',
              stroke: 'yellow'
            }
          },
          onRegionLabelShow: function(e, el, code) {
            if ( vm.seriesData && vm.seriesData[code] )
              el.html(el.html() + ': ' + vm.seriesData[code] + ' visitors');
          },
          markers: vm.markersData,
          series: {
              regions: [{
                  values: vm.seriesData,
                  scale: [ 'gray' ],
                  normalizeFunction: 'polynomial'
              }]
          },
        };

$scope.mapOptions = {
          height:          400,map: 'world_mill_en',
          backgroundColor: 'transparent',
          zoomMin:         0,
          zoomMax:         8,
          zoomOnScroll:    false,
          regionStyle: {
            initial: {
              'fill':           'red',
              'fill-opacity':   1,
              'stroke':         'none',
              'stroke-width':   1.5,
              'stroke-opacity': 1
            },
            hover: {
              'fill-opacity': 0.8
            },
            selected: {
              fill: 'blue'
            },
            selectedHover: {
            }
          },
          focusOn:{ x:0.4, y:0.6, scale: 1},
          markerStyle: {
            initial: {
              fill: 'yellow',
              stroke: 'yellow'
            }
          },
          onRegionLabelShow: function(e, el, code) {
            if ( vm.seriesData && vm.seriesData[code] )
              el.html(el.html() + ': ' + vm.seriesData[code] + ' visitors');
          },
          markers: vm.markersData,
          series: {
              regions: [{
                  values: vm.seriesData,
                  scale: [ 'gray' ],
                  normalizeFunction: 'polynomial'
              }]
          },
        };

Series data loading in world map 

$scope.seriesData = {
        'AU': 15710,
        'RU': 17312,
        'CN': 123370
};

Markers data loading in map 

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

HTML Code

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

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

Call the directive as element in HTML 

<div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>Using series and markers data</p>
                    <vector-map map-options="mapOptions"></vector-map>
                </div>
            </div>
        </div>

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

Output 2



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 ….