Styling popup with two separate styles at once in Leaflet

Question

I have the point layer as you can see below:

where the semicircles are fine but points not necessarily. I would like to customize these points as well.

The problem is, that I can't find a good option for doing it.

One reasonable hint for me was here:

Leaflet: Style function does not work for point layer

which define two separate methods L.Circle and L.Semicircle at once. This is exactly what I would like to have.

My code looks like this:

var webcam = L.geoJSON(eurocam, {
  pointToLayer: function (pointFeature, latlng) {
    var rangeMarker = L.semiCircle(latlng, {
      radius: 300,
      startAngle: pointFeature.properties.AzimuthI,
      stopAngle: pointFeature.properties.AzimuthII,
      fill: true,
      color: '#FF0000',
      weight: 1
    });
    var webcamPoint = L.circleMarker(geojsonMarkerOptions, rangeMarker)
    return webcamPoint;
  },
  onEachFeature: function (pointFeature, layer) {
    const stream = pointFeature.properties.Stream;
    let liveStr;
    if (stream === 1) {
      liveStr = "<p class='webcam_refresh'> Live Stream </p>"
    } else {
      liveStr = "<p class='webcam_refresh'> Image refresh </p>"
    }
    var popupContent = L.popup({
        className: 'map-popup',
        closeButton: true,
      })
      .setLatLng(map.getBounds().getCenter())
      .setContent(
        "<p><h2 class='webcam_location'>" + pointFeature.properties.Location + "</h2></p>" +
        "<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
        "<iframe src=" + pointFeature.properties.Link + "'&output=embed'height='200' width='300' 
        title = 'camera thumbnail' > < /iframe>" + 
        liveStr + "<b class='popup_category'>Rotation:</b> " + pointFeature.properties.Rotation
      );
    layer.bindPopup(popupContent);
  }
}).addTo(map);

Unfortunately, it doesn't work properly. I have the error:

Uncaught TypeError: Cannot read properties of null (reading 'lat')

How can I style these remaining blue points in Leaflet?

Answer 1

I have no idea what the error means, but you can make a circle and a semicircle, then, combine them in a featureGroup.

var map = L.map('map').setView([39, 30], 7);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: '...',
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1
}).addTo(map);


// GeoJSON data
var eurocam = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [30, 40] },
      "properties": {"AzimuthI": 30, "AzimuthII": 100}
    },
    {
      "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [30, 39]},
      "properties": {"AzimuthI": 100, "AzimuthII": 200}
    },
    {
      "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [30, 38]},
      "properties": {"AzimuthI": 200, "AzimuthII": 250}
    },
  ]
}

var webcam = L.geoJSON(eurocam, {
  pointToLayer: function (pointFeature, latlng) {
    // angles
    var options = {
      startAngle: pointFeature.properties.AzimuthI,
      stopAngle: pointFeature.properties.AzimuthII
    };

    // semi-circle
    var rangeMarker = L.semiCircle(latlng, L.extend({
      // semi-circle style
      radius: 50000,
      color: '#f03',
      opacity: 0.7,
      weight: 2
    }, options));

    var circleOptions = { // circle style
      color: '#055',
      opacity: 0.5,
      weight: 2
    };

    // circle
    var webcamPoint = L.circleMarker(latlng, circleOptions);

    // feature group
    var markerGroup = L.featureGroup([rangeMarker, webcamPoint]);

    return markerGroup;
  },

  onEachFeature: function (pointFeature, layer) {
    //  popup
    var popupContent = L.popup({
      className: 'map-popup',
      closeButton: true,
    })
      .setLatLng(map.getBounds().getCenter())
      .setContent(
        "Azimuth I: " + pointFeature.properties.AzimuthI + "<br>" +
        "Azimuth II: " + pointFeature.properties.AzimuthII
      );

    layer.bindPopup(popupContent);
  }
}).addTo(map);

Answer 2

I agree with @Kadir's comment. It's the line:

webcam = L.geoJSON(eurocam).addTo(map);

Without explicit icon definition this will produce the default point icon (blue pointer) mentioned in the icon section of Leaflet documentation.