DEV Community: Elvis2280

NextJs Leaflet + MapBox

Elvis2280 — Mon, 14 Feb 2022 05:26:31 +0000

Leaflet is an open-source library that allows us to render a map on our website where we can show data, put marks wherever we want, and a lot more things, this is so useful and cool with Mapbox because we can custom our map and make it can fit with our website color pallet palette.

Instalation

First of all, we need to install React-Leaflet, for this we'll use this on our npm

npm i leaflet leaflet-defaulticon-compatibility leaflet-geosearch react-leaflet

after this is added to our package.json we can import this to our map component, I recommend you to create a separate component for the map, something like Map.jsx and add there all the necessary code and import all the dependence we need for our map

So, in our Map.jsx let's import the next things

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

Components

MapContainer: this wrap and display our map, so we need to pass some props

center: we need to pass the latitude and longitude in an array something like [8.9880228180055, -79.52932768202]
zoom: we pass a number, more high number means more zoom
scrollWheelZoom: true or false for allowing zoom with the mouse scroll

TileLayer: this allows us to add our custom map and attribution if we want

Marker: this holds all the popup we wanna add to a point in the map

position: this is the place we wanna add the mark

Popup: We can add all the HTML labels or components around this, then display that in the popup.

Final Map's code

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
import 'leaflet-defaulticon-compatibility';
import { chakra, Flex } from '@chakra-ui/react';

const MapFooter = () => {
  const place = [8.988022628180055, -79.52932561768202];
  return (
    <div>
      <MapContainer
        center={place}
        zoom={17}
        scrollWheelZoom={false}
        style={{ width: '100%', height: '350px' }}
      >
        <TileLayer
          attribution='Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>'
          url="https://api.mapbox.com/styles/v1/**YOUR_USER_NAME**/**YOUR_STYLE_TOKEN**/tiles/256/{z}/{x}/{y}@2x?access_token=**YOUR_ACCESS_TOKEN**"
        />
        <Marker position={place}>
          <Popup className="mapBtn">
            <Flex flexDir={'column'} alignItems="center">
              <chakra.p fontWeight={'bold'} fontSize="lg">
                Anubis
              </chakra.p>
              <chakra.a
                target={'_blank'}
                href="https://goo.gl/maps/3bqJp4NzEiQU86ai6"
                bg={'primary.900'}
                textDecor={'none'}
                p="2"
                rounded={'base'}
                style={{ color: 'orange !important' }}
                _hover={{
                  bg: 'primary.400',
                }}
              >
                Google Maps
              </chakra.a>
            </Flex>
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
};

export default MapFooter;

Fix NextJs problem with Leaflet

The leaflet is made without thinking about SSR so it works with the windows object is not defined when the SSR start preparing our components for render the website, this will make you have an error like windows is undefined for fix this we need to use something we can find in the nextjs documentation
then in the component we wanna add our map component, we have to import it with a dynamic function is made by nextjs
is something like this

const MapLealfet = dynamic(() => import('../MapFooter/MapFooter'), {
  ssr: false,
});

with this, your map should work fine now :)

Custom Map with MapBox

How maybe you realize in the URL of our TileLayer have a direction with names like YOUR_USER_NAME, YOUR_STYLE_TOKEN and YOUR_ACCESS_TOKEN this is because you need to add this information using your MapBox's account, so go to MapBox and create your account

When you access your account you should see something like this

then after that let's create a new style, click that button and you should see something now like this

here you can choose the style you prefer and after that you can even custom more that like change the street color, bus street color etc.

is something like this

now enter to your account that will show you a dashboard with tokens, I recommend you to create a Token per map you wanna use then it will work separately and can skip some future problems

so the final part is to come to our styles section and click on the share icon of the style we wanna use, which will show this

here we have
our username, our style token and you can use the access token we create for the map in our account section.
so add that information in the TileLayer URL --> url="https://api.mapbox.com/styles/v1/**YOUR_USER_NAME**/**YOUR_STYLE_TOKEN**/tiles/256/{z}/{x}/{y}@2x?access_token=**YOUR_ACCESS_TOKEN**"

Final

So here you should have a custom map cool can fit perfectly in your website design with the ability to add icons and the directions we need, and show different data we need, there is not limit for your creativity

Thank u for read this article and give me some of your time, feel free to visit my website if you want :)
Happy Code!

Scroll reveal with Framer Motion

Elvis2280 — Sun, 22 Aug 2021 02:01:04 +0000

