Can't get `react-annotations` to show over a map

[abax1]

Hi, love react-simple-maps!

I have a problem which I cannot solve - I've checked the web for answers but cannot find any. Hence my logging of an issue.

I have a world map and I want to overlay annotations from react-annotations but they just don't show up. Do you have an example of this working?

Thanks!

[abax1]

Sorry, my mistake. I needed to do at least the following, wrap in

<svg width={800} height={400}>
      <MyAnnotation />
</svg>

[zimrick]

Hi @abax1, Yeah, we didn't get around to add a proper example of how to use react-annotation with react-simple-maps yet. The best way to go about this is to put the annotation component inside a Marker component. That way you can place it geographically.

Hope this helps.

[abax1]

Thanks @zimrick , actually I'm still struggling to get it to display over a geography so any examples will be most welcome. For now I will stick with the standard annotation out-of-the-box.

Thanks again. Love this library!

[zimrick]

I will keep this issue open for now, and post a link to the example when it's ready. Glad you like the library :)

[abax1]

@zimrick I tried the following but it didn't work for me:

<Marker coordinates={[-115.8958, 20.8375]}>
      <svg width={600} height={400}>
            <MyAnnotation title={"Test"} label={"Testing a label"} />
      </svg>
      <circle r={2} fill="#9610ff" />
      <circle r={3} fill="none" stroke="#9610ff" strokeWidth={0.5} />
</Marker>

[abax1]

MyAnnotation.jsx:

import React, { useState } from "react";
import {
  AnnotationLabel,
  EditableAnnotation,
  ConnectorLine,
  ConnectorEndDot,
  Note
} from "react-annotation";

const MyAnnotation = ({ title, label, x, y, labelX, labelY }) => {
  const [values, setVaules] = useState({});
  return (
    <div>
      <EditableAnnotation
        x={150}
        y={170}
        dy={117}
        dx={162}
        color={"#59039c"}
        title={title}
        label={label}
        className="show-bg"
      >
        <ConnectorLine>
          <ConnectorEndDot />
        </ConnectorLine>
        <Note
          align={"middle"}
          orientation={"topBottom"}
          bgPadding={20}
          padding={15}
          titleColor={"#9610ff"}
          lineType={null}
        />
      </EditableAnnotation>
    </div>
  );
};

export default MyAnnotation;

[zimrick]

Hmm, I think the div in MyAnnotation will not work well within an svg. You could replace it with a React.Fragment or a g. It should also not be necessary to add an svg tag inside the Marker.

I am currently experimenting with react-simple-maps and react-annotation here: https://codesandbox.io/s/annotations-with-react-annotation-ctl55

Let me know if this is useful to you.

[abax1]

This helped thankyou. It works if I add the react-annotation component directly. e.g.

<Marker coordinates={[-120.8958, 38.8375]}>
          <circle r={2} fill="#9610ff" />
          <circle r={3} fill="none" stroke="#9610ff" strokeWidth={0.5} />
          <AnnotationLabel
            x={0}
            y={0}
            dy={117}
            dx={162}
            color={"#1A237E"}
            className="show-bg"
            editMode={true}
            note={{
              title: "Annotations :)",
              label: "Longer text to show text wrapping",
              align: "middle",
              orientation: "topBottom",
              bgPadding: 20,
              padding: 15,
              titleColor: "#1A237E",
             lineType:"vertical"
            }}
          />
        </Marker>

[abax1]

@zimrick, all working now. Thanks again for your help. I also have a pulsing circle marker now which others might find useful:-

CirclePulse.css

.circle-pulse {
  stroke:greenyellow; 
  stroke-width: 2px;
  stroke-opacity: 1;
}

.pulse {
  fill: rgb(248, 248, 248);
  fill-opacity: 0;
  transform-origin: 50% 50%;
  animation-duration: 2s;
  animation-name: pulse;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  from {
    stroke-width: 3px;
    stroke-opacity: 1;
    transform: scale(0.3);
  }
  to {
    stroke-width: 0;
    stroke-opacity: 0;
    transform: scale(2);
  }
}

CirclePulse.jsx

import React from "react";

import "./CirclePulse.css";

const CirclePulse = ({ color, pulseColor }) => {
  return (
    <>
      <g transform="translate(-50, -50)">
        <svg height="100px" width="100px">
          <circle
            style={{ stroke: pulseColor }}
            className="circle-pulse"
            cx="50%"
            cy="50%"
            r="7px"
            fill={color}
          />
          <circle
            style={{ stroke: pulseColor }}
            className="circle-pulse pulse"
            cx="50%"
            cy="50%"
            r="10px"
          />
        </svg>
      </g>
    </>
  );
};

export default CirclePulse;

[abax1]

Usage would be:

<Marker coordinates={[-120.8958, 38.8375]}>
          <CirclePulse color="red" pulseColor="yellow" />
          <MyAnnotation
            title={"You are Here"}
            label={"This is your node, N. California, Lat: -120.8958, Long: 38.8375"}
            color={"#ffffff"}
            wrap={60}
          />
</Marker>