You need to sign in to do that
Don't have an account?
Ola Bamidele
Adding Radius to Map
Hi Gurus,
I have a leaflet map that displays accounts around europe however, is there a way for the map to display only accounts within a certain radius?
I've been investigating and I have tried to implement the "L.circle([lat,lng], radius).addTo(map);" however I cant get it work as im getting an error saying "Uncaught TypeError: Cannot read property 'lng' of null throws at https://tipeurope--tt.lightning.force.com/resource/leaflet/leaflet.js:5:77837"
Does anyone know how I can add a radius to the map by any chance?
This is my code, thanks very much! :
I have a leaflet map that displays accounts around europe however, is there a way for the map to display only accounts within a certain radius?
I've been investigating and I have tried to implement the "L.circle([lat,lng], radius).addTo(map);" however I cant get it work as im getting an error saying "Uncaught TypeError: Cannot read property 'lng' of null throws at https://tipeurope--tt.lightning.force.com/resource/leaflet/leaflet.js:5:77837"
Does anyone know how I can add a radius to the map by any chance?
This is my code, thanks very much! :
({ jsLoaded: function(component, event, helper) { // Set initial map parameters var map = L.map('map', {zoomControl: true, tap: false}) //Set default view of the map to TIP HQ Amsterdam //map.setView([52.311828,4.939566], 12); //Set default view to Scott Moore's location //map.setView([52.7003,1.3626], 12); // Set default view of the map based on the users' location .locate({setView: true, maxZoom: 16}); function onLocationFound(e) { L.marker(e.latlng).addTo(map).bindPopup("You are here.").openPopup(); } map.on('locationfound', onLocationFound); map.on('moveend', function() { console.log("map was panned!"); console.log("zoom: " + map.getZoom()); // prints out zoom level console.log("center: " + map.getCenter()); // prints out map center console.log(map.getBounds()); // throws error }); //Instantiate the map L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri' }).addTo(map); component.set("v.map", map); }, accountsLoaded: function(component, event, helper) { // Add markers var map = component.get('v.map'); var accounts = event.getParam('accounts'); for (var i=0; i<accounts.length; i++) { var account = accounts[i]; var popupInfo = [account.name]; var latLng = [account.ShippingLatitude, account.ShippingLongitude]; // To display account name and status in the text balloon L.marker(latLng, {account: account}).addTo(map) .bindPopup(account.Name + "<br />" + account.AccountStatus__c + "<br />" + account.Segment__c + ", Fleet size= " + account.Customer_Fleet_Size__c); } }, accountSelected: function(component, event, helper) { // Center the map on the account selected in the list var map = component.get('v.map'); var account = event.getParam("account"); map.panTo([account.ShippingLatitude, account.ShippingLongitude]); } })
Mark as best answer, If it resloves !!
Please check these https://csessig.wordpress.com/2014/06/22/leaflet-solution-counting-markers-within-a-radius/
Mark as resloved if it helps :) :)
Thanks,
Bhanu Prakash
visit ForceLearn.com (https://www.forcelearn.com)
I have reviewed the document you sent several time and I dont think it matching what I am trying to do.
I am trying to only show account within a certain radius on a map.
Thanks very much