</div>
<div class="row">
<div id="member-breweries" class="small-12 large-8 columns no-float">
+ <div id="LeafletMapContainer"></div>
<?php echo do_shortcode('[glm-members-list category="23" view="no-map"]'); ?>
</div>
</div>
<?php $url = get_stylesheet_directory_uri(). '/assets/markers/'; ?>
+<?php $plugin_url = plugin_dir_url('glm-member-db') . 'glm-member-db/js'; ?>
+<!-- <script src="https://maps.googleapis.com/maps/api/js?place=Kalamazoo,+MI&key=AIzaSyCBFqeBtlAGoVcpFBa5Ldrb1QajYnbCrac&callback=initMap&libraries=geometry" async="" defer=""></script> -->
+
+<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="<?php echo $plugin_url; ?>/LeafletMarkerCluster/dist/MarkerCluster.Default.css" />
+<script src="<?php echo $plugin_url; ?>/LeafletMarkerCluster/dist/leaflet.markercluster-src.js"></script>
+<link rel="stylesheet" href="<?php echo $plugin_url; ?>/Leaflet.loading/src/Control.Loading.css" />
+<script src="<?php echo $plugin_url; ?>/Leaflet.loading/src/Control.Loading.js"></script>
<script>
- var map;
+ var leafletMap;
function initMap() {
+
+ // var distancePath = new google.maps.Polyline();
+ // function drawLine(point1, point2) {
+
+ // var coordinates = [point1,point2];
+
+ // distancePath.setMap(null);
+
+ // distancePath = new google.maps.Polyline({
+ // path: coordinates,
+ // geodesic: true,
+ // strokeColor: '#91311D',
+ // strokeOpacity: 1.0,
+ // strokeWeight: 2
+ // });
+
+ // distancePath.setMap(map);
+ // }
// Styles a map in night mode.
var url = '<?php echo $url ?>';
+ leafletMap = L.map('brewery-map', {
+ center: [42.2903325, -85.5853277],
+ zoom: 14
+ });
+ var leafletTileServer = 'https://maps.gaslightmedia.com/08172018-4c95c314f0934e680190f27ef99c6dcc/{z}/{x}/{y}.png';
+ var leafletMinZoom = 3;
+ var leafletMaxZoom = 19;
+ var clusterRadiusMax = 40;
+ var geocoder;
- map = new google.maps.Map(document.getElementById('brewery-map'), {
- center: {lat: 42.2903325, lng: -85.5853277 },
- zoom: 14,
- styles: [
- {
- "featureType": "administrative.neighborhood",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#a3a470"
- }
- ]
- },
- {
- "featureType": "landscape.man_made",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#eec081"
- }
- ]
- },
- {
- "featureType": "landscape.natural",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#eec081"
- }
- ]
- },
- {
- "featureType": "landscape.natural.landcover",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#eec081"
- }
- ]
- },
- {
- "featureType": "landscape.natural.terrain",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#eec081"
- }
- ]
- },
- {
- "featureType": "poi.attraction",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.attraction",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.business",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.business",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.government",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.government",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.medical",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.medical",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.park",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#a3a470"
- }
- ]
- },
- {
- "featureType": "poi.place_of_worship",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.place_of_worship",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.school",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#a3a470"
- }
- ]
- },
- {
- "featureType": "poi.school",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "poi.sports_complex",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#bb8f63"
- }
- ]
- },
- {
- "featureType": "road.highway",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#ffffff"
- }
- ]
- },
- {
- "featureType": "road.highway",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#ffffff"
- }
- ]
- },
- {
- "featureType": "transit.line",
- "elementType": "geometry.stroke",
- "stylers": [
- {
- "color": "#9b321b"
- }
- ]
- },
- {
- "featureType": "water",
- "elementType": "geometry.fill",
- "stylers": [
- {
- "color": "#728890"
- }
- ]
- }
- ]
+ // Loading features
+ var loadingControl = L.Control.loading({
+ separate: true,
+ delayIndicator: 500
});
+ leafletMap.addControl(loadingControl);
+
+ // Init Map
+ 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);
+
+ // add border around the downtown coordinates
var downtown = [
- {lat: 42.295482, lng: -85.578543},
- {lat: 42.294493, lng: -85.590343},
- {lat: 42.288731, lng: -85.597809},
- {lat: 42.288811, lng: -85.579227},
- {lat: 42.295482, lng: -85.578543},
+ [42.295482, -85.578543],
+ [42.294493, -85.590343],
+ [ 42.288731, -85.597809],
+ [ 42.288811, -85.579227],
+ [ 42.295482, -85.578543],
];
- var poly = new google.maps.Polyline({
- path:downtown,
- strokeColor: '#91311D',
- strokeOpacity: 2.0,
- strokeWeight:2,
- map:map
- });
- poly.setMap(map);
- var distancePath = new google.maps.Polyline();
- function drawLine(point1, point2) {
-
- var coordinates = [point1,point2];
+ var polyline = L.polyline(downtown, {color: '#91311D', weight: 2}).addTo(leafletMap);
- distancePath.setMap(null);
+ // markers for each of the breweries
+ var brewers = [
+ {
+ position: [42.295573, -85.571195],
+ brewery: 'Arcadia Brewing Co',
+ address: '701 E Michigan Ave, Kalamazoo, MI 49007',
+ contact: '(269) 276-0458',
+ website: "http://arcadiaales.com/",
+ icon: 'arcadia.png',
+
+ }, {
+ position: [42.2947, -85.5789],
+ brewery: "Bell’s Eccentric Cafe",
+ address: '355 E Kalamazoo Ave, Kalamazoo, MI 49007',
+ contact: '(269) 382-2332',
+ website: 'https://www.bellsbeer.com/',
+ icon: 'bells.png',
+ }, {
+ position: [42.291180, -85.589856],
+ brewery: 'Gonzo’s BiggDog Brewing',
+ address: '140 S Westnedge Ave, Kalamazoo, MI 49007',
+ contact: '(269) 382-2739',
+ website: 'http://gonzosbiggdoggbrewing.com/',
+ icon: 'gonzo.png'
+ }, {
+ position: [42.291812, -85.581529],
+ brewery: 'Olde Peninsula Brewpub',
+ address: '200 E Michigan Ave, Kalamazoo, MI 49007',
+ contact: '(269) 343-2739',
+ website: 'http://oldepenkazoo.com/',
+ icon: 'olde.png'
+ }, {
+ position: [42.290428, -85.594139],
+ brewery: 'Rupert’s Brew House',
+ address: '773 W Michigan Ave, Kalamazoo, MI 49007',
+ contact: '(269) 337-9911',
+ website: 'http://www.rupertsbrewhouse.com/',
+ icon: 'rupert.png'
+ }, {
+ position: [42.288456, -85.583898],
+ brewery: 'Tibbs Brewing Co.',
+ address: '402 S Burdick St, Kalamazoo, MI 49007',
+ contact: '(877) 762-7397',
+ website: 'http://tibbsbrewing.com/',
+ icon: 'tibbs.png'
+ }, {
+ position: [42.302854, -85.577619],
+ brewery: 'Boatyard Brewing Co',
+ address: '432 E Paterson St, Kalamazoo, MI 49009',
+ contact: '(269) 226-0300',
+ website: 'https://boatyardbrewing.com/',
+ icon: 'boatyard.png'
+ }, {
+ position: [42.281642, -85.582770],
+ brewery: 'Brite Eyes Brewing',
+ address: '1156 S Burdick St A, Kalamazoo, MI 49001',
+ contact: '(269) 220-5001',
+ website: 'http://briteeyesbrewingco.com/',
+ icon: 'brite.png'
+ }, {
+ position: [42.205118, -85.560470],
+ brewery: 'Latitude 42 Brewing Co.',
+ address: '7842 Portage Rd, Portage, MI 49002',
+ contact: '(269) 459-4242',
+ website: 'https://latitude42brewingco.com/',
+ icon: 'latitude.png'
+ }, {
+ position: [42.248718, -85.559042],
+ brewery: 'One Well Brewing',
+ address: '4213 Portage Street, Kalamazoo, MI 49001',
+ contact: '(269) 459-9240',
+ website: 'http://onewellbrewing.com/',
+ icon: 'one.png'
+ }, {
+ position: [42.204832, -85.686902],
+ brewery: 'Texas Corners Brewery',
+ address: '6970 Texas Dr, Kalamazoo, MI 49009',
+ contact: '(269) 870-7724',
+ website: 'http://texascornersbrewing.com/',
+ icon: 'texas.png'
+ }, {
+ position: [42.121430, -85.533167],
+ brewery: 'Distant Whistle Brewhouse',
+ address: '118 S Main St, Vicksburg, MI 49097',
+ contact: '(269) 475-5447',
+ website: 'http://www.distantwhistle.com/',
+ icon: 'distant.png'
+ }, {
+ position: [42.2716, -85.6307],
+ brewery: 'Bilbo’s Pizza in a Pan',
+ address: '3307 Stadium Dr, Kalamazoo, MI 49008',
+ contact: '(269) 382-5544',
+ website: 'http://www.bilbospizza.com/',
+ icon: 'bilbos.png'
+ }, {
+ position: [42.239304, -85.560769],
+ brewery: 'Bravo! Restaurant & Cafe',
+ address: '5402 Portage Rd, Portage, MI 49002',
+ contact: '(269) 344-7700',
+ website: 'https://bravokalamazoo.com/',
+ icon: 'bravo.png'
+ }, {
+ position: [42.296176, -85.582958],
+ brewery: 'Final Gravity Brewing Co',
+ address: '246 N Burdick St, Kalamazoo, MI 49007',
+ contact: '(269) 350-5136',
+ website: 'https://www.finalgravitybrew.com/',
+ icon: 'final.png'
+ },
+ ];
+ brewers.forEach(function(brewer){
+ let info = `<div class="marker-title">${brewer.brewery}</div><div>${brewer.address}</div><div>${brewer.contact}</div><div><a href="${brewer.website}">${brewer.website}</a></div>`;
- distancePath = new google.maps.Polyline({
- path: coordinates,
- geodesic: true,
- strokeColor: '#91311D',
- strokeOpacity: 1.0,
- strokeWeight: 2
+ var breweryIcon = L.icon({
+ iconUrl: url+brewer.icon,
+ iconSize: [70, 95],
+ iconAnchor: [22, 94],
+ popupAnchor: [-3, -76],
+ shadowSize: [68, 95],
+ shadowAnchor: [22, 94]
});
-
- distancePath.setMap(map);
- }
+ var leafletMarker = L.marker(
+ [brewer.position[0], brewer.position[1]],
+ {
+ title: brewer.brewery,
+ icon: breweryIcon
+ }
+ )
+ .addTo(leafletMap)
+ .bindPopup(info)
+ .on('click', markerOnClick)
+ });
function getMiles(i) {
return i*0.000621371192;
- }
+ };
function convertMetersToFeet(meters) {
if (meters < (0)) {
return 'input cannot be less than zero';
} else {
return getMiles((meters/0.3048));
}
- }
+ };
last = function(array, n) {
if (array == null)
return void 0;
return array[array.length - 1];
return array.slice(Math.max(array.length - n, 0));
};
- // Get the path form polyLine
-
-
- var brewers = [
- {
- position: new google.maps.LatLng(42.295573, -85.571195),
- brewery: 'Arcadia Brewing Co',
- address: '701 E Michigan Ave, Kalamazoo, MI 49007',
- contact: '(269) 276-0458',
- website: "http://arcadiaales.com/",
- icon: 'arcadia.png',
-
- }, {
- position: new google.maps.LatLng(42.2947, -85.5789),
- brewery: "Bell’s Eccentric Cafe",
- address: '355 E Kalamazoo Ave, Kalamazoo, MI 49007',
- contact: '(269) 382-2332',
- website: 'https://www.bellsbeer.com/',
- icon: 'bells.png',
- }, {
- position: new google.maps.LatLng(42.291180, -85.589856),
- brewery: 'Gonzo’s BiggDog Brewing',
- address: '140 S Westnedge Ave, Kalamazoo, MI 49007',
- contact: '(269) 382-2739',
- website: 'http://gonzosbiggdoggbrewing.com/',
- icon: 'gonzo.png'
- }, {
- position: new google.maps.LatLng(42.291812, -85.581529),
- brewery: 'Olde Peninsula Brewpub',
- address: '200 E Michigan Ave, Kalamazoo, MI 49007',
- contact: '(269) 343-2739',
- website: 'http://oldepenkazoo.com/',
- icon: 'olde.png'
- }, {
- position: new google.maps.LatLng(42.290428, -85.594139),
- brewery: 'Rupert’s Brew House',
- address: '773 W Michigan Ave, Kalamazoo, MI 49007',
- contact: '(269) 337-9911',
- website: 'http://www.rupertsbrewhouse.com/',
- icon: 'rupert.png'
- }, {
- position: new google.maps.LatLng(42.288456, -85.583898),
- brewery: 'Tibbs Brewing Co.',
- address: '402 S Burdick St, Kalamazoo, MI 49007',
- contact: '(877) 762-7397',
- website: 'http://tibbsbrewing.com/',
- icon: 'tibbs.png'
- }, {
- position: new google.maps.LatLng(42.302854, -85.577619),
- brewery: 'Boatyard Brewing Co',
- address: '432 E Paterson St, Kalamazoo, MI 49009',
- contact: '(269) 226-0300',
- website: 'https://boatyardbrewing.com/',
- icon: 'boatyard.png'
- }, {
- position: new google.maps.LatLng(42.281642, -85.582770),
- brewery: 'Brite Eyes Brewing',
- address: '1156 S Burdick St A, Kalamazoo, MI 49001',
- contact: '(269) 220-5001',
- website: 'http://briteeyesbrewingco.com/',
- icon: 'brite.png'
- }, {
- position: new google.maps.LatLng(42.205118, -85.560470),
- brewery: 'Latitude 42 Brewing Co.',
- address: '7842 Portage Rd, Portage, MI 49002',
- contact: '(269) 459-4242',
- website: 'https://latitude42brewingco.com/',
- icon: 'latitude.png'
- }, {
- position: new google.maps.LatLng(42.248718, -85.559042),
- brewery: 'One Well Brewing',
- address: '4213 Portage Street, Kalamazoo, MI 49001',
- contact: '(269) 459-9240',
- website: 'http://onewellbrewing.com/',
- icon: 'one.png'
- }, {
- position: new google.maps.LatLng(42.204832, -85.686902),
- brewery: 'Texas Corners Brewery',
- address: '6970 Texas Dr, Kalamazoo, MI 49009',
- contact: '(269) 870-7724',
- website: 'http://texascornersbrewing.com/',
- icon: 'texas.png'
- }, {
- position: new google.maps.LatLng(42.121430, -85.533167),
- brewery: 'Distant Whistle Brewhouse',
- address: '118 S Main St, Vicksburg, MI 49097',
- contact: '(269) 475-5447',
- website: 'http://www.distantwhistle.com/',
- icon: 'distant.png'
- }, {
- position: new google.maps.LatLng(42.2716, -85.6307),
- brewery: 'Bilbo’s Pizza in a Pan',
- address: '3307 Stadium Dr, Kalamazoo, MI 49008',
- contact: '(269) 382-5544',
- website: 'http://www.bilbospizza.com/',
- icon: 'bilbos.png'
- }, {
- position: new google.maps.LatLng(42.239304, -85.560769),
- brewery: 'Bravo! Restaurant & Cafe',
- address: '5402 Portage Rd, Portage, MI 49002',
- contact: '(269) 344-7700',
- website: 'https://bravokalamazoo.com/',
- icon: 'bravo.png'
- }, {
- position: new google.maps.LatLng(42.296176, -85.582958),
- brewery: 'Final Gravity Brewing Co',
- address: '246 N Burdick St, Kalamazoo, MI 49007',
- contact: '(269) 350-5136',
- website: 'https://www.finalgravitybrew.com/',
- icon: 'final.png'
- },
- ];
-
- // Create markers.
- var infowindow = new google.maps.InfoWindow();
- var previous, distance, path, compare = [];
-
- brewers.forEach(function(feature) {
-
- // console.log(path)
- let info = `<div class="marker-title">${feature.brewery}</div><div>${feature.address}</div><div>${feature.contact}</div><div><a href="${feature.website}">${feature.website}</a></div>`;
- var marker = new google.maps.Marker({
- position: feature.position,
- icon: url+feature.icon,
- map: map,
- html: `<img src="${url}${feature.icon}"/>`
- });
-
- // Add a click listener for this marker
- marker.addListener('click', function(event) {
- compare.push(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
- if(compare.length >= 2){
- // console.log(`${previous}, ${current}`)
- distance = `<div class="distance-marker"><span class="marker-label">Distance:</span> ${Math.round(convertMetersToFeet(google.maps.geometry.spherical.computeDistanceBetween(last(compare), compare[compare.length - 2] ) ) * 10) / 10} Miles</div>`;
-
- drawLine(last(compare),compare[compare.length - 2])
- } else {
- distance = '';
- }
- infowindow.setOptions({
- content: info + `${distance}`
- });
- infowindow.open(map,this);
- });
- });
+ function markerOnClick(e){
+ // console.log(e)
+ let lat = e.latlng.lat;
+ let lng = e.latlng.lng;
+ console.log(lat, lng);
+ };
}
-// </script>
-<script src="https://maps.googleapis.com/maps/api/js?place=Kalamazoo,+MI&key=AIzaSyCBFqeBtlAGoVcpFBa5Ldrb1QajYnbCrac&callback=initMap&libraries=geometry" async="" defer=""></script>
\ No newline at end of file
+ initMap();
+</script>
+