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 Demo In 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: Topics Generate Angular App Create Shared Map Module Create Component Set SVG Map Declare @Input() Params Highlight Selected State Selected State Hover Functionality Tooltip Custom Design Use Shared Map Module Set Selected State Generate Angular App using 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 : link Create Shared Map Module let’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 Component will 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 Map Now 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-us us-map.component.html ➮ Declare @Input() Params let’s create the required input parameters to communicate with the parent component us-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 State now 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 Functionality now 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 Design let’s create the tooltip design, as its HTML is been already mention in us-map.component.ts us-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 readable us-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 Module let’s now import the shared map module in another module in which we will use it app.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 State now 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:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular 7, Angular CLI, angular maps, d3js, us map