├── img
├── geohash.png
└── quadtree.png
├── style.css
├── README.md
├── map.js
├── leaflet.label.css
├── index.html
├── L.Control.Button.js
├── leaflet.label.js
├── plugin.js
└── geohash.js
/img/geohash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/missinglink/leaflet-spatial-prefix-tree/HEAD/img/geohash.png
--------------------------------------------------------------------------------
/img/quadtree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/missinglink/leaflet-spatial-prefix-tree/HEAD/img/quadtree.png
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 |
2 | .leaflet-label,
3 | .leaflet-label:before {
4 | border:none;
5 | font-size: 10px;
6 | }
7 |
8 | .my-label {
9 | color: white;
10 | background-color: rgba( 255, 0, 0, 0.5 );
11 | }
12 |
13 | .my-label2 {
14 | font-size: 30px;
15 | color: rgba( 255, 0, 0, 0.5 );
16 | background-color: transparent;
17 | }
18 |
19 | #buttons {
20 | font-size: 20px;
21 | font-family: sans-serif;
22 | font-weight: bold;
23 | text-transform: uppercase;
24 | position: absolute;
25 | top: 10px;
26 | right: 10px;
27 | }
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Leaflet plugin for visualizing spatial prefix trees, quadtree and geohash
3 |
4 | ### Demo
5 |
6 | http://missinglink.github.io/leaflet-spatial-prefix-tree/
7 |
8 | #### Changing Algorithms
9 |
10 | You can toggle the algorithm with the button located at the top-right.
11 |
12 | #### Quadtree
13 |
14 | 
15 |
16 | #### Geohash
17 |
18 | 
19 |
--------------------------------------------------------------------------------
/map.js:
--------------------------------------------------------------------------------
1 |
2 | var map = L.map('map');
3 |
4 | // create the tile layer with correct attribution
5 | // var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
6 | // var osmAttrib = 'Map data © OpenStreetMap contributors';
7 | // var osm = new L.TileLayer( osmUrl );
8 |
9 | L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
10 | attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.',
11 | maxZoom: 18
12 | }).addTo(map);
13 |
14 | L.control.geocoder('search-fljxAAA').addTo(map);
15 |
16 | // start the map in South-East England
17 | map.setView( new L.LatLng( 51.5072, 0.1275 ), 0 );
18 |
19 | $(document).ready(function() {
20 | $('#buttons button').on('click', function(event) {
21 | $('#buttons button').removeClass('active');
22 | $(event.target).addClass('active');
23 | changeHashFunction( event.target.id );
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/leaflet.label.css:
--------------------------------------------------------------------------------
1 | .leaflet-label {
2 | background: rgb(235, 235, 235);
3 | background: rgba(235, 235, 235, 0.81);
4 | background-clip: padding-box;
5 | border-color: #777;
6 | border-color: rgba(0,0,0,0.25);
7 | border-radius: 4px;
8 | border-style: solid;
9 | border-width: 4px;
10 | color: #111;
11 | display: block;
12 | font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
13 | font-weight: bold;
14 | padding: 1px 6px;
15 | position: absolute;
16 | -webkit-user-select: none;
17 | -moz-user-select: none;
18 | -ms-user-select: none;
19 | user-select: none;
20 | pointer-events: none;
21 | white-space: nowrap;
22 | z-index: 6;
23 | }
24 |
25 | .leaflet-label.leaflet-clickable {
26 | cursor: pointer;
27 | }
28 |
29 | .leaflet-label:before,
30 | .leaflet-label:after {
31 | border-top: 6px solid transparent;
32 | border-bottom: 6px solid transparent;
33 | content: none;
34 | position: absolute;
35 | top: 5px;
36 | }
37 |
38 | .leaflet-label:before {
39 | border-right: 6px solid black;
40 | border-right-color: inherit;
41 | left: -10px;
42 | }
43 |
44 | .leaflet-label:after {
45 | border-left: 6px solid black;
46 | border-left-color: inherit;
47 | right: -10px;
48 | }
49 |
50 | .leaflet-label-right:before,
51 | .leaflet-label-left:after {
52 | content: "";
53 | }
54 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |