From aeb4f64a67119260124fa92d4cfe23495af35d89 Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Fri, 2 Nov 2018 13:52:36 -0400 Subject: [PATCH] adding border styles for the township coordinates on the leaflet map --- parts/map.php | 115 ++++++-------------------------------------------- 1 file changed, 13 insertions(+), 102 deletions(-) diff --git a/parts/map.php b/parts/map.php index cd4a686..9f0b61d 100644 --- a/parts/map.php +++ b/parts/map.php @@ -22,7 +22,7 @@ var url = ''; leafletMap = L.map('front-map-image', { center: [45.431962, -84.990662], - zoom: 13, + zoom: 12, // scrollWheelZoom: false, gestureHandling: true }); @@ -130,17 +130,17 @@ // 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 = '
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.
'; "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], { @@ -152,7 +152,7 @@ // Lake Michigan var lmInfo = '
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."
'; - new L.Marker([45.402413, -85.014117], { + new L.Marker([45.416413, -85.144117], { icon: new L.DivIcon({ className: 'my-div-icon', html: 'Lake Michigan' @@ -161,10 +161,10 @@ var ltInfo = '
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."
'; // 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: 'Little Traverse Township' + html: 'Little Traverse Township' }) }).addTo(leafletMap).bindPopup(ltInfo); @@ -176,101 +176,12 @@ // West Traverse Township var ltInfo = '
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."
'; - new L.Marker([45.451360, -85.038732], { + new L.Marker([45.442881, -85.029999], { icon: new L.DivIcon({ className: 'my-div-icon', - html: 'West Traverse Township' + html: 'West Traverse Township' }) }).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 = `
${condo.condo}
${condo.address}
${condo.contact}
${condo.website}
`; - - // 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 = `
Distance: ${convertMetersToFeet(L.GeometryUtil.length([last(compare), compare[compare.length - 2]] ) ).toFixed(2)} Miles
`; - // 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(); -- 2.17.1