React-leaflet-pixi-overlay NPM

react-leaflet-pixi-overlay

A react wrapper for the awesome Pixi Overlay: https://github.com/manubb/Leaflet.PixiOverlay. With the option to change tooltip ui display.

Installing

yarn add react-leaflet-pixi-overlay

react-leaflet	react-leaflet-pixi-overlay
v2.x	v1.0
v3.x	v3.x

Example

import { TileLayer, MapContainer } from "react-leaflet";
import PixiOverlay from "react-leaflet-pixi-overlay";
import { renderToString } from "react-dom/server";
import "leaflet/dist/leaflet.css";
import "./app.css";

const App = () => {
  const markers = [
    {
      id: "randomStringOrNumber",
      iconColor: "red",
      position: [-37.814, 144.96332],
      popup: renderToString(<div>All good!</div>),
      onClick: () => alert("marker clicked"),
      tooltip: "Hey!",
    },
    {
      id: "2",
      iconColor: "blue",
      position: [-37.814, 144.96332],
      popup: "Quack!",
      popupOpen: true, // if popup has to be open by default
      onClick: () => alert("marker clicked"),
      tooltip: "Nice!",
    },
  ];

  return (
    <MapContainer
      zoom={18} // initial zoom required
      preferCanvas
      maxZoom={20} // required
      minZoom={3} // required
      center={[-37.814, 144.96332]}
      // Other map props...
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <PixiOverlay markers={markers} />
    </MapContainer>
  );
};

export default App;

Marker object props

Prop	Required	Comment
id	yes	String or Int; Unique marker ID
position	yes	Array
iconColor	yes/no	String (any valid html color); Required if not using customIcon.
popup	no	String or HTML parsed to String
popupOpen	no	Boolean. Determines if popup is open by default. Only 1 at a time.
onClick	no	Function
tooltip	no	String
customIcon	no	String
iconId	yes/no	String; Required only if using customIcon
markerSpriteAnchor	no	number[] useful for marker icon calibration `ex: [0.5,1]`
tooltipOptions	no	Leaflet.TooltipOptions -> { opacity: 0.5, offset: 0, 0, ... }

Result

Map

Custom Icon

const markers = [
  {
    id: "someIDUniqueToMarker",
    iconId: "someIDUniqueToIcon", // used for cache
    customIcon:
      '<svg style="-webkit-filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .4));filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .4));" xmlns="http://www.w3.org/2000/svg" fill="red" width="36" height="36" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 6.243 6.377 6.903 8 16.398 1.623-9.495 8-10.155 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.342-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>',
  },
];

Contribution guidelines

To contribute to project codebase, fork the repo and create Pull Requests pointing to master branch.

Local setup

The best way to run and develop the package is to import the local clone to local react project. It can be done with help of yarn link functionality. All peer dependencies must be linked. Here is how to do it:

cd YOUR_CLONNED_REACT_LEAFLET_PIXI_OVERLAY_FORK
yarn link
yarn install
cd node_modules/react
yarn link
cd ../react-dom
yarn link
cd ../leaflet
yarn link
cd ../react-leaflet
yarn link

cd YOUR_REACT_PROJECT
yarn link react-leaflet-pixi-overlay
yarn link react
yarn link react-dom

To compile any changes introduced to code, run yarn build.