Forem: Gigin George

Visualizing COVID Cases Worldwide with Map-first UI @ Coronasafe Network

Gigin George — Sun, 14 Jan 2024 08:07:49 +0000

The beauty of map-first UIs is their ability to transcend the barriers of complex data tables and dense textual information. Instead, they offer a spatially organized visual summary. With a single glance, a person can understand patterns, trends, and critical points. In situations like the global pandemic, where every second count, this instant comprehension can be life-saving.

During the onset of the coronavirus pandemic, there was a deluge of data every day. As we were trying to build different tools to help battle the pandemic, even though there were International Representations of The Number of COVID cases, it was a pain to keep track of how many Raw numbers were intimidating, and often people struggled to contextualize the scale and spread of the virus. Recognizing this gap, our team at Coronasafe decided to venture into the realm of map-first UIs.

Our vision was clear – we wanted a live, interactive map that plotted COVID cases worldwide, offering users a real-time snapshot of the pandemic's status. The project, available on GitHub, aimed to make this crucial data more accessible and comprehensible for the masses.

React, with its component-based architecture, was our natural choice for building the UI. When combined with react-leaflet – a fantastic wrapper around the leaflet js library – the development process became smooth and efficient. And as highlighted earlier, the integration of React's virtual DOM made our map UI not just interactive but also incredibly fast, often outpacing native leaflet implementations.

Experience the Impact

Our application is live and hosted on Coronasafe's Map Network. As you navigate the map, you'll see how seamlessly the cases are plotted, the varying intensities indicating the severity in different regions. It's not just a map; it's a story of humanity's battle against a common foe.

The feedback from users has been overwhelmingly positive. Many have emphasized how the visual representation has made it easier for them to understand the pandemic's scope and progression. Schools and educational institutions have used it as a teaching aid, and even policymakers have referenced it to make informed decisions.

Dive into React: Map-first App Walkthrough

Before concluding, I'd like to highlight a useful resource for those interested in React-based map applications. On my blog, there's a concise walkthrough for creating a Map-first React App. This guide is perfect for anyone, from beginners to advanced developers, looking to integrate maps with React. It covers the essentials, from setup to advanced features, providing a practical approach to building interactive map interfaces.

Check out this guide to enhance your skills in crafting map-centric React applications.

Final Thoughts

In a world inundated with data, the challenge often lies in interpretation. Tools like map-first UIs bridge this gap, ensuring that information is not just shared but also understood. Our project at Coronasafe is a humble contribution to this endeavor, and we urge developers and data enthusiasts worldwide to embrace this powerful medium. After all, when data becomes knowledge, it equips us to make better decisions, foster understanding, and, in some cases, save lives.

Here's a quick article where the Coronasafe India Maps was covered, kind of a proud moment for me really :D

Cheers!

Building Map-first Apps with React

Gigin George — Sun, 07 Jan 2024 15:41:38 +0000

Map-first UI is a great way to present data when you want to visualize data that has great geographical relevance. And if you're a React dev, The react-leaflet package helps you do just that!

I started doing maps when the coronavirus pandemic was on the rise and wanted to plot the cases worldwide on a map. Checkout Coronasafe India Map. As a React developer, my searches helped me find react-leaflet, which is a wrapper around the leaflet js library. Bonus: since react works with a virtual DOM, react-leaflet is in a lot of cases considerably faster than native leaflet!

A Look Back and A Step Forward

It's been three years since our endeavor into map-first UIs with Coronasafe. As I reflect on the journey, the passion, the late-night coding sessions, and the satisfaction of seeing our map being utilized by countless users worldwide, I can't help but feel an immense sense of accomplishment and gratitude. Throughout this period, I've received numerous queries on how we achieved this, and I've been longing to pen down this article on quickly bootstrapping Map First applications in React. So, without further ado, here's a quick guide for all the budding developers out there.

Bootstrapping a Map-first React App

1. Setting Up Your React App

Start by initializing a new React application using Create React App:

npx create-react-app map-first-react-app

Navigate to your new app's directory:

cd map-first-react-app

2. Installing Dependencies

Install react-leaflet and leaflet:

npm install react-leaflet leaflet

3. Integrating the Map

In your App.js:

Import the necessary components from react-leaflet and styles from leaflet:

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

Embed the MapContainer component within your app's render method. You can set the desired center and zoom level for the map:

<MapContainer center={[51.505, -0.09]} zoom={13}>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  <Marker position={[51.505, -0.09]}>
    <Popup>
      A sample marker!
    </Popup>
  </Marker>
</MapContainer>

4. Overlaying Additional UI Elements

To add UI elements over your map:

Wrap your MapContainer with a parent div element. This acts as your canvas.
Position your UI components absolutely within this div. Utilize CSS for layout and positioning.

    .map-canvas {
      position: relative;
      width: 100%;
      height: 100vh;
    }

    .your-ui-element {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1000; // Ensure it's above the map
    }

Make sure to properly handle z-index to ensure overlays don't interfere with map interactivity.

5. Serving the App

Finally, run your app:

npm start

Your React application should now display a map with overlaying UI elements. From here, the possibilities are endless. You can add markers, pop-ups, and layers, or even integrate real-time data streams.

Conclusion

A map-first application is more than just a visual treat; it's a powerful tool for conveying data in an intuitive, accessible manner. Whether you're aiming to depict global events, track assets, or share any geographically-relevant information, a map-first approach combined with React's agility can be transformative. I hope this guide empowers you to embark on your map-based projects and make an impact, just as we did at Coronasafe. Happy coding!

Deploy JAR file to Elastic Beanstalk using EB CLI

Gigin George — Sun, 31 May 2020 19:14:27 +0000

