CODEWITHSUNDEEP
leafletmapbox
CramerTV
CramerTV

Reputation: 1416

Why are the Leaflet/Mapbox zoom and layer controls missing markings?

We're loading our own tiles using mapbox 1.5.2 with the following code:

var mapLayer = L.tileLayer('http://192.168.1.2/tiles/{z}/{x}/{y}.png',
                            {maxZoom: 18}
);
var satLayer = L.tileLayer('http://192.168.1.2/images/{z}/{x}/{y}.png',
                            {maxZoom: 18}
);
var hybridLayer = L.tileLayer('http://192.168.1.2/roads/{z}/{x}/{y}.png',
                               {maxZoom: 18}
);
var satGroup = L.layerGroup([satLayer,hybridLayer]);
var baseLayers = {"OSM":mapLayer, "Sat":satGroup};
L.control.layers(baseLayers).addTo(map);

and get the following map: enter image description here

What happened to the controls? I should have a plus/minus in the zoom and the layers 'pancake stack' for the multiple layers. FWIW, the controls work just fine.

Upvotes: 2

Views: 2735

Answers (4)

Michael B
Michael B

Reputation: 107

I had a similar issue affecting the 'Layer Control' not being visible (even though they weren't exactly missing) and the +/- controls aligning slightly to the left

In my case I was using MAPBOX.CSS from CDN and it was due to a conflict with LEAFLET.CSS

Using either one or the other of the CSS files solved the issue. MAPBOX.CSS also seemed to affect my Marker Tooltip functionality so I personally went with LEAFLET.CSS and just retained MAPBOX.JS

The above issues contained the words 'Leaflet/Mapbox' and 'controls missing' which brought me here in the first place. Anyone else stumbling onto this post nowadays could very well share my particular issue and the css conflict between Leaflet and Mapbox.

Upvotes: 0

Noémien Kocher
Noémien Kocher

Reputation: 1364

According to the css file, you need to include a "map/images/" folder next to the css file containing :

The second is used by mapbox for high resolution screen.

icons-4040.png

icons-4040@2x.png

You may also need to include other pictures if your mapbox theme is dark ( see here).

Image are below but white background make them invisible.

icons-ffffff.png icons-ffffff@2x.png

Upvotes: 1

CramerTV
CramerTV

Reputation: 1416

When being used in an offline mode there are at least three files that are required, mapbox.css, mapbox.js and images/icons-404040.png. I used the following url to get the png file (which will likely changes as versions change): http://api.tiles.mapbox.com/mapbox.js/v1.5.2/images/icons-404040.png

Create an images subdirectory at the level of your mapbox.css and place that file in it. My app is working now.

Here is a pic of the file:

enter image description here

Upvotes: 6

tmcw
tmcw

Reputation: 11882

Most likely you've included the mapbox.js file, but not mapbox.css, or the wrong version of mapbox.css.

Upvotes: 1

Related Questions