DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Developers Are Scaling Faster Than Ever: Here’s How Security Can Keep Up
  • Multi-Stream Joins With SQL
  • WireMock: The Ridiculously Easy Way (For Spring Microservices)
  • DevOps Pipeline and Its Essential Tools
  1. DZone
  2. Data Engineering
  3. Data
  4. Area Selection for LeafletJS Maps

Area Selection for LeafletJS Maps

Ever want to add the ability to select a subset of markers from your map in LeafletJS?

James Sugrue user avatar by
James Sugrue
CORE ·
Nov. 16, 15 · Tutorial
Like (4)
Save
Tweet
Share
7.76K Views

Join the DZone community and get the full member experience.

Join For Free

A few weeks ago I wrote an article about  using LeafletJS for visualising geographic data.  While continuing to work with  LeafletJS and PruneCluster, I've found some useful functionality for filtering out markers based on area selection. 

It's worth looking at that previous article to get a handle on how to setup the project and use PruneCluster. This function gives an idea of how to create a set of markers on a map: 

/**
 /*
 * Render the markers onto the map 
 * @param  {Array} data the geographic data to be displayed
 * @param  {Leaflet.Map} map  the map to render the markers on 
 */
function renderMarkers(data, map){
//create layer for the markers 
var markerLayer = new PruneClusterForLeaflet();
for(var i =0 ; i < data.length; i++){
     var marker = new PruneCluster.Marker(data[i].lat, data[i].lon);
     markerLayer.RegisterMarker(marker);
}
//add the layer to the map 
  map.addLayer(markerLayer);
  //need to be called when any changes to markers are made 
  markerLayer.ProcessView();
};

Filtering In PruneCluster

When using the default functionality in LeafletJS, you typically remove markers from a layer if you need to hide them. However, in PruneCluster, you can used the marker.filtered property to define whether a marker should be displayed or not. 

marker.filtered = true;

This can be really useful when put together with the data object that is part of each PruneCluster Marker. You can add any properties that you wish to this. Let's add the individual latitude and longitude's as each is created 

marker.data.location= {lat: data[i].lat, lon: data[i].lon};

Adding an Area Selector

There are a few projects available for this purpose; I chose leaflet-locationfilter. You can download the distribution, or use bower to install the package: 

bower install leaflet-locationfilter --save

Add the component to your map using a very similar syntax:

var locationFilter = new L.LocationFilter().addTo(map);


Image titleYou can see it in the top right hand corner as a button with "Select Area" on it. Next you need to add handlers so that you can filter markers accordingly. 

locationFilter.on("change", function (e) {
    // Do something when the bounds change.
    // Bounds are available in `e.bounds`.
});

locationFilter.on("enabled", function () {
    // Do something when enabled.
});

locationFilter.on("disabled", function () {
    // Do something when disabled.
});

In our case, we want to check which markers are within the area and ensure they are seen (and no others). The following function checks which markers are within the bounds, and ensures they are not filtered.

function checkMarkersWithinBounds(bounds, markers){
  for(var i = 0; i < markers.length; i++){
     if (bounds.contains(L.latLng(markers[i].data.location.lat, 
markers[i].data.location.lon))){
markers[i].filtered = false;
     }
    else{
    markers[i].filtered = true;
    }
  }
}

It's as simple as that - you will want to call that function for the change and enabled events: 

locationFilter.on("change", function (e) {
   checkMarkersWithinBounds(e.bounds, markers);
});

locationFilter.on("enabled", function () {
    // Do something when enabled.
  checkMarkersWithinBounds(locationFilter.getBounds(), markers);
});

Now as you move the view finder around the map, it will hide any markers outside the bounds:

Image title

One last thing left to do is to clear the filters when the location filter is switched off: 


locationFilter.on("disabled", function () {
   clearFilters();
});
/** 
 * Ensure that no markers are filtered out 
 **/
function clearFilters(){
  for(var i = 0; i < markers.length; i++){
  markers[i].filtered = false;
  }
}

That's all there is to it. Pretty simple! 

Filter (software) Data (computing) Property (programming) IT Clear (Unix) Syntax (programming languages) Distribution (differential geometry) Event Download

Opinions expressed by DZone contributors are their own.

Trending

  • Developers Are Scaling Faster Than Ever: Here’s How Security Can Keep Up
  • Multi-Stream Joins With SQL
  • WireMock: The Ridiculously Easy Way (For Spring Microservices)
  • DevOps Pipeline and Its Essential Tools

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: