1

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

enter image description here

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

2
  • 1
    Have a look at Leaflet plugin Leaflet-semicircle.
    – TomazicM
    Jul 2 at 12:58
  • The plugin is good, but I don't know how to marry it with my geoJson stuff.
    – MKR
    Jul 2 at 13:58
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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