7

I have the point layer as you can see below:

enter image description here

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?

3
  • you might need to do this 1st .setLatLng(e.latlng) before you zoom to bounds. i've ran into this error before
    – ziggy
    Commented Nov 22, 2021 at 14:32
  • It's not related to my problem I am afraid.
    – Geographos
    Commented Nov 22, 2021 at 14:43
  • Could you provide a working example which produces the map in the image? Commented Nov 22, 2021 at 18:59

2 Answers 2

11
+50

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);

enter image description here

2
  • Your code is right, although the problem is still the same. Now, I have the semicircles, circles, and still the blue points. See my full situation here: 02.mlearnweb.online
    – Geographos
    Commented Nov 23, 2021 at 14:43
  • You add geojson (eurocam) twice in map.js. Delete the first one -> i.sstatic.net/KhIFU.png. Blue icon comes from the first one. Commented Nov 24, 2021 at 13:57
3

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.

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.