Retrieving Geolocation of user without index.html - node.js

Question

Hey I'm making a web application that has to track a user location after button is clicked.
I have been using the M.E.R.N stack for this and so far with the tutorials I watched they haven't needed any index.html file just pure JavaScript.
I have implement Google maps on my site without using any HTML files.
This is the code I want to implement
But without having to create a index.html.
How can I add this code to my main.js file without the HTML file?
THIS IS HOW I HAVE GOOGLE MAPS SETUP IN MY LANDING PAGE
import React, { Component } from 'react';
import { Grid, Cell } from 'react-mdl';
import Paper from '#material-ui/core/Paper';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
//THIS IS THE LANDING PAGE.
const mapStyles = {
width: '100%',
height: '100%'
};
export class LandingPage extends Component {
render() {
return (
<Map
google={this.props.google}
zoom={3}
style={mapStyles}
initialCenter={{
lat: 28.871812,
lng: -34.814106
}}
>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: 'API-KEY'
})(LandingPage);
THIS IS NAVBAR WITH THE ENTER CODE BUTTON THAT SHOULD REQUEST GEOLOCATION ON CLICK
importS{}
//THIS IS THE NAVIGATION BAR PAGE.
export default class NavBar extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
collapsed: true
};
}
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
return (
<div>
<Navbar style={{background: '#948E99', flex: 1,
background: '-webkit-linear-gradient(to right, #2E1437, #948E99)',
background: 'linear-gradient(to right, #2E1437, #948E99)'}} dark>
<NavbarToggler color="white" onClick={this.toggleNavbar} className="mr-2" />
<Button style={{color: 'white'}} href="/" className="mrauto">DigitalDollar</Button>
<Button style={{color: 'white'}} onClick={this.handleClickOpen} className="mr-auto">Enter Code</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Enter Code</DialogTitle>
<DialogContent>
<DialogContentText>
Thank you for participating in the DigitalDollar global run! By entering this code we will
add your location to our map, please enter your magnificint code here. Thank you for your
participation.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="Code"
label="Enter Code"
type="Code"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.handleClose} color="primary">
Subscribe
</Button>
</DialogActions>
</Dialog>
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/">Home</NavLink>
</NavItem>
<NavItem>
<NavLink href="/about">About</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/CH-SYR3" rel="noopener noreferrer" target="_blank">GitHub</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://www.paypal.com/us/home" rel="noopener noreferrer" target="_blank">Buy Me A Coffee?</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<div>
<Navbar color="light" light expand="md">
<Nav className="NavTabs" navbar>
<NavItem>
<NavLink href="/">Map</NavLink>
</NavItem>
<NavItem>
<NavLink href="/time">Time</NavLink>
</NavItem>
<NavItem>
<NavLink href="/hello">Hello</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
</div>
);
}

Answer 1

It's not a file, just an html5 standard that works in browsers. In the link you provide, the navigation language is in the script tag. If you wrap the navigator.geolocation method in a function getUserLoc() that does little more than setState with the coordinates on click, you will be able to update the map's position by setting state. You'd set the initial state in LandingPage's constructor, then pass `getUserLoc() function to your NavBar component where it can be run with this.props.getUserLoc().
const mapStyles = {
width: '100%',
height: '100%'
};
export class LandingPage extends Component {
constructor(props) {
super(props)
this.state={
lat: 28.871812,
lng: -34.814106
}
this.getUserLoc = this.getUserLoc.bind(this)
}
getUserLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
this.setState({
userLat: pos.lat,
userLng: pos.lng
})
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
render() {
return(
<div>
<Map
google={this.props.google}
zoom={3}
style={mapStyles}
initialCenter={{
lat: this.state.userLat,
lng: this.state.userLng
}}
>
</Map>
<NavBar getUserLoc={this.getUserLoc}/>
</div>
)
}
}