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",