[GIS] Why won’t mapbox map load into DIV container

mapbox

I cannot figure out why I cannot load a map into a CSS template that I am trying to customize.

I have placed a fiddle here:

Basically I'm trying to get a map to load into the red DIV Container (called mapBox)

Best Answer

Change

var map = mapbox.map('map');

var map = mapbox.map('mapBox');

Related Solutions

[GIS] How to add a CartoDB layer to a MapBox map

Since both mapbox.js and cartodb.js include leaflet, you are attempting to load leaflet twice.

Mapbox has a "standalone" version of their library that doesn't load include leaflet, so loading this plus cartodb.js makes everything work.

I also added a .setZIndex() to the cartodb layer to make it show up on top.

The code below should work for you!

<!DOCTYPE html>
<head>
    <meta charset=utf-8 />
    <title>Tiles Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position:absolute;
            top:0;
            bottom:0;
            width:100%;
        }
    </style>
</head>

<body>

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

   <!--  Important:  Both mapbox.js and cartodb.js use Leaflet, so loading both libraries would load leaflet twice and cause problems.  Mapbox has a "standalone" version of their library that does not inlude leaflet, so in this scenario we are using leaflet provided by cartodb.js -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.standalone.js'></script>
    <script>
        L.mapbox.accessToken = 'pk.eyJ1Ijoic3ZwdmVydGV4IiwiYSI6IkxuUklIQUEifQ.VlwL0B5MUZcEqU-XsV8TVQ';

        var map = L.map('map', {
            center: [51.505537, -0.115528],
            zoom: 12
        });

        map.addControl(L.mapbox.geocoderControl('mapbox.places', {
            keepOpen: true
        }));

        var layers = {
            Streets: L.mapbox.tileLayer('svpvertex.ml8nijl4'),
            Imagery: L.mapbox.tileLayer('svpvertex.m0ammo9e')
        };

        layers.Streets.addTo(map);

        //add cartoDB layer, set z-index so it shows up on top
        cartodb.createLayer(map, 'https://svpvertex.cartodb.com/api/v2/viz/2a795afa-208c-11e5-ada2-0e4fddd5de28/viz.json').addTo(map)
        .on('done', function(layer) {
            layer.setZIndex(5);
        });

        L.control.layers(layers).addTo(map);

    </script>
</body>

Mapbox – Adding and Removing Radius Circle After Fitting Map

Instead of using L.circle to get bounds (where circle has actually to be drawn on the map), I would recommend using turf.js library for that.

You can first use turf.buffer method to get desired circle around point, and then turf.bbox method to get bounding box of circle.

Function to fit map to desired circle could then look something like this:

function fitToCircle(point, radius) {
  var buffered = turf.buffer(turf.point(center), radius, {units: 'meters'});
  var bbox = turf.bbox(buffered);
  map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]]);
}

You would then fit map to circle with the call:

var center = [52.462610, -1.588580];

var newValue = 5; // That's the new value of the slider //
var meters = 1609.34; // Meters in a mile //
var dist = newValue * meters;

fitToCircle(center, dist);

Best Answer

Related Solutions

[GIS] How to add a CartoDB layer to a MapBox map

Mapbox – Adding and Removing Radius Circle After Fitting Map

Related Question