Category: javascript

Category Added in a WPeMatico Campaign

Javascript (React) not dynamically displaying collection

I’m trying to create a basic multi-stage web form in Javascript. I wanted to accomplish this kind of like the forms section of Full Stack Open, by creating a collection (an array) of questions, then displaying them as labels on my web page, filtered so that only the appropriate ones appeared at certain times. For example, when you first visit the page, it would say “The next few questions will assess your budget situation”, then after pressing start – it would transition to the first question, then pressing next, to the second, and so on.

I thought I accomplished this the correct way, by displaying the filtered collection (phase is initialized to 0 outside of the app):

 const questionPhase = () => {
      
        if (phase < 3){
            phase = phase + 1;
      
        }
            
        else if(phase == 3){
            phase = 0;
            addToBudget(attribute);              
        }
        console.log(phase);
         
}
 return (
    <div>
        <h3> Please answer some questions to start</h3>
        <ul>
            {questions.filter(question => question.phase === phase).map(question =>
                { < label > {question.script} 
                <input type="text"
                question = {question.attribute}
                value={question.attribute}
                onChange={handleInput}
                />
                </label>})}
        </ul>
        <button onClick={questionPhase}> {phase === 2 ? 'Next' : 'Submit'} </button>
    </div>
)

I’ve done some logging and determined that phase actually is changing every time I press the button at the bottom. But what doesn’t happen, is either the questions (and labels) displaying, or the lettering on the buttons changing.

I’m not sure what I’ve done wrong? I’m certain there’s some subtle aspect of the control flow I’ve missed but I don’t know what – I figured that, as explained in FSO, the app is continually being run through every time there’s a change by pressing a button or something, which should be the event created by the button press.

Thank you in advance for any help

appendix: here is the questionsList class (from which questions is imported) and the event handler:


        import React from 'react'
    
    const questions = [
    
        {
            phase: 1 ,
            script: 'What is your monthly income?',
            attribute: "income"
        },
        
        {
            phase: 2,
            script: 'what are you monthly expenses?',
            attribute: "expenses"
        }
    ]
    
    export default questions


const handleInput = (event) => {
    const value = event.target.value;
    console.log('valued!')
    setAttribute({
        ...attribute,
        [event.target.question]: value
    })

}

Pre-select option in dropdown menu with URL

I’m working with this code snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// <![CDATA[
 $(document).ready(function() {
  // Parse your query parameters here, and assign them to a variable named `queryParams`
  var option = queryParams.type;
  $("#GCValue").val(option);
 });
 // ]]>
</script>

I don’t have a lot of latitude with how I can affect the page, this is in the <body> section of the page, since I don’t have access to the <head> tag.

I have this form:

<select id=GCValue>
  <option val="10">10</option>
  <option val="25">25</option>
  <option val="50">50</option>
  <option val="100">100</option>
  <option val="250">250</option>
</select>

and I would like to use the URL of the page to select one of these five options (currently default is 10). I think it’s supposed to be either https://www.mywebsite.com/gift-card/?type=2 or https://www.mywebsite.com/gift-card/?GCValue=2 but neither work. I’m pretty new to JS and JQuery, so I know I have to be doing something wrong. Any help appreciated.

Navbar Won’t collapse on mobile version

Navbar doesn’t drop down and show the options on the mobile version. I am trying to figure out how to get it to work, but no luck.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>COS Gym</title>
<link href="cos-gym.css" rel="stylesheet" type= "text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header >
<div class="container">
  <nav font-size="120%" margin-left="30%" margin-top="8%" class="navbar navbar-expand-lg navbar-light">
    <a href="#" text-decoration="none" padding="4%" class="navbar-brand">
      <div class="logo">
        <img src="images/logo_gym.png">
      </div>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="#toggleMobileMenu">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-center justify-content-end">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="about.html">About</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="schedule.html">Schedule</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="online.html">Online</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="shop.html">Shop</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="contact.html">Contact</a></li>
      </ul>
    </div>
 </nav>
</div> 
</header>
<main>
<div class="imghome">
  <img src="images/home.jpg">
  <div class="title-home"><h>COS GYM</h>
  <a href="login.html"><button class="btn-1">Log in</button></a>
  <a href="registration.html"><button class="btn-2">Sign up</button></a></div>
