angularleafletopenstreetmapngx-leaflet

Leaflet + Angular is it possible to draw semicircles?


In my angular application, I use maps through the ngx-leaflet library and openstreet maps. And now we need to draw semicircles. I know there is a Leaflet-semicircle extension, but I have already installed this dependency via Angular, but I cannot use the objects to draw a semi circle. Is there any way to use the leaflet-semicircle extension in angular?


Solution

  • Ok, I found the correct way to draw semicircles. The problem was that in addition to installing the Leaflet-semicircle extension via npm I needed to import the javascript file properly.

    Just follow the steps:

    npm i leaflet --save  
    npm install --save leaflet-semicircle
    

    In angular.json file add the libraries as follows:

    "scripts": [
          "node_modules/leaflet/dist/leaflet.js",
          "./node_modules/leaflet-semicircle/semicircle.js"
      ]
    

    And finaly, the problem was here:

    import 'leaflet';
    import 'leaflet-semicircle';
    
    //Right way to import and extend all extensions importeds previously
    declare let L;
    
    //Doesn't works */
    //import * as L from 'leaflet';