Skip to content

Add satellite/OSM toggle to map #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Julian-Louis merged 1 commit into from
Jun 22, 2026
Merged

Add satellite/OSM toggle to map #138

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 42 additions & 5 deletions packages/map/components/Map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {
MdFullscreen,
MdFullscreenExit,
MdOutlineTraffic,
MdSatellite,
MdSatelliteAlt,
MdSpeakerNotes,
MdSpeakerNotesOff,
MdTraffic,
Expand Down Expand Up @@ -60,13 +62,19 @@ const LeaftletMap = ({ serverId }: MapProps) => {
defaultValue: true,
});

const [isSatellite, setIsSatellite] = useLocalStorage({
key: "isSatellite",
defaultValue: false,
});

const { toggle: toggleFullscreen, fullscreen } = useFullscreen();
const FullscreenIcon = fullscreen ? MdFullscreenExit : MdFullscreen;

const ShowSignalStatusIcon =
showSignalInfo === true ? MdTraffic : MdOutlineTraffic;
const RenderPopupIcon =
renderPopup === true ? MdSpeakerNotes : MdSpeakerNotesOff;
const SatelliteIcon = isSatellite === true ? MdSatellite : MdSatelliteAlt;

const { selectedTrain, setSelectedTrain } = useSelectedTrain();
const [stations, setStations] = useState<Station[] | null>(null);
Expand Down Expand Up @@ -238,6 +246,20 @@ const LeaftletMap = ({ serverId }: MapProps) => {
</button>
</Tooltip>

<Tooltip
label={
isSatellite ? "Switch to OSM view" : "Switch to satellite view"
}
position="right"
>
<button type="button" className={style.icon}>
<SatelliteIcon
onClick={() => setIsSatellite((prev) => !prev)}
size={24}
/>
</button>
</Tooltip>

<Tooltip
label={fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
position="right"
Expand All @@ -249,11 +271,26 @@ const LeaftletMap = ({ serverId }: MapProps) => {
</div>
</Control>

<TileLayer
className={styles.test}
attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> | <a href = "https://discord.gg/d65Q8gWM5W" > Created by SimRail France 🇫🇷 Community </a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{isSatellite ? (
<>
<TileLayer
attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGS, and the GIS User Community | &copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> | <a href="https://discord.gg/d65Q8gWM5W">Created by SimRail France 🇫🇷 Community</a>'
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
/>
<TileLayer
url="https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"
opacity={0.6}
attribution='&copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a>'
/>
Comment on lines +280 to +284

@coderabbitai coderabbitai Bot Jun 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Remove duplicate OpenRailwayMap attribution.

The OpenRailwayMap attribution on line 283 duplicates the credit already included in the main Esri TileLayer attribution on line 277. Leaflet combines all TileLayer attributions, causing OpenRailwayMap to appear twice in the map footer.

🧹 Proposed fix 
 <TileLayer
   url="https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"
   opacity={0.6}
-  attribution='&copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a>'
 />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<TileLayer
url="https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"
opacity={0.6}
attribution='&copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a>'
/>
<TileLayer
url="https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"
opacity={0.6}
/>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/map/components/Map.tsx` around lines 280 - 284, The TileLayer
component rendering the OpenRailwayMap tiles (with
url="https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png") has an
attribution prop that duplicates credit already included in the main Esri
TileLayer attribution, causing OpenRailwayMap to appear twice in the map footer.
Remove the attribution prop from this OpenRailwayMap TileLayer component to
eliminate the duplicate while keeping the credit in the primary attribution
source.

</>
) : (
<TileLayer
className={styles.test}
attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> | <a href="https://discord.gg/d65Q8gWM5W">Created by SimRail France 🇫🇷 Community</a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
Comment on lines +287 to +291

@coderabbitai coderabbitai Bot Jun 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Verify or remove className={styles.test}.

The className test on line 288 appears to be a development artifact. Verify whether this styling is intentional; if not, please remove it.

🧹 Proposed fix (if unintentional) 
 <TileLayer
-  className={styles.test}
   attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> | <a href="https://discord.gg/d65Q8gWM5W">Created by SimRail France 🇫🇷 Community</a>'
   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<TileLayer
className={styles.test}
attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> | <a href="https://discord.gg/d65Q8gWM5W">Created by SimRail France 🇫🇷 Community</a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<TileLayer
attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> | <a href="https://discord.gg/d65Q8gWM5W">Created by SimRail France 🇫🇷 Community</a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/map/components/Map.tsx` around lines 287 - 291, The TileLayer
component in the Map.tsx file has a className attribute set to styles.test which
appears to be a development artifact. Verify whether this test styling is
intentional for the TileLayer component; if it is not needed, remove the
className prop entirely from the TileLayer element.

)}

<LayersControl position="bottomright" collapsed={false}>
<LayersControl.Overlay
checked={
Expand Down
Loading