#A Geography Game - That will give you the skills
This is a geography game where you are asked a question and then you have to locate the answer (in the form of a marker) on the map. The catch is that the marker does not appear until you zoom into a specific level of the map. Once you locate the marker you can click on it. An info window will appear letting you know the name of the location you have found. You can then click the button within the info window to progress through the game.
- HTML5
- CSS3
- JavaScript
- React.js
- Node.js
- NPM packages for React-Google-Maps, React-Router, React-Bootstrap
- Google Maps API
- Using the Google Maps API with the NPM Package "React-Google-Maps" to successfully get a map rendered onto the screen.
- Manipulating the Google Maps API to accomplish things like:
- Changing visibility of markers based on zoom level.
- Targeting markers with JavaScript that only appear based on current render().
- Resetting the map zoom after an event.
- Using info windows to perform actions on the map.
- Using React-Router to make our NavBar a have single page links.
- Styling the map while using React and React-Google-Maps.
- Drew "Wizard Island" Parker
- Michael "I didn't want that job anyway" Irby
- Kyle "Blob/Scrum Master" Plaugher
- Sean "Mark J Base" Bhupathi
- Points based system
- Expand to other regions (Asia, Europe, etc.)
- Add additional clues to the game
Snippet of some map zoom logic.
handleZoomChange() {
const zoomLevel = this._mapComponent.getZoom();
if (zoomLevel >= this.state.data.revealMarkerZoom) {
this.setState({
visibility: true,
})
} else {
this.setState({
visibility: false
})
}
}
Setting State.
constructor(props) {
super(props);
this.state = {
data: {},
visibility: false,
showInfo: false
}
this.handleMapLoad = this.handleMapLoad.bind(this);
this.handleMarkerClick = this.handleMarkerClick.bind(this);
this.handleZoomChange = this.handleZoomChange.bind(this);
this.handldeInfoBtnClick = this.handldeInfoBtnClick.bind(this);
}
An example of an Object in our Data Array.
{
greeting: "Welcome to the Map Game. Your first clue is:",
question: "This cape in Washington is the westernmost point in the lower 48 states.",
answer: "Cape Alava, WA",
mapOptions: {
center: {lat: 39.8282, lng: -98.5795},
zoom: 4,
mapTypeId: 'terrain',
styles: mapStyle
},
markerOptions: {
position: {lat: 48.1647572, lng: -124.7331501},
title: "Cape Alava, WA",
},
revealMarkerZoom: 9,
visible: false,
},