Add support for OpenStreetMap

[tarunsinghofficial]

Tasks Completed:

• Added the osm support at .env level
• Created the GoogleMapProvider & OpenStreetMapProvider classes as providers.
• Implemented the plugin architecture for other maps in future.

Issues In-progress:

• change icons in OSM
• display the route in OSM & google maps
• display stops properly in google maps

[aaronbrethorst]

@tarunsinghofficial this is looking good! I noticed a few issues and areas for improvement, though:

• Move new StopMarker() into GoogleMapProvider
• Fix an error thrown by the Google Maps library when zooming in (see TODO in GoogleMapProvider)

I think the approach you're taking of creating the map provider inside of the MapView (which I renamed, by the way), is fine for the moment but I would recommend considering a dependency injection approach instead. i.e. the parent component to MapView figures out the correct map provider and gives that to MapView.

[tarunsinghofficial]

Hi @aaronbrethorst, I have made the required changes.

[aaronbrethorst]

This is moving in the right direction! I like how you've factored the Google and OSM code into different providers, and I think the architecture looks good. I am seeing a few behavioral issues that will need to be fixed before this can be merged:

• Markers not loading on the OSM map (see below for the relevant console errors)
• Leaflet zoom controls need to be in the same location as the Google zoom controls (bottom right)

OpenStreetMapProvider.js:34 Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at OpenStreetMapProvider.addMarker (OpenStreetMapProvider.js:34:13)
    at addMarker (MapView.svelte:137:33)
    at MapView.svelte:107:27
    at Array.forEach (<anonymous>)
    at $$self.$$.update (MapView.svelte:107:12)
    at update (chunk-5RNXQC66.js?v=4f5260ef:1319:8)
    at flush (chunk-5RNXQC66.js?v=4f5260ef:1290:9)

[Ahmedhossamdev]

Markers not loading on the OSM map (see below for the relevant console errors) Fixed ✅
Leaflet zoom controls need to be in the same location as the Google zoom controls (bottom right). Done ✅
Display routes in Google Maps -- Fixed ✅
Fix map controller buttons hidden while zooming in and out on OSM map ✅
Improve marker rendering in Google Maps by removing hidden and duplicate google markers ✅
Display route on OSM map and refactor Route Component to adapt the plug-in architecture⌛
Enable Dark Mood in OSM map ⌛

@aaronbrethorst

[tarunsinghofficial]

Hey @aaronbrethorst!

Sorry for not being active for some time. I have been actively preparing for my interviews for placements, so I didn't have the time to continue working on this PR. But soon I will be contributing to the project. Hope you understand :)

Thanks

[Ahmedhossamdev]

Last updates:

Display route on OSM map and refactor Route Component to adapt the plug-in architecture ✅
Fix polyline render ✅
Add PopupContent component ✅
Add polyline-encoded package to encode and decode Google-encoded points. ✅
Add leaflet-polylinedecorator to add arrow symbol to polylines ✅

I think we're ready to merge after review

[aaronbrethorst]

no worries @tarunsinghofficial

[aaronbrethorst]

awesome work! 🚀