how to add text for display on map to a geojson object in leaflet

Question

So I have a geojson layer in leaflet, and I can add geojson objects to this layer for display on the resulting map.

Now I\'d like to add a text label to display near the

Answer 1

Label Overlay in Leaflet Using Marker Class and DivIcon Class With 'html' Property

Personally, I use this method to implement text labels on the map. This way I get to use all of the existing Marker Class methods and events with no extra effort. It's a bit like just using a text label in replace of an icon, I guess.

        var textLatLng = [35.1436, -111.5632];  
        var myTextLabel = L.marker(textLatLng, {
            icon: L.divIcon({
                className: 'text-labels',   // Set class for CSS styling
                html: 'A Text Label'
            }),
            zIndexOffset: 1000     // Make appear above other map features
        });

My CSS looks like:

        .text-labels {
            font-size: 2em;
            font-weight: 700;
            color: white;
            /* Use color, background, set margins for offset, etc */
        }

Also, I haven't explored this yet, but maybe you can add a png to the CSS and then offset the text, so that you can wrap an icon and label in the same Marker object using the Leaflet DivIcon class?? This would be easy with a div shape (e.g. box, circle), but I'm not sure about adding a png to the CSS for the Marker object - because I am not a CSS guru by any means.