block by nitaku 87ff72e70b15de6cd707

Leaflet with MapBox tiles

Full Screen

A simple example of Leaflet.js using Mapbox tiles.

index.js

// Generated by CoffeeScript 1.10.0
(function() {
  var base_layer, body, height, map, mbAttr, mbUrl, width;

  body = d3.select('body');

  width = body.node().getBoundingClientRect().width;

  height = body.node().getBoundingClientRect().height;

  d3.select('#map').style({
    width: width,
    height: height
  });

  mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>';

  mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ';

  base_layer = L.tileLayer(mbUrl, {
    id: 'mapbox.streets',
    attribution: mbAttr
  });

  map = L.map('map', {
    center: [43.715378, 10.399152],
    zoom: 13,
    layers: [base_layer]
  });

}).call(this);

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Leaflet with MapBox tiles</title>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="map"></div>
  <script src="index.js"></script>
</body>
</html>

index.coffee

body = d3.select 'body'

width = body.node().getBoundingClientRect().width
height = body.node().getBoundingClientRect().height

d3.select('#map')
  .style
    width: width
    height: height

mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>'
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ'

base_layer = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr})

map = L.map 'map',
  center: [43.715378, 10.399152],
  zoom: 13,
  layers: [base_layer]

index.css

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
}

#map {
  flex-grow: 1;
}