<div class="three-images">
<figure>
  <img src="images/main1.jpg">
<figcaption class="f1">Zumba Dance</figcaption>
</figure>
<figure>
<img src="images/main2.jpg">
<figcaption class="f2">Power Training</figcaption>
</figure>
<figure>
<img src="images/main3.jpg">
<figcaption class="f3">Yoga Fitness</figcaption>
</figure>
</div>
</main>
<footer>
  <div>
    <ul>
     <dt>Email Us</dt>
     <dt>[email protected]</dt>
    </ul>
  </div>
   <div>
     <h3>Welcome to ChrisOlySim Gym</h3>
     <h4>Contact Us 989-888-9999</h4>
   </div>
   <div>
    <ul>
     <dt>Follow Us</dt>
     <dt><i class="fab fa-facebook-f"></i>
      <i class="fab fa-instagram"></i>
      <i class="fab fa-twitter"></i>
    </dt>
    </ul>
    </div>
    </footer>
    <script src="https://kit.fontawesome.com/42ca52e1de.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

Also ms-auto doesn’t seem to work either, and when I try to change the size of the text, it refuses to grow past a certain point. Can I get help please? I’ve tried switching the order of the scripts that run, I’ve tried running it with JQuery, I’ve tried everything. The only time I see the options is when I use the container-fluid class, but since I can’t hide the options when I do that on the mobile version, there’s no point. How do I get this to work?

How to make a pop-up if multiple conditions are satisfied

Is there a way for a pop-up to appear when all divs got ‘onmouseovered’?

function moveOver(obj)
            {
                obj.innerHTML = "POP!!!"
                obj.style.color = "#ff0000"
                obj.style.background = "transparent"
                if ()
                {
                    alert("There is no circles left!")
                }
            }

I basically have 12 circles that pop when you move your mouse over them, is there a way to make a pop-up that says “There is no circles left!” after I hover over the 12th circle?

Getting error (importSource cannot be set when runtime is classic) when running Quokka.js with CRA and Emotion using css prop

I’m trying to run Quokka (enterprise) on a javascript file that has a JSX pragma comment

/** @jsxImportSource @emotion/react */

at the top of the file and I am getting the error:

SyntaxError: ./src/components/LoadingButton.js: importSource cannot be set when runtime is classic. 
> 1 | /** @jsxImportSource @emotion/react */ 
    | ^ 

Here are the docs for the CSS prop that includes the need for the import source comment: https://emotion.sh/docs/css-prop#jsx-pragma

It is worth noting that the app runs fine with this configuration below, however, Quokka’s output keeps showing the error. If I remove the JSX pragma comment and the CSS import, Quokka is able to run a file.

LoadingButtonl.js (example file that I am running Quokka on)

// Libraries
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Fade from '@mui/material/Fade';

const loadingButtonStyles = css`
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;

    .button-progress {
        position: absolute;
    }
`;

const LoadingButton = ({ isButtonLoading, ...props }) => {
    return (
        <div css={loadingButtonStyles}>
            <Button {...props}>{props.children}</Button>
            {isButtonLoading && (
                // this acts as a delay for the spinner so it doesn't spin as soon as the user clicks the button
                <Fade in style={{ transitionDelay: '800ms' }} unmountOnExit>
                    <CircularProgress className="button-progress" />
                </Fade>
            )}
        </div>
    );
};

LoadingButton.propTypes = {
    children: PropTypes.any,
    isButtonLoading: PropTypes.bool
};

export default LoadingButton;

.babelrc

    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ],
    "plugins": [
        [
            "i18next-extract",
            {
                "discardOldKeys": true,
                "outputPath": "public/locales/{{locale}}.json"
            }
        ],
        ["@babel/proposal-class-properties", { "loose": true }],
        ["@babel/proposal-private-methods", { "loose": true }],
        ["@babel/proposal-private-property-in-object", { "loose": true }],
        ["@babel/proposal-object-rest-spread", { "loose": true }]
    ]
}

