2.0.8 • Published 3 months ago
@opentripplanner/zoom-based-markers v2.0.8
Usage
Place 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
:
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 }) => (
<CircleMarker
center={[entity.lat, entity.lon]}
fillColor="#00FF00"
radius={30}
/>
);
const symbols = [{
minZoom: 10,
symbol: MySymbol
}];
...
<FeatureGroup>
<ZoomBasedMarkers
entities={entities}
symbols={symbols}
zoom={zoom} // obtain zoom from the map's zoom.
/>
</FeatureGroup>
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.
2.0.8
3 months ago
2.0.7
8 months ago
2.0.6
10 months ago
2.0.5
1 year ago
2.0.3
2 years ago
2.0.4
1 year ago
2.0.2
2 years ago
2.0.0-alpha.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
2.0.0-alpha.1
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1-alpha.1
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.1.0
3 years ago
1.0.2
3 years ago
1.0.1
4 years ago
1.0.0
4 years ago