How do I prevent overlapping text on Leaflet layers?

Viewed 28

I'm attempting to create a map that displays wind chill temperatures from weather stations (using Synoptic Data's API) on leaflet. I want the stations to show different colored circles based on the wind chill temperature and show text with the temperature on top. The problem is that the text overlaps each other, but not the circles. I do not mind overlap of station data provided that the text and colored circles overlap together and not separately. How would I combine them?

Example image of the map:

Example image of the map.

This is the desired effect: This is the desired effect.

Below is .js:

var terrain = L.tileLayer.provider('Stamen.Terrain', {
    bounds:[[46.654,-200.941],[76.701,-120.231]]
});

var map = L.map('map', {
    maxZoom:12,
    minZoom:5,
    maxBounds:[[46.654,-200.941],[76.701,-120.231]],
    layers: [terrain/*, watercolor, toner*/]
}).setView([64.666, -147.101], 8);

var baseLayers = {
    'Terrain': terrain,
};

var layerControl = L.control.layers(baseLayers).addTo(map);

fetch("https://api.synopticdata.com/v2/stations/latest?&token=[token]&obtimezone=utc&output=geojson&units=english&status=active&varsoperator=and&state=AK&within=1440&units=english")
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        var jsonLayer = L.geoJSON(data, {
            style: function(feature) {
                if (feature.properties.air_temp == null) {
                    var ECT = undefined;
                } else if (feature.properties.wind_speed == null ) {
                    var ECT = undefined;
                } else if (feature.properties.wind_speed >= 2.60693) {  
                    var ECT = Math.round(35.74+(0.6215*feature.properties.air_temp)-(35.75*(feature.properties.wind_speed**0.16))+(0.4275*feature.properties.air_temp*((feature.properties.wind_speed/1.15077944802)**0.16)));
                } else {
                    var ECT = feature.properties.air_temp;
                };
        
                if (ECT > 0) {
                    return {
                        color: "green",
                        fillOpacity:1,
                        fillColor: "green"
                    };
                } else if (ECT > -30) {
                    return {
                        color: "yellow",
                        fillOpacity:1,
                        fillColor: "yellow"
                    };
                } else if (ECT > -50) {
                    return {
                        color: "red",
                        fillOpacity:1,
                        fillColor: "red"
                    };
                } else if (ECT <= -50) {
                    return {
                        color: "purple",
                        fillOpacity:1,
                        fillColor: "purple"
                    };
                } else {
                    return {
                        color: "black",
                        fillOpacity:1,
                        fillColor: "black"
                    };
                }   
            },
            
            //This loops through each feature and applies a popup with ECT information if wind > 2.6 kts 
            //The equation doesnt work below that wind speed!
            onEachFeature: function (feature, jsonLayer) {
                if (feature.properties.air_temp == null) {
                    var uECT = "???";
                } else if (feature.properties.wind_speed == null ) {
                    var uECT = "???";
                } else if (feature.properties.wind_speed >= 2.60693) {  
                    var uECT = Math.round(35.74+(0.6215*feature.properties.air_temp)-(35.75*(feature.properties.wind_speed**0.16))+(0.4275*feature.properties.air_temp*((feature.properties.wind_speed/1.15077944802)**0.16)))+"°F";
                } else {
                    var uECT = Math.round(feature.properties.air_temp)+"°F";
                };
                
                if (feature.properties.wind_speed == null) {
                    var windspeed = "???";
                } else {
                    var windspeed = Math.round(feature.properties.wind_speed)+" kts";
                };
                
                if (feature.properties.air_temp == null) {
                    var airtemp = "???";
                } else {
                    var airtemp = Math.round(feature.properties.air_temp)+"°F";
                };
                
                jsonLayer.bindPopup("<h3>"+"Station: "+feature.properties.stid+"</h3>"+"ECT: "+uECT+"<br>"+"Air Temp: "+airtemp+"<br>"+"Wind Speed: "+windspeed);
            },
            //This tells the function to use the station marker options defined above.
            pointToLayer: function (feature, latlng) {
                if (feature.properties.air_temp == null) {
                    var vECT = "???";
                } else if (feature.properties.wind_speed == null ) {
                    var vECT = "???";
                } else if (feature.properties.wind_speed >= 2.60693) {  
                    var vECT = Math.round(35.74+(0.6215*feature.properties.air_temp)-(35.75*(feature.properties.wind_speed**0.16))+(0.4275*feature.properties.air_temp*((feature.properties.wind_speed/1.15077944802)**0.16)))+"°F";
                } else {
                    var vECT = Math.round(feature.properties.air_temp)+"°F";
                };

                return L.circleMarker(latlng, {
                    radius:15,
                }).bindTooltip(vECT, {
                    permanent: true,
                    className: 'ect-tooltip',
                    direction: 'center',
                    opacity:1
                }); 
            }
        }).addTo(map);
    })  

Any help is appreciated!

0 Answers
Related