package.json

    "name": "order-customizer-ui",
    "version": "0.1.0",
    "private": true,
    "default": "order-customizer-ui.js",
    "dependencies": {
        "@emotion/react": "^11.5.0",
        "@emotion/styled": "^11.3.0",
        "@mui/icons-material": "^5.0.4",
        "@mui/lab": "^5.0.0-alpha.51",
        "@mui/material": "^5.0.4",
        "@mui/styles": "^5.0.1",
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "fs": "^0.0.1-security",
        "graphql-hooks": "^5.1.3",
        "i18next": "^20.2.4",
        "i18next-browser-languagedetector": "^6.1.1",
        "i18next-http-backend": "^1.2.4",
        "js-cookie": "^3.0.1",
        "jwt-decode": "^3.1.2",
        "lodash": "^4.17.21",
        "react": "^17.0.2",
        "react-color": "^2.19.3",
        "react-dnd": "^14.0.2",
        "react-dnd-html5-backend": "^14.0.0",
        "react-dom": "^17.0.2",
        "react-error-boundary": "^3.1.3",
        "react-i18next": "^11.8.15",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "unzipper": "^0.10.11",
        "uuid": "^8.3.2",
        "web-vitals": "^1.0.1"
    },
    "devDependencies": {
        "@babel/cli": "^7.14.3",
        "@babel/core": "^7.14.3",
        "@babel/eslint-parser": "^7.14.3",
        "@babel/node": "^7.14.2",
        "@babel/preset-env": "^7.14.2",
        "@babel/preset-react": "^7.13.13",
        "@emotion/eslint-plugin": "^11.2.0",
        "@parcel/transformer-image": "^2.0.0-rc.0",
        "@storybook/addon-actions": "6.3.12",
        "@storybook/addon-essentials": "^6.3.12",
        "@storybook/addon-links": "6.3.12",
        "@storybook/addon-storysource": "6.3.12",
        "@storybook/node-logger": "6.3.12",
        "@storybook/preset-create-react-app": "3.1.7",
        "@storybook/react": "6.3.12",
        "babel-plugin-i18next-extract": "^0.8.3",
        "eslint": "^7.26.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-react": "^7.23.2",
        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": "^7.0.0",
        "jsdoc": "^3.6.7",
        "parcel": "^2.0.0-rc.0",
        "prettier": "^2.3.0",
        "storybook-addon-designs": "^6.2.0",
        "uuid": "^8.3.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "npm run build:translations && npm run build:parcel${PARCEL_ENV} && npm run build:storybook && scripts/postbuild.sh",
        "build:react": "react-scripts build",
        "test": "react-scripts test --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
        "test:no-watch": "react-scripts test --watchAll=false --testPathIgnorePatterns src/__tests__/integrationTestHelpers/*",
        "doc": "jsdoc -c jsdoc.json",
        "eject": "react-scripts eject",
        "build:parcel-dev": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js --no-optimize && rm src/order-customizer-ui.js",
        "build:parcel": "cp src/index.js src/order-customizer-ui.js && parcel build src/order-customizer-ui.js && rm src/order-customizer-ui.js",
        "build:translations": "npm run updateLanguageKeys && npm run updateLokalise && npm run downloadLokalise",
        "updateLanguageKeys": "rm -rf public/locales/en.json && npx babel -f .babelrc 'src/**/*.{js,jsx}'",
        "mockNonEnglishKeys": "node ./src/util/mockNonEnglishKeys.js",
        "updateLokalise": "node ./src/util/updateLokalise.js",
        "downloadLokalise": "node ./src/util/downloadLokalise.js",
        "storybook": "start-storybook -p 6006 -s public",
        "build:storybook": "build-storybook -s public --quiet",
        "prepare": "husky install"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ],
        "overrides": [
            {
                "files": [
                    "**/*.stories.*"
                ],
                "rules": {
                    "import/no-anonymous-default-export": "off"
                }
            }
        ]
    },
    "browserslist": [
        "since 2017-06"
    ],
    "quokka": {
        "babel": true
    }
}

.eslintc

    "extends": ["prettier", "eslint:recommended", "plugin:react/recommended"],
    "plugins": ["@emotion", "react", "react-hooks"],
    "parser": "@babel/eslint-parser",
    "env": {
        "browser": true,
        "commonjs": true,
        "jest": true,
        "node": true,
        "es6": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "rules": {
        "curly": "warn",
        "react/jsx-uses-react": "off",
        "react/react-in-jsx-scope": "off",
        "no-console": ["warn", { "allow": ["error"] }],
        "react/display-name": "off",
        "quotes": ["warn", "single", { "avoidEscape": true }],
        "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
        "react/no-unescaped-entities": 0,
        "react/no-render-return-value": "off",
        "no-unused-vars": "warn",
        "react/prop-types": "warn"
    }
}

