Completed

Building a Filter for a Mapbox map in JavaScript

A mapbox map shows a number of points which are defined as GeoJson Objects. Each point consists of several properties. I need to filter the points on the list based on some of these properties.

JSON Properties:

Each point represent a Dinner attendee and has these relevant properties:

• icon:

o String, distinguish between host and guest. Cannot be null

• dinnerStatus:

o ENUM: [url removed, login to view], [url removed, login to view], [url removed, login to view], [url removed, login to view], [url removed, login to view]

• dinnerDate:

o Date as String. Can be null

• registrationDate:

o Date as String, cannot be null

• sex:

o ENUM: [url removed, login to view], [url removed, login to view]

• username:

o String, unique identifier

Filter Elements to be implemented:

• Two Rows of Filter. First row filters hosts, second filters guests

• First filter option group consists of ToggleButtons for the dinnerStatus.

• Second filter group consists of dinnerDate from - to (for HOSTS) and registrationDate from - to (for GUEST) and an apply button.

• Third filter options group consists of ToggleButtons for gender

UserStories

• As an User I want to use the ToggleButtons to filter out all Attendees, which Status doesn't match the enabled button(s).

• As an User I want to use the dinnerDate filter to filter out all HOSTS, which dinnerDate is not in the interval. If I click on the apply button, the filter is applied. The date is selected using a DatePicker. If from-date is after to-date, the button is disabled. Inital values are: From -> 1.1.2016, To -> Today. Format is [url removed, login to view]

• As an User I want to use the registration filter to filter out all GUESTS, which registrationDate is not in the interval. If I click on the apply button, the filter is applied. The date is selected using a DatePicker. If from-date is after to-date, the button is disabled. Inital values are: From -> 1.1.2016, To -> Today Format is [url removed, login to view]

• As an User I want to use the gender filter to filter out all HOSTS and GUESTS, which gender doesn't match the enabled buttons.

Skills: Cartography & Maps, Javascript, JSON

See more: mapbox gl querysourcefeatures, mapbox gl filter example, mapbox remove filter, mapbox addlayer filter, mapbox queryrenderedfeatures, mapbox gl setfilter, mapbox querysourcefeatures, mapbox multiple filters, I am building a business in which privat persons can refer friends to buy insurance., where to freelance when you are a beginner in javascript, javascript look for a string in a string, how to get a value in javascript, how do you find a writer in a crowded building, how a freelancer in python programming can earn in a month, cost of building a website in the netherlands

About the Employer:
( 2 reviews ) Braunschweig, Germany

Project ID: #15230301

Awarded to:

BaNgan

Hi, I think project I use CSV/JSON as source for the markers (clickable), but I can switch to your datasource. [login to view URL] Can I check your current GeoJSON now? Relevant Skills and Experience I have s More

€100 EUR in 3 days
(187 Reviews)
6.8

17 freelancers are bidding on average €184 for this job

€200 EUR in 5 days
(19 Reviews)
5.7
WebColorIn

I will write script Relevant Skills and Experience Website Development, Chrome Extension, Custom WordPress Theme, SEO, Hosting & Maintenance Proposed Milestones €77 EUR - Complete

€77 EUR in 3 days
(16 Reviews)
5.5
ludiac

Hi, we've reviewed and understood the requirements of your project. Relevant Skills and Experience We have expertise in web development and we can share our work history with you in chat. Proposed Milestones €200 EUR More

€200 EUR in 3 days
(12 Reviews)
5.4
Vipunen

Hi, thank you for clear specifications. I'd be happy to help out with the development. Delivery time is on the safe side, can be done quicker if you're tight on schedule. Soveltuvat taidot ja aiempi kokemus From my pr More

€200 EUR in 5 days
(4 Reviews)
4.8
appleearth039

Hello, Client! Thanks for the opportunity to bid on your project. I'm a master in GIS fields. I have an experiance in web developing. I've rich experience in developing webMap by using google Map API, highMap, high More

€222 EUR in 3 days
(17 Reviews)
4.5
schoudhary1553

Greetings sir, i can help you and your 100% satisfaction is assured if you allow me to serve. I can do this task as per your requirement Relevant Skills and Experience I have more than 5 years of experience with exce More

€200 EUR in 3 days
(8 Reviews)
4.2
€150 EUR in 3 days
(6 Reviews)
3.7
AMsolutions1

Hi, What i understood that you want to make a filter for fetched data so that users can apply filter as per hosts,guest with [login to view URL] Relevant Skills and Experience I have experience in JSON and google map so i wa More

€188 EUR in 4 days
(5 Reviews)
3.5
AppHero2

Hello, I have experienced in Mapbox Javascript Relevant Skills and Experience javascript, mapbox Proposed Milestones €250 EUR - whole project

€250 EUR in 3 days
(1 Review)
3.3
alexshk

Hi I can do this in 3 days. But I have some questions: 1. Geojson supplied in html or it must be downloaded? 2. How to find out Hosts and Guests? 3. Is it for mapbox? Because I see google maps in tags Relevant Skills More

€177 EUR in 3 days
(5 Reviews)
3.4
€148 EUR in 3 days
(7 Reviews)
2.4
€155 EUR in 3 days
(1 Review)
0.0
adityaoccult

A proposal has not yet been provided

€388 EUR in 10 days
(0 Reviews)
0.0
piyushjain1919

My bid includes complete project development Relevant Skills and Experience I am an experienced full stack developer with 2+ years of experience in one of the top product company. Guaranteed best performance and optim More

€111 EUR in 5 days
(0 Reviews)
0.0
destinodello

I am Destino a Front End Engineer and i wouldlike to work on this project. The project require a front end framework such as react.js and it should not take longer than 2 days to get it working. Relevant Skills and Ex More

€166 EUR in 2 days
(0 Reviews)
0.0
iamasingh

I've read your requirements. I'll finish it in 3 days. Relevant Skills and Experience Javascript. Check out my github repository of a small javascript library i made to show my proficiency. [login to view URL] More

€200 EUR in 3 days
(0 Reviews)
0.0