diff --git a/js/plugin/CircleGoArea.js b/js/plugin/CircleGoArea.js
index bca6a6c..30020ac 100644
--- a/js/plugin/CircleGoArea.js
+++ b/js/plugin/CircleGoArea.js
@@ -1,8 +1,9 @@
BR.CircleGoArea = L.Control.extend({
circleLayer: null,
boundaryLayer: null,
- outsideAreaRenderer: L.svg({ padding: 1 }),
+ maskRenderer: L.svg({ padding: 2 }),
countries: null,
+ countriesMask: null,
states: null,
statesLoading: false,
@@ -94,10 +95,12 @@ BR.CircleGoArea = L.Control.extend({
this.routing.draw(false);
this.pois.draw(false);
this.map.on('click', this.onMapClick, this);
+ this.map.addLayer(this.countriesMask);
this._unlockOutsideArea();
L.DomUtil.addClass(this.map.getContainer(), 'circlego-draw-enabled');
} else {
this.map.off('click', this.onMapClick, this);
+ this.map.removeLayer(this.countriesMask);
this._lockOutsideArea();
L.DomUtil.removeClass(this.map.getContainer(), 'circlego-draw-enabled');
}
@@ -281,7 +284,7 @@ BR.CircleGoArea = L.Control.extend({
console.error('unhandled country: ' + name);
}
} else {
- // TODO message: no rules implemented for this location
+ // NOOP, no rules implemented for this location
}
},
@@ -342,16 +345,38 @@ BR.CircleGoArea = L.Control.extend({
},
_loadCountries: function () {
- BR.Util.getGeoJson(
+ BR.Util.getJson(
this.options.countriesUrl,
'countries',
L.bind(function (err, data) {
if (err) return;
- this.countries = data;
+ var key = Object.keys(data.objects)[0];
+ this.countries = topojson.feature(data, data.objects[key]);
- // debugging
- //this._addGeoJsonLayer(this.countries, { color: 'darkgreen', opacity: 1 });
+ var union = topojson.merge(data, [data.objects[key]]);
+ this.countriesMask = L.geoJson(union, {
+ renderer: this.maskRenderer,
+ // use Leaflet.snogylop plugin here, turf.mask too slow (~4s) for some reason
+ invert: true,
+ style: function (feature) {
+ return {
+ weight: 1,
+ color: 'darkgreen',
+ opacity: 0.8,
+ fillColor: '#020',
+ fillOpacity: 0.2,
+ className: 'circlego-outside',
+ };
+ },
+ });
+ this.countriesMask.on('click', L.DomEvent.stop);
+ this.countriesMask.bindTooltip(i18next.t('map.not-applicable-here'), {
+ sticky: true,
+ offset: [10, 0],
+ direction: 'right',
+ opacity: 0.8,
+ });
this.fire('countries:loaded');
}, this)
@@ -420,7 +445,7 @@ BR.CircleGoArea = L.Control.extend({
var mask = turf.mask(turf.polygonize(ring));
this.outsideArea = L.geoJson(mask, {
- renderer: this.outsideAreaRenderer,
+ renderer: this.maskRenderer,
style: function (feature) {
return {
weight: 4,
diff --git a/locales/en.json b/locales/en.json
index 48bab2a..cca67c5 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -96,8 +96,8 @@
"delete-nogo-areas": "Delete all no-go areas",
"delete-pois": "Delete all points of interest",
"delete-route": "Delete route",
- "draw-circlego-start": "Draw limited {{radius}}km go-to zone",
- "draw-circlego-stop": "Stop drawing limited {{radius}}km go-to zone",
+ "draw-circlego-start": "Draw limited go-to zone",
+ "draw-circlego-stop": "Stop drawing limited go-to zone",
"draw-poi-start": "Draw points of interest",
"draw-poi-stop": "Stop drawing points of interest",
"draw-route-start": "Draw route",
@@ -132,6 +132,7 @@
"edit": "Click to edit",
"help": "□ = move / resize, = delete,
click circle to quit editing"
},
+ "not-applicable-here": "not applicable here",
"opacity-slider": "Set transparency of route track and markers",
"opacity-slider-shortcut": "{{action}}\n(Hold {{key}} key to mute temporarily)",
"preview": "Preview",