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:

Generate Angular App

using the command line we will generate the new angular application with your appropriate name.

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.

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.

mkdri components
cd components

Now will generate the map component using the angular CLI (command)

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

➮ Declare @Input() Params

let’s create the required input parameters to communicate with the parent component

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

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

...

<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

  .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

  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.

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'},
  ];
}

<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