Framer Motion is a library for creating awesome animations on React in an easy and fast way, it let us create simple or complex animation with components and set values like props, we're familiar with React. Something I really like about Framer motion is how we can make animations without expending time creating a CSS file and setting up everything this allows us to create something really awesome in a short period of time.

In this blog I'll show you how u can implement a Scroll reveal animation with framer motion, you'll be surprised how much easy it will be.

I'll use React-Interception-Observer to control the screen events you can check the documentation if you wanna know more.

Of course, you can create a React custom Hook to control the intersection in the screen or also use vanilla js with Intersection Observer API but in this case, I wanna show a small React library that let us control intersection in react easy and fast.

Installing necessary libraries

First lets to install the libraries for our project

npm install react-intersection-observer --save
npm install framer-motion

I'll create a Box component just to animate it and show it while we scroll down, but you can use any component or element for example a card, title, etc... you have in your application

React-Interception-Observer library

Now let's import React-Interception-Observer library to our component taking useInView hook

and now we have to use the useInView hook and distructure it like this
const {inView, entry, ref} = useInView();
InView tells us with a false or true when the element is on the screen view, entry is the information between the root and the component is like the different status it has while we scroll down
and ref is for the DOM element we wanna observe

Right now it should look like

import {useInView} from "react-intersection-observer";
const Box = ({text}) => {

  const {inView, entry, ref} = useInView();
  return (
    <div ref={ref}>
    {text} 
    </div>
  )
}
export default Box;

Animation with Framer motion

Then now let's start the animation part, We'll do the next steps

Import framer motion to our component
use motion component
create an initial animation
use framer motion useAnimation hook
start the animation when inView is true

import { motion, useAnimation } from "framer-motion";

<div ref={ref}>
    <motion.div

      initial={{
        x: "100vw"
      }}
      animate={animationControl}
      className="box"
    >
      {text}
    </motion.div>
    </div>

First, we import motion and useAnimation from our library Framer-motion.
In this case, we have to use a

like container to let our website know where's the element we're animating if we don't use a container in our first animation when we use a transformX 100vw it will disappear from our screen view and our website will not know when is the moment to fire the animation because don't find any element with ref in our viewport, then in the container we'll put our ref for following that element.

Motion component

motion component lets us create our animation through props, we can create any motion component from HTML labels.

for example motion.a, motion.div, motion.main, motion.p etc...
We have different props for these components, I invite you to check documentation for know more about it.
in this example, we'll use animate and initial.

Motion initial prop

initial is from where we want our component to start to do the animation, in this case, we wanna our component to start from 100vw to make it disappear in the right X corner.

Tip: check your container that holds all the app elements have a overflow-x: hidden to avoid your website is broken because the elements are over the screen view waiting to be a fire

Motion control animation

well... everything looks fine but how we'll fire our elements because now it disappears and that's not our objective right ?.
Here is where useAnimation hook comes to help us, it allows us to start or stop our animation and it's exactly what we're looking for.

first, we need to create a variable for saving the object that comes from the hook

 const animationControl = useAnimation();

you can use any name u want, this will let us control our animation
and now we can do something simple like this

if (inView) {
    animationControl.start({
      x: 0,
      transition: {
        delay: 0.7,
      }
    });
  }

this means if inView is true (element is on our viewport) then we'll call our control method to start the animation we want, in this case, make the element comeback at x: 0, it means to come back to the initial position where this should be

I add a delay to 700ms for don't fire it immediately then the user can enjoy more of the animation watching the element completely.

Motion animate prop

finally, we have to show or fire the animation, we created a control that will only allow firing the animation when it's in the viewport but to show or run that animation we need to use the animate prop it gets an object with the property we want, in this case, we'll use animationControl who have the object we set in the previous step.

the final code should look like

Result

I hope this was useful for you :), feel free to check my personal website have a great day Happy Code 🧑🏻‍💻

Help, how to organize or to create a study plan

Elvis2280 — Tue, 13 Oct 2020 22:21:11 +0000

Hello, I'm curious about how other developments organize the time for study, I'm in the university but I have a problem, when I study CSS or javascript I expending all my day on that, I just can't stop, I feel I need have control or balance about my study. I hope someone can help me with ideas :)

What's the front-end rol

Elvis2280 — Tue, 13 Oct 2020 01:07:19 +0000

Hello, I have a small project I don't have so much experience just 7 months how front end, but my question is, I knot HTML is for structure and CSS design, but I also know JavaScript is so important just I don't understand in what situation front-end use JS, I have to do a filter bottom for cost and games category but I wonder if it's a front end role or back end, Honestly I don't understand so much difference roles (what I should do and learn and what no). thank you so much for helping me :)