title: Modify the markup for markers on the SVG map
body: <p>I'm new to react and d3 and I'm trying to implement a simple SVG map with D3 v6.2 and ReactJS, which will indicate the location of some cities. Each city is being indicated by circles as shown below:</p>
  <p><a href="https://i.stack.imgur.com/9Mz5d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Mz5d.png" alt="enter image description here" /></a></p>
  <p>I need to change this marking to put a pin with the name of the city (using a div if possible) as shown in this image:</p>
  <p><a href="https://i.stack.imgur.com/M6ex3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M6ex3.png" alt="enter image description here" /></a></p>
  <p>But the point's symbol shape is determined by D3-path itself and I can't find anything that can change or replace with another markup.</p>
  <p>Note: I tried to put a <code>div</code> within the <code>path</code> tags of the points, but I realized that they were not rendered and the only change I was able to make was to change the radius of the mark with <code>pointRadius ()</code> but I don't want to do that.</p>
  <p>Code:</p>
  <pre><code>import React, { useEffect, useRef, useState } from 'react';
  import { select, geoPath, geoMercator } from &quot;d3&quot;;
  import useResizeObserver from 'use-resize-observer';
  
  import drawMap from './mapa.json';
  import dataMap from './city.json';
  
  const svgRef = useRef(null);
  const wrapperRef = useRef(null);
  
  const { widthRef, heightRef } = useResizeObserver({ wrapperRef });
  
  function map(){
  
      useEffect(() =&gt; {
  
          const svg = select(svgRef.current);
          const { width, height } = wrapperRef.current.getBoundingClientRect();
         
          const projection = geoMercator().fitSize([width, height], selectedEstados || drawMap);
          
          let pathGenerator = geoPath().projection(projection).pointRadius(4);
          console.log(&quot;path: &quot; + pathGenerator)
          
           svg.selectAll(&quot;.estado&quot;)
              .data(drawMap.features)
              .join(&quot;path&quot;)
              .attr(&quot;class&quot;, &quot;estado&quot;)
              .attr(&quot;d&quot;, features =&gt; pathGenerator(features));
  
           svg.selectAll(&quot;.city&quot;)
              .data(dataMap.features)
              .join(&quot;path&quot;)
              .attr(&quot;class&quot;, &quot;city&quot;)
              .attr(&quot;d&quot;, features =&gt; pathGenerator(features))
                          
  }, [drawMap, wrapperRef, widthRef, heightRef])
  
  return(
      &lt;div className='map' ref={wrapperRef}&gt;
          &lt;svg ref={svgRef}&gt;&lt;/svg&gt;
      &lt;/div&gt;
  )
  }
  
  </code></pre>
  <p><strong>city.json</strong></p>
  <pre><code>{
      &quot;type&quot;: &quot;FeatureCollection&quot;,
      &quot;name&quot;: &quot;city&quot;,
      &quot;crs&quot;: {
          &quot;type&quot;: &quot;name&quot;,
          &quot;properties&quot;: {
              &quot;name&quot;: &quot;urn:ogc:def:crs:OGC:1.3:CRS84&quot;
          }
      },
      &quot;features&quot;: [
          {
              &quot;type&quot;: &quot;Feature&quot;,
              &quot;properties&quot;: {
                  &quot;municipio&quot;: &quot;sapé&quot;
                  
              },
              &quot;geometry&quot;: {
                  &quot;type&quot;: &quot;Point&quot;,
                  &quot;coordinates&quot;: [
                      -41.821476100786512,
                      -8.282815195947387
                  ]
              }
          },
          {
              &quot;type&quot;: &quot;Feature&quot;,
              &quot;properties&quot;: {
                  &quot;municipio&quot;: &quot;muito distante&quot;
                  
              },
              &quot;geometry&quot;: {
                  &quot;type&quot;: &quot;Point&quot;,
                  &quot;coordinates&quot;: [
                      -41.065329661162544,
                      -7.183034162673664
                  ]
              }
          }
      ]
  }
  
  </code></pre>
  <p><strong>mapa.json</strong></p>
  <p><a href="https://github.com/26messias26/geo/blob/main/README.md" rel="nofollow noreferrer">map geojson here</a></p>