DEV Community: Y

Running Trails With Google Maps in React

Fri, 01 Jan 2021 15:26:01 +0000

Source code

Introduction

Hey! So I am a print designer. I discovered the world of web development last summer. What I find exciting in this media is two things.

How the layout is fluid. It occupies space in a different manner, changes size and colour from device to device. Or as you change the browser window size.

How you can output the data. You don't have to create charts, set circle size and so on manually. You just feed the data and tweak how to display it.

Here is another one of my projects.

The plan was to...

use public map API
output the data over the map
create a responsive layout

Main resources

The website displays a running trail with Polyline object and the trail info with InfoBox

Google Maps Javascript API official docs
Thare are lots of libraries for using Google Maps in React. I went with @react-google-maps/api
You can go winamp with your map using snazzymaps.com themes
Leigh's channel was the main reference. Google maps, Mapbox, clustering and tons of other React stuff there

Learned a thing or two in the process

So yeah, I figured out how to use Google Maps API in React
Convert GPX running tracks to GeoJSON format
Import json data to React components
Refreshed memory on importing images / using them as CSS background in React
Practiced splitting an app to components / helper functions in separate files
Created responsive layout with media queries and a burger menu

That was fun!

Known issue

The InfoBox does not appear after clicking the navigation menu and going back to the home page.

I admit that this is beyond my understanding of React / Google Maps inner mechanics at this point.

See you around! 👹

Animation with Canvas and requestAnimationFrame() in React

Thu, 10 Dec 2020 18:13:51 +0000

Hi! So I spent a couple of days trying to figure out how to use <canvas> in React.

Canvas lets you output graphics on the screen
You may use it for games like Pong or data visualization

As a result I put together a very basic app to use it as a reference in case I need it in a project. Let me go through the code briefly!

What you see on the screen

Basically the app is supposed to do three things

Output graphics on the screen
Define the movement of the box
Let you pause / resume the animation with a button

What you see in the code

Here is the source code. And the working app.

Essentially the application has three parts.

const CanvasPractice = () => {

    // get canvas
    const canvasRef = useRef()

    // set frame counter
    const [counter, setCounter] = useState(0)
    const [shouldStop, setShouldStop] = useState(true)

    // box position and speed
    const [positionX, setPositionX] = useState(165)
    const [positionY, setPositionY] = useState(165)

    const [dx, setDx] = useState(2)
    const [dy, setDy] = useState(1.5)

    const [motionType, setMotionType] = useState('Circle')

    // update the counter
    useLayoutEffect(() => {
        if (!shouldStop) {
            let timerId

            const animate = () => {
                setCounter(c => c + 1)
                timerId = requestAnimationFrame(animate)
            }
            timerId = requestAnimationFrame(animate)
            return () => cancelAnimationFrame(timerId)
        }
    }, [shouldStop])

    // output graphics
    useEffect(() => {

        const canvas = canvasRef.current
        const context = canvas.getContext('2d')

        context.clearRect(0, 0, 350, 350)

        // some code to calculate position 

        context.fillStyle = '#555555'
        context.fillRect(positionX, positionY, 20, 20)

    }, [counter])

    const changeMotionType = () => {
        if (motionType === 'Circle') {
            setMotionType('Bounce')
        } else {
            setMotionType('Circle')
        }
    }

    return (
        <div className='container'>
            <canvas ref={canvasRef} 
                width="350px" height="350px" 
                onClick={changeMotionType} 
            />
            <h3>Frame count: {counter}</h3>
            <p>Motion type is {motionType}</p>
            <button 
                onClick={() => setShouldStop(!shouldStop)}>
                { shouldStop ? 'Start' : 'Stop' }
            </button>
        </div>
    )
}

export default CanvasPractice

1. The Engine

useLayoutEffect() section serves as an engine. requestAnimationFrame() function refreshes itself roughly 60 times a second and increased the counter value. It's the main pulse of the app.

You feed the counter as a dependency to the useEffect() section causing it to refresh and update the graphics on the screen.

