CODEWITHSUNDEEP
javascriptleaflet
Volpym
Volpym

Reputation: 161

Show the radius of a Circle on its center

I have a json file that gives me all the necessary information for me to draw circles at a map. The point is that I need the circles to show the number that was used as their radius.

I managed to draw the circle and add popups to it, but I am not able to show a simple text(the radius value) at the center of each circle. 

L.circleMarker(
  [conflictsJson[index].latitude, conflictsJson[index].longitude], //προσθέτει συντεταγμένες στον χάρτη
  {
    radius: setRadius(conflictsJson, conflictsJson[index].location),
    color: '#FF0000',
    weight: 4,
    opacity: 0.5,
    fillOpacity: 0.25,
  },
)
  .bindPopup(conflictsJson[index].embeddedHtml, { maxWidth: 220 }) //Προσθέτει το link για το tweet στο popup παράθυρο
  .addTo(map);

setRadius() generates a value from a json file.

Upvotes: 1

Views: 349

Answers (1)

RezaNikfal
RezaNikfal

Reputation: 993

To create something like this:

enter image description here

Take a look at the following snippet:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #map {
            width: 400px;
            height: 400px;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
</head>
<body>
    <div id="mapid" style="width: 100%; height: 100vh;"></div>

    <script>
        var map = new L.Map('mapid').setView([43.768017, - 79.333947], 16);

        var data = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": { "radius": 200 },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -79.3347430229187,
                            43.77203899218474
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": { "radius": 100 },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -79.32781219482422,
                            43.770427538281865
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": { "radius": 500 },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -79.33465719223022,
                            43.764539164480254
                        ]
                    }
                }
            ]
        }

        var circleCenters = L.geoJSON(data);
        var myIcon = L.divIcon({ className: {} });
        circleCenters.eachLayer(function (layer) {
            L.circle([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { radius: 200 }).addTo(map);
            L.marker([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { icon: myIcon }).addTo(map).bindTooltip(layer.feature.properties.radius.toString(), { direction: 'center', permanent: true }).openTooltip();
        });
    </script>
</body>
</html>

Also you can override the tool tip's CSS Styles to remove the white background.

Upvotes: 3

Related Questions