Skip to content

Instantly share code, notes, and snippets.

@philsmy
Last active May 13, 2020 04:00
Show Gist options
  • Save philsmy/f1209da2c8d91057baa70c28baf9fab4 to your computer and use it in GitHub Desktop.
Save philsmy/f1209da2c8d91057baa70c28baf9fab4 to your computer and use it in GitHub Desktop.
Some of the code for the Ontario index page of the Covid19 Visualization app
<% content_for :page_header do %>
<style>
#map {
height: 80%;
margin-top: 30px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<% end %>
<div id="map"></div>
<% content_for :page_bottom do %>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(42.98641646, -82.40480836),
mapTypeId: 'terrain'
});
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
// script.src = 'conposcovidloc.geojson';
// script.src = 'mydata.geojson';
script.src = 'ontario_map_data.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
const infowindow = new google.maps.InfoWindow(); // Only one InfoWindow
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: results.features[i].properties.reporter
});
marker.data = results.features[i];
marker.latLng = latLng;
marker.addListener('click', function(){
infowindow.close(); // Close previously opened infowindow
infowindow.setPosition(this.latLng);
infowindow.setContent(`<div id="infowindow"><strong>${this.data.properties.reporter}</strong><br/>${this.data.properties.num_cases} Cases<br/><a href='http://${this.data.properties.website}' target='_blank'>visit website</a></div>`);
infowindow.open(map);
});
}
}
</script>
<!-- You'll need to add your Google Maps API key here -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxx&callback=initMap"></script>
<% end %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment