Heads up, brand new coder, and even newer to ruby on rails. Creating a project and I need an interactive map.
Here is what I did following the leaflet tutorial and some youtube videos
First I added the bolded lines of code to my application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>TripMates</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
**<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>**
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= render partial: "shared/navbar" %>
<div class="container">
<%= yield %>
<br/><br/>
</div>
<nav>
<ul>
<% if current_user && current_user.admin? %>
<li><%= link_to "View All Users", view_all_users_path %></li>
<% end %>
</ul>
</nav>
**<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>**
</body>
</html>
Then in my app/stylesheets I created a file called map.css and I set parameters for map
/* Map container styles */
#map {
height: 100%; /* Set the desired height for your map */
width: 600px;
}
I then created my maps.js file in my app/javascript folder. It sets the view and imports the tile layers
import L from 'leaflet';
document.addEventListener('DOMContentLoaded', () => {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
});
I then included everything into my map page
<!DOCTYPE html>
<html>
<head>
<title>Your Map Page</title>
<link rel="stylesheet" href="map.css">
</head>
<body>
<div id="map"></div>
<script src="maps.js"></script>
</body>
</html>
Any help is appreciated, genuinely stumped on what to do
