Skip to content

Instantly share code, notes, and snippets.

@zross
Created April 1, 2015 15:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zross/1ac4290ee89498288cbd to your computer and use it in GitHub Desktop.
Save zross/1ac4290ee89498288cbd to your computer and use it in GitHub Desktop.
Simple Leaflet with CartoDB tiles
<!DOCTYPE html>
<html>
<head>
<title>Leaflet GeoJSON Example</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<style>
html, body, #map {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([38, -96], 5);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 5,
minZoom: 5
}).addTo(map);
var points = new L.geoJson();
points.addTo(map);
$.ajax({
dataType: "json",
url: "temp.geojson",
success: function(data) {
$(data.features).each(function(key, data) {
points.addData(data);
});
}
}).error(function() {});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment