google-maps-react | Companion code to the `` How to Write a Google Maps React | REST library
kandi X-RAY | google-maps-react Summary
Support
Quality
Security
License
Reuse
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
google-maps-react Key Features
google-maps-react Examples and Code Snippets
Trending Discussions on google-maps-react
Trending Discussions on google-maps-react
QUESTION
SparkNotes:
I'm pulling in a crime API to see hotspots. Certain crimes will not be logged with a lat/long, therefore, are not shown up in standard (free) crime apps.
- Lat/Long pins I've overridden to a new lat/long don't show up on first load/or at all. (google-maps-react) (Confirmed lat/long is valid per crimes in near areas.)
- Normal pins that had an existing lat/long show up fine/show up as soon as it loads. (Even though it's all the same array of data.)
- I loop through the blank lat/long and replace the lat/long with a rough lat/long of the area just so it shows up. In my console log I can confirm that I've overriden the blank lat/long.
- I want these records to understand the neighborhoods/potentially avoid moving into a hotspot of specific crimes.
API Normal:
https://data.seattle.gov/resource/tazs-3rd5.json?$limit=20000&$offset=20000&$order=offense_id
Full Use Case (Which doesn't work for at all pins): https://data.seattle.gov/resource/tazs-3rd5.json?crime_against_category=PERSON&mcpp=MAGNOLIA&offense_parent_group=SEX%20OFFENSES
Request for help: Can someone please help on how to get these overridden pins to show up consistently?
Things I've Tried: Force update/having multiple refreshes etc/decreasing async time. Those work for when I put in specific crime report number, but if I search for kidnapping/peeping tom, they will not pull with the rest of the person crimes.
I can confirm that if I just load every crime in that API, the map logs all of them (except the ones I need), It's like a pin per foot of street, but the pins in the categories I need don't show up. (So I don't believe it's a volume issue.)
Code for API Data:
const endpoint = 'https://data.seattle.gov/resource/tazs-3rd5.json?$where=report_number%20in(%272020-022388%27,%272020-044620%27)'
const originalplaces = [];
const places = []
fetch(endpoint)
.then(blob => blob.json())
.then(data => originalplaces.push(...data));
async function returnTrue() {
// create a new promise inside of the async function
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve(true), 1000) // resolve
});
// wait for the promise to resolve
let result = await promise;
// originalplaces.mcpp === 'MAGNOLIA' && originalplaces.longitude == '0E-9' && originalplaces.longitude.replace("0E-9", "-122.385973723")
// originalplaces.forEach(function(mcpp, i) { if (mcpp == 'MAGNOLIA') originalplaces[i] = '47.649387230'; });
originalplaces.map(object => {
if (object.mcpp === 'MAGNOLIA' && object.longitude === '0E-9' && object.latitude === '0E-9')
{ object.longitude = "-122.391970804"
object.latitude = "47.63103937"
}
})
places.push(...originalplaces)
console.log(places)
// console log the result (true)
console.log(result);
}
// call the function
returnTrue();
export default originalplaces;
Code for Map
import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import places from './crimedata.js'
class MapView extends Component {
constructor(props) {
super(props)
this.state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
};
this.handleMarkerClick = this.handleMarkerClick.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleMarkerClick = (props, marker, e) => {
this.setState({
selectedPlace: places[props.placeIndex],
activeMarker: marker,
showingInfoWindow: true,
});
};
handleClose = () => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
{places.map((place, i) => {
return (
);
})}
{this.state.selectedPlace.offense}
{'Crime: ' + this.state.selectedPlace.offense_parent_group}
{'City: ' + this.state.selectedPlace.mcpp}
{'Report Date: ' +this.state.selectedPlace.report_datetime}
{'Report Number: ' + this.state.selectedPlace.report_number}
);
}
}
export default GoogleApiWrapper({
apiKey: process.env.REACT_APP_GOOGLEMAPS
})(MapView);
Screenshots:
Last Notes: I have overrides for all the cities, which is why you see 4 pins, in my screenshot, but code only has override for one city, if I include all, it's really long.
ANSWER
Answered 2021-Apr-27 at 03:04It seems that there's a timing issue when importing your places data from crimedata.js in the first load of the code. I can see that the places value is empty [] in the initial run then the loading of your places in your crimedata.js will follow after some time. You can see this in the console log in my working code.
To handle this, I used state variables to hold the value of the updatedPlaces data then in componentDidMount function, I used setTimeOut and set value of updatedPlaces state variable from the imported places data that is now available.
I then used this state variable as a condition for the markers to load.
Here's the code snippet:
import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import places from "./crimedata.js";
console.log("upon importing crimedata.js");
console.log(places);
class MapView extends Component {
constructor(props) {
super(props);
this.state = {
updatedPlaces: null,
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
};
this.handleMarkerClick = this.handleMarkerClick.bind(this);
this.handleClose = this.handleClose.bind(this);
}
componentDidMount() {
//console.log(places);
setTimeout(() => {
this.setState({
updatedPlaces: places
});
console.log("timeOut in componentDidMount");
console.log(this.state.updatedPlaces);
}, 1000);
}
handleMarkerClick = (props, marker, e) => {
this.setState({
selectedPlace: places[props.placeIndex],
activeMarker: marker,
showingInfoWindow: true
});
};
handleClose = () => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
{this.state.updatedPlaces != null &&
this.state.updatedPlaces.map((place, i) => (
))}
{" "}
{this.state.selectedPlace.offense}
{"Crime: " + this.state.selectedPlace.offense_parent_group}
{"City: " + this.state.selectedPlace.mcpp}
{"Report Date: " + this.state.selectedPlace.report_datetime}
{"Report Number: " + this.state.selectedPlace.report_number}
);
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_API_KEY"
})(MapView);
QUESTION
I'm currently attempting to use Chart.js within my react application but when I go to build my application I'm presented with this error
ERROR in ./node_modules/chart.js/dist/chart.esm.js
Module parse failed: D:\MyApp\node_modules\chart.js\dist\chart.esm.js Unexpected token (6613:12)
You may need an appropriate loader to handle this file type.
| if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {
| decimated.push({
| ...data[intermediateIndex1],
| x: avgX,
| });
@ ./src/imports/Dashboard/Dashboard.js 21:12-31
@ ./src/App.js
@ ./src/index.js
@ multi babel-polyfill ./src/index.js
I tried researching online to see if anyone else has had the same issue, but I had no luck.
Below is my Webpack config file:
const path = require('path');
module.exports = {
entry: ['babel-polyfill', './src/index.js'],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},{
test: /\.(jpe?g|png|gif|svg|mp3)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true
}
};
And here is my bablerc file
{
"presets": [
"env",
"react",
"stage-0"
],
"plugins": [
"transform-class-properties"
]
}
This is the list of my dependencies that are installed
"dependencies": {
"@babel/polyfill": "^7.0.0",
"aws-sdk": "^2.580.0",
"axios": "^0.19.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"chart.js": "^3.1.0",
"core-js": "^2.5.3",
"css-loader": "0.28.4",
"express": "latest",
"file-loader": "^1.1.5",
"google-maps-react": "^2.0.2",
"image-webpack-loader": "^3.4.2",
"immutability-helper": "^2.4.0",
"jquery": "^3.4.1",
"jsbarcode": "^3.11.0",
"jsonwebtoken": "^8.1.0",
"lodash": "^4.17.14",
"moment": "^2.22.2",
"node-sass": "^4.12.0",
"node-schedule": "^1.3.2",
"nodemailer": "^4.7.0",
"normalize.css": "7.0.0",
"npm": "^6.10.0",
"papaparse": "^5.1.1",
"promise-mysql": "^3.1.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-csv": "^1.0.14",
"react-dom": "^16.0.0",
"react-router-dom": "4.2.2",
"react-scripts": "1.0.14",
"sass-loader": "6.0.6",
"socket.io": "^2.0.3",
"style-loader": "0.18.2",
"twilio": "^3.24.0",
"validator": "8.0.0",
"webpack": "3.1.0",
"webpack-dev-server": "2.5.1"
},
I expected the error to tell me what loader I needed to install to use with Chart.js but it does not specify. If anyone knows which loader I need to install and where I should put it in my files that would be awesome. TIA!
ANSWER
Answered 2021-Apr-22 at 11:31Chart.js version 3 is not compatible. Change it to ^2.9.4. The same problem as you and I have been solved.
QUESTION
I try to add InfoWindows to the markers of my map (using google-maps-react) but it doesn't work and I don't understand why. The state receives the longitude and latitude data.
const InfoPage = ({data}) => {
const [selectedElement, setSelectedElement] = useState(null)
return (
{data.map((element, index) => {
return (
{setSelectedElement(element)}}
/>
)})}
{selectedElement ? (
{setSelectedElement(null)}}
>
info
) : null }
);
}ANSWER
Answered 2021-Mar-04 at 02:04Since you will be clicking the Marker for the InfoWindow to show, you can use the InfoWindow's marker parameter instead of position parameter. You also need to use the InfoWindow's visible parameter and set it to true for it to show. You can check this simple code how I did it(I just used data from json file). Code snippet below:
import React, { useState } from "react";
import { Map, GoogleApiWrapper, Marker, InfoWindow } from "google-maps-react";
import data from "./data.json";
const InfoPage = () => {
const [selectedElement, setSelectedElement] = useState(null);
const [activeMarker, setActiveMarker] = useState(null);
const [showInfoWindow, setInfoWindowFlag] = useState(true);
return (
{data.map((element, index) => {
return (
{
setSelectedElement(element);
setActiveMarker(marker);
}}
/>
);
})}
{selectedElement ? (
{
setSelectedElement(null);
}}
>
{selectedElement.name}
) : null}
);
};
QUESTION
I have tried to add google map to my project and everything works good but i have following warning in my console but don't know why and how to fix it.
"Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
- Move data fetching code or side effects to componentDidUpdate.
- If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
Please update the following components: Wrapper"
Below is my code:
import React from 'react'
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
const Location = (props) => {
const mapStyles = {
width: '60%',
height: '60%'
}
const {google} = props
return (
Znajdź nas!
);
}
export default GoogleApiWrapper({
apiKey: ('MY_TOKEN')
})(Location)
ANSWER
Answered 2020-Nov-26 at 16:56It's a problem in the current version of google-maps-react and React's strict mode. See: https://github.com/fullstackreact/google-maps-react/issues/476
You probably shouldn't disable strict mode, so you'll have to either fix the library yourself or wait for someone to do that, then upgrade.
QUESTION
very new to react. I'm using google-maps-react-api. I have two files. Index.js and MapMarker.js. It loads a few location points with info windows already loaded. I can close the window but when clicking on the marker they do not reopen. My onCLick events do not work as I expect. I want the case to be the markers load and I click them to show info window and then can close the window as well. I've read the docs and issues on Github but can't find the info. Thanks.
Index.js
import ReactDOM from "react-dom";
import React from "react";
import { GoogleMap, LoadScript, MarkerClusterer } from "@react-google-maps/api";
import MapMarker from "./MapMarker";
const mapOptions = {
fullscreenControl: false,
streetViewControl: false,
mapTypeControl: false,
styles: [
{
featureType: "poi",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "transit",
elementType: "all",
stylers: [
{
visibility: "off"
}
]
}
]
};
const key = ""; // PUT GMAP API KEY HERE
const defaultLocation = {
lat: 37.9755691,
lng: 23.7361789
};
let markers = [
{
id: 1,
lat: 37.975,
lng: 23.7361789
},
{
id: 2,
lat: 37.9755,
lng: 23.7361789
},
{
id: 3,
lat: 37.976,
lng: 23.7361789
}
];
class Map extends React.Component {
state = {
isInfoOpen: false,
selectedMarkerId: null,
noOfClusters: null,
markers: markers
};
onClick = (isInfoOpen, selectedMarkerId) => {
this.setState({
isInfoOpen,
selectedMarkerId
});
};
render() {
const { isInfoOpen, selectedMarkerId } = this.state;
return (
{clusterer =>
this.state.markers.map(markerData => (
this.onClick()}
/>
))
}
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
MapMarker.js
import React from "react";
import { InfoWindow, Marker} from "@react-google-maps/api";
export default class MapMarker extends React.Component {
state = {
mapMarker: null,
activeMarker: {},
selectedPlace: {},
showingInfoWindow: false
};
onMarkerClick = (props, marker) =>
this.setState({
activeMarker: marker,
selectedPlace: props,
showingInfoWindow: true
});
onInfoWindowClose = () =>
this.setState({
activeMarker: null,
showingInfoWindow: false
});
onLoad = mapMarker => {
this.setState({
mapMarker
});
};
render() {
const { clusterer, markerData } = this.props;
const { mapMarker } = this.state;
return (
this.onMarkerClick()}
>
{mapMarker && (
{"custom Infobox: " + markerData.id}
)}
);
}
}
ANSWER
Answered 2020-Nov-24 at 06:17I made a couple of changes in your MapMaker.js from the codesandbox link you provided.
First, I added a state named showingInfoWindow and assign a value of false. This will be the state that will indicate if the infowindow will be shown or not.
Then, I added a function named onMarkerClick which is called everytime the Marker is clicked. This will set the state of showingInfoWindow to true.
Next, I put a condition in the return of MapMaker class, which will only show the infowindow when the showingInfoWindow is set to true.
Then, I add the onInfoWindowClose function that sets the state of showingInfoWindow back to false.
Lastly, I added the onCloseClick parameter in the and call the onInfoWindowClose function.
You can follow the code snippet below for the changes in MapMaker.js
import React from "react";
import { Marker, InfoWindow } from "@react-google-maps/api";
export default class MapMarker extends React.Component {
state = {
mapMarker: null,
showingInfoWindow: false
};
onMarkerClick = (props) => {
this.setState({
showingInfoWindow: true
});
};
onInfoWindowClose = () =>
this.setState({
showingInfoWindow: false
});
onLoad = (mapMarker) => {
this.setState({
mapMarker
});
};
render() {
const { clusterer, markerData } = this.props;
return (
{this.state.showingInfoWindow === true && (
hello
)}
);
}
}
QUESTION
I am building a full stack MERN (MongoDB Express React Nodejs) application. I am using the NPM package Google Maps React to display google maps on my website. I am having difficulty coming up with a strategy to secure my front end google maps API key.
In order to fully understand my problem it may be helpful to review the Google Maps React component code below
import {Map, GoogleApiWrapper} from 'google-maps-react';
export class MapContainer extends Component {
render() {
return (
);
}
}
export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)
Possible Solutions
Solution A
- Store key in my Mongo database
- make GET request to database to obtain the google Maps API key
- put API key data string in google maps component
Solution B
- note: I did some deep digging to the the Google Maps React Node module files. I found .env and .env.example files with in the google maps react node module files. The .env.example file says
GAPI_KEY=FILL_IN_YOUR_KEY_HERE
- store api key in google maps react node module files
Concerns with solution A
- Possible solution is not secure
- API key data can be accessed by user
Concerns with solution B
- the node modules are part of my
.gitignorefile and therefore the google maps API key will not be available when the app is deployed
Thank you for your thoughts and time.
PS I used create-react-app
ANSWER
Answered 2020-Oct-16 at 00:53You have various options to securely store an api key. If you are using CircleCi for continuous builds, you can create an environment key. Check your build solution for something similar.
There are also alternatives for encrypting files such as git-secret. That way you could use an environment config file.
Bottom line do not store keys in code or in config files unless you have it encrypted.
QUESTION
I have array of coordinates, if i add another coordinate in array the route direction of the map should be updated.
this is my code in googlemap.js
/* global google */
import React, { Component } from "react";
import { Map, GoogleApiWrapper } from "google-maps-react";
import "./config";
import Router from 'next/router';
class MapContainer extends React.Component {
constructor(props) {
super(props);
this.handleMapReady = this.handleMapReady.bind(this);
}
handleMapReady(mapProps, map) {
this.calculateAndDisplayRoute(map);
}
calculateAndDisplayRoute(map) {
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
const waypoints = this.props.data.map((item) => {
return {
location: { lat: item.lat, lng: item.lng },
stopover: true,
};
});
const origin = waypoints.shift().location;
const destination = waypoints.pop().location;
directionsService.route(
{
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: "DRIVING",
},
(response, status) => {
if (status === "OK") {
directionsDisplay.setDirections(response);
} else {
window.alert("Directions request failed due to " + status);
}
}
);
}
render() {
return (
);
}
}
export default GoogleApiWrapper({
apiKey: "",
libraries: [],
})(MapContainer);
Im kinda new in this plugin, because im using react-google-maps in the past few days but its not being maintained anymore thats why im using this plugin for now.
ANSWER
Answered 2020-Sep-25 at 07:46If you have an array of coordinates and would like to show the directions in the map that shows these coordinates, you need to set the first coordinate as your start , the last coordinate as the destination and the coordinates in between to be your waypoints.
Then once you will add a new coordinate in the array, you need to include the previous last coordinate in your waypoint and make the newly added coordinate as the destination.
Here is a sample code that shows this where I use Google Place Autocomplete where you can input a place and it will provide suggestion then once you choose a place from the suggestion it will get it's coordinate andpush the coordinate in the array.
Please see the code snippet below:
import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import "./style.css";
import "./config";
export class MapContainer extends Component {
onMapReady = (mapProps, map) => {
let coords = [];
let waypoints = [];
//put data from config file in an array
{
places.map((place) => coords.push({ lat: place.lat, lng: place.lng }));
}
//instantiate directions service and directions renderer
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
//put directions renderer to render in the map
directionsDisplay.setMap(map);
//Getting the first coordinate in the array as the start/origin
let start = { lat: coords[0].lat, lng: coords[0].lng };
//Getting the last coordinate in the array as the end/destination
let end = {
lat: coords[coords.length - 1].lat,
lng: coords[coords.length - 1].lng,
};
//putting all the coordinates between the first and last coordinate from the array as the waypoints
for (let i = 1; i < coords.length - 1; i++) {
waypoints.push({
location: { lat: coords[i].lat, lng: coords[i].lng },
stopover: true,
});
}
// directions requests
let request = {
origin: start,
waypoints: waypoints,
destination: end,
travelMode: "DRIVING",
};
//show results in the directionsrenderer
directionsService.route(request, function (result, status) {
if (status == "OK") {
directionsDisplay.setDirections(result);
}
});
//setting the autocomplete input
let card = document.getElementById("pac-card");
let input = document.getElementById("pac-input");
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
let autocomplete = new google.maps.places.Autocomplete(input);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
// Set the data fields to return when the user selects a place.
autocomplete.setFields(["address_components", "geometry", "icon", "name"]);
//listener for the places input
autocomplete.addListener("place_changed", function () {
console.log(waypoints);
let place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
//Putting the previous last coordinate in the array to be part of the waypoint
waypoints.push({
location: {
lat: coords[coords.length - 1].lat,
lng: coords[coords.length - 1].lng,
},
stopover: true,
});
//putting the Place Autocomplete coordinate result in the coords array
coords.push({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
});
//putting the Place Autocomplete coordinate result the value of the end/destination
end = place.geometry.location;
//changing request
request = {
origin: start,
waypoints: waypoints,
destination: end,
travelMode: "DRIVING",
};
//creating new directions request
directionsService.route(request, function (result, status) {
if (status == "OK") {
directionsDisplay.setDirections(result);
}
});
});
};
render() {
//if (!this.props.loaded) return Loading...;
return (
Add new point
);
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_API_KEY",
version: "3.40",
})(MapContainer);
QUESTION
I have this react app I want to dockerize. But the problem is, even though I tried, it doesn't work. But it works pretty well locally
This is how the current directories look like:
docker-compose.yaml
frontend_v2
- node_modules
- public
- src
-
- Dockerfile
- package.json
- package-lock.json
So this is the content of the above Dockerfile:
# Use an official node runtime as a parent image
FROM node:latest
WORKDIR /app
# Install dependencies
COPY package.json /app
RUN npm install
# Add rest of the client code
COPY . /app
EXPOSE 3000
CMD ["npm", "start"]
And I am using a docker-compose.yml to spin up the container, and this is how it looks like: This is in the root directory.
version: "3.2"
services:
frontend:
build: ./frontend_v2
environment:
CHOKIDAR_USEPOLLING: "true"
volumes:
# - /app/node_modules
- ./frontend_v2/src:/app/src
ports:
- 80:3000
Problem I am facing is, even though the container is running I get the below error (which I don't get I run locally)
When i try
docker logs i get this below output
> cyberhr-rv18.0.4@0.1.0 start /app
> react-scripts start
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack-dev-server": "3.11.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
/app/node_modules/webpack-dev-server (version: 3.10.3)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack-dev-server" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /app/node_modules/webpack-dev-server is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls webpack-dev-server in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cyberhr-rv18.0.4@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cyberhr-rv18.0.4@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-09-18T08_32_25_268Z-debug.log
[Update]
Here's my package.json file:
{
"name": "cyberhr-rv18.0.4",
"version": "0.1.0",
"private": true,
"homepage": "",
"dependencies": {
"3d-force-graph": "^1.60.11",
"@blueprintjs/core": "^3.26.1",
"@coreui/coreui": "^2.1.12",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/icons": "0.3.0",
"@coreui/react": "^2.5.1",
"@emotion/core": "^10.0.35",
"@material-ui/core": "^4.11.0",
"@tensorflow/tfjs": "^1.7.2",
"@tensorflow/tfjs-tsne": "^0.2.0",
"axios": "^0.19.2",
"bootstrap": "^4.3.1",
"chart.js": "^2.8.0",
"classnames": "^2.2.6",
"core-js": "^3.1.4",
"d3-dsv": "^1.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"evergreen-ui": "^4.27.4",
"flag-icon-css": "^3.3.0",
"font-awesome": "^4.7.0",
"google-maps-react": "^2.0.2",
"jquery": "^3.4.0",
"material-dashboard-react": "^1.8.0",
"mdbreact": "4.25.3",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-animations": "^1.0.0",
"react-app-polyfill": "^1.0.1",
"react-bootstrap": "^1.0.0-beta.5",
"react-chartjs-2": "^2.7.6",
"react-chat-popup": "^1.1.2",
"react-dom": "^16.8.4",
"react-dropzone": "^11.0.1",
"react-force-graph": "^1.32.1",
"react-full-screen": "^0.2.4",
"react-loadable": "^5.5.0",
"react-nvd3": "^0.5.7",
"react-perfect-scrollbar": "^1.4.4",
"react-pure-grid": "^2.1.1",
"react-redux": "^6.0.1",
"react-reveal": "^1.2.2",
"react-router-config": "^5.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^3.4.3",
"react-spinners": "^0.9.0",
"react-step-wizard": "^5.3.2",
"react-table": "^7.2.1",
"react-test-renderer": "^16.8.6",
"react-toastify": "^6.0.8",
"react-window-size": "^1.2.2",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"simple-line-icons": "^2.4.1",
"tabler-react": "^2.0.0-alpha.1",
"three": "latest",
"tsne-js": "^1.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-to-print": "^2.1.1"
}
}
Can someone please help me?
ANSWER
Answered 2020-Sep-18 at 09:09Firstly, make sure you are copying the same package-lock.json file that you use to install deps locally, to make sure you have the same dependency tree in your container as you do locally.
COPY package.json package-lock.json /app/
Then, make sure that you are matching the same node/npm version as you run locally (replace 12 with the major version you are running, be it 10, 12, 14 or whatever):
FROM node:12
Each node version is bundled with a specific npm version (latest 12 version comes with npm 6.14.6), you can find the bundled NPM version int he changelogs, https://github.com/nodejs/node/tree/master/doc/changelogs
Additionally, instead of running npm install, you might wanna run npm ci in the container. The latter skips any checks for discrepancy between the lock file and your package.json file and just installs the locked dependency tree, which is not only faster, but will also match your local dep tree exactly.
EDIT:
In addition, this line:
COPY . /app
Would also overwrite node_modules unless you have ignored it via .dockerignore or similar.
Easiest would probably be to add a .dockerignore file to the same folder as your Dockerfile and add lines stating:
.git
node_modules
The complete Dockerfile would look like this:
# Use whatever version you are running locally (see node -v)
FROM node:12
WORKDIR /app
# Install dependencies (you are already in /app)
COPY package.json package-lock.json ./
RUN npm ci
# Add rest of the client code
# .dockerignore needs to skip node_modules
COPY . /app
EXPOSE 3000
CMD ["npm", "start"]
QUESTION
I am creating an app that uses wildfire data from APIs and flips it in order to display polygons on a Google Map using the google-maps-react package. I have figured everything out up until returning and displaying the polygon using a function built into the map component. Does anyone want to chime in on what the issue might be? I'd really appreciate some help. Thanks.
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Polygon } from 'google-maps-react';
const mapStyles = {
margin: 30,
width: '93.75%',
height: '90%',
border: '1px solid #3E1C18',
display: 'inline-block'
};
class FireMap extends Component {
constructor(props) {
super(props)
this.state = {
fires: [],
polygons: []
}
}
componentDidMount() {
fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
.then(res => res.json())
.then(data => {
this.setState({ fires: data.features })
this.state.fires.map((fire) =>{
if (fire.geometry !== null){
let fireCoords = fire.geometry.rings
let trueCoords = []
fireCoords.map((coords) => {
coords.map((pair) => {
let newPair = {lat: pair[1], lng: pair[0]}
return trueCoords.push(newPair)
})
})
this.state.polygons.push(trueCoords);
console.log(this.state.polygons)
}
})
})
}
showPolygons = () => {
this.state.polygons.map((polygon) => {
let firePoly=
return firePoly
})
}
render(){
return(
{this.showPolygons()}
);
}
}
ANSWER
Answered 2020-Sep-09 at 18:24I haven't caught from your comment if you've tried things I've suggested... But you've edited your post with some random (and incorrect) changes. OK, I'll try to post an answer. It's an answer related to the original code because it looks simpler and contains less errors.
This is how I think it should look like:
const coord_pair_to_latlng = ([lat,lng]) => ({ lat, lng })
const convert_ring_coords = ring => ring.map(coord_pair_to_latlng)
class FireMap extends Component {
constructor(props) {
super(props)
this.state = { fires: [] }
}
componentDidMount() {
fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
.then(res => res.json())
.then(data => this.setState({ fires: data.features }))
}
displayFires = () => this.state.fires
.filter(fire => fire.geometry !== null)
.map(fire => fire.geometry.rings)
.map(rings => acc.concat(convert_ring_coords(ring)), []) }
fillColor = "#BF5E4B"
fillOpacity = {0.45}
strokeColor = "#6B352A"
strokeOpacity = {0.9}
strokeWeight = {1}
/>)
render() {
return (
{this.displayFires()}
)
}
}
Except for a more functional code style (which you can ignore), basically all I've changed was:
new Polygon()andis not the same thing. You should return the latter. JSX translates to something likeReact.createElement(Polygon,...)not tonew Polygon(...). OK, you've fixed that.As per docs and per source code,
Polygonshould be created as
and not as
your options are ignored
this.displayFires() in componentDidMount does nothing, so it should be removed.
As a side note: also at the time of this.displayFires() call this.state is not changed yet. But it shouldn't change the outcome because, as I said, this.displayFires() have no effect in componentDidMount... but this.state.polygons.push in your new version of code can have an effect... or I'd better say will introduce bugs. You should never do that.
QUESTION
When I work on my project locally (without problem), I do npm start which works on port 3000, also i have to open another terminal and do node server/server.js which works on port 4000. Then I will be able to work with my browser to connect my both frontend and backend. Now I am trying to host this project on heroku but no luck. here are my error:
2020-08-26T11:54:23.905587+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/" host=whatever.herokuapp.com request_id="whatever" fwd="96.20.56.73" dyno=web.1 connect=1ms service=159ms status=503 bytes=0 protocol=https
and package.json:
{
"name": "library",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:4000",
"dependencies": {
"@material-ui/core": "^4.9.9",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.48",
"@material/react-snackbar": "^0.15.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"chai": "^4.2.0",
"clsx": "^1.1.0",
"cookie-parser": "^1.4.4",
"dotenv": "^8.2.0",
"google-maps-react": "^2.0.2",
"hookrouter": "^1.2.3",
"i18next": "^19.4.1",
"i18next-browser-languagedetector": "^4.0.2",
"i18next-xhr-backend": "^3.2.2",
"immer": "^5.3.6",
"mongo-seeding": "^3.4.1",
"mongodb": "^3.5.3",
"multer": "^1.4.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.1.1",
"react-hook-google-maps": "0.0.3",
"react-i18next": "^11.3.4",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5",
"redux-immer": "^1.0.4",
"sha1": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --exit",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^3.0.0",
"eslint-plugin-react-redux": "^3.0.3",
"mocha": "^7.2.0",
"supertest": "^4.0.2"
}
}```
is it cause of the proxy? or i have a wrong start script? or something else?
ANSWER
Answered 2020-Aug-29 at 13:54I was using create-react-app + JSX, so i had to open two terminals one for npm start (on port 3000 for react server) and one for node server.js (for backend on port 4000) and these two are connect through the proxy that i had on my package.json. when i have finished with development, all i had to do was:
remove the proxy from package.json.
npm run build, which makes a copy of all my code into the build folder.
app.use("/", express.static("build"));in my server.js file to make the build folder accessible to app.app.all("/*", (req, res) => { res.sendFile(__dirname + "/build/index.html"); });at the end of the server.js to catch all.
hope this saves some of your time.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install google-maps-react
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page
