var url = '<?php echo $url ?>';
leafletMap = L.map('front-map-image', {
center: [45.431962, -84.990662],
- zoom: 13,
+ zoom: 12,
// scrollWheelZoom: false,
gestureHandling: true
});
// var polyline = L.polyline(downtown, {color: '#91311D', weight: 2}).addTo(leafletMap);
// var polyline = L.polyline(LittleTraverse, {color: '#91311D', weight: 2}).addTo(leafletMap);
- var ltPolygon = L.polygon(LittleTraverse, {color: '#3A727C',weight: 1}).addTo(leafletMap);
- ltPolygon.setStyle({fillColor: '#3A727C', fillOpacity: .1});
+ var ltPolygon = L.polygon(LittleTraverse, {color: '#343434',weight: 1}).addTo(leafletMap);
+ ltPolygon.setStyle({fillColor: '#343434', fillOpacity: .05});
- var wtPolygon = L.polygon(WestTraverse, {color: '#91311D',weight: 1}).addTo(leafletMap);
- ltPolygon.setStyle({fillColor: '#91311D', fillOpacity: .1});
+ var wtPolygon = L.polygon(WestTraverse, {color: '#950000',weight: 1}).addTo(leafletMap);
+ wtPolygon.setStyle({fillColor: '#950000', fillOpacity: .05});
- var wtPolygon2 = L.polygon(WestTraverse2, {color: '#91311D',weight: 1}).addTo(leafletMap);
- ltPolygon.setStyle({fillColor: '#91311D', fillOpacity: .1});
+ var wtPolygon2 = L.polygon(WestTraverse2, {color: '#950000',weight: 1}).addTo(leafletMap);
+ wtPolygon2.setStyle({fillColor: '#950000', fillOpacity: .1});
var harborSpringsCity = L.polygon(harborSprings,{color: '#02528F',weight: 1}).addTo(leafletMap);
- harborSpringsCity.setStyle({fillColor: '#02528F', fillOpacity: .1});
+ harborSpringsCity.setStyle({fillColor: 'transparent', fillOpacity: .1});
var ltbInfo = '<div class="marker-title">Little Traverse Bay is a small bay, 170 feet (55 m) deep, off Lake Michigan in the northern area of the Lower Peninsula of Michigan. The cities of Harbor Springs and Petoskey are located on this bay.</div>';
"Little Traverse Bay is a small bay, 170 feet (55 m) deep, off Lake Michigan in the northern area of the Lower Peninsula of Michigan. The cities of Harbor Springs and Petoskey are located on this bay."
new L.Marker([45.406518, -84.948100], {
// Lake Michigan
var lmInfo = '<div class="marker-title">Lake Michigan is one of the five Great Lakes of North America and the only one located entirely within the United States. The other four Great Lakes are shared by the U.S. and Canada. It is the second-largest of the Great Lakes by volume and the third-largest by surface area." </div>';
- new L.Marker([45.402413, -85.014117], {
+ new L.Marker([45.416413, -85.144117], {
icon: new L.DivIcon({
className: 'my-div-icon',
html: '<span class="glm-theme-map-label">Lake Michigan</span>'
var ltInfo = '<div class="marker-title">Little Traverse Township is a civil township of Emmet County in the U.S. state of Michigan. The population was 2,426 at the 2000 census." </div>';
// Little Traverse Township
- new L.Marker([45.439232, -84.907780], {
+ new L.Marker([45.437909, -84.966940], {
icon: new L.DivIcon({
className: 'my-div-icon',
- html: '<span style="font-weight: bold;" class="glm-theme-map-label">Little Traverse Township</span>'
+ html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label">Little Traverse Township</span>'
})
}).addTo(leafletMap).bindPopup(ltInfo);
// West Traverse Township
var ltInfo = '<div class="marker-title">West Traverse Township is a civil township of Emmet County in the U.S. state of Michigan. The population was 1,448 at the 2000 census." </div>';
- new L.Marker([45.451360, -85.038732], {
+ new L.Marker([45.442881, -85.029999], {
icon: new L.DivIcon({
className: 'my-div-icon',
- html: '<span style="font-weight: bold;" class="glm-theme-map-label">West Traverse Township</span>'
+ html: '<span style="color: #343539;line-height: 1;" class="glm-theme-map-label">West Traverse Township</span>'
})
}).addTo(leafletMap).bindPopup(ltInfo);
-
-
- // var condos = [
- // {
- // position: [45.404267, -84.900425],
- // condo: 'Lakeside Club Condos',
- // address: '701 E Michigan Ave, Kalamazoo, MI 49007',
- // contact: '(269) 276-0458',
- // website: "https://petoskeylsc.com",
- // icon: 'marker.png',
- // }
- // ];
-
- // var previous, distance, path, compare = [];
-
- // condos.forEach(function(condo){
- // let info = `<div class="marker-title">${condo.condo}</div><div>${condo.address}</div><div>${condo.contact}</div><div><a href="${condo.website}">${condo.website}</a></div>`;
-
- // var breweryIcon = L.icon({
- // iconUrl: url+condo.icon,
- // iconSize: [32, 45],
- // iconAnchor: [22, 94],
- // popupAnchor: [-3, -76],
- // shadowSize: [68, 95],
- // shadowAnchor: [22, 94]
- // });
- // var leafletMarker = L.marker(
- // [condo.position[0], condo.position[1]],
- // {
- // title: condo.condo,
- // icon: breweryIcon
- // }
- // )
- // .addTo(leafletMap)
- // .bindPopup(info)
- // .on('click', function(e){
- // let lat = e.latlng.lat;
- // let lng = e.latlng.lng;
- // compare.push(L.latLng(e.latlng.lat, e.latlng.lng) );
- // if(compare.length >= 2){
- // // console.log(L.GeometryUtil. distance(leafletMap,last(compare), compare[compare.length - 2] ))
- // distance = `<div class="distance-marker"><span class="marker-label">Distance:</span> ${convertMetersToFeet(L.GeometryUtil.length([last(compare), compare[compare.length - 2]] ) ).toFixed(2)} Miles</div>`;
- // this._popup.setContent(info + distance)
-
- // drawLine(last(compare),compare[compare.length - 2]);
-
- // } else {
- // distance = '';
- // }
- // })
- // });
- // function getMiles(i) {
- // return i * 0.00018939;
- // };
- // function convertMetersToFeet(meters) {
- // if (meters < (0)) {
- // return 'input cannot be less than zero';
- // } else {
- // if(getMiles((meters / 0.3048)) <= 0){
- // return `< 1 mile`;
- // }else{
- // return getMiles((meters / 0.3048));
- // }
-
- // }
- // };
- // last = function(array, n) {
- // if (array == null)
- // return void 0;
- // if (n == null)
- // return array[array.length - 1];
- // return array.slice(Math.max(array.length - n, 0));
- // };
- // let prev;
- // function drawLine(point1, point2) {
- // let distancePath;
- // let p1 = [point1.lat, point1.lng];
- // let p2 = [point2.lat, point2.lng];
- // let coordinates = [p1,p2];
- // if(prev){
- // leafletMap.removeLayer(prev);
- // }
-
- // distancePath = L.polyline(coordinates, {
- // color: '#91311D',
- // });
- // distancePath.addTo(leafletMap);
- // prev = distancePath;
- // }
}
initMap();
</script>