Like me, you also probably deploy your applications by uploading it's JAR to Elastic Beanstalk. Since the AWS Web UI allows you to directly upload a JAR file and deploy it, like me, you'd probably find a hard time finding a CLI alternative to directly deploy your JAR.

There are 2 ways you can deploy your JAR into EB via CLI.

Using the AWS EB CLI: The EB CLI is preferrable if you intend to run the command yourself. Most commands are short and sweet.
Using the AWS CLI 2: The AWS CLI is much more powerful and be used to carry out almost all tasks that you'd normally do through the web console, but commands are longer and not quite friendly if you intend to type in these commands every time.

This tutorial is to explain the first method which is the more straightforward option.

Deploy using EB CLI

To deploying your JAR using the EB CLI is quite straightforward, you need to install EB CLI

Pre-requisites

Install EB CLI
Generate an IAM User with EB Full Access.

Configure Credentials for EB CLI

You can cd into your project's route directory and run eb init which would run you through inputting the credentials, the default region, selecting your environment etc.

$ eb init

Select a default region
1) us-east-1 : US East (N. Virginia)
2) us-west-1 : US West (N. California)
3) us-west-2 : US West (Oregon)
4) eu-west-1 : EU (Ireland)
5) eu-central-1 : EU (Frankfurt)
6) ap-south-1 : Asia Pacific (Mumbai)
7) ap-southeast-1 : Asia Pacific (Singapore)
8) ap-southeast-2 : Asia Pacific (Sydney)
9) ap-northeast-1 : Asia Pacific (Tokyo)
10) ap-northeast-2 : Asia Pacific (Seoul)
11) sa-east-1 : South America (Sao Paulo)
12) cn-north-1 : China (Beijing)
13) cn-northwest-1 : China (Ningxia)
14) us-east-2 : US East (Ohio)
15) ca-central-1 : Canada (Central)
16) eu-west-2 : EU (London)
17) eu-west-3 : EU (Paris)
18) eu-north-1 : EU (Stockholm)
19) eu-south-1 : EU (Milano)
20) ap-east-1 : Asia Pacific (Hong Kong)
21) me-south-1 : Middle East (Bahrain)
22) af-south-1 : Africa (Cape Town)
(default is 3): [enter your region]

After selecting your region, it prompts for your IAM Credentials

You have not yet set up your credentials or your credentials are incorrect.
You must provide your credentials.
(aws-access-id): AKIAJOUAASEXAMPLE
(aws-secret-key): 5ZRIrtTM4ciIAvd4EXAMPLEDtm+PiPSzpoK

After this it will ask you to select your application

Select an application to use
1) your-app-name
2) [ Create new Application ]
(default is 1):

After this they'd ask if you'd like to use CodeCommit(the AWS VCS service). Since we're deploying JARs, it's not quite relevant for use, so you could select no.

Do you wish to continue with CodeCommit? (y/N) (default is n): n

If you need to run the same config at a different location(CI/CD Services), you could just add the ENV variables AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY

Deploy Config

In order to declare the artifact(JAR) that you need to deploy,you can append the newly generated /.elasticbeanstalk/config.yml, with the following

deploy:
  artifact: target/<your-jar-name>.jar

Deploy to EB

Now that you're done configuration, you could directly use the command eb deploy -v to deploy your project JAR.(-v for verbose)

$ eb deploy -v
INFO: Deploying code to <your-env> in region us-west-2 
INFO: Uploading archive to s3 location: <your-app-name>/<your-jar-name>.jar 
Uploading: [##################################################] 100% Done... 
INFO: Creating AppVersion <app-version>
2020-05-31 17:41:40    INFO    Environment update is starting.      
2020-05-31 17:41:45    INFO    Deploying new version to instance(s).
2020-05-31 17:41:54    INFO    New application version was deployed to running EC2 instances.
2020-05-31 17:41:54    INFO    Environment update completed successfully.

Kudos! you've successfully deployed your application to EB. Now in order to deploy consecutive versions, you could simply run eb deploy -v

React + Tailwind Starter

Gigin George — Tue, 26 May 2020 22:10:47 +0000

create-react-tailwind-app is an npx generator that creates a starter project with tailwind configured without ejecting from create-react-app. This means you don't go through configuration hell that usually rains open you when you eject as a beginner.

Similar to using create-react-app, Open a terminal and run:

npx create-react-tailwind-app

This will prompt you with the name of the new project you'd like to create

you@computer: ~/projects $ npx create-react-tailwind-app
Project name:my-app

This will generate your new project my-app in a directory. Next, you can cd into the directory, install the dependencies and run the project.

cd my-app
npm install

This will install all the dependencies. To run the project, run:

//To build tailwind and run react-scripts
npm start

expected output:

You may want to change the package name in package.json if you plan to publish the project

Note: The index.css file is autogenerated and will be over-written on every run. If you want to add CSS changes, which I would recommend you not to, you should do them in the tailwind.css file.

@tailwind base;
// Base CSS here

@tailwind components;
// Component CSS here

@tailwind utilities;
// Util level CSS here

You can refer to (Tailwind CSS)[https://tailwindcss.com] for further reference to using tailwind

gigincg / create-react-tailwind-app

Create React Tailwind App

React Tailwind boilerplate generator, Inspired from Create Reason React Tailwind Generator

Boilerplate for Tailwind CSS Configured without ejecting from Create React App

Quick Start

npx create-react-tailwind-app

Project Name - Add the project name

Enter the name of the project you'd like to generate

my-app

| cra will create a new folder with the template project.

cd my-app

Follow the instructions in README.md

CRA

Add create react app globally

npm i -g create-react-tailwind-app
cra

View on GitHub