2. Output

In the useEffect() section you initialize the canvas.

Calculate box position for the current frame, updating positionX and positionY state.

And output it using the context.fillRect(positionX, positionY, 20, 20) method.

3. In control

The button lets you pause / resume the animation.

Then there are two modes in which the box moves. It runs in circles or bounces off the sides of the board, like it would do in a video game. You can switch the mode by clicking anywhere on the board.

So

Did you find this exploration interesting?
If you have any suggestions, let me know!

Why pressing the key works only once in my React project?

Wed, 09 Dec 2020 18:54:21 +0000

Hey there!

Could you tell me what's wrong with this code?

I have a button in my application that toggles the state.

I would like to achieve the same with pressing the spaсebar on the keyboard. And it works only one way. The state changes to false once. And then no reaction.

import { useState, useEffect } from 'react'

const HandleKeypress = () => {

    const [itWorks, setItWorks] = useState(true)

    useEffect(() => {
        document.addEventListener('keypress', (e) => {
            if (e.code === 'Space') setItWorks(!itWorks)
        })
    }, [])

    return (
        <div>
            <p>{itWorks ? 'It works!' : 'It does not'}</p>
            <button 
                onClick={() => setItWorks(!itWorks)}
            >Press me</button>
        </div>
    )
}

export default HandleKeypress

What am I missing? 😼

Need assistance with useEffect() dependencies

Sun, 06 Dec 2020 23:50:04 +0000

Hey there! So I'm trying to figure out how to use canvas element in React.

Here is how my playground looks like. Canvas element, a dot travelling around the board and a button to start / stop the animation

The Issue

The button is giving me hard time pausing and resuming the animation. When the dot stops programmatically, it takes a couple of extra clicks on the Start button to keep it moving.

I suspect it has to do with useEffect and its dependencies.

Do you think you could take a look and give me some advice?

The Code

I use requestAnimationFrame() method to update the animation.

const reqRef = useRef()
const previousTimeRef = useRef()

const animate = time => {

    // some animation

    if (previousTimeRef.current !== undefined) {
        const deltaTime = time - previousTimeRef.current
    }

    previousTimeRef.current = time
    reqRef.current = requestAnimationFrame(animate)
    // stop
    if (shouldStop) cancelAnimationFrame(reqRef.current)
}

useEffect(() => {
    // start the loop
    reqRef.current = requestAnimationFrame(animate)
    // clean up
    return () => cancelAnimationFrame(reqRef.current) 

}, [shouldStop, previousTimeRef.current])

animate() function loops itself
useEffect() starts the animation
requestAnimationFrame() method generates new reqRef value with each run
in order to stop the animation you have to use cancelAnimationFrame(reqRef.current) with the current reqRef

Approach

I use shouldStop as a key to pause the animation.

 const [shouldStop, setShouldStop] = useState(true)

<button onClick={() => setShouldStop(!shouldStop)}>

At the start it works as expected

The button flips the key
useEffect fires, as shouldStop is set as its dependency, and sets the loop

    if (positionX < 0) {
        setPositionX(290)
        setPositionY(165)
        setShouldStop(!shouldStop)
    }

When the dot bounces at the edge, the app resets its position and flips the key back to true. The dot rests in the middle of the screen.

And now when I press the button, the key switches to false yet nothing happens. After the second click key switches to true again. And only on the third time the key switches to false and the dot starts moving.

So

I guess I have three questions 😼

Is it a proper approach overall?
What am I missing about the useEffect()?
How do you trace / investigate those issues?

Feedback on my JavaScript project

Mon, 05 Oct 2020 12:22:35 +0000

Hi there!

I'm making my first steps in learning javascript.

Would you like to take a look at my practice project and provide some feedback? 🙈

I wonder what do you think about the functions and variable names.
As well as the overall structure of the app.

It displays letters on the page and lets you practice typing.

Here is the source code
https://github.com/ptifur/javascript-practice