Author avatar

Vivek Kumar

Basic CSS Positioning with Leaflet Map and HTML Table with React

Vivek Kumar

  • Aug 12, 2019
  • 6 Min read
  • 289 Views
  • Aug 12, 2019
  • 6 Min read
  • 289 Views
Web Development
React

Introduction

The scope of animation is boundless, especially in the contemporary digital age when the results ought to be faster yet reliable. The application of animation is artificially done to depict the data or the situation of the natural surroundings in the simplest form to make things much easier to understand.

One such application of the CSS animation is the creation of leaflet maps to show the population of a demographic region or depiction of a cyclone from one point to another within a given time interval including different colors and movements for a better interpretation from the general public viewpoint. That is the reason why it is essential to keep in mind that even a slight mistake in the CSS positioning can change the entire course of the data table with respect to the map contents. It can not only misrepresent the data published in front of people but can also misinform them regarding the whole context of the situation. That is the key reason why the information that we are about to share in this guide is extremely pertinent and requires your attention right away.

When you are building basic CSS positioning with Leaflet map and HTML table with React JS, there are certain mistakes that you are likely to commit. It tends to happen when you are a novice to CSS, the React component, or in both. That is the reason why we are going to list out the common mistakes that you can make while inserting commands and the best possible outcome of it. We will then explore some of the solutions that can help you in ensuring effective coordination between CSS leaflet map and basic HTML table for React JS.

Basic CSS Positioning Mistakes

The case that we are going to discuss is a general problem that most beginners in the field encounter. It is about a basic HTML table made on a React component which is not getting positioned on the desired point on the screen. The map is required to have an absolute position and the objective is to bring the HTML table, with the entire dataset, to the right-hand side of the screen.

The following are the commands that are entered in a standard format including the height, width, and index. Please note that this is simply a demo, in terms of CSS styling, in order to understand this common mistake and that your data will be variable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <style type="text/css">
    .wrapper {
      width: 100%;
      height: 100%;
    }
    .map {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      height: 100%;
      width: 75%;
      float: left;
      z-index: -1;
    }
    .table {
      position: relative;
      height: 100%;
      float: right;
      width: 25%;
      z-index: 0;
    }
  </style>
css

The following is the basic body layout comprising of div’s attached with React JS components. It is noteworthy that we are not taking div for the wrapper as it does not possess a React.JS component.

1
2
3
4
<div id='wrapper'>
    <div id='map'></div>
    <div id='table'></div>
</div>
html

The following is the React JS code, provided for your reference:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var reactComponentMap = React.renderComponent(
  <Map data={testJSON}/>,
  document.getElementById('map'),
  function() {
    // Map Component Callback
  }
);

var reactComponentTable = React.renderComponent(
  <Table />,
  document.getElementById('table'),
  function() {
    //Table Component Callback
  }
);
jsx

Now, with the above-given code (with mistakes), the form of CSS styling, the map image along with the HTML table is going to look like the following:

Imgur

So, it is quite easy for you to observe that the table is located right above the map. The blank side that you can see to the right has been reserved up to 25% to be accommodated by the table, but that is not the place where it is actually located. The map takes up around 75% of the overall screen space.

Simple yet Reliable Solution to This Basic Error

It is not hard to assume that, given the above example, the most common mistake is conducted within the CSS positioning. The interesting fact is that the mistake in the basic CSS/HTML positioning is a silly yet genuine one. It is because of the lack of experience that you tend to muddle with the classes and the IDs. For the beginners, it is a form of mistake that is not easily trackable and it only results in a hampered output.

Here, we are going to offer you a simplest, yet dependable, solution for basic CSS positioning with leaflet map and HTML table in React JS. For the HTML, it is suggested to apply your IDs as id=”table” as well as for the CSS file apply classes .table. It is going to be clear with the following commands:

1
2
3
4
<div class = "wrapper">
    <div class = "map"> Map </div>
    <div class = "table"> Table </div>
</div>
html

It is crucial that you apply the correct type of selector for the classes, along with the proper use of .. For IDs apply # in the CSS and the problem related to map and table positioning is simply going to get resolved in no time.

Conclusion

It is true that the concept of CSS positioning in React JS is a widespread one and it is not feasible to explore of it in a single guide. Yet the things that you have covered in this guide are adequate enough to eliminate your hesitations and dilemmas related to basic CSS positioning.

In this guide, we have covered the basic CSS mistakes that are generally committed by beginners, including the incorrect form of CSS style mapping and HTML table. The solution (the application of IDs in HTML and classes for CSS file) that we rendered to rectify the mistake might seem like a trick but it is what can offer you a stable yet reliable result.

Just get on with the steps advised above and complete your basic CSS positioning with Leaflet map as well as an HTML table in React JS with the utmost professional touch. After all, acting smart right from the beginner’s level is what makes us unique in due course of time!

Reference

You can further refer the following resource which is also used as a reference for this guide:

1