{"size": 1694, "ext": "js", "max_stars_repo_path": "stories/basic/VectorMapExamples/ReverseProjection.js", "max_stars_repo_name": "alperensavaskan/react-jvectormap", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "stories/basic/VectorMapExamples/ReverseProjection.js", "max_issues_repo_name": "alperensavaskan/react-jvectormap", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "stories/basic/VectorMapExamples/ReverseProjection.js", "max_forks_repo_name": "alperensavaskan/react-jvectormap", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.3225806452, "max_line_length": 226, "alphanum_fraction": 0.5914994097}
import { usLcc } from "@react-jvectormap/unitedstates";
import { MapContainer } from "../../components/MapContainer/MapContainer";
import React, { useLayoutEffect, useRef, useMemo } from "react";
import { VectorMap } from "@react-jvectormap/core";
let markerIndex = 0;
const markersCoords = {};

export const ReverseProjectionTemplate = () => {
  const mapRef = useRef(null);

  const props = useMemo(
    () => ({
      map: usLcc,
      markerStyle: {
        initial: {
          fill: "red",
        },
      },
      onMarkerTipShow: function (e, label, code) {
        mapRef.current.tip.text(
          markersCoords[code].lat.toFixed(2) +
            ", " +
            markersCoords[code].lng.toFixed(2),
        );
      },
      onMarkerClick: function (e, code) {
        mapRef.current.removeMarkers([code]);
        mapRef.current.tip.hide();
      },
    }),
    [],
  );

  useLayoutEffect(() => {
    const map = mapRef.current;
    map.container.click((e) => {
      const latLng = map.pointToLatLng(
        e.pageX - map.container.offset().left,
        e.pageY - map.container.offset().top,
      );
      if (latLng) {
        markersCoords[++markerIndex] = latLng;
        map.addMarker(markerIndex, { latLng: [latLng.lat, latLng.lng] });
      }
    });
  }, []);

  return (
    <MapContainer
      description={
        "This example demonstrates the ability to convert pixel coordinates on map to the repsective latitude and longitude coordinates. Click on the map adds marker to the clicked point, click on the added marker removes it."
      }
    >
      <VectorMap mapRef={mapRef} {...props} />
    </MapContainer>
  );
};

const args = {};

export default args;
