This is the start of a simple Leaflet map application loading data from the Yelp! API. The data.json file is simply the output from the API Console page: https://www.yelp.com/developers/api_console, and was created using the conference hotel address in the “Near” field.
Here’s the full query: http://api.yelp.com/v2/search/?term=Bars&location=Hyatt Regency Century Plaza, Los Angeles, CA&sort=2&limit=20&actionlinks=true
<!doctype html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Graphic title here - WSJ.com</title><?php /* EDIT ME */ ?>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--LEAFLET CSS -->
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<link rel="stylesheet" href="css/style.css"/>
</head>
<body class="">
<div id="main-wrapper" class="">
<div id="main-content" class="container">
<header class="row">
<div class="social-links col-md-12"></div>
<div class="col-md-12">
<h1>I Am a Journalist and Programmer</h1>
<div class="byline">By <a href="#">Your Name Here, Esq.</a></div>
<div class="meta">
Published September 23, 2015
</div>
</div>
</header>
<section class="row">
<div class="col-md-12" id="map"></div>
</section>
<footer>
<div id="source-line">Source: Source goes here.</div>
</footer>
</div>
</div>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-z__K2Tz1ZKAxvmiZ1mB7rxi9LY4_0JE">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- <script src="js/map.js"></script> -->
<script src="marker.js"></script>
</body>
</html>var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -70 },
{ lightness: 10 },
{ gamma: 1.0 }
]
},{
featureType: "administrative",
stylers: [
{ gamma: 0 },
{ visibility: "simplified" }
]
},{
featureType: "road.local",
stylers: [
{ gamma: -30 },
{ visibility: "on" },
{ strokeWeight: 3},
{ strokeColor: "black"}
]
},
{
featureType: "landscape.man_made ",
stylers: [
{ visibility: "simplified" },
]
},
{
featureType: "transit",
stylers: [
{ visibility: "off" },
]
}
];
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 13,
center: new google.maps.LatLng(34.0554907, -118.41893235),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
map.setOptions({styles: styles});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
// Load the station data. When the data comes back, create an overlay.
d3.json("query.json", function(data) {
// console.log(data.businesses[0].location.coordinate.latitude, data.businesses[0].location.coordinate.longitude);
var overlay = new google.maps.OverlayView();
// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have?
overlay.draw = function() {
var projection = this.getProjection(),
padding = 10;
var flatData = [];
$.each(data.businesses, function(i, item) {
flatData.push({latitude: item.location.coordinate.latitude, longitude: item.location.coordinate.longitude});
})
var marker = layer.selectAll("svg")
// .data(d3.entries(data))
.data(d3.entries(flatData))
.each(transform) // update existing markers
.enter()
.append("svg")
.each(transform)
.attr("class", "marker");
// Add a circle.
marker.append("circle")
.attr("r", 8)
.attr("cx", padding)
.attr("cy", padding);
// Add a label.
marker.append("text")
.attr("x", padding + 7)
.attr("y", padding)
.attr("dy", ".31em")
.text(function(d) { return d.key; });
function transform(d) {
console.log(d);
// d = new google.maps.LatLng(d.value[0], d.value[1]);
d = new google.maps.LatLng(d.value.latitude, d.value.longitude);
// d = new google.maps.LatLng(d[1], d[0]);
// d = new google.maps.LatLng(d.coordinate[0], d.coordinate[1]);
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style("left", (d.x - padding) + "px")
.style("top", (d.y - padding) + "px");
}
};
};
// Bind our overlay to the map…
overlay.setMap(map);
});
#map {
height: 500px;
}
.stations, .stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill:#C74848;
opacity:0.8;
stroke:white;
stroke-width:1;
}