Drawing a segment of azimuth from values defined in Leaflet

Question

Following the query:

QGIS drawing segment of azimuth from values defined

I would like to do something similar in Leaflet. Unfortunately, I cannot use the QGIS2Web plugin for this purpose, because I used multipart geometry in the styling. This option seems to be not supported yet by the plugin:

Avoid multiple labels for the same layer in QGIS2WEB export

I tried to make it on my own in Leaflet by using the foto-webcam.eu map

After looking at their website I found something like:

 startAngle: cams[i].direction-cams[i].sector/2,
 stopAngle: cams[i].direction+cams[i].sector/2});cams[i].symbol.addTo(mymap);}
 for(var i=0;i <cams.length;i++ ){cams[i].dot=L.circleMarker(cams[i].latlng,{radius: 3,
 color: "#404080",
 weight: 1,
 fill: true,
 fillColor: cams[i].dotcolor,
 fillOpacity: 1});cams[i].dot.addTo(mymap);}
 onZoomend();}

which might probably define the thing I want.

I am wondering how to implement it into my leaflet map, since my geojson file looks like this:

  var eurocam = {
  "type": "FeatureCollection",
  "name": "euro",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
  { "type": "Feature", "properties": { "id": 1, "Location": "Sumburg Head", "Provider": 
 "Shetland Webcams", "Stream": 1, "Refresh": null, "AzimuthI": 300, "AzimuthII": 360, 
  "Nightmode": 1, "AllSky": 0, "Available": 1, "Rotation": "except overnight", "Country": 
   null, "Importance": null }, "geometry": { "type": "Point", "coordinates": [ 
   -1.274802004043399, 59.854703404497755 ] } },
   { "type": "Feature", "properties": { "id": 2, "Location": "Soteag Cliff", "Provider": 
   "Shetland Webcams", "Stream": 1, "Refresh": null, "AzimuthI": 60, "AzimuthII": 120, 
   "Nightmode": 1, "AllSky": 0, "Available": 1, "Rotation": "except overnight", "Country": 
   null, "Importance": null }, "geometry": { "type": "Point", "coordinates": [ 
   -1.27255592832451, 59.856353055941931 ] } }
   ]
   }

where I have AzimuthI and AzimuthII defined. I would like to have the circle wedges as you see below. Is it possible in Leaflet?

UPDATE:

Following the helpful comment below, we have the Leaflet-semicircle plugin, which can draw features like these.

However now i am struggling with making it versatile for the geoJson file provided.

My geoJSON:

    var eurocam = {
    "type": "FeatureCollection",
    "name": "euro",
    "crs": { "type": "name", "properties": { "name": 
  "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
  { "type": "Feature", "properties": { "id": 1, "Location": "Sumburg 
  Head", "Provider": "Shetland Webcams", "Stream": 1, "Refresh": null, 
  "AzimuthI": 300, "AzimuthII": 360, "Nightmode": 1, "AllSky": 0, 
  "Available": 1, "Rotation": "except overnight", "Country": null, 
  "Importance": null }, "geometry": { "type": "Point", "coordinates": [ 
  -1.274802004043399, 59.854703404497755 ] } },
   { "type": "Feature", "properties": { "id": 2, "Location": "Soteag 
   Cliff", "Provider": "Shetland Webcams", "Stream": 1, "Refresh": 
   null, "AzimuthI": 60, "AzimuthII": 120, "Nightmode": 1, "AllSky": 0, 
   "Available": 1, "Rotation": "except overnight", "Country": null, 
   "Importance": null }, "geometry": { "type": "Point", "coordinates": 
   [ -1.27255592832451, 59.856353055941931 ] } }
  ]
  }

and code:

 webcam = L.geoJSON(eurocam,
var range = L.semiCircle();
  for (var i = 1; i <= options.count; i++ {
    L.semiCircle(AzimuthI, {
        radius: i*(AzimuthII-AzimuthI),
        fiill: true,
        color: '##FF0000',
        weight: 1
    })
})
return range
).addTo(map);

which comes from a similar issue:

https://stackoverflow.com/questions/37563811/leaflet-need-to-draw-range-radius-semi-circles

The plugin is good, but I don't know how to marry it with my geoJson stuff. — Geographos, Jul 02 '21 at 13:58

score 1 · Accepted Answer · answered Jul 02 '21 at 17:40

You have to use pointToLayer option of L.geoJSON layer to assign markers to GeoJSON points. See nice example at https://leafletjs.com/examples/geojson/.

When defining semicircle marker, you use GeoJSON feature properties to set start and stop angle. Since there is no data about webcam range in GeoJSON properties, you just choose constant that suits you. Range is in meters.

So your code could then look something like this:

var rangeRadius = 500;
var webcam = L.geoJSON(eurocam, {
  pointToLayer: function(pointFeature, latlng) {
    var rangeMarker = L.semiCircle(latlng, {
      radius: rangeRadius,
      startAngle: pointFeature.properties.AzimuthI,
      stopAngle: pointFeature.properties.AzimuthII,
      fill: true,
      color: '#FF0000',
      weight: 1
    });
    return rangeMarker;
  }
}).addTo(map);

Drawing a segment of azimuth from values defined in Leaflet

1 Answers1