1

I'm trying to run Leaflet with Open Street Map on my Rails 6 application.
As I have decided to add leaflet.js by running yarn add leaflet so, I'm not using the gem "leaflet-rails".
For me to be able to add the CSS part of it I ended up adding the link rel="stylesheet" recommended on the Leaflet - Quick Start Guide.
The app simply gets your coordinates and place a marker on the map with those coordinates. Simple.
Currently, everything works fine with only a small issue. I can't see the maps on any iPhone or iPad. It will get my coordinates, place the marker but Doesn't Show the Map.
I can't even test the application on mobile version on my localhost (Inspect Element - on mobile), here I can Allow Access but that's all I can do, it doesn't do anything when I click on the Log button.

My files look as follows

app/javascript/application.html.erb 

<head>
<title>Trackme</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>  


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/> 

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %><br>
</head>
<body>
  <%= yield %>
</body>

app/javascript/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'leaflet'
import 'bootstrap'
import '../stylesheets/application'

if ("geolocation" in navigator) {
  console.log('geolocation is available');
  navigator.geolocation.getCurrentPosition(function(position) {     
    // initialize the map on the "map" div with a given center and zoom
    const map = L.map('trackmap').setView([0, 0], 1);       

    // Required by leaflet to use it
    const attribution = '&copy; <a href=""https://www.openstreetmap.org/"">OpenStreetMap</a> contributors | &copy; Trackmi ';
    const tileURL = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
    const tiles = L.tileLayer( tileURL , {attribution} );
    tiles.addTo(map);

    // Listen for click on Log button
    const log = document.getElementById('log');
    log.addEventListener('click', function (event) {

        alert("Button Clicked")

        const lat = position.coords.latitude
        const lon = position.coords.longitude
        document.getElementById('latitude').textContent = lat
        document.getElementById('longitude').textContent = lon

        // add marker to map with the coordinates
        var marker = L.marker([lat, lon]).addTo(map)

        // set the view to the lat, lon coordinates and zoom it.
        map.setView([lat, lon], 18)

    });
});
} else {
console.log('geolocation IS NOT available');
}

app/views/static_pages/home.html.erb

<div class="card">
<div class="card-title text-center">
      <h1> Tracking Data </h1>
</div>
  <div class="card-body">

        <p class="coordinates ptitle">Your Location is

        <div>
            Latitude = <span id='latitude'></span>&deg;
        <br>
            Longitude = <span id='longitude'></span>&deg;
        </div>

    </p>
    <div class="centeButton text-center"> 

        <button id='log' type="button" class="btn btn-primary">Log</button>
    </div>
        <br>
        <div class="d-flex justify-content-center"">  
            <div id='trackmap'></div>
        </div>
  </div>

app/javascript/application.scss

@import "custom";
@import "~bootstrap/scss/bootstrap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

app/javascript/custom.scss

#trackmap {
  height: 400px;
  width: 600px;
}
.card {
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 20%;
  margin-bottom: 30%;
} 
.text-center {
  text-align: center !important;
  padding-top: 30px;
}
.ptitle {
  font-weight: bold;
}
#log {
  margin-top: 20px;
  margin-bottom: 60px;
  font-size: 1.2rem !important;
}  
@media (max-width: 576px) and (orientation : portrait) {
.card {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 20%;
}

You can see/run the application here: https://trackmi.herokuapp.com/.
You can check it on your desktop and on your mobile (Android) it should work fine. If you have an iPhone or try to test it from your desktop on a mobile version it doesn't work.
So, my question is, What do I need to do to show the map it on an iPhone or iPad?

I would like to thank you in advance for the help you may provide.

Mactigre
  • 11
  • 1

0 Answers0