Show inverted polygon for allowed zone

css/style.css

@@ -200,6 +200,9 @@ input#trackname:focus:invalid {
 .circlego-draw-enabled {
     cursor: pointer;
 }
+.circlego-outside {
+    cursor: not-allowed;
+}
 
 #map {
     /* center error message horizontally */

js/plugin/CircleGoArea.js

@@ -1,5 +1,6 @@
 BR.CircleGoArea = L.Control.extend({
     circleLayer: null,
+    outsideAreaRenderer: L.svg({ padding: 1 }),
 
     options: {
         radius: 1000, // in meters
@@ -87,14 +88,47 @@ BR.CircleGoArea = L.Control.extend({
     setNogoCircle: function(center) {
         if (center) {
             var polygon = this.circleToPolygon(center, this.options.radius);
-            $('#nogoJSON').val(JSON.stringify(polygon));
+            var geoJson = JSON.stringify(polygon);
+            $('#nogoJSON').val(geoJson);
             $('#nogoBuffer').val(0);
             this.nogos.uploadNogos();
+
+            var polygonClone = JSON.parse(geoJson);
+            this.setOutsideArea(polygonClone);
         } else {
             this.nogos.clear();
+            this.map.removeLayer(this.outsideArea);
         }
     },
 
+    setOutsideArea: function(polygon) {
+        var inner = polygon.features[0].geometry.coordinates.concat(polygon.features[1].geometry.coordinates);
+        var world = [[180, 90], [-180, 90], [-180, -90], [180, -90], [180, 90]];
+        polygon.features[0].geometry.coordinates = [world, inner];
+        polygon.features[0].geometry.type = 'Polygon';
+        polygon.features.pop();
+
+        if (this.outsideArea) {
+            this.map.removeLayer(this.outsideArea);
+        }
+
+        this.outsideArea = L.geoJson(polygon, {
+            renderer: this.outsideAreaRenderer,
+            style: function(feature) {
+                return {
+                    weight: 2,
+                    color: 'black',
+                    opacity: 0.4,
+                    fillColor: 'black',
+                    fillOpacity: 0.4,
+                    className: 'circlego-outside'
+                };
+            }
+        })
+            .on('click', L.DomEvent.stop)
+            .addTo(this.map);
+    },
+
     onMapClick: function(e) {
         this.setCircle([e.latlng.lng, e.latlng.lat], false);
     },
@@ -119,7 +153,12 @@ BR.CircleGoArea = L.Control.extend({
 
         this.clear();
         marker.addTo(this.circleLayer);
-        if (!skipNogo) this.setNogoCircle(center);
+        if (!skipNogo) {
+            this.setNogoCircle(center);
+        } else {
+            var polygon = this.circleToPolygon(center, this.options.radius);
+            this.setOutsideArea(polygon);
+        }
         this.draw(false);
     },