Skip to content

Instantly share code, notes, and snippets.

@Xophe92

Xophe92/mapWithLoop.html

Created August 31, 2016 21:32
Show Gist options
  • Save Xophe92/aff1dfd0f79e9175ac10c9211d207528 to your computer and use it in GitHub Desktop.
Save Xophe92/aff1dfd0f79e9175ac10c9211d207528 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mapWithLoop.html
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
left: 0px;
top: 0px;
}
#legend {
background: #fff;
padding: 10px;
margin: 10px;
border: 1px solid #000;
}
#legend h3 {
margin-top: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="legend"><h3>Legend</h3></div>
<script>
function getFile(path, asynch, callback) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open("GET", path, asynch);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
callback(xhr.responseText);
}
};
xhr.onerror = function (e) {
console.error(xhr.status);
};
xhr.send(null);
}
var gym;
var stop;
var gymsLayer;
var stopsLayer;
var map;
var spawns = [];
var green;
var blue;
var orange;
var grey;
function initMap() {
green = {url: "./static/green.png",size: new google.maps.Size(20, 20),anchor: new google.maps.Point(10, 10)};
blue = {url: "./static/blue.png",size: new google.maps.Size(20, 20),anchor: new google.maps.Point(10, 10)};
orange = {url: "./static/orange.png",size: new google.maps.Size(20, 20),anchor: new google.maps.Point(10, 10)};
grey = {url: "./static/grey.png",size: new google.maps.Size(20, 20),anchor: new google.maps.Point(10, 10)};
gym = {url: "./static/gym.png",size: new google.maps.Size(30, 30),anchor: new google.maps.Point(15,30)};
stop = {url: "./static/pokestop.png",size: new google.maps.Size(30, 30),anchor: new google.maps.Point(15, 30)};
infowindow = new google.maps.InfoWindow();
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
center: {lat: 48.813413, lng: 2.233625},
zoom: 16
});
getFile('./spawns.json', true, function(response) {
console.log('got spawns');
var data = JSON.parse(response);
console.log(data.length + ' spawn points loaded');
for (var i = 0; i < data.length; i++) {
var p = data[i];
var spawntime = "Spawns at xx:" + Math.floor(p.time/60) + ":" + (p.time - (Math.floor(p.time/60)*60))
p.marker = new google.maps.Marker({
position: new google.maps.LatLng(p.lat,p.lng),
icon: grey,
map: map,
title: spawntime
});
p.mode = 0;
spawns.push(p);
}
});
getFile('./bestPath.json', true, function(response) {
console.log('got bestPath');
var data = JSON.parse(response);
console.log(data.length + ' step points loaded');
bestPathCoords=[];
for (var i = 0; i < data.length; i++) {
var p = data[i];
var pointToInsert = {}
pointToInsert['lat'] = p.lat;
pointToInsert['lng'] = p.lng;
bestPathCoords.push(pointToInsert);
}
var bestPath = new google.maps.Polyline({
path: bestPathCoords,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
bestPath.setMap(map);
});
setInterval(redrawSpawns, 1000);
gymsLayer = new google.maps.Data();
stopsLayer = new google.maps.Data();
gymsLayer.loadGeoJson('./geo_gyms.json');
gymsLayer.setStyle(function(feature) {
return {icon: gym};
});
gymsLayer.setMap(map);
gymsLayer.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('name'));
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
stopsLayer.loadGeoJson('./geo_stops.json');
stopsLayer.setStyle(function(feature) {
return {icon: stop};
});
stopsLayer.setMap(map);
stopsLayer.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('name'));
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
var legenditems = {
gyms: {
name: 'Gyms',
icon: './static/gym.png',
layer: 'gymsLayer'
},
pokestops: {
name: 'Pokestops',
icon: './static/pokestop.png',
layer: 'stopsLayer'
},
active: {
name: 'Spawned recently',
icon: './static/green.png'
},
despawning: {
name: 'Despawning in <5 min',
icon: './static/orange.png'
},
spawning: {
name: 'Spawning in <5 min',
icon: './static/blue.png'
},
inactive: {
name: 'Inactive',
icon: './static/grey.png'
}
};
var legend = document.getElementById('legend');
for (var key in legenditems) {
var type = legenditems[key];
var name = type.name;
var icon = type.icon;
var layer = type.layer;
var div = document.createElement('div');
div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')">' + name + '<img src="' + icon + '">';
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
google.maps.event.addListener(map, 'click', function() { infowindow.close(); });
}
var show1 = true;
var show2 = true;
var show3 = true;
var show4 = true;
function toggleType(elm, event, type) {
if(type == 'gyms') {
gymsLayer.setMap( elm.checked ? map : null);
} else if (type == 'pokestops') {
stopsLayer.setMap( elm.checked ? map : null);
} else if (type == 'active') {
show1 = elm.checked ? true : false;
redrawSpawns(true);
} else if (type == 'despawning') {
show2 = elm.checked ? true : false;
redrawSpawns(true);
} else if (type == 'spawning') {
show3 = elm.checked ? true : false;
redrawSpawns(true);
} else if (type == 'inactive') {
show4 = elm.checked ? true: false;
redrawSpawns(true);
}
}
function redrawSpawns(force=false){
var D = new Date();
var secPastH = (60*D.getUTCMinutes())+D.getUTCSeconds()
for(var i = 0; i < spawns.length; i++){
var p = spawns[i];
var timeD = ((secPastH-p.time)+3600)%3600;
if(timeD < 600){
if(p.mode!=1 || force){
p.mode=1;
p.marker.setIcon(green);
p.marker.setMap(show1 ? map : null);
}
}else if(timeD < 900){
if(p.mode!=2 || force){
p.mode=2;
p.marker.setIcon(orange);
p.marker.setMap(show2 ? map : null);
}
}else if(timeD > 3300){
if(p.mode!=3 || force){
p.mode=3;
p.marker.setIcon(blue);
p.marker.setMap(show3 ? map : null);
}
}else{
if(p.mode!=0 || force){
p.mode=0;
p.marker.setIcon(grey);
p.marker.setMap(show4 ? map : null);
}
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&callback=initMap">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment