Concurrent Openlayers maps in Rails - A Viable Option

Question

Concurrent Openlayers maps in Rails - A Viable Option

I've been playing around with Openlayers maps on my website. The map functionality is working perfectly, but I'm having trouble getting the maps to display correctly on my page.

My goal is to show a map in each search result on my screen - one map per result. Everything looks good when I just have a basic bootstrap card for each result (you can see an example of this in the first screenshot below). However, as soon as I add the map code, everything starts overlapping (as shown in the second screenshot).

Any suggestions or ideas on how to solve this issue would be greatly appreciated! Thanks!

Screenshot showing results without the map code

Screenshot showing results with the map code

      <% @locations.each do |location| %>
        
            <div class="card" style="width: 18rem;">
                  <div id="map" class="map">
                  <script type="text/javascript">
                    var map = new ol.Map({
                      target: 'map',
                      layers: [
                        new ol.layer.Tile({
                          source: new ol.source.OSM()
                        })
                      ],
                          view: new ol.View({
                            center: ol.proj.fromLonLat([-0.479642,52.641882]),
                            zoom: 10
                          })
                    });
                  </script>
                  
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>

            </br></br>
      <% end %>

javascript ruby-on-rails openlayers geospatial

Answer 1

Answer №1

That perspective is like untangled spaghetti. You've overlooked two closing </div> tags and are generating multiple elements with identical ID attributes, resulting in an invalid document structure and triggering sloppy mode parsing. My suggestion is to utilize an HTML validator and segregate content, behavior, and presentation, making it easier to produce high-quality code.

Having multiple elements with the same id attribute means that document.getElementById and document.querySelector usually fetch the first element in the DOM, although this practice is not officially standardized and might yield different outcomes across browsers since it's actually prohibited.

<% @locations.each do |location| %>
  <div class="card">
    <div class="map"></div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
<% end %>

In cases involving OpenLayers (or Google Maps or Leaflet), there's no actual necessity to use ids for the target map element - such practices are primarily used for creating simple introductory samples, which may not be ideal when aiming to add several maps to a page due to unnecessary complications involved in assigning unique ids and passing them to JavaScript. Instead, any HTMLElement object can be passed.

Let's now delve into some more sophisticated JavaScript:

// insert this into your packs (Rails 6) or assets pipeline (older versions) 
// if you're not utilizing turbolinks, use 'DOMContentLoaded'
document.addEventListener('turbolinks:load', function(){
  let elements = document.querySelectorAll('.card .map');
  let maps = elements.forEach(function(element){
    new ol.Map({
      target: element,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([-0.479642,52.641882]),
        zoom: 10
      })
    });
  });
});

This isn't overly complex. We select the elements during turbolinks' page replacement process (and upon initial page load) and then initialize a map instance for each element matching the selector. This approach eliminates redundant calls of the same JavaScript for every loop iteration as seen in those cumbersome script tags.

If you need to pass data like marker positions from Rails to your JavaScript, consider using data attributes.

<% @locations.each do |location| %>
  <div class="card">
     <%= content_tag :div,
         class: 'map',
         data: {
           lat: location.latitude,
           lon: location.longitude
         }
     %> 
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
<% end %>

document.addEventListener('turbolinks:load', function(){
  let elements = document.querySelectorAll('.card .map');
  let maps = elements.forEach(function(element){
    new ol.Map({
      target: element,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        // Map now centers on right location. Magic!
        center: ol.proj.fromLonLat([data.lon, data.lat]),
        zoom: 10
      })
    });
  });
});

Answer 2

That perspective is like untangled spaghetti. You've overlooked two closing </div> tags and are generating multiple elements with identical ID attributes, resulting in an invalid document structure and triggering sloppy mode parsing. My suggestion is to utilize an HTML validator and segregate content, behavior, and presentation, making it easier to produce high-quality code.

Having multiple elements with the same id attribute means that document.getElementById and document.querySelector usually fetch the first element in the DOM, although this practice is not officially standardized and might yield different outcomes across browsers since it's actually prohibited.

<% @locations.each do |location| %>
  <div class="card">
    <div class="map"></div>
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
<% end %>

In cases involving OpenLayers (or Google Maps or Leaflet), there's no actual necessity to use ids for the target map element - such practices are primarily used for creating simple introductory samples, which may not be ideal when aiming to add several maps to a page due to unnecessary complications involved in assigning unique ids and passing them to JavaScript. Instead, any HTMLElement object can be passed.

Let's now delve into some more sophisticated JavaScript:

// insert this into your packs (Rails 6) or assets pipeline (older versions) 
// if you're not utilizing turbolinks, use 'DOMContentLoaded'
document.addEventListener('turbolinks:load', function(){
  let elements = document.querySelectorAll('.card .map');
  let maps = elements.forEach(function(element){
    new ol.Map({
      target: element,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([-0.479642,52.641882]),
        zoom: 10
      })
    });
  });
});

This isn't overly complex. We select the elements during turbolinks' page replacement process (and upon initial page load) and then initialize a map instance for each element matching the selector. This approach eliminates redundant calls of the same JavaScript for every loop iteration as seen in those cumbersome script tags.

If you need to pass data like marker positions from Rails to your JavaScript, consider using data attributes.

<% @locations.each do |location| %>
  <div class="card">
     <%= content_tag :div,
         class: 'map',
         data: {
           lat: location.latitude,
           lon: location.longitude
         }
     %> 
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
<% end %>

document.addEventListener('turbolinks:load', function(){
  let elements = document.querySelectorAll('.card .map');
  let maps = elements.forEach(function(element){
    new ol.Map({
      target: element,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        // Map now centers on right location. Magic!
        center: ol.proj.fromLonLat([data.lon, data.lat]),
        zoom: 10
      })
    });
  });
});

Concurrent Openlayers maps in Rails - A Viable Option

Answer №1

Similar questions

Something seems off with my code. It's causing a barrage of errors to appear on the browser

Is it possible to embed HTML code within JavaScript strings?

Converting dates in Javascript

Guide on implementing a bootstrap loading spinner during the process of retrieving data from an external api

What is the proper way to invoke render functions using Vue 3 composition API?

Creating duplicates of a parent mesh in THREE.js with its children and additional materials

Using reduce() to group items in an array based on a specific object property

Encountering a blank page and error message on Vue JS while attempting to generate a JSON file within the

Unraveling unicode escape sequences in JavaScript strings

Is it possible to showcase dates within input text boxes prior to POSTing the form?

Exploring the art of JSON interpretation within Highcharts

HTMLMediaElement does not have the setSinkId method

Incorporating external function from script into Vue component

React fails to display the content

Custom directives are designed to receive arrays as string inputs

JavaScript doesn't seem to be functioning properly within PHP

No content returned by Angular Server

The art of concealing and compressing JavaScript code

React-onclickoutside does not function properly within an iframe

How can you set an input field to be initially read-only and then allow editing upon clicking a button using Vue.js?