Как нанести точки на изображение с помощью react-ioni c?

Question

I am facing the issue of plotting the heatmap with dynamic points, on the image which is coming from the server-side using the heatmap.js.

using the heatmap.js with the react-ionic.

I am able to plot the points on the desktop view but I want to plot it on the mobile view.

import React from "react";
import h337 from "heatmap.js";
import Image from './road.jpg'
import './styles.css'

interface IControlAreaProps {
    location?: any;
    state?: any;
    history?: any;
}

const App: React.FC = () => {

    const handleHeatmap = () => {

        let heatmapInstance = h337.create({
            container: document.querySelector('.heatmap'),
            gradient: {
                '1': 'blue',
            },
        });

       
        let points: any = [ 

            //with these point you can see the heatmap plotted on the image
             { x: 58, y: 63, value: 80 },
             { x: 28, y: 73, value: 90 },
             { x: 98, y: 83, value: 60 }

             // but these point heat map are not ploting
            //  { x: 588, y: 625, value: 50 },
            //  { x: 828, y: 465, value: 60 },
            //  { x: 460, y: 447, value: 40}
            ];
        let data = {
            max: 100,
            min: 0,
            data: points
        };
        heatmapInstance.setData(data);

        var div: any = document.getElementById('mydiv');
        div.style.display = div?.style.display === "block" ? "none" : "block";
    }



    return (
        <>
            
                showHeatMap
                
             образ  ); }; экспортировать приложение по умолчанию; 

Я ищу решение, как построить тепловую карту на изображении, используя динамические c точки. Я попытался изменить размер холста и изображения.

, и если есть какой-либо другой способ или библиотека для построения тепловой карты на изображении, это тоже будет хорошо.