bradtraversy / wildfire-tracker Goto Github PK

React app tp track wildfires

HTML 26.13% JavaScript 59.42% CSS 14.44%

wildfire-tracker's Introduction

Wildfire Tracker

This is a React app to track wildfires and plot them on a Google map.

Usage

npm install
npm start

# Build
npm run build
or
yarn build

API Keys

You will need to add your Google Maps API key in the Map.js component and register for a NASA API key at https://api.nasa.gov. If you deploy, please move the keys to a safe place

wildfire-tracker's People

Contributors

Stargazers

Watchers

wildfire-tracker's Issues

Warning: Each child in a list should have a unique "key" prop.

I have this warning in my browser when I run the finished app. I try to debug but I can't find map method in LocationMarker or elsewhere.

0.chunk.js:35649 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Map`. See https://reactjs.org/link/warning-keys for more information.
    at LocationMarker (http://localhost:3000/static/js/main.chunk.js:614:3)
    at Map (http://localhost:3000/static/js/main.chunk.js:748:3)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:57:91)

How to resolve the issue that we could have multiple plot for a single localisation ?

Fire icons moving with the map

If i try to move the maps or zoom in/out the icons move with it.

This page can't load Google Maps correctly. Do you own this website?

I am creating this web app with ReactJS. But I am having an error of

This page can't load Google Maps correctly. Do you own this website?

on browser view.

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 also try with direct 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

How to do this project with azure

I made everything the same except Map.js .
Trying to do hardcode like this giving default [0,0] location but not the required place

import React from 'react'
import {AzureMap, AzureMapsProvider, IAzureMapOptions} from 'react-azure-maps'
import {AuthenticationType} from 'azure-maps-control'
import LocationMarker from './LocationMarker'
const option: IAzureMapOptions = {
    authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: '<key>'
    },
}
const Map = (center,zoom) => {
    return(
        <div style={{height: '1300px'}}>
            <AzureMapsProvider>
                <AzureMap options={option}>
                    <LocationMarker center= {78.9629, 20.5937}/>
                </AzureMap>
                
            </AzureMapsProvider>
        </div>
    )
}
export default Map