search

IBM-Cloud / logistics-wizard-webui

Web UI for Logistics Wizard Showcase demo. The Logistics Wizard is an end-to-end, smart supply chain management solution that showcases how to execute hybrid cloud, microservices, and predictive data analytics in the real world.
Other
14 stars 20 forks source link

Investigate React map component to view shipments #36

Closed l2fprod closed 8 years ago

l2fprod commented 8 years ago

related to #11

is there a React library to make this easy?

colbycheeze commented 8 years ago

Great starting point for you. I think it will be a challenge with or without having any React knowledge to get the whole Map thing hooked up since there are probably a lot of things going on, but it will be a good test to see if you can get it all going within the existing app since once everything is built we want the app to be able to be modified by other tech sellers etc that might pick up the demo and play with it themselves right.

l2fprod commented 8 years ago

Experimented with google-map-react in https://github.com/IBM-Bluemix/logistics-wizard-webui/tree/add-map-component

Google Maps requires an API key to make calls. I got one in my google developer console. It needs to be set in Map.jsx around line 28. Not sure how to pass it from outside of the code - maybe like _XXX prop but I'm not sure Storybook handles those.

If I don't specify an API key, it works in Storybook locally but it fails when running with the webpack dev server with "npm start".

google-map-react allows custom React components on the map. However I did not see any support to draw directions if we need that. The google-map-react is small enough that we could revise this later on if we need functionality it does not expose (and we could always access the underlying _map object to achieve this).

Another option is https://github.com/PaulLeCam/react-leaflet using ESRI or openstreetmap. https://github.com/tomchentw/react-google-maps might be a bit richer than google-map-react.

rvennam commented 8 years ago

The map is working smoothly. My vote would be to stick with google-map-react as this will be a popular choice among other developers.

Closing this for now and we can open another later if we need to revise..