Mapbox Map Styling For Description Box

I am newbie working on his front end skills and I am designing my own website to learn. I am trying to implement a map using the Mapbox API and I cannot get the styling of the desc

Solution 1:

Why not use the default control layer and create a custom L.Control? Doing that, the positioning is all taken care of for you:

JS:

varMyCustomControl = L.Control.extend({
    options: {
        // Default control positionposition: 'bottomleft'
    },
    onAdd: function (map) {
        // Create a container with classname and return itreturn L.DomUtil.create('div', 'my-custom-control');
    },
    setContent: function (content) {
        // Set the innerHTML of the containerthis.getContainer().innerHTML = content;
    }
});

// Assign to a variable so you can use it later and add it to your mapvar myCustomControl =  newMyCustomControl().addTo(map);

Now add some styling, take note of the :empty pseudoselector which will hide the container if it's empty.

CSS:

.my-custom-control {
    padding:5px10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    border-radius: 5px;
}

.my-custom-control:empty {
    display: none;
}

Now you can use that in your clickhandlers:

// Set content on a marker click
marker.on('click', function () {
    myCustomControl.setContent('My awesome content');
});

// Remove content on map click
map.on('click', function () {
    myCustomControl.setContent('');
});

Here's a working example on Plunker: http://plnkr.co/edit/wrlC7AAHLBWsDgzk8PRw?p=preview