Contents hide 1) Generate Angular App 2) Create Shared Map Module 2.1) ➮ Create Component 2.2) ➮ Set SVG Map 2.3) ➮ Declare @Input() Params 2.4) ➮ Highlight Selected State 2.5) ➮ Selected State Hover Functionality 2.6) ➮ Tooltip Custom Design 3) Use Shared Map Module 4) Set Selected State Code And DemoIn this tutorial, we will see how to create an Angular 6 Custom USA Map without using any library. Also will cover some functionality to make it reusable component as mention below:TopicsGenerate Angular AppCreate Shared Map ModuleCreate ComponentSet SVG MapDeclare @Input() ParamsHighlight Selected StateSelected State Hover FunctionalityTooltip Custom DesignUse Shared Map ModuleSet Selected StateGenerate Angular Appusing the command line we will generate the new angular application with your appropriate name.bash ng new custom-map-module NOTE: We will be using flat structure module : linkCreate Shared Map Modulelet’s create a new directory named as shared in which you can add you shared module i.e. map module.bash mkdir shared cd shared ng g m usmap ➮ Create Componentwill separate the component by making a separate folder named as components and in that we create a us-map component folder in which all our HTML, CSS, TS file will be available.bash mkdri components cd components Now will generate the map component using the angular CLI (command)bash ng g c us-map ➮ Set SVG MapNow we will implement the SVG structure in our us-map.component.html file. Each SVG path will contain events mouseenter, mouseleave, and attribute id Reffer Link : https://simplemaps.com/resources/svg-usus-map.component.html➮ Declare @Input() Paramslet’s create the required input parameters to communicate with the parent componentus-map.component.ts import { Component, OnInit, SimpleChanges, OnChanges, Input } from '@angular/core'; import { MapStates } from './map.service'; // https://stackblitz.com/edit/usmap?embed=1&file=src/app/sl-map/components/us-map/map.service.ts&view=editor @Component({ selector: 'app-us-map', templateUrl: './us-map.component.html', styleUrls: ['./us-map.component.css'] }) export class UsMapComponent implements OnChanges, OnInit { @Input() ids: any; @Input() enableTooltip: boolean; @Input() toolTipObject: any; @Input() colors:any = { unfill: '#b6b6b6', // use the IE supported color code i.e HEX, REGB etc fill: '#518a38' // use the IE supported color code i.e HEX, REGB etc } showToolTip: boolean; change: any; constructor(public mapStates: MapStates){} ngOnInit(){ } ... } ➮ Highlight Selected Statenow on changes, we will set the selected state as highlighted, so whenever the data Model is changed the selected state should also be reflected (i.e. changed).us-map.component.ts ... export class UsMapComponent implements OnChanges, OnInit { ... ngOnChanges(changes: SimpleChanges){ this.setUnfillColor(); this.change = JSON.parse(JSON.stringify(changes.ids)) this.change.currentValue.forEach(data => { document.getElementById(data.code).style.fill = this.colors.fill; }); } // gets the colors from @input param and set all the bg color to given color setUnfillColor(){ Object.keys(this.mapStates.statelist).forEach(id => { document.getElementById(id).style.fill = this.colors.unfill; }); } ... } ➮ Selected State Hover Functionalitynow will set the tooltip data by checking the condition from the input method and will set the data of the object in table format as key and value. also will set the position of the tooltip. for all this system we will use two events from HTML i.e. : (mouseenter)="mouseEnter( id, $event, countryCode)" (mouseleave)="mouseLeave( id, $event, countryCode)" and also will show the tooltip for only selected state. ... mouseEnter(ttid, e, id){ document.getElementById(id).style['stroke-width']= "1.999999"; if(this.enableTooltip){ this.toolTipObject = this.createToolTipData(event, id); this.positionToolTip(e, ttid); } } mouseLeave(ttid, e, id){ document.getElementById(id).style['stroke-width']= "0.970631"; if(this.enableTooltip){ this.showToolTip = false; this.toolTipObject = {}; } } createToolTipData(event,id){ let selectedstate = JSON.parse(JSON.stringify(this.change.currentValue)); selectedstate = selectedstate.filter(data => { return data.code === id })[0]; if(selectedstate && selectedstate.code === id){ this.showToolTip = true; selectedstate['state'] = this.mapStates.statelist[id]; delete selectedstate.code; return Object.keys(selectedstate).map((key, value) => { return [key, selectedstate[key]]; }); } } positionToolTip(e, ttid){ document.getElementById(ttid).style.left = `${e.clientX+2}px`; document.getElementById(ttid).style.top = `${e.clientY+2}px`; } ... ➮ Tooltip Custom Designlet’s create the tooltip design, as its HTML is been already mention in us-map.component.tsus-map.component.html ... <div id="SLTP" data-id="SLTP" data-name="SLTP" style="top:0px;left:0px;position:fixed"> <div *ngIf='showToolTip && enableTooltip' style="background:#1f1e1de6;padding:4px;border-radius:4px;width:100%"> <table> <tr *ngFor="let item of toolTipObject"> <td *ngFor="let pair of item">{{ pair }}</td> </tr> </table> </div> </div> let’s put some css to make it look more readableus-map.component.scss .map-tooltip-table{ background: #33312e; padding: 4px; border-radius: 4px; width: 15%; } table { border-collapse: collapse; width: 100% } table tr td{ border: 1px solid #fff; padding: 3px 5px 3px 5px; text-transform: capitalize; color: #fff } Use Shared Map Modulelet’s now import the shared map module in another module in which we will use itapp.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {SlMapModule } from './sl-map/sl-map.module' import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, SlMapModule], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } Set Selected Statenow will use the map module and set the selected state from which will pass it the map module.app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { selectedState: any = [ {'code': 'ND', 'users': 324, 'org type' :'Service Provider'}, {'code': 'WA', 'users': 454, 'org type' :'Manufacturer'}, {'code':'AZ', 'users': 234, 'org type' :'Service Provider'}, {'code' : 'AK', 'users': 544, 'org type' :'Manufacturer'}, {'code' : 'CT', 'users': 544, 'org type' :'Manufacturer'}, {'code' : 'DC', 'users': 544, 'org type' :'Manufacturer'}, ]; } app.component.html <div style="max-width: 80%; text-align:center"> <app-us-map [ids]='selectedState' [enableTooltip]='true' [colors]="{fill:'#518a38', unfill: '#30973e21'}"></app-us-map> </div> Note: For all browser compatibility use, the IE supported hex color code which will not break the functionality on all browser Find More Articles on Angular 2+.Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblrRelatedTags: Angular 7, Angular CLI, angular maps, d3js, us map