# Specifying Libraries In the context of JavaScript, a library and a package are both terms used to describe collections of code that can be used to add functionality to a JavaScript application. However, there are some differences between the two. ## Library A library is a collection of code that provides a set of pre-built functions or modules that can be used to perform specific tasks or add functionality to a JavaScript application. Libraries typically provide a set of APIs that can be called from within an application to perform specific tasks, such as manipulating the DOM, making HTTP requests, or performing data validation. Some popular JavaScript libraries include jQuery, React, and Vue.js. Libraries can be used to speed up development time and improve code quality by providing pre-built functionality that can be easily integrated into an application. ## Package A package, on the other hand, is a collection of code that can include libraries, modules, and other resources needed to run a JavaScript application or module. Packages are typically distributed using a package manager, such as npm or Yarn, and can include metadata about the package, such as version numbers and dependencies. Packages can be used to manage dependencies and versioning in a JavaScript application, and can make it easier to share code between different applications or modules. Packages can include libraries, modules, and other resources needed to run a JavaScript application, and can be installed using a package manager. In summary, a library is a collection of code that provides pre-built functionality for a JavaScript application, while a package is a collection of code and resources needed to run a JavaScript application or module, which can include libraries, modules, and other resources. ## Example: Changing Map Libraries Let's look at a use case for the bicycle rental application, displaying bicycles on a map so that users can see what bikes are close to them. First of mind, is to use Google Maps to display bikes that are close to the customer. ### Prompt {% code overflow="wrap" %} ``` prompt: create a react component in chakra ui using next js to show a bicycle icon using google maps ``` {% endcode %} ### Response: Sure, here's an example of a React component in Chakra UI using Next.js to show a bicycle icon using Google Maps: First, you need to install the required dependencies: {% code overflow="wrap" %} ```perl npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion google-map-react ``` {% endcode %} Then, create a file called `MapWithBikeIcon.js` in your components directory: {% code overflow="wrap" %} ```jsx import React from "react"; import GoogleMapReact from "google-map-react"; import { Box } from "@chakra-ui/react"; import { FaBicycle } from "react-icons/fa"; const AnyReactComponent = () => ( ); const MapWithBikeIcon = ({ center, zoom }) => { return ( ); }; export default MapWithBikeIcon; ``` {% endcode %} In this component, we're importing `GoogleMapReact` and `Box` from Chakra UI, and `FaBicycle` from `react-icons/fa`. We're also defining a functional component `AnyReactComponent` that will render the bicycle icon. `MapWithBikeIcon` is the main component that takes two props, `center` and `zoom`, to determine the initial position and zoom level of the map. In the component's return statement, we're rendering a `Box` with a fixed height and width to contain the Google Map. Inside the `GoogleMapReact` component, we're passing the required `bootstrapURLKeys`, `defaultCenter`, and `defaultZoom` props, and rendering the `AnyReactComponent` with the lat and lng values from `center`. Replace `YOUR_API_KEY` with your actual Google Maps API key. Then, you can use this component in any other React component in your Next.js app: ```jsx jsxCopy codeimport React from "react"; import { Box } from "@chakra-ui/react"; import MapWithBikeIcon from "../components/MapWithBikeIcon"; const center = { lat: 37.7749, lng: -122.4194 }; const zoom = 13; const MapPage = () => { return ( ); }; export default MapPage; ``` Here, we're importing `Box` from Chakra UI, and `MapWithBikeIcon` from the component we just created. We're defining the `center` and `zoom` props, and passing them to `MapWithBikeIcon` inside a `Box`. You can customize the `center` and `zoom` values to show the map at any location and zoom level you want. That's it! You should now see a map with a red bicycle icon in the center of the page when you navigate to the `MapPage` route in your Next.js app. ### Discussion In the above, the instructions and component are largely clear. I think the naming of `AnyReactComponent` could be better, and could be improved through a quick replacement prompt of `rename the AnyReactComponent to BicyleIcon`. However, let's assume that in discussing looking at Google Map's features and pricing, you find that Google Maps has more features than you need, and you're simply looking for a simpler more cost effective mapping solution. After some research, you decide to use MapBox. Let's use a replacement prompt to change to a mapbox implementation: ### Prompt: ``` prompt: replace google maps with mapbox library ``` ### Response: Sure! Here's an example of how you can modify the React component we previously created to use the Mapbox library instead of Google Maps: First, you need to install the required dependencies: ```perl npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion react-map-gl ``` Then, create a file called MapWithBikeIcon.js in your components directory: ```javascript import React from "react"; import { Box } from "@chakra-ui/react"; import { FaBicycle } from "react-icons/fa"; import ReactMapGL, { Marker } from "react-map-gl"; const AnyReactComponent = () => ( ); const MapWithBikeIcon = ({ viewport }) => { return ( viewport = nextViewport} > ); }; export default MapWithBikeIcon; ``` In this component, we're importing ReactMapGL and Marker from react-map-gl instead of GoogleMapReact. We're also using process.env.NEXT\_PUBLIC\_MAPBOX\_ACCESS\_TOKEN to access your Mapbox API access token, which you should add to your .env.local file. MapWithBikeIcon is the main component that takes a viewport object as a prop, which contains the initial position and zoom level of the map. In the component's return statement, we're rendering a Box with a fixed height and width to contain the Mapbox map. Inside the ReactMapGL component, we're passing the mapboxApiAccessToken and viewport props, and rendering the AnyReactComponent with the latitude and longitude values from the viewport object. You can use this component in any other React component in your Next.js app: ```javascript import React from "react"; import { Box } from "@chakra-ui/react"; import MapWithBikeIcon from "../components/MapWithBikeIcon"; const center = { latitude: 37.7749, longitude: -122.4194 }; const zoom = 13; const MapPage = () => { const [viewport, setViewport] = React.useState({ latitude: center.latitude, longitude: center.longitude, zoom: zoom }); return ( ); }; export default MapPage; ``` Here, we're defining the center and zoom values as latitude and longitude in the viewport object, and passing it to MapWithBikeIcon. We're also using the onViewportChange function to update the viewport state. That's it! You should now see a Mapbox map with a red bicycle icon in the center of the page when you navigate to the MapPage route in your Next.js app. ### Discussion: As expected, ChatGPT successfully replaced the Google-Maps-React library with a MapBox implementation. The ability to quickly iterate through various libraries makes it efficient to create POCs (proof of concepts) or try different products out during the RFP (request for product) process.