1

I'm trying to create a map with circles of different size radii, to this end I'm trying to use the Leaflet circle class. The issue I'm having is that despite specifying circle and passing a radius the locations render themselves as the default icon.

Below is the HTML and JavaScript code that I'm using to render the map, the key line being return L.circle([feature.properties.latitude, feature.properties.longitude], {radius: 20});

HTML

<style type="text/css">
#map {
    width: 600px;
    height: 500px;
    margin: 0;
}
</style>

<div id="map"></div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var mymap = L.map('map').setView([53.96, -3.22], 5);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'pk.eyJ1IjoiZW5lcmd5dmlzIiwiYSI6ImNrbjR2aWo4azBsaHEycHM5dHByZzFnZW8ifQ.MyLCIQqHnNHQFWJQqs-j4w'
    }).addTo(mymap);

    var geojsonFeature = {'type': 'FeatureCollection', 'features': [{'id': '10031', 'type': 'Feature', 'properties': {'fuel_type': 'gas', 'latitude': 51.542919, 'longitude': 0.8349610000000001, 'name': 'Coryton', 'output': 264.64, 'output_time': '2020-01-01 01:30'}, 'geometry': {'type': 'Point', 'coordinates': [0.8349610000000001, 51.542919]}}, {'id': '10036', 'type': 'Feature', 'properties': {'fuel_type': 'gas', 'latitude': 51.662337, 'longitude': -0.022763, 'name': 'Enfield Energy', 'output': 232.416, 'output_time': '2020-01-01 01:30'}, 'geometry': {'type': 'Point', 'coordinates': [-0.022763, 51.662337]}}, {'id': '10045', 'type': 'Feature', 'properties': {'fuel_type': 'gas', 'latitude': 50.903033, 'longitude': -1.351318, 'name': 'Marchwood', 'output': 310.2, 'output_time': '2020-01-01 01:30'}, 'geometry': {'type': 'Point', 'coordinates': [-1.351318, 50.903033]}}]}

    var geoJson = new L.geoJSON(geojsonFeature, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup('<p>Name: '+feature.properties.name);
            return L.circle([feature.properties.latitude, feature.properties.longitude], {radius: 20});
        }
    }).addTo(mymap);
});

example leaflet map with markers instead of circles

I am using Leaflet 1.3.1

1

1 Answer 1

1

I still can't understand why the previous code doesn't work but using an alternative approach with pointToLayer and L.Circle seems to achieve the desired effect.

var geoJson = new L.geoJSON(geojsonFeature, {
    pointToLayer: (feature, latlng) => {
        return new L.Circle([feature.properties.latitude, feature.properties.longitude], feature.properties.output*50);
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<p>Name: '+feature.properties.name);
    }
}).addTo(mymap);
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.