Integrating SVG Maps with Angular & GraphQL for Interactive Experiences

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:

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:

The above command will generate a graphql.module.ts file which looks like this:

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.

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:

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

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

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:

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.

Code Snapshots, I used: CodeSnap Extension 😃