DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Learn MVC Using Angular Maps

Learn MVC Using Angular Maps

Google Maps has become essential to how many of us get around. Learn how to create your own version of their Maps application using Angular!

Thiruppathi Rengasamy user avatar by
Thiruppathi Rengasamy
CORE ·
Jul. 05, 17 · Tutorial
Like (2)
Save
Tweet
Share
5.44K Views

Join the DZone community and get the full member experience.

Join For Free

introduction

in this article, we will learn to work 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 an mvc project.
  • configure the google/vector map.
  • work with maps.

create an 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 the project in the “solution name” text box and click ok.

mvc

one more window should appear. select the mvc template in this pop-up and click ok.

configure google maps

we will download the google ui-map from the following links:

  • ui-map
  • ui-event
  • google maps api

open the _layout.cshtml file and refer to the 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 design it using the 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 the following 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 the attribute. open the “angular controller” files and hard code an input or you may get and 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, the 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  
        };   

a ui-event allows you to specify the custom behavior of a user event. you just need to prefix the official event with map- to bind a callback to 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 the _layout.cshtml page.

<script src="~/app/app.module.js"></script>  
<script src="~/app/app.config.js"></script>  
<script src="~/app/mapcontroller.js"></script> 

now, when we run the application, we will see google maps with a marker.

output 1

mvc

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 file and refer to 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 our jquery link into a directive so we can easily access it 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'  
              }]  
          },  
        };   

use the following code to create series data loading in our world map:

$scope.seriesdata = {  
        'au': 15710,     
        'ru': 17312,     
        'cn': 123370  
};   

use the following code to create markers on the 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

the vector map will be exposed by using this directive's vector-map.

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

call the directive as an 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 at the vector world map with our markers added in. so, run the application.

output 2

mvc

conclusion

in this article, we have learned to use mvc by using angular maps. if you have any queries, please tell me through the comments section .

happy coding!

AngularJS Google Maps Web application

Published at DZone with permission of Thiruppathi Rengasamy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Top 10 Secure Coding Practices Every Developer Should Know
  • Understanding gRPC Concepts, Use Cases, and Best Practices
  • A Brief Overview of the Spring Cloud Framework
  • Top 5 Node.js REST API Frameworks

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: