A component that renders objects differently based on a zoom level.
npm install @opentripplanner/zoom-based-markersPlace a ZoomBasedMarkers component inside a react-leaflet FeatureGroup, Map or an OTP-UI's BaseMap
to render entities with different symbols depending on the zoom level.
Example using a FeatureGroup:
``jsx
import { CircleMarker } from "react-leaflet";
const entities = [
{ id: 1, lat: 23.45, lon: 67.89 },
{ id: 2, lat: 23.46, lon: 67.88 }
];
const MySymbol = ({ entity }) => (
fillColor="#00FF00"
radius={30}
/>
);
const symbols = [{
minZoom: 10,
symbol: MySymbol
}];
...
symbols={symbols}
zoom={zoom} // obtain zoom from the map's zoom.
/>
``
For other examples, including rendering symbols for different types of entities (e.g. bus vs. trains),
or more advanced handling of symbols, please refer to the examples in the component Storybook.