Hidden row/columns can be seen in table cell border-spacing CSS

I have a table with fixed x number of top rows and y number of left columns.

Like : https://jsfiddle.net/26m75fge/11/

CSS :

div {
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;
 
}

table {
  position: relative;
  border-collapse: collapse;
}

td,
th {
  padding: 0.25em;
  border: 0.25em solid white;
}

thead tr:nth-child(1) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0.25em;
  background: #000;
  color: #FFF;
  z-index: 2;
}

thead tr:nth-child(2) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 2em;
  background: #000;
  color: #FFF;
  z-index: 2;
}

thead th:first-child {
  left: 0;
  z-index: 1;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;
}

HTML :

  <table>
    <thead>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
    ....
      </tr>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
 ....
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
       .....
      </tr>
    </tbody>
  </table>
</div>

However, when I scroll my other cells I can see the “Hidden” rows in the background/ border-spacing of the table. (See: cells in border spacing)

Is there a way using CSS/JS to hide these make the border so that these cells dont show up once they are scrolled?

cells in border spacing

Highlight country once selected with dropdown D3

I have a map of Africa which I loaded using D3 which features several columns including a column named ADMIN which features each country’s name. I’m trying to highlight the country on my map that is selected in my dropdown. For example if I select Algeria in my drop down, Algeria will highlight on my map. The map itself loads fine as well as the dropdown. I’m just having trouble coordinating the interaction between the dropdown function and the highlight function so that the selected country actually highlights.


//begin script when window loads
window.onload = setMap();

var attrArray = ["Algeria","Angola","Benin"];

  var expressed = attrArray[0];



//set up  map
function setMap(){
  //map frame dimensions
  var width = 1200,
      height = 1000;





  //create new svg container for the map
  var map = d3.select("body")
      .append("svg")
      .attr("class", "map")
      .attr("width", width)
      .attr("height", height);

  //create Albers equal area conic projection centered on France
  var projection = d3.geoOrthographic()
    .scale(600)
    .translate([width / 2, height / 2.7])
    .clipAngle(85)
    .precision(.1);



    var path = d3.geoPath()
      .projection(projection)



    var graticule = d3.geoGraticule()
             .step([5, 5]); //place graticule lines every 5 degrees of longitude and latitude

         //create graticule background
    var gratBackground = map.append("path")
             .datum(graticule.outline()) //bind graticule background
             .attr("class", "gratBackground") //assign class for styling
             .attr("d", path) //project graticule

    var gratLines = map.selectAll(".gratLines")
            .data(graticule.lines()) //bind graticule lines to each element to be created
            .enter() //create an element for each datum
            .append("path") //append each element to the svg as a path element
            .attr("class", "gratLines") //assign class for styling
            .attr("d", path); //project graticule lines


    //use queue to parallelize asynchronous data loading
    d3.queue()
      .defer(d3.csv, "data/AfricaCountries.csv") //load attributes from csv
      .defer(d3.json, "data/world.topojson") //load background spatial data
      .defer(d3.json, "data/Africa.topojson")
      .await(callback);

function callback(error, csvData, world, africa){
  //translate europe TopoJSON
        var basemapCountries = topojson.feature(world, world.objects.ne_10m_admin_0_countries),
              africaCountries= topojson.feature(africa, africa.objects.ne_10m_admin_0_countries).features;


         //select graticule elements that will be created
        //add Europe countries to map
        var countries = map.append("path")
          .datum(basemapCountries)
          .attr("class", "countries")
          .attr("d", path);

  //add Africa countries to map
            var regions = map.selectAll(".regions")
              .data(africaCountries)
              .enter()
              .append("path")
              .attr("class", function(d){
                return "regions " + d.properties.ADMIN;
              })
              .attr("d", path);

        createDropdown(csvData);





    };

    function createDropdown(csvData){
        //add select element
        var dropdown = d3.select("body")
            .append("select")
            .attr("class", "dropdown")
            .on("change", function(){
              highlight(d.properties);
            });


        //add initial option
        var titleOption = dropdown.append("option")
            .attr("class", "titleOption")
            .attr("disabled", "true")
            .text("Select Country");

        //add attribute name options
        var attrOptions = dropdown.selectAll("attrOptions")
            .data(attrArray)
            .enter()
            .append("option")
            .attr("value", function(d){ return d })
            .text(function(d){ return d });
    };

    //function to highlight enumeration units and bars
 function highlight(props){
     //change stroke
     var selected = d3.selectAll("." + props.ADMIN)
         .style("stroke", "blue")
         .style("stroke-width", "2");
 };


};

