Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@isnot

isnot/bounds-view.user.js

Created June 16, 2018 05:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save isnot/ff34e0db4b165529217acb3d16305dff to your computer and use it in GitHub Desktop.
Save isnot/ff34e0db4b165529217acb3d16305dff to your computer and use it in GitHub Desktop.
Download ZIP
IITC plugin: Bounds View 地図上に矩形を範囲選択して、その座標と大きさを表示する
Raw
bounds-view.user.js
// ==UserScript==
// @id iitc-plugin-bounds-view
// @name IITC plugin: Bounds View
// @category Misc
// @version 0.1
// @namespace https://github.com/jonatkins/ingress-intel-total-conversion
// @updateURL none
// @downloadURL none
// @description [] Bounds View - 地図上に矩形を範囲選択して、その座標と大きさを表示する
// @include https://*.ingress.com/intel*
// @include http://*.ingress.com/intel*
// @match https://*.ingress.com/intel*
// @match http://*.ingress.com/intel*
// @grant none
// ==/UserScript==
function wrapper(plugin_info) {
// ensure plugin framework is there, even if iitc is not yet loaded
if (typeof window.plugin !== 'function') window.plugin = function() {};
// PLUGIN START ////////////////////////////////////////////////////////
// include; https://github.com/kajic/leaflet-locationfilter
// use <global> window.map, L, $
// use own namespace for plugin
window.plugin.boundsView = {};
window.plugin.boundsView.setupLayer = function() {
// センター・マーク
// var center_m = new L.marker(window.map.getCenter(), {
// icon: new L.icon({iconUrl: '//commondatastorage.googleapis.com/ingress.com/img/map_icons/marker_images/peNIA.png'}),
// clickable: false,
// keyboard: false,
// title: '位置合わせ 中心座標',
// zIndexOffset: 700,
// opacity: 0.6,
// riseOnHover: true,
// });
// コントロール・パネル
var bv_p_html = '<div id="plugin_BoundsView_pane">';
bv_p_html = bv_p_html + '状態 <input type="text" name="text" id="plugin_BoundsView_pane_text" value="?" readonly="readonly" /> ※コピペ用<br/>';
bv_p_html = bv_p_html + 'センター座標 <input type="text" name="pos" id="plugin_BoundsView_pane_pos" value="?" readonly="readonly" /><br/>';
bv_p_html = bv_p_html + '東西距離 <input type="text" name="we" id="plugin_BoundsView_pane_we" value="?" readonly="readonly" />m<br/>';
bv_p_html = bv_p_html + '南北距離 <input type="text" name="ns" id="plugin_BoundsView_pane_ns" value="?" readonly="readonly" />m<br/>';
bv_p_html = bv_p_html + '選択範囲zoom <input type="text" name="zoom" id="plugin_BoundsView_pane_zoom" value="?" size="4" readonly="readonly" /><br/>';
bv_p_html = bv_p_html + '補正後zoom z<input type="text" name="z" id="plugin_BoundsView_pane_z" value="?" size="4" readonly="readonly" />';
bv_p_html = bv_p_html + '<input type="button" name="zplus" id="plugin_BoundsView_pane_zplus" value="+" />';
bv_p_html = bv_p_html + '<input type="button" name="zminus" id="plugin_BoundsView_pane_zminus" value="-" /><br/>';
bv_p_html = bv_p_html + 'ピクセル横x縦 <input type="text" name="pix" id="plugin_BoundsView_pane_pix" value="?" size="10" readonly="readonly" /><br/></div>';
window.plugin.boundsView.bv_p_html = bv_p_html;
window.plugin.boundsView.initializeLayer();
};
// 四角範囲の図形 位置と大きさ可変
window.plugin.boundsView.initializeLayer = function(bounds) {
var bounds_l = new L.LocationFilter();
bounds_l.on('change', window.plugin.boundsView.onChange);
bounds_l.on('adjustToZoomClick', window.plugin.boundsView.onChange);
bounds_l.on('enabled', window.plugin.boundsView.onEnable);
bounds_l.on('disabled', window.plugin.boundsView.onDisable);
// Layer Group
//var bv_lg = new L.layerGroup([bounds_l]);
window.addLayerGroup('Bounds View', bounds_l);
if (typeof bounds === 'object') {
bounds_l.setBounds(bounds);
}
window.plugin.boundsView.layer = bounds_l;
};
window.plugin.boundsView.onEnable = function() {
window.dialog({
html: window.plugin.boundsView.bv_p_html,
id: 'plugin_BoundsView_panel',
title: 'Bounds View',
focusCallback: window.plugin.boundsView.onPaneChange,
});
$('#plugin_BoundsView_pane_zplus').on('click', window.plugin.boundsView.onZoomUp);
$('#plugin_BoundsView_pane_zminus').on('click', window.plugin.boundsView.onZoomDown);
window.plugin.boundsView.layer.setBounds(window.map.getBounds());
window.plugin.boundsView.onChange();
}
window.plugin.boundsView.onDisable = function() {
//window.DIALOGS['dialog-plugin_BoundsView_pane'].close();
//$('#dialog-plugin_BoundsView_pane').close();
}
// パネル内のzoom補正→サイズ反映
window.plugin.boundsView.onPaneChange = function() {
//var b = new L.Bounds();
//window.plugin.boundsView.layer.setBounds(b);
}
window.plugin.boundsView.onZoomUp = function() {
window.plugin.boundsView.onZoomChange(1);
}
window.plugin.boundsView.onZoomDown = function() {
window.plugin.boundsView.onZoomChange(-1);
}
window.plugin.boundsView.onZoomChange = function(diff) {
$('#plugin_BoundsView_pane_z').val(parseInt($('#plugin_BoundsView_pane_z').val()) + parseInt(diff));
var pix = $('#plugin_BoundsView_pane_pix').val();
var pixa = pix.split(/x/);
if (diff === 1) {
pixa[0] = pixa[0] * 2;
pixa[1] = pixa[1] * 2;
}
if (diff === -1) {
pixa[0] = parseInt(pixa[0] / 2);
pixa[1] = parseInt(pixa[1] / 2);
}
$('#plugin_BoundsView_pane_pix').val(pixa[0] + 'x' + pixa[1]);
}
// レイヤーからパネル内の数値へのフィードバック
window.plugin.boundsView.onChange = function(e) {
var bounds = window.plugin.boundsView.layer.getBounds();
var c = bounds.getCenter();
var nw = bounds.getNorthWest();
var se = bounds.getSouthEast();
var sw = bounds.getSouthWest();
var pos = (Math.round(c.lat * 1E6) / 1E6) + ',' + (Math.round(c.lng * 1E6) / 1E6);
var pix = window.plugin.boundsView.rectangle2pix(nw, se);
var zoom = window.map.getZoom();
$('#plugin_BoundsView_pane_text').val(pos + '/z' + zoom + '/' + pix);
$('#plugin_BoundsView_pane_zoom').val('z' + zoom);
$('#plugin_BoundsView_pane_z').val(zoom);
$('#plugin_BoundsView_pane_pos').val(pos);
$('#plugin_BoundsView_pane_pix').val(pix);
$('#plugin_BoundsView_pane_ns').val(parseInt(sw.distanceTo(nw)));
$('#plugin_BoundsView_pane_we').val(parseInt(sw.distanceTo(se)));
}
window.plugin.boundsView.rectangle2pix = function(nw, se) {
// 1000[m] = 519[pix] | z16 @tokyo
// 1000[m] = 260[pix] | z15 @tokyo
// 1000[m] = 131[pix] | z14 @tokyo
// 7000[m] = 907[pix] | z14 @tokyo
// 7000[m] = 454[pix] | z13 @tokyo
// 7000[m] = 228[pix] | z12 @tokyo
var nwp = window.map.latLngToContainerPoint(nw);
var sep = window.map.latLngToContainerPoint(se);
return parseInt(sep.x - nwp.x) + 'x' + parseInt(sep.y - nwp.y);
}
var setup = function() {
window.plugin.boundsView.setupLayer();
// window.addHook('iitcLoaded', window.plugin.boundsView.setupLayer);
// $('#toolbox').append('<a id="pluginS4pUIe" onclick="window.plugin.boundsView.exec()"></a>');
var css = 'div.leaflet-marker-icon.location-filter.resize-marker { background: url( https://github.com/kajic/leaflet-locationfilter/raw/master/src/img/resize-handle.png ) no-repeat; cursor: move; } div.leaflet-marker-icon.location-filter.move-marker { background: url( https://github.com/kajic/leaflet-locationfilter/raw/master/src/img/move-handle.png ) no-repeat; cursor: move; } div.location-filter.button-container { background: #bfbfbf; background: rgba(0, 0, 0, 0.25); -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; padding: 5px; } .leaflet-container div.location-filter.button-container a { display: inline-block; color: #0F2416; font-size: 11px; font-weight: normal; text-shadow: #A1BB9C 0 1px; padding: 6px 7px; border: 1px solid #9CC5A4; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px; -moz-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px; box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px; background: #c4e3b9; background: rgba(218, 252, 205, 0.9); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9))); background: -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background: -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background: -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background: -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background: linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); } .leaflet-container div.location-filter.button-container a:hover { color: #263F1C; background: #dde6d8; background: rgba(245, 255, 240, 0.9); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9))); background: -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background: -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background: -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background: -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background: linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); } .leaflet-container div.location-filter.button-container a.enable-button { padding: 6px 7px 6px 25px; background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9))); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%); background-repeat: no-repeat; background-position: left center; } .leaflet-container div.location-filter.button-container a.enable-button:hover, .leaflet-container div.location-filter.button-container.enabled a.enable-button { background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9))); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background-image: url( https://raw.githubusercontent.com/kajic/leaflet-locationfilter/master/src/img/filter-icon.png ), linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%); background-repeat: no-repeat; background-position: left center; } .leaflet-container div.location-filter.button-container a.adjust-button { margin-left: 2px; }';
$('<style>').prop('type', 'text/css').html(css).appendTo('head');
};
/*
* Leaflet.locationfilter - leaflet location filter plugin
* Copyright (C) 2012, Tripbirds.com
* http://tripbirds.com
*
* Licensed under the MIT License.
*
* Date: 2012-09-24
* Version: 0.1
*/
L.LatLngBounds.prototype.modify = function(map, amount) {
var sw = this.getSouthWest(),
ne = this.getNorthEast(),
swPoint = map.latLngToLayerPoint(sw),
nePoint = map.latLngToLayerPoint(ne);
sw = map.layerPointToLatLng(new L.Point(swPoint.x-amount, swPoint.y+amount));
ne = map.layerPointToLatLng(new L.Point(nePoint.x+amount, nePoint.y-amount));
return new L.LatLngBounds(sw, ne);
};
L.Control.Button = L.Class.extend({
initialize: function(options) {
L.Util.setOptions(this, options);
},
addTo: function(container) {
container.addButton(this);
return this;
},
onAdd: function (buttonContainer) {
this._buttonContainer = buttonContainer;
this._button = L.DomUtil.create('a', this.options.className, this._buttonContainer.getContainer());
this._button.href = '#';
this.setText(this.options.text);
var that = this;
this._onClick = function(event) {
that.options.onClick.call(that, event);
};
L.DomEvent
.on(this._button, 'click', L.DomEvent.stopPropagation)
.on(this._button, 'mousedown', L.DomEvent.stopPropagation)
.on(this._button, 'dblclick', L.DomEvent.stopPropagation)
.on(this._button, 'click', L.DomEvent.preventDefault)
.on(this._button, 'click', this._onClick, this);
},
remove: function() {
L.DomEvent.off(this._button, "click", this._onClick);
this._buttonContainer.getContainer().removeChild(this._button);
},
setText: function(text) {
this._button.title = text;
this._button.innerHTML = text;
}
});
L.Control.ButtonContainer = L.Control.extend({
options: {
position: 'topleft'
},
getContainer: function() {
if (!this._container) {
this._container = L.DomUtil.create('div', this.options.className);
}
return this._container;
},
onAdd: function (map) {
this._map = map;
return this.getContainer();
},
addButton: function(button) {
button.onAdd(this);
},
addClass: function(className) {
L.DomUtil.addClass(this.getContainer(), className);
},
removeClass: function(className) {
L.DomUtil.removeClass(this.getContainer(), className);
}
});
L.LocationFilter = L.Class.extend({
includes: L.Mixin.Events,
options: {
enableButton: {
enableText: "Select area",
disableText: "Remove selection"
},
adjustButton: {
text: "Select area within current zoom"
},
buttonPosition: 'topleft'
},
initialize: function(options) {
L.Util.setOptions(this, options);
},
addTo: function(map) {
map.addLayer(this);
return this;
},
onAdd: function(map) {
this._map = map;
if (this.options.enableButton || this.options.adjustButton) {
this._initializeButtonContainer();
}
if (this.options.enable) {
this.enable();
}
},
onRemove: function(map) {
this.disable();
if (this._buttonContainer) {
this._buttonContainer.removeFrom(map);
}
},
/* Get the current filter bounds */
getBounds: function() {
return new L.LatLngBounds(this._sw, this._ne);
},
setBounds: function(bounds) {
this._nw = bounds.getNorthWest();
this._ne = bounds.getNorthEast();
this._sw = bounds.getSouthWest();
this._se = bounds.getSouthEast();
if (this.isEnabled()) {
this._draw();
this.fire("change", {bounds: bounds});
}
},
isEnabled: function() {
return this._enabled;
},
/* Draw a rectangle */
_drawRectangle: function(bounds, options) {
options = options || {};
var defaultOptions = {
stroke: false,
fill: true,
fillColor: "black",
fillOpacity: 0.3,
clickable: false
};
options = L.Util.extend(defaultOptions, options);
var rect = new L.Rectangle(bounds, options);
rect.addTo(this._layer);
return rect;
},
/* Draw a draggable marker */
_drawImageMarker: function(point, options) {
var marker = new L.Marker(point, {
icon: new L.DivIcon({
iconAnchor: options.anchor,
iconSize: options.size,
className: options.className
}),
draggable: true
});
marker.addTo(this._layer);
return marker;
},
/* Draw a move marker. Sets up drag listener that updates the
filter corners and redraws the filter when the move marker is
moved */
_drawMoveMarker: function(point) {
var that = this;
this._moveMarker = this._drawImageMarker(point, {
"className": "location-filter move-marker",
"anchor": [-10, -10],
"size": [13,13]
});
this._moveMarker.on('drag', function(e) {
var markerPos = that._moveMarker.getLatLng(),
latDelta = markerPos.lat-that._nw.lat,
lngDelta = markerPos.lng-that._nw.lng;
that._nw = new L.LatLng(that._nw.lat+latDelta, that._nw.lng+lngDelta, true);
that._ne = new L.LatLng(that._ne.lat+latDelta, that._ne.lng+lngDelta, true);
that._sw = new L.LatLng(that._sw.lat+latDelta, that._sw.lng+lngDelta, true);
that._se = new L.LatLng(that._se.lat+latDelta, that._se.lng+lngDelta, true);
that._draw();
});
this._setupDragendListener(this._moveMarker);
return this._moveMarker;
},
/* Draw a resize marker */
_drawResizeMarker: function(point, latFollower, lngFollower, otherPos) {
return this._drawImageMarker(point, {
"className": "location-filter resize-marker",
"anchor": [7, 6],
"size": [13, 12]
});
},
/* Track moving of the given resize marker and update the markers
given in options.moveAlong to match the position of the moved
marker. Update filter corners and redraw the filter */
_setupResizeMarkerTracking: function(marker, options) {
var that = this;
marker.on('drag', function(e) {
var curPosition = marker.getLatLng(),
latMarker = options.moveAlong.lat,
lngMarker = options.moveAlong.lng;
// Move follower markers when this marker is moved
latMarker.setLatLng(new L.LatLng(curPosition.lat, latMarker.getLatLng().lng, true));
lngMarker.setLatLng(new L.LatLng(lngMarker.getLatLng().lat, curPosition.lng, true));
// Sort marker positions in nw, ne, sw, se order
var corners = [that._nwMarker.getLatLng(),
that._neMarker.getLatLng(),
that._swMarker.getLatLng(),
that._seMarker.getLatLng()];
corners.sort(function(a, b) {
if (a.lat != b.lat)
return b.lat-a.lat;
else
return a.lng-b.lng;
});
// Update corner points and redraw everything except the resize markers
that._nw = corners[0];
that._ne = corners[1];
that._sw = corners[2];
that._se = corners[3];
that._draw({repositionResizeMarkers: false});
});
this._setupDragendListener(marker);
},
/* Emit a change event whenever dragend is triggered on the
given marker */
_setupDragendListener: function(marker) {
var that = this;
marker.on('dragend', function(e) {
that.fire("change", {bounds: that.getBounds()});
});
},
/* Create bounds for the mask rectangles and the location
filter rectangle */
_calculateBounds: function() {
var mapBounds = this._map.getBounds(),
outerBounds = new L.LatLngBounds(
new L.LatLng(mapBounds.getSouthWest().lat-0.1,
mapBounds.getSouthWest().lng-0.1, true),
new L.LatLng(mapBounds.getNorthEast().lat+0.1,
mapBounds.getNorthEast().lng+0.1, true)
);
// The south west and north east points of the mask */
this._osw = outerBounds.getSouthWest();
this._one = outerBounds.getNorthEast();
// Bounds for the mask rectangles
this._northBounds = new L.LatLngBounds(new L.LatLng(this._ne.lat, this._osw.lng, true), this._one);
this._westBounds = new L.LatLngBounds(new L.LatLng(this._sw.lat, this._osw.lng, true), this._nw);
this._eastBounds = new L.LatLngBounds(this._se, new L.LatLng(this._ne.lat, this._one.lng, true));
this._southBounds = new L.LatLngBounds(this._osw, new L.LatLng(this._sw.lat, this._one.lng, true));
},
/* Initializes rectangles and markers */
_initialDraw: function() {
if (this._initialDrawCalled) {
return;
}
this._layer = new L.LayerGroup();
// Calculate filter bounds
this._calculateBounds();
// Create rectangles
this._northRect = this._drawRectangle(this._northBounds);
this._westRect = this._drawRectangle(this._westBounds);
this._eastRect = this._drawRectangle(this._eastBounds);
this._southRect = this._drawRectangle(this._southBounds);
this._innerRect = this._drawRectangle(this.getBounds(), {
fillOpacity: 0,
stroke: true,
color: "white",
weight: 1,
opacity: 0.9
});
// Create resize markers
this._nwMarker = this._drawResizeMarker(this._nw);
this._neMarker = this._drawResizeMarker(this._ne);
this._swMarker = this._drawResizeMarker(this._sw);
this._seMarker = this._drawResizeMarker(this._se);
// Setup tracking of resize markers. Each marker has pair of
// follower markers that must be moved whenever the marker is
// moved. For example, whenever the north west resize marker
// moves, the south west marker must move along on the x-axis
// and the north east marker must move on the y axis
this._setupResizeMarkerTracking(this._nwMarker, {moveAlong: {lat: this._neMarker, lng: this._swMarker}});
this._setupResizeMarkerTracking(this._neMarker, {moveAlong: {lat: this._nwMarker, lng: this._seMarker}});
this._setupResizeMarkerTracking(this._swMarker, {moveAlong: {lat: this._seMarker, lng: this._nwMarker}});
this._setupResizeMarkerTracking(this._seMarker, {moveAlong: {lat: this._swMarker, lng: this._neMarker}});
// Create move marker
this._moveMarker = this._drawMoveMarker(this._nw);
this._initialDrawCalled = true;
},
/* Reposition all rectangles and markers to the current filter bounds. */
_draw: function(options) {
options = L.Util.extend({repositionResizeMarkers: true}, options);
// Calculate filter bounds
this._calculateBounds();
// Reposition rectangles
this._northRect.setBounds(this._northBounds);
this._westRect.setBounds(this._westBounds);
this._eastRect.setBounds(this._eastBounds);
this._southRect.setBounds(this._southBounds);
this._innerRect.setBounds(this.getBounds());
// Reposition resize markers
if (options.repositionResizeMarkers) {
this._nwMarker.setLatLng(this._nw);
this._neMarker.setLatLng(this._ne);
this._swMarker.setLatLng(this._sw);
this._seMarker.setLatLng(this._se);
}
// Reposition the move marker
this._moveMarker.setLatLng(this._nw);
},
/* Adjust the location filter to the current map bounds */
_adjustToMap: function() {
this.setBounds(this._map.getBounds());
this._map.zoomOut();
},
/* Enable the location filter */
enable: function() {
if (this._enabled) {
return;
}
// Initialize corners
var bounds;
if (this._sw && this._ne) {
bounds = new L.LatLngBounds(this._sw, this._ne);
} else if (this.options.bounds) {
bounds = this.options.bounds;
} else {
bounds = this._map.getBounds();
}
this._map.invalidateSize();
this._nw = bounds.getNorthWest();
this._ne = bounds.getNorthEast();
this._sw = bounds.getSouthWest();
this._se = bounds.getSouthEast();
// Update buttons
if (this._buttonContainer) {
this._buttonContainer.addClass("enabled");
}
if (this._enableButton) {
this._enableButton.setText(this.options.enableButton.disableText);
}
if (this.options.adjustButton) {
this._createAdjustButton();
}
// Draw filter
this._initialDraw();
this._draw();
// Set up map move event listener
var that = this;
this._moveHandler = function() {
that._draw();
};
this._map.on("move", this._moveHandler);
// Add the filter layer to the map
this._layer.addTo(this._map);
// Zoom out the map if necessary
var mapBounds = this._map.getBounds();
bounds = new L.LatLngBounds(this._sw, this._ne).modify(this._map, 10);
if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast())) {
this._map.fitBounds(bounds);
}
this._enabled = true;
// Fire the enabled event
this.fire("enabled");
},
/* Disable the location filter */
disable: function() {
if (!this._enabled) {
return;
}
// Update buttons
if (this._buttonContainer) {
this._buttonContainer.removeClass("enabled");
}
if (this._enableButton) {
this._enableButton.setText(this.options.enableButton.enableText);
}
if (this._adjustButton) {
this._adjustButton.remove();
}
// Remove event listener
this._map.off("move", this._moveHandler);
// Remove rectangle layer from map
this._map.removeLayer(this._layer);
this._enabled = false;
// Fire the disabled event
this.fire("disabled");
},
/* Create a button that allows the user to adjust the location
filter to the current zoom */
_createAdjustButton: function() {
var that = this;
this._adjustButton = new L.Control.Button({
className: "adjust-button",
text: this.options.adjustButton.text,
onClick: function(event) {
that._adjustToMap();
that.fire("adjustToZoomClick");
}
}).addTo(this._buttonContainer);
},
/* Create the location filter button container and the button that
toggles the location filter */
_initializeButtonContainer: function() {
var that = this;
this._buttonContainer = new L.Control.ButtonContainer({
className: "location-filter button-container",
position: this.options.buttonPosition
});
if (this.options.enableButton) {
this._enableButton = new L.Control.Button({
className: "enable-button",
text: this.options.enableButton.enableText,
onClick: function(event) {
if (!that._enabled) {
// Enable the location filter
that.enable();
that.fire("enableClick");
} else {
// Disable the location filter
that.disable();
that.fire("disableClick");
}
}
}).addTo(this._buttonContainer);
}
this._buttonContainer.addTo(this._map);
}
});
// PLUGIN END //////////////////////////////////////////////////////////
setup.info = plugin_info; //add the script info data to the function as a property
if (!window.bootPlugins) window.bootPlugins = [];
window.bootPlugins.push(setup);
// if IITC has already booted, immediately run the 'setup' function
if (window.iitcLoaded && typeof setup === 'function') setup();
} // wrapper end
// inject code into site context
var script = document.createElement('script');
var info = {};
if (typeof GM_info !== 'undefined' && GM_info && GM_info.script) info.script = { version: GM_info.script.version, name: GM_info.script.name, description: GM_info.script.description };
script.appendChild(document.createTextNode('('+ wrapper +')('+JSON.stringify(info)+');'));
(document.body || document.head || document.documentElement).appendChild(script);
@isnot
Copy link
Author

isnot commented Jun 16, 2018

ざっくり作ったので、癖があります。必要な時以外はOFFに。
選択範囲の四隅で拡大／縮小、左上のアイコンで掴んで移動できます。
矩形選択範囲を別の場所にする時は、ブラウザ・リロードした方がいいです。

以下のソースを利用しています。（直に結合）

Leaflet.locationfilter - leaflet location filter plugin
https://github.com/kajic/leaflet-locationfilter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment