Mapping with React Leaflet.js

Photo by Charlotte Noelle on Unsplash

What is React Leaflet?

index.html
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
This will give you a full-screen map.
// App.jsimport react from 'react';
import { Map, TileLayer } from 'react-leaflet';
import './App.css'
function App() {
return <Map></Map>
}
export default App;
<Map center={[Latitude, Longitude]} zoom={10}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy;
<a href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
/>
</Map>
New York City
Leaflet with <Marker> and <Popup> component

Conclusion

Aspiring Software Engineer, currently a student at Flatiron School Software Engineering Program

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store