How to add dynamic or changable files as assets in pkg nodejs

I have added folders as assets to pkg for creating exe file.
The jsonfiles folder contains json files and I want to change the values of these json files and when changed should reflect in frontend.
The jsonfiles folder always displays the value which was present during compilation, I want to make these assets dynamic(i.e,json file changes should reflect on frontend)

"pkg": {
    "assets":  [  "public/**/*", "jsonfiles/**/*" ],
    "targets": ["node14-win-x64" ]
  },

SwiperJS breakpoint pagination issue

I’m creating a swiper slider using the SwiperJS library. On Desktop, I’d like to show custom pagination and on mobile, I’d like to set the pagination type to “bullets”. The issue is that the pagination type doesn’t change when I resize my browser until I manually refresh the page. Any help would be greatly appreciated. Here’s the code:

HTML:

<div class="swiper">
  <div class="swiper-wrapper">
    
    <div class="swiper-slide">
      <p>slide 1</p>
    </div>
    
    <div class="swiper-slide">
      <p>slide 2</p>
    </div>
    
  </div>
  
  <div class="swiper-pagination"></div>
</div>

JS:

let mySlider = new Swiper('.swiper', {
      
      slidesPerView: 1.1,
      spaceBetween: 10,
      observer: true,
      observeParents: true,

      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type: 'bullets'
      },
      
      breakpoints: {
        768: {
          pagination: {
            type: 'custom',
            renderCustom: function (swiper, current, total) {
              return current + ' - ' + total
            }
          }
        }
      },

      on: {
        breakpoint: function (swiper) {
          swiper.update()
          // Also tried swiper.destroy(), swiper.pagination.init() and swiper.init()

        }
      },
      
    })

convert php array to a javascript array in this particular case: component is a string, recipes is also a string in the format “”recipe1″,”recipe2″”

this is what I did. The following code creates a php arrray with component as id ajnd recipes as values. An example is at component “vodka”(string) we have recipes(“”recipe1″,”recipe2″”recipe3″”) the recipes are also in a format of a string. The array is $menuThings

[1]: https://i.stack.imgur.com/PJrU1.png

How to fix This page can’t load Google Maps correctly. Do you own this website?

I am creating an web app with ReactJS & there I have to use Google Map to show some data from NASA API

Project Info

  • I have created no billing free API Key on Google Developer
  • I have created .env on my React project & use with `process.env.REACT_APP_API_KEY
  • I have installed & imported google-map-react

API Info

  • I have enable JavaScript Map API
  • App restriction selected `HTTP referrers(web sites)
  • Website restriction set
*localhost:3000
http://localhost:3000
  • API restriction
    • Restrict Key -> Map JavaScript API

Problem

  • I have clear cached & cookies & restart server many times but it show me

This page can’t load Google Maps correctly. Do you own this website? For development purposes only

Code

import GoogleMapReact from 'google-map-react'
import '../style/index.css'

const Map = ({ center, zoom }) => {
    return (
        <div className='map'>
            <GoogleMapReact
                bootstrapURLKeys={{
                    key: process.env.REACT_APP_API_KEY
                }}
                defaultCenter={center}
                defaultZoom={zoom}
            >

            </GoogleMapReact>
        </div>
    )
}
Map.defaultProps = {
    center: {
        lat: 42.3265,
        lng: -122.8756
    },
    zoom: 3
}

export default Map

CORS Request to S3 Accepted for File Display but Not for Load by Javascript Library

I’m developing a small javascript browser script that retrieve files from S3.

I can display the images without any issue after requesting a SignedUrl to S3. I also updated the CORS policy on S3:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

However when I want to use the same URL to extract the EXIF data (using ExifReader), I get an error message about CORS policy:

Access to fetch at '*SIGNEDURL*' from origin 'null' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.

I don’t understand the difference in the behaviour of both. Can someone help?

Thank you