--- /dev/null
+*.swp
+.DS_Store
\ No newline at end of file
--- /dev/null
+Contributing
+============
+
+Your pull requests are very welcome! Please follow these guidelines:
+
+ * Keep code compatible with the same browsers Leaflet aims to be [compatible
+ with](http://leafletjs.com/features.html).
+ * Use four spaces rather than tabs.
+
+
+## Contributors
+
+ * [Eric Brelsford](https://github.com/ebrelsford)
+ * [Nick Iaconis](https://github.com/codefox421)
+ * [Matthias Althaus](https://github.com/althaus)
+ * [Yohan Boniface](https://github.com/yohanboniface)
+ * [kermit-the-frog](https://github.com/kermit-the-frog)
+ * [kcwu](https://github.com/kcwu)
+ * [Robbie Trencheny](https://github.com/robbiet480)
+ * [David Molineus](https://github.com/dmolineus)
+ * [Marwen Arfa](https://github.com/arfa)
--- /dev/null
+Copyright (c) 2013 Eric Brelsford
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- /dev/null
+Leaflet.loading
+===============
+
+Leaflet.loading is a simple loading control for [Leaflet][]. An unobtrusive
+loading indicator is added below the zoom control if one exists. The indicator
+is visible when tiles are loading or when other data is loading, as indicated by
+firing custom events on a map. The indicator can be an image, or a [spin.js][]
+spinner (image-less).
+
+
+## Usage
+
+Leaflet.loading is only tested on Leaflet version 0.6 or greater. It will almost
+certainly not work with older versions of Leaflet. Of course we intend to
+support Leaflet 1.0, and we have tested against the latest release (beta 2).
+Please create an issue if you find that any part of this project is not
+compatible with Leaflet 1.0.
+
+Include `Control.Loading.js` and `Control.Loading.css`, then create a map with
+`loadingControl: true` in its options.
+
+By default, Leaflet.loading includes a base64-encoded animagted loading image in
+`Control.Loading.css`. You can customize this by changing `background-image` for
+the selector `.leaflet-control-loading`. The simplest case would be adding a 16
+x 16 loading gif in `.leaflet-control-loading`.
+
+You can also set `spinjs: true` in the options, and load [spin.js][] to use that
+instead of an image. A spin.js options object can be passed as the spin key when
+initializing the control.
+
+Whichever method you use, make sure you only use one.
+
+Once the above is complete you will have a loading indicator that only appears
+when tiles are loading.
+
+If you want to show the loading indicator while other AJAX requests or something
+else is occurring, fire the `dataloading` event on your map when you begin
+loading and `dataload` when you are finished loading. Please note that there is
+[an issue](https://github.com/ebrelsford/Leaflet.loading/issues/26) with the
+way this control tracks these events and that this will be re-worked in a
+future version.
+
+### Options
+
+ - **position**: (string) Where you want the control to show up on the map (standard
+ Leaflet control option). Optional, defaults to `topleft`
+ - **separate**: (boolean) Whether the control should be separate from the zoom
+ control or not, defaults to false.
+ - **zoomControl**: (L.Control.Zoom) The zoom control that the control should be
+ added to. This is only necessary when adding a loading control to a zoom
+ control that you added manually and do not want a separate loading control.
+ - **delayIndicator**: (float) The number of milliseconds to wait before
+ showing the loading indicator. Defaults to `null` (no delay).
+ - **spinjs**: (boolean) Enable the use of [spin.js][]. Optional, defaults to
+ `false`
+ - **spin**: (object) A [spin.js][] options object. Optional, defaults to
+
+ ```
+ {
+ lines: 7,
+ length: 3,
+ width: 3,
+ radius: 5,
+ rotate: 13,
+ top: "83%"
+ }
+ ```
+
+
+## Demos
+
+See Leaflet.loading in action (zoom or pan to make tiles load):
+
+ - Using the [simplest setup][simple], with the loading indicator attached to
+ the zoom control.
+ - With the loading indicator [separate][] from the zoom control.
+ - With the loading indicator and zoom control on the [top right][topright] of
+ the map.
+ - The [simplest example using spin.js](http://ebrelsford.github.io/Leaflet.loading/spinjs.html) instead of an image
+ - Combined with a [fullscreen control][combined] (e.g. [leaflet.fullscreen][]).
+
+
+## License
+
+Leaflet.loading is free software, and may be redistributed under the MIT
+License.
+
+
+ [Leaflet]: https://github.com/Leaflet/Leaflet
+ [spin.js]: https://github.com/fgnass/spin.js/
+ [simple]: http://ebrelsford.github.io/Leaflet.loading/simple.html
+ [separate]: http://ebrelsford.github.io/Leaflet.loading/separate.html
+ [topright]: http://ebrelsford.github.io/Leaflet.loading/topright.html
+ [combined]: http://ebrelsford.github.io/Leaflet.loading/combined.html
+ [leaflet.fullscreen]: https://github.com/brunob/leaflet.fullscreen
--- /dev/null
+{
+ "name": "leaflet.loading",
+ "version": "0.1.24",
+ "homepage": "https://github.com/ebrelsford/leaflet.loading",
+ "authors": [
+ "Eric Brelsford <ebrelsford@gmail.com>"
+ ],
+ "description": "A loading-indicator control for Leaflet",
+ "main": [
+ "src/Control.Loading.css",
+ "src/Control.Loading.js"
+ ],
+ "keywords": [
+ "leaflet",
+ "map",
+ "gis",
+ "loading"
+ ],
+ "dependencies": {
+ "leaflet": ">=0.6"
+ },
+ "license": "MIT",
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ]
+}
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—simple</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the fullscreen control -->
+ <script src='//rawgithub.com/brunob/leaflet.fullscreen/master/Control.FullScreen.js'></script>
+ <style>
+ /* Styles are copied from: http://brunob.github.io/leaflet.fullscreen/ */
+ /* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
+ #map:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
+ #map:-moz-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
+ #map:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
+ .leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }
+ .leaflet-control-zoom-fullscreen { background-image: url(https://github.com/brunob/leaflet.fullscreen/raw/master/icon-fullscreen.png); }
+ .leaflet-retina .leaflet-control-zoom-fullscreen { background-image: url(https://github.com/brunob/leaflet.fullscreen/raw/master/icon-fullscreen-2x.png); background-size: 26px 26px; }
+ </style>
+
+ <!-- Include the loading control -->
+ <!-- Be aware of the loading order. Both controls (fullscreen and loading are using the Map.addInitHook).
+ So first loaded will be displayed first. To avoid it add the loading control manually. -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12,
+
+ // Tell the map to use a loading control
+ loadingControl: true,
+
+ // Tell the map to use a fullsreen control
+ fullscreenControl: true
+ });
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—delayed</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12
+ });
+
+ var loadingControl = L.Control.loading({
+ // 0.5 second delay when showing the loading indicator
+ delayIndicator: 500
+ });
+ map.addControl(loadingControl);
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—L.LayerGroup</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+ <script>
+var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+});
+
+// (a bit contrived)
+
+var openStreetMap2 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+});
+
+var layerGroup = L.layerGroup([ openStreetMap2 ]);
+
+var map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12,
+
+ // Tell the map to use a loading control
+ loadingControl: true
+});
+
+var control = L.control.layers( { "single tilelayer" : openStreetMap, layerGroup : layerGroup } );
+control.addTo( map );
+ </script>
+
+</body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—delayed</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../../src/Control.Loading.css" />
+ <script src="../../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12
+ });
+
+ var loadingControl = L.Control.loading({
+ // 0.5 second delay when showing the loading indicator
+ delayIndicator: 500
+ });
+ map.addControl(loadingControl);
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—two base layers</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../../src/Control.Loading.css" />
+ <script src="../../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ GridLayer = L.GridLayer.extend({
+ createTile: function(coords){
+ return L.DomUtil.create('canvas', 'leaflet-tile');
+ }
+ }),
+
+ gridLayer = new GridLayer(),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12,
+
+ // Tell the map to use a loading control
+ loadingControl: true
+ });
+
+ var baseLayers = {
+ OSM: openStreetMap,
+ gridLayer: gridLayer,
+ };
+ L.control.layers(baseLayers).addTo(map);
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—separate</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12
+ });
+
+ var loadingControl = L.Control.loading({
+ separate: true
+ });
+ map.addControl(loadingControl);
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—simple</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12,
+
+ // Tell the map to use a loading control
+ loadingControl: true
+ });
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—spinjs</title>
+
+ <!-- Include spin.js -->
+ <script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js"></script>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12
+ });
+
+ var loadingControl = L.Control.loading({
+ spinjs: true
+ });
+ map.addControl(loadingControl);
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—topright</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12,
+ zoomControl: false
+ });
+
+ // Add our zoom control manually where we want to
+ var zoomControl = L.control.zoom({
+ position: 'topright'
+ });
+ map.addControl(zoomControl);
+
+ // Add our loading control in the same position and pass the
+ // zoom control to attach to it
+ var loadingControl = L.Control.loading({
+ position: 'topright',
+ zoomControl: zoomControl
+ });
+ map.addControl(loadingControl);
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—two base layers</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+ canvasLayer = new L.TileLayer.Canvas(),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12,
+
+ // Tell the map to use a loading control
+ loadingControl: true
+ });
+
+ var baseLayers = {
+ OSM: openStreetMap,
+ canvas: canvasLayer,
+ };
+ L.control.layers(baseLayers).addTo(map);
+ </script>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Leaflet.loading example—two base layers</title>
+
+ <!-- Include Leaflet -->
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+ <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+
+ <!-- Include the loading control -->
+ <link rel="stylesheet" href="../src/Control.Loading.css" />
+ <script src="../src/Control.Loading.js"></script>
+ </head>
+ <body>
+
+ <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
+
+ <script>
+ var openStreetMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+ openStreetMapHumanitarian = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ }),
+
+ map = new L.Map('map', {
+ layers: [openStreetMap],
+ center: new L.LatLng(40.65,-73.95),
+ zoom: 12,
+
+ // Tell the map to use a loading control
+ loadingControl: true
+ });
+
+ var baseLayers = {
+ OSM: openStreetMap,
+ 'OSM Humanitarian': openStreetMapHumanitarian,
+ };
+ L.control.layers(baseLayers).addTo(map);
+ </script>
+ </body>
+</html>
--- /dev/null
+{
+ "name": "leaflet-loading",
+ "version": "0.1.24",
+ "description": "A simple loading control for Leaflet",
+ "main": "src/Control.Loading.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/ebrelsford/Leaflet.loading.git"
+ },
+ "keywords": [
+ "leaflet",
+ "map",
+ "maps",
+ "gis",
+ "geoweb",
+ "loading"
+ ],
+ "author": "Eric Brelsford <ebrelsford@gmail.com> (http://ebrelsford.github.io/)",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/ebrelsford/Leaflet.loading/issues"
+ },
+ "homepage": "https://github.com/ebrelsford/Leaflet.loading"
+}
--- /dev/null
+.leaflet-control-loading:empty {
+ /* Spinner via ajaxload.info, base64-encoded */
+ background-image: url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///wAAAPDw8IqKiuDg4EZGRnp6egAAAFhYWCQkJKysrL6+vhQUFJycnAQEBDY2NmhoaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAAKAAEALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQACgACACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQACgADACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkEAAoABAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkEAAoABQAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkEAAoABgAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAAKAAcALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkEAAoACAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAAKAAkALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQACgAKACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQACgALACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==);
+ background-repeat: no-repeat;
+}
+
+.leaflet-control-loading,
+.leaflet-control-zoom a.leaflet-control-loading,
+.leaflet-control-zoomslider a.leaflet-control-loading,
+.leaflet-control-layer-container {
+ display: none;
+}
+
+.leaflet-control-loading.is-loading,
+.leaflet-control-zoom a.leaflet-control-loading.is-loading,
+.leaflet-control-zoomslider a.leaflet-control-loading.is-loading,
+.leaflet-control-layer-container.is-loading {
+ display: block;
+}
+
+/* Necessary for display consistency in Leaflet >= 0.6 */
+.leaflet-bar-part-bottom {
+ border-bottom: medium none;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
--- /dev/null
+/*
+ * L.Control.Loading is a control that shows a loading indicator when tiles are
+ * loading or when map-related AJAX requests are taking place.
+ */
+
+(function () {
+
+ var console = window.console || {
+ error: function () {},
+ warn: function () {}
+ };
+
+ function defineLeafletLoading(L) {
+ L.Control.Loading = L.Control.extend({
+ options: {
+ delayIndicator: null,
+ position: 'topleft',
+ separate: false,
+ zoomControl: null,
+ spinjs: false,
+ spin: {
+ lines: 7,
+ length: 3,
+ width: 3,
+ radius: 5,
+ rotate: 13,
+ top: "83%"
+ }
+ },
+
+ initialize: function(options) {
+ L.setOptions(this, options);
+ this._dataLoaders = {};
+
+ // Try to set the zoom control this control is attached to from
+ // the options
+ if (this.options.zoomControl !== null) {
+ this.zoomControl = this.options.zoomControl;
+ }
+ },
+
+ onAdd: function(map) {
+ if (this.options.spinjs && (typeof Spinner !== 'function')) {
+ return console.error("Leaflet.loading cannot load because you didn't load spin.js (http://fgnass.github.io/spin.js/), even though you set it in options.");
+ }
+ this._addLayerListeners(map);
+ this._addMapListeners(map);
+
+ // Try to set the zoom control this control is attached to from the map
+ // the control is being added to
+ if (!this.options.separate && !this.zoomControl) {
+ if (map.zoomControl) {
+ this.zoomControl = map.zoomControl;
+ } else if (map.zoomsliderControl) {
+ this.zoomControl = map.zoomsliderControl;
+ }
+ }
+
+ // Create the loading indicator
+ var classes = 'leaflet-control-loading';
+ var container;
+ if (this.zoomControl && !this.options.separate) {
+ // If there is a zoom control, hook into the bottom of it
+ container = this.zoomControl._container;
+ // These classes are no longer used as of Leaflet 0.6
+ classes += ' leaflet-bar-part-bottom leaflet-bar-part last';
+
+ // Loading control will be added to the zoom control. So the visible last element is not the
+ // last dom element anymore. So add the part-bottom class.
+ L.DomUtil.addClass(this._getLastControlButton(), 'leaflet-bar-part-bottom');
+ }
+ else {
+ // Otherwise, create a container for the indicator
+ container = L.DomUtil.create('div', 'leaflet-control-zoom leaflet-control-layer-container leaflet-bar');
+ }
+ this._indicatorContainer = container;
+ this._indicator = L.DomUtil.create('a', classes, container);
+ if (this.options.spinjs) {
+ this._spinner = new Spinner(this.options.spin).spin();
+ this._indicator.appendChild(this._spinner.el);
+ }
+ return container;
+ },
+
+ onRemove: function(map) {
+ this._removeLayerListeners(map);
+ this._removeMapListeners(map);
+ },
+
+ removeFrom: function (map) {
+ if (this.zoomControl && !this.options.separate) {
+ // Override Control.removeFrom() to avoid clobbering the entire
+ // _container, which is the same as zoomControl's
+ this._container.removeChild(this._indicator);
+ this._map = null;
+ this.onRemove(map);
+ return this;
+ }
+ else {
+ // If this control is separate from the zoomControl, call the
+ // parent method so we don't leave behind an empty container
+ return L.Control.prototype.removeFrom.call(this, map);
+ }
+ },
+
+ addLoader: function(id) {
+ this._dataLoaders[id] = true;
+ if (this.options.delayIndicator && !this.delayIndicatorTimeout) {
+ // If we are delaying showing the indicator and we're not
+ // already waiting for that delay, set up a timeout.
+ var that = this;
+ this.delayIndicatorTimeout = setTimeout(function () {
+ that.updateIndicator();
+ that.delayIndicatorTimeout = null;
+ }, this.options.delayIndicator);
+ }
+ else {
+ // Otherwise show the indicator immediately
+ this.updateIndicator();
+ }
+ },
+
+ removeLoader: function(id) {
+ delete this._dataLoaders[id];
+ this.updateIndicator();
+
+ // If removing this loader means we're in no danger of loading,
+ // clear the timeout. This prevents old delays from instantly
+ // triggering the indicator.
+ if (this.options.delayIndicator && this.delayIndicatorTimeout && !this.isLoading()) {
+ clearTimeout(this.delayIndicatorTimeout);
+ this.delayIndicatorTimeout = null;
+ }
+ },
+
+ updateIndicator: function() {
+ if (this.isLoading()) {
+ this._showIndicator();
+ }
+ else {
+ this._hideIndicator();
+ }
+ },
+
+ isLoading: function() {
+ return this._countLoaders() > 0;
+ },
+
+ _countLoaders: function() {
+ var size = 0, key;
+ for (key in this._dataLoaders) {
+ if (this._dataLoaders.hasOwnProperty(key)) size++;
+ }
+ return size;
+ },
+
+ _showIndicator: function() {
+ // Show loading indicator
+ L.DomUtil.addClass(this._indicator, 'is-loading');
+ L.DomUtil.addClass(this._indicatorContainer, 'is-loading');
+
+ // If zoomControl exists, make the zoom-out button not last
+ if (!this.options.separate) {
+ if (this.zoomControl instanceof L.Control.Zoom) {
+ L.DomUtil.removeClass(this._getLastControlButton(), 'leaflet-bar-part-bottom');
+ }
+ else if (typeof L.Control.Zoomslider === 'function' && this.zoomControl instanceof L.Control.Zoomslider) {
+ L.DomUtil.removeClass(this.zoomControl._ui.zoomOut, 'leaflet-bar-part-bottom');
+ }
+ }
+ },
+
+ _hideIndicator: function() {
+ // Hide loading indicator
+ L.DomUtil.removeClass(this._indicator, 'is-loading');
+ L.DomUtil.removeClass(this._indicatorContainer, 'is-loading');
+
+ // If zoomControl exists, make the zoom-out button last
+ if (!this.options.separate) {
+ if (this.zoomControl instanceof L.Control.Zoom) {
+ L.DomUtil.addClass(this._getLastControlButton(), 'leaflet-bar-part-bottom');
+ }
+ else if (typeof L.Control.Zoomslider === 'function' && this.zoomControl instanceof L.Control.Zoomslider) {
+ L.DomUtil.addClass(this.zoomControl._ui.zoomOut, 'leaflet-bar-part-bottom');
+ }
+ }
+ },
+
+ _getLastControlButton: function() {
+ var container = this.zoomControl._container,
+ index = container.children.length - 1;
+
+ // Find the last visible control button that is not our loading
+ // indicator
+ while (index > 0) {
+ var button = container.children[index];
+ if (!(this._indicator === button || button.offsetWidth === 0 || button.offsetHeight === 0)) {
+ break;
+ }
+ index--;
+ }
+
+ return container.children[index];
+ },
+
+ _handleLoading: function(e) {
+ this.addLoader(this.getEventId(e));
+ },
+
+ _handleBaseLayerChange: function (e) {
+ var that = this;
+
+ // Check for a target 'layer' that contains multiple layers, such as
+ // L.LayerGroup. This will happen if you have an L.LayerGroup in an
+ // L.Control.Layers.
+ if (e.layer && e.layer.eachLayer && typeof e.layer.eachLayer === 'function') {
+ e.layer.eachLayer(function (layer) {
+ that._handleBaseLayerChange({ layer: layer });
+ });
+ }
+ else {
+ // If we're changing to a canvas layer, don't handle loading
+ // as canvas layers will not fire load events.
+ if (!(L.TileLayer.Canvas && e.layer instanceof L.TileLayer.Canvas)) {
+ that._handleLoading(e);
+ }
+ }
+ },
+
+ _handleLoad: function(e) {
+ this.removeLoader(this.getEventId(e));
+ },
+
+ getEventId: function(e) {
+ if (e.id) {
+ return e.id;
+ }
+ else if (e.layer) {
+ return e.layer._leaflet_id;
+ }
+ return e.target._leaflet_id;
+ },
+
+ _layerAdd: function(e) {
+ if (!e.layer || !e.layer.on) return
+ try {
+ e.layer.on({
+ loading: this._handleLoading,
+ load: this._handleLoad
+ }, this);
+ }
+ catch (exception) {
+ console.warn('L.Control.Loading: Tried and failed to add ' +
+ ' event handlers to layer', e.layer);
+ console.warn('L.Control.Loading: Full details', exception);
+ }
+ },
+
+ _layerRemove: function(e) {
+ if (!e.layer || !e.layer.off) return;
+ try {
+ e.layer.off({
+ loading: this._handleLoading,
+ load: this._handleLoad
+ }, this);
+ }
+ catch (exception) {
+ console.warn('L.Control.Loading: Tried and failed to remove ' +
+ 'event handlers from layer', e.layer);
+ console.warn('L.Control.Loading: Full details', exception);
+ }
+ },
+
+ _addLayerListeners: function(map) {
+ // Add listeners for begin and end of load to any layers already
+ // on the map
+ map.eachLayer(function(layer) {
+ if (!layer.on) return;
+ layer.on({
+ loading: this._handleLoading,
+ load: this._handleLoad
+ }, this);
+ }, this);
+
+ // When a layer is added to the map, add listeners for begin and
+ // end of load
+ map.on('layeradd', this._layerAdd, this);
+ map.on('layerremove', this._layerRemove, this);
+ },
+
+ _removeLayerListeners: function(map) {
+ // Remove listeners for begin and end of load from all layers
+ map.eachLayer(function(layer) {
+ if (!layer.off) return;
+ layer.off({
+ loading: this._handleLoading,
+ load: this._handleLoad
+ }, this);
+ }, this);
+
+ // Remove layeradd/layerremove listener from map
+ map.off('layeradd', this._layerAdd, this);
+ map.off('layerremove', this._layerRemove, this);
+ },
+
+ _addMapListeners: function(map) {
+ // Add listeners to the map for (custom) dataloading and dataload
+ // events, eg, for AJAX calls that affect the map but will not be
+ // reflected in the above layer events.
+ map.on({
+ baselayerchange: this._handleBaseLayerChange,
+ dataloading: this._handleLoading,
+ dataload: this._handleLoad,
+ layerremove: this._handleLoad
+ }, this);
+ },
+
+ _removeMapListeners: function(map) {
+ map.off({
+ baselayerchange: this._handleBaseLayerChange,
+ dataloading: this._handleLoading,
+ dataload: this._handleLoad,
+ layerremove: this._handleLoad
+ }, this);
+ }
+ });
+
+ L.Map.addInitHook(function () {
+ if (this.options.loadingControl) {
+ this.loadingControl = new L.Control.Loading();
+ this.addControl(this.loadingControl);
+ }
+ });
+
+ L.Control.loading = function(options) {
+ return new L.Control.Loading(options);
+ };
+ }
+
+ if (typeof define === 'function' && define.amd) {
+ // Try to add leaflet.loading to Leaflet using AMD
+ define(['leaflet'], function (L) {
+ defineLeafletLoading(L);
+ });
+ }
+ else {
+ // Else use the global L
+ defineLeafletLoading(L);
+ }
+
+})();
<tr class="MapSelected_1 MapTypeOption glm-hidden">
<th {if $genSettings.fieldRequired.leaflet_tile_server}class="glm-required"{/if}>Leaflet Tile Server:</th>
<td {if $genSettings.fieldFail.leaflet_tile_server}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
- <input type="text" name="leaflet_tile_server" value="{$genSettings.fieldData.leaflet_tile_server}" class="glm-form-text-input-medium" placeholder="http://tileserver.gaslightmedia.com/hot/">
+ <input type="text" name="leaflet_tile_server" value="{$genSettings.fieldData.leaflet_tile_server}" class="glm-form-text-input-medium" placeholder="http://tileserver.gaslightmedia.com">
{if $genSettings.fieldFail.leaflet_tile_server}<p>{$genSettings.fieldFail.leaflet_tile_server}</p>{/if}
- <br>This is the base address of the server that will provide the map images and related data. A tile server is required to display Leaflet maps.
- <br>Notes that the tile server may include a directory specification
-
+ <br>This is the base URL of the server that will provide map tiles and related data. A tile server is required to display Leaflet maps.
</td>
</tr>
<tr class="MapSelected_1 MapTypeOption glm-hidden">
<th {if $genSettings.fieldRequired.leaflet_tile_server_key}class="glm-required"{/if}>Leaflet Tile Server Key:</th>
<td {if $genSettings.fieldFail.leaflet_tile_server_key}class="glm-form-bad-input glm-form-bad-input-misc"{/if}>
- <input type="text" name="leaflet_tile_server_key" value="{$genSettings.fieldData.leaflet_tile_server_key}" class="glm-form-text-input-medium">
+ <input type="text" name="leaflet_tile_server_key" value="{$genSettings.fieldData.leaflet_tile_server_key}" class="glm-form-text-input-medium" placeholder="directory or access key">
{if $genSettings.fieldFail.leaflet_tile_server_key}<p>{$genSettings.fieldFail.leaflet_tile_server_key}</p>{/if}
- <br>If the tile server set above requires a key to permit access, enter that key value here.
+ <br>If the tile server requires a key to permit access, enter that key value here.
+ <br>For some tile servers that do not require keys in the url, this should be the directory for selecting the desired map styles (i.e. "hot").
</td>
</tr>
<tr class="MapSelected_2 MapTypeOption glm-hidden">
{if $genSettings.fieldData.selected_map_interface.value == 1}
<!-- Leaflet Map -->
+ <p>If the map does not load below, please check the Tile Server and Tile Server Key settings above.</p>
<div id="LeafletMap" style="height: 400px; width: 600px;"></div>
{/if}
*/
var leafletMap = L.map('LeafletMap').setView([startLat, startLon], defZoom);
- var leafletTileServer = '{$genSettings.fieldData.leaflet_tile_server}' + {literal}'{z}/{x}/{y}.png'{/literal};
+ var leafletTileServer = '{$genSettings.fieldData.leaflet_tile_server}/{$genSettings.fieldData.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
var leafletMinZoom = 5;
var leafletMaxZoom = 18;
function initMap() {
var leafletMap = L.map('LeafletMapContainer').setView([startLat, startLon], defZoom);
- var leafletTileServer = '{$settings.leaflet_tile_server}' + {literal}'{z}/{x}/{y}.png'{/literal};
+ //var leafletTileServer = '{$settings.leaflet_tile_server}' + {literal}'{z}/{x}/{y}.png'{/literal};
+ var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
var leafletMinZoom = 5;
var leafletMaxZoom = 18;
var geocoder;
{apply_filters('glm-member-db-front-members-detail-pageTop', '', $member.id)}
{if $haveMember}
-<!-- <script src="http://maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>-->
+
{if $settings.detail_show_map}
<!-- <div id="glm-locationMap-container" class="row">
<div id="glm-locationMap" class="glm-map glmgrid-small-12 glmgrid-columns">(map loads here)</div>
</div>
</div>
- {if $settings.detail_show_map}
- <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+ {if $settings.detail_show_map}
+
<div id="glm-locationMap-container">
+ {if $settings.selected_map_interface == 1}
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
+ <link rel="stylesheet" href="{$jsUrl}/Leaflet.loading/src/Control.Loading.css" />
+ <script src="{$jsUrl}/Leaflet.loading/src/Control.Loading.js"></script>
+ <div id="LeafletMapContainer" style="height: 250px; width: 100%;">(map loads here)</div>
+ {/if}
+ {if $settings.selected_map_interface == 2}
+ <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+ <script type="text/javascript">var enableDraggable = true;</script>
<div id="glm-locationMap" class="glm-map glmgrid-small-12 glmgrid-columns">(map loads here)</div>
+ {/if}
</div>
<div id="glm-member-detail-map-button" class="button map-button">view map</div>
<input type="submit" class="button map-button text-center" id="MemberDrivingDirectionSubmit" name="MemberDrivingDirectionSubmit" value="Directions">
</form>
- {/if}
+ {/if}
</div>
$(this).html(mapBtnTxt);
});
+ {if $settings.selected_map_interface == 1}
+
+ /*
+ * Leaflet Map
+ * API reference: https://leafletjs.com/reference-1.3.2.html
+ */
+
+ // Get member location if available, otherwise use this site's default locatgion
+ var myLocation = false;
+ {if $member.lat != 0 && $member.lon != 0}
+ var memberLat = {$member.lat};
+ var memberLon = {$member.lon};
+ {else}
+ var memberLat = {$settings.maps_default_lat}};
+ var memberLon = {$settings.maps_default_lon}};
+ {/if}
+
+ function initMap() {
+
+ var leafletMap = L.map('LeafletMapContainer').setView([memberLat, memberLon], {$settings.maps_default_zoom});
+ var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
+ var leafletMinZoom = 5;
+ var leafletMaxZoom = 18;
+ var geocoder;
+
+
+ // Tile server
+ L.tileLayer(leafletTileServer, {
+ attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
+ minZoom: leafletMinZoom,
+ maxZoom: leafletMaxZoom,
+ id: 'nothot'
+ }).addTo(leafletMap);
+
+ var loadingControl = L.Control.loading({
+ separate: true,
+ delayIndicator: 500
+ });
+ leafletMap.addControl(loadingControl);
+
+ // Marker
+ var leafletMarker = L.marker([memberLat, memberLon]).addTo(leafletMap);
+
+ }
+
+ {/if}
+
+ {if $settings.selected_map_interface == 2}
+
/*
* Google Maps
* API reference: https://developers.google.com/maps/documentation/javascript/reference
*/
var myLocation = false;
- {if $member.lat != 0 && $member.lon != 0}
+ {if $member.lat != 0 && $member.lon != 0}
var memberlocation = new google.maps.LatLng({$member.lat}, {$member.lon});
- {else}
+ {else}
var memberlocation = new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon});
- {/if}
+ {/if}
function initMap() {
});
// Create a marker for this member
- {if $member.lat != 0 && $member.lon != 0}
+ {if $member.lat != 0 && $member.lon != 0}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng({$member.lat}, {$member.lon}),
animation: google.maps.Animation.DROP,
title: '{$member.member|escape}'
});
- {/if}
- // Don't Try HTML5 to get user geolocation
- //if(navigator.geolocation) {
- //navigator.geolocation.getCurrentPosition(function(position) {
- //myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
- //var pinIcon = new google.maps.MarkerImage(
- //'https://maps.google.com/mapfiles/kml/shapes/man.png',
- //null, /* size is determined at runtime */
- //null, /* origin is 0,0 */
- //null, /* anchor is bottom center of the scaled image */
- //new google.maps.Size(30, 30)
- //);
- //var myMarker = new google.maps.Marker({
- //map: map,
- //position: myLocation,
- //draggable: false,
- //animation: google.maps.Animation.DROP,
- //title: 'My Location',
- //icon: pinIcon,
- //zIndex: 100
- //});
- //$('#glm-startLocation').attr('placeholder', 'Leave blank for your current location or enter address here.');
- //});
- //}
+ {/if}
}
// Load map
google.maps.event.addDomListener(window, 'load', initMap);
-
+ {/if}
+
{/if} {*detail_show_map*}
-
-// Direction code is below, but since we're sending them offsite to google maps this is no longer necessary.
-//
-// {if $settings.detail_show_directions}
-//
-// var directionsDisplay;
-// var directionsService = new google.maps.DirectionsService();
-//
-// // Display map with route from specified location to member location
-// function calcRoute() {
-//
-// // If an address was input, use that, otherwise use detected location if available
-// var start = $('#glm-startLocation').val();
-// if (start == '' ) {
-// if (myLocation != false) {
-// start = myLocation;
-// }
-// }
-//
-// // If no start location available, tell user
-// if (start == '') {
-// alert('No starting location. Please enter address.');
-// return;
-// }
-//
-// // Switch to directions map being visible
-// $('#glm-directionsMap-container').removeClass('glm-hidden');
-// $('#glm-locationMap-container').addClass('glm-hidden');
-// $('#glm-showLocationButton').removeClass('glm-hidden');
-//
-// // Initialize the directions map with a default center location
-// directionsDisplay = new google.maps.DirectionsRenderer();
-// var mapOptions = {
-// zoom:7,
-// center: memberlocation
-// }
-// directionsMap = new google.maps.Map(document.getElementById("glm-directionsMap"), mapOptions);
-// directionsDisplay.setMap(directionsMap);
-//
-// // Get directions type selected
-// var directionsType = $('#directionsType').find(':selected').val();
-//
-// // Specify origin and destination then get route
-// var request = {
-// origin: start,
-// destination: memberlocation,
-// travelMode: google.maps.TravelMode[directionsType]
-// };
-// directionsService.route(request, function(result, status) {
-// if (status == google.maps.DirectionsStatus.OK) {
-// directionsDisplay.setDirections(result);
-// $('#directions-panel').html('');
-// directionsDisplay.setPanel(document.getElementById('directions-panel'));
-// }
-// });
-//
-// // Check for first map idle (completely loaded) - Check max initial zoom
-// var mapLoadedListener = google.maps.event.addListener(directionsMap, 'idle', function() {
-// if (directionsMap.getZoom() > 16) {
-// this.setZoom(16);
-// }
-// google.maps.event.removeListener(mapLoadedListener);
-// });
-//
-// }
-//
-// // Trigger route map either by button or input of address
-// $('#glm-showDirectionsButton' ).click( function() {
-// calcRoute();
-// });
-// $('#glm-startLocation' ).change( function() {
-// calcRoute();
-// });
-//
-// // Switch back to member location map
-// $('#glm-showLocationButton').click( function() {
-// $('#glm-directionsMap-container').addClass('glm-hidden');
-// $('#glm-locationMap-container').removeClass('glm-hidden');
-// $('#glm-showLocationButton').addClass('glm-hidden');
-// });
-//
-// {/if} {*detail_show_directions*}
+
+ $(window).load(function(){
+ initMap();
+ });
}); // jquery
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<link rel="stylesheet" href="{$jsUrl}/LeafletMarkerCluster/dist/MarkerCluster.Default.css" />
<script src="{$jsUrl}/LeafletMarkerCluster/dist/leaflet.markercluster-src.js"></script>
+ <link rel="stylesheet" href="{$jsUrl}/Leaflet.loading/src/Control.Loading.css" />
+ <script src="{$jsUrl}/Leaflet.loading/src/Control.Loading.js"></script>
{/if}
{if $settings.selected_map_interface == 2}
*/
var leafletMap = L.map('LeafletMapContainer').setView([{$settings.maps_default_lat}, {$settings.maps_default_lon}], defZoom);
- var leafletTileServer = '{$settings.leaflet_tile_server}' + {literal}'{z}/{x}/{y}.png'{/literal};
- var leafletMinZoom = 5;
- var leafletMaxZoom = 18;
+ var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
+ var leafletMinZoom = 3;
+ var leafletMaxZoom = 19;
var geocoder;
+
+ // Loading features
+ var loadingControl = L.Control.loading({
+ separate: true,
+ delayIndicator: 500
+ });
+ leafletMap.addControl(loadingControl);
// Init Map
L.tileLayer(leafletTileServer, {
projects / WP-Plugins / glm-member-db.git / commitdiff