</div>
{if $settings.detail_show_map}
- <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+
<div id="glm-locationMap-container">
- <div id="glm-locationMap" class="glm-map small-12 columns">(map loads here)</div>
+ {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>
$(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