How can I embed a simple mapbox url using the leaflet directive?

Question

I'm new with Mapbox and Leaflet and after checking out the leaflet-directive and Mapbox documentation I can get example maps to work but now when I integrate the two and use the URL I must work with, http://a.tiles.mapbox.com/v3/myMap.map-12341234.html for example.

This should be simple enough however I'm having an issue where the map is white.

my HTML looks like

<leaflet tiles="tiles"defaults="defaults"></leaflet>

and the js

angular.extend($scope, {
    // tiles: 'http://a.tiles.mapbox.com/v3/myMap.map-12341234.html',
    tiles: 'myMap.map-12341234',
    defaults: {
      scrollWheelZoom: false
    }
  });
})

how can I embed a url like my http://a.tiles.mapbox.com/v3/myMap.map-12341234.html

Not sure I understand the question. So with the map you've created, are you trying to embed it into a webpage using Javascript or do you just want a link you can share with someone? — BDD, Apr 27 '16 at 12:41

score 0 · Answer 1 · answered Apr 27 '16 at 14:39

I'm not sure I understand you correctly, Are you just trying to use leaflet with your custom Mapbox style? If that is the case, heres a example:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
// Replace 'mapbox.streets' with your map id.
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/myMap.map-12341234/{z}/{x}/{y}.png?access_token=' + L.mapbox.accessToken, {
    attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var map = L.map('map')
    .addLayer(mapboxTiles)
    .setView([42.3610, -71.0587], 15);
</script>


</body>
</html>

Hope this helps you out!

How can I embed a simple mapbox url using the leaflet directive?

1 Answers1