diff --git a/main.js b/main.js index 12729cc8..e0bad137 100644 --- a/main.js +++ b/main.js @@ -82,14 +82,9 @@ function addGeoms(data) { function addPoints(data) { data = data.data; let pointGroupLayer = L.layerGroup().addTo(map); - // Choose marker type. Options are: - // (these are case-sensitive, defaults to marker!) - // marker: standard point with an icon - // circleMarker: a circle with a radius set in pixels - // circle: a circle with a radius set in meters let markerType = "marker"; - // Marker radius, Wil be in pixels for circleMarker, metres for circle, Ignore for point let markerRadius = 100; + for (let row = 0; row < data.length; row++) { let marker; if (markerType == "circleMarker") { @@ -103,30 +98,26 @@ function addPoints(data) { } else { marker = L.marker([data[row].lat, data[row].lon]); } - - if (data[row].include === "y" || data[row].include === "2_Registered" || data[row].include === "1_Admin") { - pointGroupLayer.addLayer(marker); - } + + marker.name = data[row].name; // Extend marker with a name property for search let descriptionLink = data[row].description ? `
Description: > Go there <
` : ''; let dropboxLink = data[row].dropbox ? `Dropbox: > Dropbox Link <
` : ''; - // Pop-up marker with all data - marker.bindPopup(` -Program: ${data[row].program}
-Client: ${data[row].client}
- ${dropboxLink} -`); - + marker.bindPopup(` +Program: ${data[row].program}
+Client: ${data[row].client}
+ ${dropboxLink} + `); marker.on({ click: function (e) { - map.setView(e.latlng, map.getZoom() + 2); + map.setView(e.latlng, map.getZoom() + 2); }, }); - // AwesomeMarkers is used to create fancier icons + let icon = L.AwesomeMarkers.icon({ icon: "info-circle", iconColor: "white", @@ -134,10 +125,31 @@ function addPoints(data) { prefix: "fa", extraClasses: "fa-rotate-0", }); + if (!markerType.includes("circle")) { marker.setIcon(icon); } + + if (data[row].include === "y" || data[row].include === "2_Registered" || data[row].include === "1_Admin") { + pointGroupLayer.addLayer(marker); + } } + + // Add search control + var searchControl = new L.Control.Search({ + layer: pointGroupLayer, + propertyName: 'name', + marker: false, + moveToLocation: function(latlng, title, map) { + map.setView(latlng, map.getZoom()); // Adjust to set the desired zoom level + } + }); + + searchControl.on('search:locationfound', function(e) { + e.layer.openPopup(); + }); + + map.addControl(searchControl); } function parseGeom(gj) { // FeatureCollection