Skip to content

Commit

Permalink
added add/remove spotlight functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@iboates
iboates committed Mar 12, 2019
1 parent 42a9f44 commit 9c6507d
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 98 deletions.
81 changes: 6 additions & 75 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,96 +9,27 @@
integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="
crossorigin=""/>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="sidebar/css/leaflet-sidebar.min.css" />

<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!--<script-->
<!--src="https://code.jquery.com/jquery-3.2.1.min.js"-->
<!--integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="-->
<!--crossorigin="anonymous"></script>-->

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA=="
crossorigin=""></script>
<script src="lib/leaflet-src.js"></script>

<script src="js/leaflet-spotlight-extension.js"></script>

<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src="data/points_5000.js"></script>

<script src="sidebar/js/jquery-sidebar.min.js"></script>
<script src="sidebar/js/leaflet-sidebar.min.js"></script>

<script src="js/featureStyles.js"></script>
<!--<script src="js/leaflet-spotlight.js"></script>-->
<script src="js/init.js"></script>
<!--<script src="js/initSimple.js"></script>-->
<!--<script src="js/spotlightControl.js"></script>-->

</head>
<body>

<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>

<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>

<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">

<h1 class="sidebar-header">
sidebar-v2
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>

<fieldset>
<label for="shape-selector">Spotlight shape: </label>
<select name="Shape" id="shape-selector">
<option value="circle" selected="selected">Circle</option>
<option value="rectangle">Rectangle</option>
</select>
<fieldset class="shape-params" id="circle-params">
<label for="circle-radius-input">Radius: </label>
<input id="circle-radius-input" />
</fieldset>
<fieldset class="shape-params" id="rectangle-params" style="display: none;">
<label for="rectangle-width-input">Width: </label>
<input id="rectangle-width-input" />
<br>
<label for="rectangle-height-input">Height: </label>
<input id="rectangle-height-input" />
<br>
<label for="rectangle-rotation-input">Rotation: </label>
<input id="rectangle-rotation-input" />
</fieldset>
</fieldset>

</div>

<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>

<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>

<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
</div>
</div>

<div id="map"></div>
<script src="js/init.js"></script>
</body>
</html>
48 changes: 32 additions & 16 deletions js/init.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,37 @@
var map;
var spotlightShape;
var sidebar;
var pointLayer;
// Initialize map & layers
var map = L.map('map', {spotlight: true}).setView([50.1109, 8.6821], 15);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

$(document).ready(function() {
var pointLayer = L.geoJSON(pointData, {

// Initialize map & layers
map = L.map('map', {spotlight: true}).setView([50.1109, 8.6821], 15);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, pointStyle);
},
spotlight: true

pointLayer = L.geoJSON(pointData, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, pointStyle);
}
}).addTo(map);
});

// Alternate method of enabling spotlight
// map.spotlight.enable();
pointLayer.addTo(map)

});
// Alternate method of enabling spotlight
//map.spotlight.enable();

var mySpotlight = L.spotlight("aaa", {
highlightStyle: 1,
spotlightShape: 2,
spotlightStyle: 3,
targetLayer: 4
});

//var mySpotlight2 = new L.Spotlight("aaa", {
// highlightStyle: 1,
// spotlightShape: 2,
// spotlightStyle: 3,
// targetLayer: 4
//});

//map.addSpotlight(mySpotlight);

mySpotlight.addTo(map);

map.removeSpotlight(mySpotlight);
48 changes: 41 additions & 7 deletions js/leaflet-spotlight-extension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,37 @@ L.Map.include({

_spotlightRegistry: {},

addSpotlight: function(spotlight) {
console.log("adding spotlight");
this._spotlightRegistry[spotlight.id] = spotlight.options;
console.log(this._spotlightRegistry);
},

removeSpotlight: function(spotlight) {
console.log("removing spotlight");
delete this._spotlightRegistry[spotlight.id];
console.log(this._spotlightRegistry);
}

});

L.Map.addInitHook('addHandler', 'spotlight', L.SpotlightHandler);

L.SpotlightHandler = L.Handler.extend({

addHooks: function() {
L.DomEvent.on(document, 'mousemove', this._doSomething, this);
L.DomEvent.on(document, 'mousemove', this._refreshSpotlights, this);
},

removeHooks: function() {
L.DomEvent.off(document, 'mousemove', this._doSomething, this);
L.DomEvent.off(document, 'mousemove', this._refreshSpotlights, this);
},

_refreshSpotlights: function(ev) {

// Create a mousemove event listener for this spotlight
for (var spotlightId in this._map._spotlightRegistry) {

var currentSpotlight = this._map._spotlightRegistry[spotlightId];

// On each mouse movement, remove the spotlight & highlighted features layer for this._map spotlightId
Expand Down Expand Up @@ -56,13 +70,33 @@ L.SpotlightHandler = L.Handler.extend({
}).addTo(this._map);

}

}

});

L.Map.addInitHook('addHandler', 'spotlight', L.SpotlightHandler);

L.Layer.Spotlight = L.Layer.extend({
L.Spotlight = L.Class.extend({

options: {
highlightStyle: 1,
spotlightShape: 1,
spotlightStyle: 1,
targetLayer: 1
},

initialize: function(id, options) {
this.id = id;
L.setOptions(this, options);
},

addTo: function(map) {
console.log(this);
map.addSpotlight(this);
}

});

})
L.spotlight = function(id, options) {
return new L.Spotlight(id, options);
};

0 comments on commit 9c6507d

Please sign in to comment.