Interactive SVG Outline Map in React

Interactive maps on the web are a great way to visualize information. How to create an interactive outline map with React of the city of Munich I want to show in this article.

The source code of this article can be downloaded from https://github.com/tderflinger/react-borough-map-munich

Get City Outline

The great project OpenStreetMap offers a query tool to obtain city outlines of boroughs in many formats. This query tool is called Overpass Turbo.

With the following query, you get the administrative boundaries of the city, which in the case of Munich are its boroughs.

[out:json][timeout:300];

{{geocodeArea:München}}->.searchArea;

(
  relation["boundary"="administrative"]["admin_level"="9"](area.searchArea);
);

out body;
>;
out skel qt;

Press the "Run" button and then "Export" and download it as GPX.

Converting GPX to SVG

For our purpose, we need the outline information in Scalable Vector Graphics (SVG) format. There is an open source Python script that converts any GPX file to SVG. It is called gpx2svg.

Run it like this:

python3 gpx2svg -i export.gpx -o export.svg

Run it in Adobe Illustrator

Now can you edit the SVG file in Adobe Illustrator. Export the file again as an SVG to make it responsive and suitable for further processing, with the following options:

Other SVG programs like Inkscape might also work, although I have not tried them here.

Create React Component

Now you can paste the SVG inline into your React component. For interactivity when the mouse moves over a borough, you need to add a mouseover listener. Also, a name attribute is added to identify the name of the borough to each SVG path. The style attribute is removed.

In this React component, I have defined a callback property that gets called whenever you hover the mouse over a borough. The parameter is the name of the borough, which then gets displayed in the parent component.

This is what my finished React component looks like:

MunichMap.js

import React from "react";
import styled from "@emotion/styled";

