xxxxxxxxxx
<html>
<meta charset="utf-8">
<style>
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16pt;
position: relative;
}
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16pt;
position: relative;
word-wrap: break-word;
}
.map {
-webkit-transform: translate3d(0, 0, 0);
}
.tipsy {
font-size: 4px;
position: absolute;
padding: 5px;
z-index: 100000;
}
.tipsy-inner {
background-color: #000;
color: #FFF;
font-size: 10pt;
max-width: 500px;
padding: 5px 8px 4px 8px;
text-align: center;
}
</style>
<head>
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<link rel="stylesheet" href="tipsy.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='jquery.tipsy.js'></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
</head>
<body>
<center><div id="map" style="width: 90%; height: 450px;"></div></center>
<img src="https://ga-beacon.appspot.com/UA-55320412-4/chemplexity/providencetrees?pixel"/>
</body>
<script>
// Load data
d3.json('trees.json', function (data) {
// General properties
var margin = { top: 30, right: 80, bottom: 90, left: 110 }
var h = 500 - margin.top - margin.bottom
var w = 600 - margin.left - margin.right
// Map coordinates
var map = new L.map('map').setView([41.8208, -71.424], 12);
function standard_layer() {
return L.tileLayer('https://{s}.{base}.maps.cit.api.here.com/maptile/2.1/maptile/{mapID}/terrain.day/{z}/{x}/{y}/256/png8?app_id={app_id}&app_code={app_code}',
{
attribution: '',
subdomains: '1234',
mapID: 'newest',
app_id: 'P1vQC2llXiUYcDliEVOM',
app_code: '-4sbk8a-0_BtrvZj5l8KCQ',
base: 'aerial',
minZoom: 12,
maxZoom: 19,
})
.addTo(map);
map._initPathRoot()
}
// Initialize layer
var map_layer = standard_layer();
// Initialize map layer
map._initPathRoot()
// Display map
var svgmap = d3.select("#map").select("svg"),
gmap = svgmap.append("g");
// Color scale
var cmin = d3.min(data,function (d) { return d['size']}),
cmax = d3.max(data,function (d) { return d['size']});
var colorScale = d3.scale.linear()
.domain([cmin, cmax])
.range(['#003D0C','#6D5A23'])
data.forEach(function(d) {d.LatLng = new L.LatLng(d.latitude, d.longitude)})
var pointopacity = 0.5;
// Assign data
var points = gmap.selectAll("circle")
.attr("class", "points")
.data(data)
.enter()
.append("circle")
.style("opacity", pointopacity)
.style("fill", function(d) {return colorScale(d.size)})
// Show map
map.on("viewreset", update);
update();
// Update map zoom
function update() {
points.attr("transform", function(d) {return "translate("+
map.latLngToLayerPoint(d.LatLng).x +","+
map.latLngToLayerPoint(d.LatLng).y +")"; })
.attr("r", function(d) {return (d.size/6)*(map.getZoom()/10)})
}
update()
// Map tooltip
$('svg circle').tipsy({
gravity: 'w',
html: true,
delayOut: 100,
triggle: 'hover',
title: function() {
var d = this.__data__, c = colorScale(d.size), text = Math.round((d.size/12)*100)/100 + " ft.";
return '<span style="color:' + c + '">' + text + '</span>';
}
});
});
</script>
</html>
Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
https://d3js.org/d3.v3.min.js
https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js