Integrating SVG Maps with Angular & GraphQL for Interactive Experiences
Tags: beginners, angular, tutorial, graphql
Published: 2023-10-12 12:50:12

_Hey there! Ever wondered how to show data on an SVG map and make it interactive? Well,  don't worry; I got you covered. In this post, I will guide you step by step on how to create an interactive map using an SVG map of any country, such as Zimbabwe. By the end of this tutorial, you will be able to display province names and details when a user hovers over different areas of the map. Let's dive in!🚀_



Here are a few items that we will need to create our interactive map:

- **Angular**: Web framework for building user interfaces.
- **GraphQL**: A query language for APIs that allows us to retrieve specific data from the server.
- **SVG Map**: Scalable Vector Graphics


## 1. Create an Angular Project
First things first, let's create a new Angular project with the name 'map-svg' using the 'ng new' command. Once the project has been created, we need to create a component where we will add our SVG map.

```
ng generate component map
```


##  2. Setting up the Server 
The next step is to create a server, that will run our endpoints using GraphQL. For this to take place we need to install Apollo Express:

```
npm install apollo-server-express
```
_apollo-server-express_ allows you to create a GraphQL server using Express.js, by providing a way to build and deploy GraphQL APIs with Express. 

After installing our _apollo-server-express_, we need to create a folder called _server_, inside that folder, let us create a file called _server.js_. In this file, we will add details of the stuff we are going to get from the endpoints we are going to create. Mine looks like this:


![Details to add in the server.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v89uu6vhn8svu7hog89q.png)

There you go, after creating this, we need to start the server, use the command below:

```
node server.js
```


## 3. Creating the Service
Because we are creating our own endpoints using GraphQL and connecting them to the server, we need to install the apollo-angular library. This acts as a client by fetching data. By running the command, you will notice that you will be asked to enter a URL (enter the URL of your choice), as shown below:


![Details when adding the apollo library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9eywd1hn7k81nlyb21nk.png)


The above command will generate a _graphql.module.ts_ file which looks like this:

![Image of the graphql module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3oigxpv0lmyckzguupih.png)

Now that we have added the Apollo library, we need to create a model for our provinces. Models hold data from the API, as we will see later on.


![Province model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvvve3mmzn5tmoocj1r2.png)

Awesome, we now have a model in place, the next step is to create our service in the service folder:

```
ng g service graphql
```

Inside the service, write your code like from the snapshot below:

![Details of the service created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5n5wz7swn87qaqfp28v.png)



_Well, why do we have this service?_ The service we created is responsible for retrieving the name and description of each province from the server. It acts as a client by fetching data using Apollo Angular. By linking the service to the map component, we can display the province details when a user hovers over different areas of the map. The service plays a crucial role in connecting the frontend and backend of the application and retrieving the necessary data for the interactive map.



## 4. Downloading the SVG Map
Awesome, everything looks good now 🚀, so let us download an SVG map, for example, I had to search for **_Download SVG map for Zimbabwe_**. Once you have downloaded your SVG map, go to the folder where you saved it and open it in any editor of your choice, I used Notepad++. Copy the content into your Angular project where we created the map component.



## 5. Installing NG-ZORRO
Great, now how do we make it interactive, we need to install _NG-ZORRO_ so that we use the Popover component.

```
ng add ng-zorro-antd
```



##  6. Making the Map Interactive

After installing _NG-ZORRO_, import the Popover component in your _app.module.ts_ then head over to your _map component.html_ where we pasted the contents of the SVG map. Inside that component, do the following:

1. For each and every path tag, add a color to differentiate each province
2. Add the popover code for each and every path tag as shown below:


![Map HTML Component details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr9pwzu5u8sfmhyqtko7.png)


Great, so far so good. We are almost there now head over to the _map.component.ts_. In the _ts_ component we are going to call the service we created and link it to our HTML code as shown below:


![Map .ts component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijwmm9q7osv56qlz29dt.png)



##  7. Running the Angular

Awesome! 😃 Now that we have completed this stage, let us run our Angular project:

```
ng s
```

## Conclusion

And there you go; you can now see your map, and when you hover over the provinces, you can see that the details are being displayed. 
Creating an interactive SVG map using Angular and GraphQL allows us to display province names and details when a user hovers over different areas of the map. By following the steps outlined in this tutorial, you have learned how to integrate SVG maps with Angular and GraphQL, set up the server, create the service to fetch data, and make the map interactive using Ngzorro. Now you can apply this knowledge to create your own interactive maps and enhance the user experience of your applications. Happy mapping! 😃🙌. Hope you had fun creating this.



You can find the code base [here](https://github.com/Mambinge/map-svg).

Code Snapshots, I used: CodeSnap Extension 😃