function MunichMap(props) {
  const handleMouseOver = (evt) => {
    for (const attr of evt.target.attributes) {
      if (attr.name === "name") {
        props.callback(attr.value);
      }
    }
  };
  return (
    <>
      <svg
        name="Layer_1"
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 3001.18 2316.9"
        style={{ width: "50%" }}
      >
        <Borough
          d="M2502.09,1752.49l2.2,2.39,2.06,3,15,14.69,8.37,4.7-1,1.88,7.15,5.27-9.88,18.26-1,1.61-.92,1.29-1.7,2.26-1.14,1.63-1,2-.6,1.39-.33,1.46-.15,1.37-.4,1-.14.22-.23.7.3.08.31.09.66,1.25,1.16,6.58-.11,1.55.17,1.15,3.19,1.09,9.1,2,9.36,3.11,5.35,1.64,5.71,1.36,10.77,3.41,6.44,2.88,13.62,5,5,2.46,10.38,4.08,7.27,2.83,9.23,3.24,3.38,1.4,1.94,1.13,8,3.28,2.39,1.2,8.11,2.88,8.68,3.74,3.68.92-.75,1.83,2.59.89,5,1.19,7.36,1.35,2.09.12.24-1.72,1.14.28,5.36.08,3.09,5.2,2.85,4,2.12,3.74,1.8,2.81,2.68,2.73,1.49,1.43,1.66,1.87,1.34,1.83,3.26,5,1,2.19,3.23,4.1,2.13,3.26,1.27,2,9-3.11,7.07-2.66-.31-1.94-.43-4.13-.69-5.33,3.47-2,6.37-4,9.45-5.32,4.6-2.61,4.06-2.38,10.83-6.3.82-.61,4.69-3.89,1-.38,2.43-.94,1.94-.05,4.22-.64,1.07-.36,1.12-.08,4.43.46,3.75-1.93,1.62-1.41,2.1-2.61,3.78-3.11,5.89-3.92,5.53-3.57,10.24-6.84,10.82-5.44,10.51-5.73,4.86-3,3.48-.54,2.75-.66,2.43-.67,3.93-2.75,3.75-2.8,4.12-3.14,3.19-2.16,7-3.81,12.08-6.33,2.86-1.71,1.64-1.28,2.6-2.24,2.07-2.31L2901,1794l1.67-2,.92-1.13,3.23-3.89,1.26-1.19,4-3.64,1.28-.93,2.18-1.59,1.53-4.41,1.61-4.92,1-6.86,0-4.65v-1.21l.32-2.39.18-1.28.93-2.17,5.29-18.81,1.09-6.6.63-5.14,2.32-12,.52-2.76.18-1,0-.3L2931,1704l.22-1.92-3.85,1-1.68.19-4.07-3-.77-.6-3.25-2.57-3.68-3.62-5.17-5.68-4.94-4.74-1.1-1-3.67-3.91-3.5-4.3-3.89-4.15-4.38-4-2.63-2.17-.55-.16L2898.6,1647l-49.89-16.21-40.58-13.09-.2.51-6.42-2.14-2.13,1-1.89,0-4.1-2.53-2.41-1.66-8.27-2.72-2.11-.2-.21-1.3-13.87-4.54-5.66-4.13.11-.2,5.91-7.75.42-.55-.24-.11,2.77-3.73,7.73,5.94,12.5-16.35-28-23.87,14.41-15.92,4.14,0,10.88-11.9,12.47,11.16,24.74,22.15,14.64,13.26,2.24,1.87,2.8-2.23,3.62-3.23,2.54-2.08,3.77-2.8,2.14-1.09,2.41-.86,3.16-.68,2.28-.33.73,0,1.75,1,.86.74-.2-1.29,10.22-6,1.87,4.08,6.1-6.8,9.52-10.58,10.38,13.13,13.77-13.36,2.42-2.61,9.92-25.66,3.36-9.21,5.14-13.66-8.26-7.51,1.79-2-7.17-8.31-9.3,6.22-14-11.94,8-5.83,14.08-10.27-1.42-2.56-5.4-7.74-10.6-14.75,18.14-8,6.74,15.32,19-8.42,12.85-5.7,8.44-3.69,2.55-1.26-1.27-3.21-.57-1.42-4.44-10.34,3-2.09,6.41-4.16,17.31-12.64,0-.61-8.48-10.19-11.79-14.12-15.07,11.57-6.5,5-24.15-9.37-5-3.45-2.52-2.79-2.08-2.32-1.18-.7-1.86,1.53L2909,1340.52l-8.78-10.1-7.82-9,.64,0,3.8-2.85,4.52-3.39,6.48-4.82,8.32-6.29-14-16.33-1.26-1.47L2920,1276l.59.09-11.27-13.22-12.52-14.52-1.1-1.28,0-1.26-5.24-2.95-11.19,2.13-7,1.36-8.73,1.63-9.56,1.83-19.5,3.74-2.35-2.74-.51.41,1.59,2.56-34.5,6.65L2797,1258l-.46.31,1.23,2.3-30.07,5.7-1.78.07-10.87,2.43-13.81,2.61-1.6-2-.51.37,1.05,1.78-11.07,2.07-11.22,2.26-18,3.44-12.44,2.37L2681,1283l-5.54,1.09-2.59-.71-2.93-.79-13,2.47-14,2.67-13.68,2.66,13.58-111.36-27.7-22.69-7.08-5.81-2.8-2.3-4.4-3.61-1.79-1.47-2.49-2-2.42-2,2.41-3H2595l.16-.78-5.36-4.33-6.8-5.42-7-5.6-2.39-1.93-4.25-3.54-1.3-.84-1.3-.48-7.74-1.94,0,.12-10.85-2.5-11.2-3.41-.25,4.21,0,9.09v9.51l.06,2.16.29,13.73-.15,4.57.31.55-.45,1.21-.4,4.48.2,2.72.26,16.45.47,6.91-.23,3.26-.7,5.09-.62,3.82-1.25,5-1.47,7.63-1.13,4-2.89,13L2526,1237l-6.1,28.36-.13,1.69-.16.65-.16,0-.67,3.19-.27,2.3,2.46,7.27.43,1.52.33,2,.06,2.49-.33,5-.46,2.43-1.4,4.14-3.17,8.46-.09,2,.69,6.21-2.26.45.28,3-.2,2.18-.62,2.12-.67,2-4.17,12.24,4.25,0,3.12.51,3.28.93,3.93,1.24-1.55,1.31-14.37,11,.05.14-3.82,2.28-4,3-2,2-3.88,5.23-2.11,1-2.44,1.56-1.12.86-.8.94-14.54,11.09L2459,1390.61l-9.6,7.24-5.51,4.17-6.5,5.51-4.21,3.55-4.29,3.42-2.62,2,.75,3.37.37,4.17.29,1,.59-.3,1.8,7.43,3.66,14.88,2.1,8.23,2.14,8.45.32.18-.39.74.5,1.77h.11l.42,1.4.55.86.1.09,1.75,4,1.88,3.92,2.34,3.74,2.74,3.44.15.54.31.56.47.46.88.64-.7,1.43-5.37,11-2.58,6.07-4.09,9.65-7,15.76-.51,1.63-.66,2.11-10.65,24.4.9,1.57-8.36,17.77L2402,1596.3l-5.86-2.91-2.29,4.48-2.54,4-8.1,18.7-2.37,5.3-5.16,11.83-1.93,4.62-1.64,4.19-5.49,14.08-11.53-6.46-6.76-3.31-3,1.34-1.55.7,5.68,5.2,13.83,13.43,10.57,9.62,7.61,7.53,7.37,6.85,3.73,6.47,11.14-.26h4.4l.37.34.45.21.48.12,3.67,0v2.79l21.79,0v.73h3.22v1l20.43,15.95h2.38V1724h2v1.11h2v1.11h2v1.11h1.95v1.1h7.85l11.69,6.46,13,16.72Z"
          transform="translate(0.67 0.5)"
          name="15 Riem - Trudering"
          onMouseOver={handleMouseOver}
        />
        <Borough
          d="M1076.9,2163.07l1.74-1.9-2.12-1.92L1075,2161l.4.37-3,3.3.63.58,2-2.13.88-1Z"
          transform="translate(0.67 0.5)"
        />
        <Borough
          d="M1573.35,1819.93l1-2,.61-1.22,1.15-1.86.84-1.15,1.14-1.48,1.37-1.47,2.06-2,2.35-1.76,3.12-2,1.39-.72.19.08.15,0,6.89-4.19,4.32-4.28,1.4-1.57,1.27-1.64,1.07-1.48,1.34-2.22,1.8-3.45.31-.44,2.33-2.65.62-.61-7.08-4.74.81-.75-.23-.26-.93.71-4.45-3,2.19-1.31.3-.28-.49,0-2.08.79-.57.31-4.64-3.1-.06-.06-5.9-4,1-4.94.09-.54.09-1.11-1.09-1.12h-.62v-.39l-.08-.09.08-.1v-.37l-.07-.12.11-.13-.09-.15.11-.13-.06-.11v-.28l-.15-.25-1.52-.05-.09,0h-.45v-.23l-.58,0,0,.2h-.47l-.12,0-1.5,0-.19.44,0,.82-.13.21h-.34l-.2,5h.42l-.67,5.7,0,.68.36,0-.28,1.38-.67,2.7-.68,2.11-1,2.71-2.9,5.48-5.19-2.43,2-2.54-10.33-5.09-3.48-1.9-6.67-2.59-3.53,8.93-5.71-2.14-3.86-1.07-2-.36-6-.39-5.06-1.12-6.42,0-2,1.55-1.49,1.22-2.29,2.17-5.39,9.1-1.38,2-2.24,2.86-8.09,9.32-.81,1.7-.11,1.4.38,8.23-.09,4.26-.92-.05,0-.73-.54-3.44-2.07-10,.06-.13-1.3-5.66-.28-1.33-.3-1.78-.3-2.19,0-.51-1.6.31-6.64,1.27-3.31.61-10.68,1.48-7.19.7-5.41.54.21-1.57-1.24.39-1.78.59-3.54,1.14.26-.71.3-6.86-3.25-13.28-13.73,1.83.36,2.77-.87-.09-.65,4.44,1.17.09.09,1.48-1,0,0,1.19-1.79.07-13.1,1.44-5.94.84-2.08,3.64-.83,1.7-2.34.37-7.61-4.19-3.21.72-3.55.72-2.7.52-2.3.36-1.93.22-.12-.05-10.56,2-6.91.63,0,.68-9.08.47-1.92-.1-2-.11-9.8.47-4.41.14-1.92-.16-1.64,0h-1.79l-6.34.76-5,.25-4.42.26-1.49.19-1.85.33-1.6.52-1.56.71-1.4.83-.48-.63-.52-.55-1-.9-2.35-1.93-1-1-.74-.86-.93-1.37-.2-.85-.15-.93-.57-4.26-.11-.51-.21-.47-1.93-3.16-1.29-.45-10.44,7.2-7.07,4.89-2.75,2-6.71,4.83-6,5-5.55,5.27-6,6.3-1.2-.3-3.55-.37-2.1-.17h-1.54l-1.26.08-3.42.32-1.61.17-2.06.34.32,5.53-5.88,1.16-3.87.85-1.13.32.1,4.34v0l-2,10.65-.39,2.37-.41,1.76h.16l.68,2.68.19,1,.11,1.2-.11.82-1.21.58-1.54-.85-.6-.27-.64-.19-.63-.13h-.85l-1.46,0-3,0-4,.09-.27-.18-3.51-.5-1.33,1.15-3-3.47-9-10.91-2.47-2.58-1.76-1.8-2.28-2.15-1.36-1-1.43-1.13-6.24-4.76-2.59-2.1-3.29-3.06-2.71-3.53-2-3.81-.62-1.64-.84-2.63-1.51,1.13-3.64,2.78-1,.31-2,.27-2,.09-.55.72-2.22,1.73.18.24-.3.24-.64-.9-2.34-.31-4.23,3.21-.32,2.37.92,1.19-12.54,9.51-19.23,14.65-6.54,5-2-1-35.94,22.78-11.13,8.31-11.23,8.33-.51.14-.4.1-.38,0-.93.17.07.89-17.08,4.37-8.68,1.8-14.72,2.12-.33-2.25-.6-.66-1.72-1.29-7.35-10.67-2.49,1.31-4.38-13.31L984.2,1872l-2.39,1.39-2.88,1.12-2.39,1.31-2,.61-13.6,5.4-3.72,1.2-.93.93-4.61,2.2-7.49,3.17-2.73,1.38-3.75,1.64-.29,1.64-.22,3.12,1.68.21-.74,4.12-1.29,6.84-.91,6.47-1.29,5.59-.39,3.51-.67,6.53-1.94,5.36-2.41,6.77-1.52,4.19-2.06,5.7-1.29,3.59-1.07,3-1.27,3.54,3.69,2.34,4.78,3.2,2.88,2.31,6.22,4.5,4.59,2.16.09.49-.23.36,2.45.76,2.25.4,1.71.14,4.06,0,2.86,0-.69,1.31L956,1982l-1.47,2.72-1.75,2.89-.5.81-.68,1.18-1.14,1.88-2.85,4.57-1.49,2.32-1.17,1.87-.93,1.21-1,.66-.5.29-2.61,1.14-3.75,1.53-1.28.36-1.61,2.7-1.15,2.35-2.42,4.82-1.87,3.9-1.69,3.29-2.41,4-4.67,7.52-1.3,2.52-1.19,2.3-1.64,4-.59,1.41-.91,2.78-.29.65-.67.94,19.33,12.3-2.74,2.86-4.56-3.75-3.58,5.68,3.17,2.65,1.84,2.14,3.13,2.47,3.92-5-3.13-2.38.09-1.07,2.78-3,13.07,7.93L967,2082.75l17.85,11.48,9.53,6,17.4,11.08,9.86,6.39,9.64,6.18,8.61,5.52,3.29,2.09,2.81,1.79-2.44,6.06-2.33,5.92-2,3.08-.93,2.27,1.69.77-4.29,8.36,11,5.5,7.24-14.76-11.24-5.16,4.87-10.88,2,1.31.15,0,4.16,2.56,7.81,5,6.24,3.93,5.18,3.35,10.69,6.76,1.31.79,17.6,11.15,18.53,11.79,18.56,11.83,17.19,11,17.06,11.08,2.82,1.85,5.92,4-5.6,8.42-.27,1.38-1,4.91.31,6,2.08,7.86-1.45.55h-2.23l.45,1.67,2.16,7.39,1.25,6.32,5.22,2.85,1,8.19.73,8,1.86,15.81.85,6.15,10.15,2.79,6.65,1.12,7.88,2.58,9.51,2.51,3.49.55,4.27-6.43,18.47-28,34,12.85,1.24-4.8,1.86-11,1.25-4.71,1.5-5.23,2.48.75,1.42-5.24,1.93-7,4.65,1.21,1-4.1,4.43-.29-.18-3.82,4.75-1.56.41,1,1.41-.65-1.54-3.67,1.94-.11,5.79-.26,4.42-.21,1.57-.06,1,.1,5.94.09,5.39.1,1.28.09.15,2.61,1,0-.57,3.19-.4,2-.32,2.15,5.91.8,1.2.17,1.15-14.88,4-5.87,2.49-3,4-1.09,6.62,1.11,8.91.46.27-5.89.1-2.21,5.56.12,6.07-.06h4.57l.14-3.44h.39l.56-4.06,1.56.37.15-1.86h.19l.42-4.59.61-5.15.82-3.18.39-1.84,1-10.12.13-1.27.32-1.5.3,0,.42-.91.23.06,3.65-8.14,2.34-5.23-.22-.11,1.37-2.82.22-.46,2.85-6.44.85-1.88.9-2,1-2.14.63-1.48.91-2.21.41-1,.53-1.33.48-1.15.75-2.8.51-1.89.91-4.75,1.07-4,.45-1.63,1.83-3.68,1-1.53,2.17-3.21.23.13,1-1.37.79-1,1.3-1.56,1.94-2.15,2.13-2,2.6-1.75.59-.53.54-.22.67.06.57.17.4,0,.38-.23-.1-.15.27-.26.37-.25.39,0,.14-.1,1.59-.14,1.75,0,.87.17,1.93-.13,1.18-.1,1.87-.32,2.14-.54,1.78-.45,1.09-.11.65.06,3.38-.87,5-.57,1.76-.23,8.13.32,5.36.2,13.27.53,6.45.26,3.79.15.26-1.74.55-3.11.56-2.76.8-3.47,1.19-4.69,1-3.42,1-3.22,6-17.71,5.77-16.74,2.18-5.6,2.16-5.23,2.64-6,2.49-5.4,1.76-3.55,3.1-6,2.89-5.38,2.56-4.45,5.06-8.62,5.48-9.33,6.25-10.58,9.84-16.83,2.87-4.83,4.35-7.47,1.67-3.26,1.11-2.56.93-2.57.8-2.63.62-2.76.37-2.45.63-5h-.21l-.06-.06-.19-.72-.57-2.08.08-.12-.6-2.37-.1-1.38.43,0,.2-.62-.54-38.65-.38-6.81-1.21-17.11-1.18-16.85-.08-4.17,0-3.06.4-2.83,2.43-13.11.46-2,.81-2.77.44-1.13Z"
          transform="translate(0.67 0.5)"
          name="19 Thalkirchen - Obersendling - Forstenried - Fürstenried-Solln"
          onMouseOver={handleMouseOver}
        />
        <Borough
          d="M1461,1565.43l1.3-9.13,3.23-22.65.3-3.81.12-2.2.08-.07.07-1.11.11-2.07.34-2.23v-.31h.15l0-2.06-.07-3-.16-2.17-.25-2.38-.17-1.27-.32-1.47-.61-3.69-.08-.13-.28-1.42-.3-1.26-.59-2.19-1.11-3.58-.6-1.7-.55-1.45-.7-1.81-.63-1.45-.83-1.82-1-2.1-.8-1.53-.67-1.3-1.72-3-1.08-1.72-1-1.45-2-2.88-1.19-1.57-1.61-2-1.68-2-4.95-5.39-3.1-3.41-1.74-1.31-2.75-3.36-3.52-3.68-7.92-8.21-2.73-2.82-.38.37-1.66-1.71-1-1-1-.2.55-1-6-6.28-4.08-4.23-1.93-2-2.42-1.87-.22-1-4.37-4.55-3.45-3.59-3.83-4-4.56-4.75-3.79-4-2.11-2.36L1378,1397l-3.12-3.73-3.7-4.69-.62.45-.77-1-.24-.3-4.34,3.41-2.59,2.07-5.33,4.71-8.84,8.74-6.36,6.45-8.57,9-8.06,8.44-3.31,3.53-4.47,5-4.88,6.38-3.33,4.37-12.27,16.34-3.27,3.58-5.63,5.41-3.76,3.2-2.67,2.25-4,3-2.24,1.59-4.22,3-4.84,3.17-6.17,3.92-2.55,1.53-2.6,1.47-5,2.87-9.8,5.84-4.47,2.7-1.8,1.2-2.71,2.41-1,1.15-.8.92-2.81,4.13-2,7.51-14.35-3-15.52-2.65-8.72-1.13-6-.48-3.63-.14-1,0-.32,19.85-.29,14.72-.35,17.83-.34,18-.09,4.82-.51,26.65-.16,14-.27,6.79-.49,36-.21,11.48.15,3.51-.62,34.27-.84,39.55-.32,4.65-.39,3.18-.37,2.26-3.45,13.67-.26,1.12-.43,2.42-.18,1.45-.26,4.89.11,2.85.6,3.25.84,2.63.62,1.64,2,3.81,2.71,3.53,3.29,3.06,2.59,2.1,6.24,4.76,1.43,1.13,1.36,1,2.28,2.15,1.76,1.8,2.47,2.58,9,10.91,3,3.47,1.33-1.15,3.51.5.27.18,4-.09,3,0,1.46,0h.85l.63.13.64.19.6.27,1.54.85,1.21-.58.11-.82-.11-1.2-.19-1-.68-2.68H1224l.41-1.76.39-2.37,2-10.65v0l-.1-4.34,1.13-.32,3.87-.85,5.88-1.16-.32-5.53,2.06-.34,1.61-.17,3.42-.32,1.26-.08h1.54l2.1.17,3.55.37,1.2.3,6-6.3,5.55-5.27,6-5,6.71-4.83,2.75-2,7.07-4.89,10.44-7.2,1.29.45,1.93,3.16.21.47.11.51.57,4.26.15.93.2.85.93,1.37.74.86,1,1,2.35,1.93,1,.9.52.55.48.63,1.4-.83,1.56-.71,1.6-.52,1.85-.33,1.49-.19,4.42-.26,5-.25,6.34-.76h1.79l1.64,0,1.92.16,4.41-.14,9.8-.47,2,.11,1.92.1,9.08-.47,0-.68,6.91-.63,10.56-2,.12.05,1.93-.22,2.3-.36,2.7-.52,3.55-.72,3.21-.72,7.61,4.19,2.34-.37.83-1.7,2.08-3.64,5.94-.84,13.1-1.44,1.79-.07,0-1.19,1,0-.09-1.48-1.17-.09.65-4.44.87.09-.36-2.77,13.73-1.83,3.25,13.28-.3,6.86-.26.71,3.54-1.14.53-15.37v-3.9l-.34-18-.38-20.16-.1-8.06.12-2.6-.13-9.38h.26l.1-6.08.07-.82-.05-2.46,0-3.41h-.65l.11-4-.07-6.54v-5.93l0-.55-.06-3.36-.74-5.55,0-13.12-.33-4.58.3-12.75,0-7.15.16-3.67-.07-4.26.4-2.94,2.85-19.5,1-7.12,1.61-10.24.76-5.35,2.35-16,.41,0Z"
          transform="translate(0.67 0.5)"
          name="7 Sendling - Westpark"
          onMouseOver={handleMouseOver}
        />
        <Borough
          d="M861.44,1542.65l.3,2.69.27,2.49v1.65l-.32,2.24-.06,1.32-.15.48.43,4.67.37,3.9.08.53.08.92.53,4,.37.79.82,4.88,1.47,4.08,1.17,4.65,1.3,5.91.49,4.66.2,5.3,0,3.61,0,5.1.13,3.8-.1,4.19-.06,2.72-1.39,9.11-3.2,17.37-.24,11.55v2.32l-13.8,2.54-.26,4.33-.85,4.5-.1,1.41,0,1.65.34,2.29,1.11,4.52.75,3.85,0,4.68-.41,2.83-1.05,3.36-.85,4.67-.45,3.94.2,3,.7.84-.25,2.72v2.62l.43,11.36.82,1.44.82,2.27.26,2.08.37,3.38.11.92-.2,3-.58,2.81-.33,1-1.11,4.28-.38,2.45-.35,2.79-.15,2.6-.1,1.86-.22,1.46-.25,2.15-.47,7.06-.34,4.83-.27,2.07-.15,1.51-.33,2.19,5.73.09,14.06.2h15.2l10.51.26,9.67.05.51-7.76,9.59,5.37,3.86,1.46,3.86,1.49,2.55,1,7.74,2.3,3.08.72,6.72,1.6,5.35,1.32-3,8.64,1.19.56-1.92,3.41-.44.75L915,1842.12l-3.12,5.62,23.19,40.15,2.63,4.49,3.75-1.64,2.73-1.38,7.49-3.17,4.61-2.2.93-.93,3.72-1.2,13.6-5.4,2-.61,2.39-1.31,2.88-1.12,2.39-1.39,4.42-1.77,4.38,13.31,2.49-1.31,7.35,10.67,1.72,1.29.6.66.33,2.25,14.72-2.12,8.68-1.8,17.08-4.37-.07-.89.93-.17.38,0,.4-.1.51-.14,11.23-8.33,11.13-8.31,35.94-22.78,2,1,6.54-5,19.23-14.65,12.54-9.51-.92-1.19.32-2.37,4.23-3.21,2.34.31.64.9.3-.24-.18-.24,2.22-1.73.55-.72,2-.09,2-.27,1-.31,3.64-2.78,1.51-1.13-.6-3.25-.11-2.85.26-4.89.18-1.45.43-2.42.26-1.12,3.45-13.67.37-2.26.39-3.18.32-4.65.84-39.55.62-34.27-.15-3.51.21-11.48.49-36,.27-6.79.16-14,.51-26.65.09-4.82.34-18,.35-17.83.29-14.72.32-19.85-3.62-.08-8.34.27-8.14.83-5.66,1-4.21.76-9.08,2.41-2.73-7.34-3.35-6.45-5.69-7.61-2.89-3.14-4.67-5-.3-.37-1.58-1.38-4.32-3.86-6.14-5.21-3.71-2.85-3.19-2.45-6.3-4-2.09-1-5-2.44-5.56-1.77-6.22-.94-5.21-.45L1056,1466.8l-1.9-.06-9.81-.33-22.85-.75h-3.84l-5.29.62-8.25,1.77-9.82,3-17.7,5.23-3.19-9.43-3.13-9.45-5.31,1.74-5,1.46L937.18,1467l-7.29,6.21-.93.75.88,1.09-3.46.69-7.54,1.81-3.7.82-5.84,1.18-4.89.94-2.35.4,0,1.05-4.55-.34-4.54-.32.19,1.07-7,2.22-6.43,2-4.46,1.18-7,1.43-5.13.59.1,1.44.56,6.87.22,3.28.42,3.75-.85,4.6-.58,9.86-.8,5.34-1,7.37-.15,5,.23,4.36Z"
          transform="translate(0.67 0.5)"
          name="20 Hadern"
          onMouseOver={handleMouseOver}
        />
        ...
        </svg>
</>
);
}

const Borough = styled.path`
  fill: #000080;
  stroke: yellow;
  :hover {
    fill: red;
  }
`;

export default MunichMap;

Conclusion

The full power of SVG in combination with React can lead to great interactive experiences on the web. Hopefully, you are encouraged by this example to try out an interactive map of your own city.

References

• GitHub source code: https://github.com/tderflinger/react-borough-map-munich

• Overpass Turbo Query: https://github.com/stekhn/leaflet-workshop

• gpx2svg: https://nasauber.de/opensource/gpx2svg

• React: https://reactjs.org/

• SVG: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Adobe Illustrator: https://www.adobe.com/products/illustrator.html