react-leaflet#LayersControl TypeScript Examples
The following examples show how to use
react-leaflet#LayersControl.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: sofarLayers.tsx From aqualink-app with MIT License | 6 votes |
|
SofarLayers = ({ defaultLayerName }: SofarLayersProps) => {
return (
<LayersControl position="topright">
<LayersControl.BaseLayer
checked={!defaultLayerName}
name="Satellite Imagery"
key="no-verlay"
>
<TileLayer url="" key="no-overlay" />
</LayersControl.BaseLayer>
{SOFAR_LAYERS.map((def) => (
<LayersControl.BaseLayer
checked={def.name === defaultLayerName}
name={def.name}
key={def.name}
>
<TileLayer
// Sofar tiles have a max native zoom of 9
maxNativeZoom={9}
url={sofarUrlFromDef(def)}
key={def.variableId}
opacity={0.5}
/>
</LayersControl.BaseLayer>
))}
</LayersControl>
);
}
Example #2
| Source File: Maps.tsx From roamjs-com with MIT License | 4 votes |
|
Maps = ({ blockId }: { blockId: string }): JSX.Element => {
const id = useMemo(() => `roamjs-maps-container-id-${blockId}`, [blockId]);
const mapInstance = useRef<Map>(null);
const initialTree = useTreeByHtmlId(blockId);
const [height, setHeight] = useState(DEFAULT_HEIGHT);
const fixHeight = useCallback(() => {
setHeight(
parseInt(
getComputedStyle(document.getElementById(id)).width.match(
/^(.*)px$/
)?.[1] || `${Math.round((DEFAULT_HEIGHT * 4) / 3)}`
) * 0.75
);
mapInstance.current?.invalidateSize?.();
}, [setHeight]);
const initialZoom = useMemo(() => getZoom(initialTree), [initialTree]);
const initialCenter = useMemo(() => getCenter(initialTree), [initialTree]);
const [markers, setMarkers] = useState<RoamMarker[]>([]);
const [loaded, setLoaded] = useState(false);
const [filter, setFilter] = useState(getFilter(initialTree));
const isShift = useRef(false);
const load = useCallback(() => setLoaded(true), [setLoaded]);
const refresh = useCallback(() => {
const tree = getTreeByHtmlId(blockId);
mapInstance.current.setZoom(getZoom(tree));
mapInstance.current.panTo(getCenter(tree));
setFilter(getFilter(tree));
getMarkers(tree).then((newMarkers) => {
setMarkers(newMarkers);
});
fixHeight();
}, [mapInstance, setMarkers, blockId, fixHeight]);
const [href, setHref] = useState("https://roamresearch.com");
useEffect(() => {
const windowHref = window.location.href;
setHref(
windowHref.includes("/page/")
? windowHref.substring(0, windowHref.indexOf("/page/"))
: windowHref
);
}, [setHref]);
const shiftKeyCallback = useCallback(
(e: KeyboardEvent) => (isShift.current = e.shiftKey),
[isShift]
);
useEffect(() => {
if (!loaded) {
load();
getMarkers(initialTree).then((newMarkers) => {
setMarkers(newMarkers);
});
document.addEventListener("keydown", shiftKeyCallback);
document.addEventListener("keyup", shiftKeyCallback);
fixHeight();
}
}, [load, loaded, initialTree, setMarkers, shiftKeyCallback, id, fixHeight]);
const filteredMarkers = useMemo(
() =>
filter
? markers.filter((m) =>
isTagOnPage({ tag: filter, title: extractTag(m.tag) })
)
: markers,
[markers, filter]
);
const filterOnBlur = useCallback(
(value: string) => {
setInputSetting({
blockUid: getUidsFromId(blockId).blockUid,
value,
key: "filter",
});
setFilter(value);
},
[blockId]
);
const whenCreated = useCallback(
(m) => {
mapInstance.current = m;
mapInstance.current.invalidateSize();
},
[mapInstance]
);
return (
<EditContainer
blockId={blockId}
refresh={refresh}
Settings={
<>
<Label>
Filter
<PageInput
value={filter}
setValue={setFilter}
onBlur={filterOnBlur}
/>
</Label>
</>
}
>
<MapContainer
center={initialCenter}
zoom={initialZoom}
id={id}
style={{ height }}
whenCreated={whenCreated}
>
<LayersControl position="bottomleft">
<LayersControl.BaseLayer checked name="Streets">
<TileLayer
attribution='Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
accessToken={process.env.MAPBOX_TOKEN}
id="mapbox/streets-v11"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Outdoors">
<TileLayer
attribution='Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
accessToken={process.env.MAPBOX_TOKEN}
id="mapbox/outdoors-v11"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Light">
<TileLayer
attribution='Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
accessToken={process.env.MAPBOX_TOKEN}
id="mapbox/light-v10"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Dark">
<TileLayer
attribution='Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
accessToken={process.env.MAPBOX_TOKEN}
id="mapbox/dark-v10"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Satellite">
<TileLayer
attribution='Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
accessToken={process.env.MAPBOX_TOKEN}
id="mapbox/satellite-v9"
/>
</LayersControl.BaseLayer>
</LayersControl>
<Markers href={href} markers={filteredMarkers} id={id} />
</MapContainer>
</EditContainer>
);
}
Example #3
| Source File: MetroLineLayers.tsx From metro-fare with MIT License | 4 votes |
|
MetroLineLayers = () => {
const { showMetroLineLayers } = useContext(MapContext);
const mrtThapraPosition = MRT_BLUE[31].position;
const polylineLayers = [
{
layername: "MRT-blue-line",
color: colors.mrtBlue,
polyline: [mrtThapraPosition, ...getPolyLineFromStations(MRT_BLUE)],
isVisible: true,
},
{
layername: "BTS-silom-line",
color: colors.btsSilom,
polyline: getPolyLineFromStations(BTS_SILOM),
isVisible: true,
},
{
layername: "BTS-sukhumvit-line",
color: colors.btsSukhumvit,
polyline: getPolyLineFromStations(BTS_SUKHUMVIT),
isVisible: true,
},
{
layername: "BTS-gold-line",
color: colors.btsGold,
polyline: getPolyLineFromStations(BTS_GOLD),
isVisible: true,
},
{
layername: "ARL-line",
color: colors.arl,
polyline: getPolyLineFromStations(ARL),
isVisible: true,
},
{
layername: "BRT-line",
color: colors.brt,
polyline: getPolyLineFromStations(BRT),
isVisible: true,
},
];
const stationLayers = [
{
layername: "MRT-blue-station",
isVisible: showMetroLineLayers.mrtBlue,
color: colors.mrtBlue,
stations: MRT_BLUE,
},
{
layername: "BTS-silom-station",
isVisible: showMetroLineLayers.btsSilom,
color: colors.btsSilom,
stations: BTS_SILOM,
},
{
layername: "BTS-sukhumvit-station",
isVisible: showMetroLineLayers.btsSukhumvit,
color: colors.btsSukhumvit,
stations: BTS_SUKHUMVIT,
},
{
layername: "BTS-gold-station",
isVisible: showMetroLineLayers.btsGold,
color: colors.btsGold,
stations: BTS_GOLD,
},
{
layername: "ARL-station",
isVisible: showMetroLineLayers.arl,
color: colors.arl,
stations: ARL,
},
{
layername: "BRT-station",
isVisible: showMetroLineLayers.brt,
color: colors.brt,
stations: BRT,
},
];
const displayPolylineLayers = () => {
return polylineLayers.map((polylineLayer) => (
<LayersControl.Overlay
key={polylineLayer.layername}
name={polylineLayer.layername}
checked={polylineLayer.isVisible}
>
<FeatureGroup name={polylineLayer.layername}>
<Polyline
positions={polylineLayer.polyline}
color={polylineLayer.color}
/>
</FeatureGroup>
</LayersControl.Overlay>
));
};
const displayStationLayers = () => {
return stationLayers.map((stationLayer) => (
<LayersControl.Overlay
key={stationLayer.layername}
name={stationLayer.layername}
checked={stationLayer.isVisible}
>
<FeatureGroup name="mrt-blue-station">
{stationLayer.stations.map((station) => (
<StationMarker
key={station.id}
station={station}
fillColor={stationLayer.color}
/>
))}
</FeatureGroup>
</LayersControl.Overlay>
));
};
return (
<LayersControl position="topright">
{displayPolylineLayers()}
{displayStationLayers()}
</LayersControl>
);
}
