Our New Puppycide Map Lets You See Our Research and Display it on Your Website

Using Google's Fusion Tables and Google Maps, the Puppycide Database Project has produced the largest interactive map of police deadly force incidents against animals in the world.

Currently displaying 1260 unique incidents and featuring incidents in all 50 states, our users and researchers can easily find puppycides in their own neighborhood, including shooter and police department names as well as independent references.

How to Display the Map on Your Website

We invite all of our users to display the map on their own websites and social media platform using this simple bit of HTML code:

<iframe width="500" height="300" scrolling="no" frameborder="no" src="https://www.google.com/fusiontables/embedviz?q=select+col1+from+1buDKNqjLyn9xvForEaZWfN0CEJAeCisB1AQn-sbF&amp;viz=MAP&amp;h=false&amp;lat=41.68976802277236&amp;lng=-92.46485937500006&amp;t=1&amp;z=4&amp;l=col1&amp;y=2&amp;tmplt=2&amp;hml=GEOCODABLE"></iframe>

Using the width= and height= variables, you can control the size of the map. Should your hosting environment prevent the use of iframes, you can provide a direct link to the map instead using this code:

https://www.google.com/fusiontables/embedviz?q=select+col1+from+1buDKNqjLyn9xvForEaZWfN0CEJAeCisB1AQn-sbF&viz=MAP&h=false&lat=41.68976802277236&lng=-92.46485937500006&t=1&z=4&l=col1&y=2&tmplt=2&hml=GEOCODABLE

Clicking such a link opens a full page version, which can also be used for a "View Full Size Map" caption of the embeddable version.

Finally, if you wish to embed the map but your hosting environment prevents iframes, or you wish to implement a more custom usage of the map, here is an example of how to connect to the Google Maps service using HTML and Javascript and display the Puppycide Fusion Table as a Layer:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Puppycide Database Map v0.2 - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 500px;
}
</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;v=3"></script>

<script type="text/javascript">
  function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
  (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
  var viewport = document.querySelector("meta[name=viewport]");
  viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '500px';
mapDiv.style.height = isMobile ? '100%' : '300px';
var map = new google.maps.Map(mapDiv, {
  center: new google.maps.LatLng(41.68976802277236, -92.46485937500006),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "col1",
    from: "1buDKNqjLyn9xvForEaZWfN0CEJAeCisB1AQn-sbF",
    where: ""
  },
  options: {
    styleId: 2,
    templateId: 2
  }
});

if (isMobile) {
  var legend = document.getElementById('googft-legend');
  var legendOpenButton = document.getElementById('googft-legend-open');
  var legendCloseButton = document.getElementById('googft-legend-close');
  legend.style.display = 'none';
  legendOpenButton.style.display = 'block';
  legendCloseButton.style.display = 'block';
  legendOpenButton.onclick = function() {
    legend.style.display = 'block';
    legendOpenButton.style.display = 'none';
  }
  legendCloseButton.onclick = function() {
    legend.style.display = 'none';
    legendOpenButton.style.display = 'block';
  }
 }
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
  <div id="googft-mapCanvas"></div>
</body>
</html>

The same style of connection can be used to produce an asynchronous connection to the Google Maps service, like so:

<!DOCTYPE html>
<html>
  <head>
    <title>Puppycide Map v0.2 - Asynchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(41.68976802277236, -92.46485937500006),
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: {
        select: "col1",
        from: "1buDKNqjLyn9xvForEaZWfN0CEJAeCisB1AQn-sbF",
        where: ""
      },
      options: {
        styleId: 2,
        templateId: 2
      }
    });
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
      '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

For more ideas of how to customize your map displays in this manner, check out Google Maps Javascript API v3 documentation

Notes About the Data in the Map

Anytime data is displayed in a map format, viewers of that map make certain assumptions about the data. One of those assumptions is that the data is comprehensive. We must categorically warn our users that our Puppycide Database does not yet contain a list of every police use of deadly force against animals in the United States.

Because our database is still a work in progress, the distribution of Puppycides across locations in the United States must be viewed skeptically. For example, if more events are shown in Florida than New York, it is because we have obtained more records from Florida police departments from New York police departments - not because there are more puppycides in one state or the other.

As a result of this concern, we urge users to avoid the use of "heat maps" and other visualizations that deliberately display concentration data as a meaningful dataset in its own right.

As time goes by, we will begin releasing maps of specific counties and cities for which we have comprehensive use of force lists available. This will allow users to make direct comparisons between such areas, as well as to determine areas inside of a county of city that represent "Puppycide hotspots".

We still have much work to do before a complete national comparison in such a manner can be accurately provided. We could really use your help getting there - consider volunteering a few minutes of your time to let us reach that goal that much faster!