Angular US Map SVG

This package provides the ng-us-map-svg component that can be used to generate a clickable US Map SVG. An event is emitted providing the ability to set callback function and input parameters allow customizaion of fill & stroke colors.

The component is designed to be reusable and customizable. It allows you to display a clickable US map using SVG paths for each state. The map is interactive, and when a state is clicked, it emits an event with the state name. The component can be easily integrated into any Angular application.

This is an updated version of angular4-us-map-svg.

How to install

Accessing Component

To use it as a stand-alone component, import the component:

Then include it in your component's imports:

Then add it to the component's template:

API Reference

Inputs

||| |-|-| | gradientStops | Type: Array<string> Optional. Sets the linear gradient fill colors for the states (internally named grad1).For Example: gradientStops=['#1F886E', '#177DC1'] | | stateColor | Type: string Optional. Sets the background color of state area.For Example: stateColor="#C0C0C0" or to use the linear gradient from gradientStops stateColor="url(#grad1)" | | labelColor | Type: string Optional. Sets the color of state name text.For Example: labelColor="#C0C0C0" | | borderColor | Type: string Optional. Sets the border color of state area.For Example: borderColor="#C0C0C0" | | lineColor | Type: string Optional. Sets the line color for state names outside the map pointing to the state.For Example: lineColor="#C0C0C0" | | hoverColor | Type: string Optional. Sets the color for state when mouse hovers over them.For Example: hoverColor="#43C3FD" | | states | Type: any Optional. JSON data for states to show.The data must minimally contain an id attribute for the state identifier and a d attribute containing the SVG path of the state shape.It should also contain an x and y location for the location of the state label (the id).If the state shape is too small to contain the label, it may also define boxX, boxY, boxW, and boxH attributes (x,y, width, height) to create a separate box to place the label in. When adding an extra box, it would be expected to also add lineX1, lineY1, lineX2, andlineY2 attributes for a line to connect the state to the box. |

Output

||| |-|-| | mapClick | Will be emitted when a state area has been clicked. It returns the state abbreviation in the (mapClick) event. |

In order to perform actions based on map clicks, attach your event handler to the mapClick event.

Styling

Apply your own CSS to beautify this component.

||| |-|-| | svg-state-group | Class associated with SVG g elements that encapsulate the state border, label, and any additional parts. | | svg-state-path | Class associated with SVG path elements that draw the state borders. | | svg-state-label | Class associated with the SVG text elements that show each state abbreviation. | | svg-state-rect | Class associated with the SVG rect elements that encapsulate the state label for small states. | | svg-state-line | Class associated with SVG line elements that connect the state rectangles to the state. |