Skip to content

Instantly share code, notes, and snippets.

@zross
Last active April 29, 2022 02:42
Show Gist options
  • Save zross/40d24941a46bff313c65 to your computer and use it in GitHub Desktop.
Save zross/40d24941a46bff313c65 to your computer and use it in GitHub Desktop.
Leaflet.js Tips, Step 2 (getJSON)
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<!-- THIS IS NEW -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([42.444508, -76.499491], 12);
// THIS IS NEW
var promise = $.getJSON("businesses.json");
promise.then(function(data) {
//do a bunch of stuff here
console.log(data) // take a look at the data in the console
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment