Styjun

How often is duct tape used during crewed space missions?

How does doing something together work?

Statistical tests for benchmark comparison

In Bb5 systems against the Sicilian, why does White exchange their b5 bishop without playing a6?

Why cannot a convert make certain statements? I feel they are being pushed away at the same time respect is being given to them

Delete empty subfolders, keep parent folder

Hobby function generators

Rare Earth Elements in the outer solar system

Exam design: give maximum score per question or not?

How would you translate Evangelii Nuntiandi?

Is it acceptable to use decoupling capacitor ground pad as ground for oscilloscope probe?

How to generate short fixed length cryptographic hashes?

'Overwrote' files, space still occupied, are they lost?

Smooth irreducible subvarieties in an algebraic group that are stable under power maps

Does Forgotten Realms setting count as “High magic”?

Why would a fighter use the afterburner and air brakes at the same time?

Beauville-Laszlo for schemes

Why is belonging not transitive?

Writing a system of Linear Equations

Did slaves have slaves?

What is this WWII four-engine plane on skis?

Is there a tool to measure the "maturity" of a code in Git?

How to set a tolerance level for equality constraints

What did the first ever Hunger Games look like?

Leaflet Tag Filter Button in Typescript for Angular

What do “branch”, “tag” and “trunk” mean in Subversion repositories?What is TypeScript and why would I use it in place of JavaScript?What is the difference between angular-route and angular-ui-router?angular leaflet custom markers (using angular directives)Angular-Leaflet-Directive + JSON markersUnable to add marker to Angular Leaflet directiveIn Angular, how do you determine the active route?How to Filter Markers with Angular-Leaflet-Directive and a Custom FilterCan't bind to 'ngModel' since it isn't a known property of 'input'Leaflet map: Rotated Marker for ionic2 (Typescript)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm trying to use the plugin Tag Filter Button on Leaflet to filtering my different Marker, but it doesn't work with my app from Angular 7 because I use Typescript.

Someone has a solution to filtering Markers with multiple tags?

angularjs typescript tags leaflet angular-leaflet-directive

share|improve this question

edited Mar 28 at 19:52

kboul

3,44344 gold badges1717 silver badges2929 bronze badges

asked Mar 28 at 12:48

Sylvain TersoglioSylvain Tersoglio

411 bronze badge

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi. Did you check my answer? Did it solve your problem?
  
  – kboul
  Mar 29 at 9:17
  

  
  
  
  

add a comment
 | 

1

I'm trying to use the plugin Tag Filter Button on Leaflet to filtering my different Marker, but it doesn't work with my app from Angular 7 because I use Typescript.

Someone has a solution to filtering Markers with multiple tags?

angularjs typescript tags leaflet angular-leaflet-directive

share|improve this question

edited Mar 28 at 19:52

kboul

3,44344 gold badges1717 silver badges2929 bronze badges

asked Mar 28 at 12:48

Sylvain TersoglioSylvain Tersoglio

411 bronze badge

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi. Did you check my answer? Did it solve your problem?
  
  – kboul
  Mar 29 at 9:17
  

  
  
  
  

add a comment
 | 

I'm trying to use the plugin Tag Filter Button on Leaflet to filtering my different Marker, but it doesn't work with my app from Angular 7 because I use Typescript.

Someone has a solution to filtering Markers with multiple tags?

angularjs typescript tags leaflet angular-leaflet-directive

share|improve this question

edited Mar 28 at 19:52

kboul

3,44344 gold badges1717 silver badges2929 bronze badges

asked Mar 28 at 12:48

Sylvain TersoglioSylvain Tersoglio

411 bronze badge

share|improve this question

edited Mar 28 at 19:52

kboul

3,44344 gold badges1717 silver badges2929 bronze badges

asked Mar 28 at 12:48

Sylvain TersoglioSylvain Tersoglio

411 bronze badge

share|improve this question

edited Mar 28 at 19:52

kboul

3,44344 gold badges1717 silver badges2929 bronze badges

asked Mar 28 at 12:48

Sylvain TersoglioSylvain Tersoglio

411 bronze badge

edited Mar 28 at 19:52

kboul

3,44344 gold badges1717 silver badges2929 bronze badges

edited Mar 28 at 19:52

kboul

3,44344 gold badges1717 silver badges2929 bronze badges

asked Mar 28 at 12:48

Sylvain TersoglioSylvain Tersoglio

411 bronze badge

asked Mar 28 at 12:48

Sylvain TersoglioSylvain Tersoglio

411 bronze badge

1 Answer
1

active

oldest

votes

0

Install leaflet, leaflet-easybutton, leaflet-tag-filter-button

Import their css on angular.json:

...
"styles": [
 "../node_modules/leaflet/dist/leaflet.css",
 "../node_modules/leaflet-easybutton/src/easy-button.css",
 "../node_modules/leaflet-tag-filter-button/src/leaflet-tag-filter-button.css",
 "styles.css"
 ],
...

on .ts:

import "leaflet-easybutton";
import "leaflet-tag-filter-button/src/leaflet-tag-filter-button.js";

Create a markerIcon variable as L.icon & use it as follows:

 var fastMarker = L.marker([36.8963965256, 30.708771944], 
 icon: markerIcon,
 tags: ["fast"]
 )
 .addTo(map)
 .bindPopup("fast");

Use similar technique for the rest of the markers. Finally create an instance of your tagFilterButton class:

(L.control as any)
 .tagFilterButton(
 data: ["fast", "slow", "none"],
 icon: '<img src="assets/filter.png">',
 filterOnEveryClick: true
 )
 .addTo(map);

Demo

share|improve this answer

answered Mar 28 at 13:45

kboulkboul

3,44344 gold badges1717 silver badges2929 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for this but before can use tag filter button i have an Typescript error with easy button : Uncaught ReferenceError: L is not defined at easy-button.js:6 at easy-button.js:376 Any help will be appreciated
  
  – Sylvain Tersoglio
  Mar 29 at 14:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check the demo and do exactly as I did. If you do you will not receive any error. Where do you get this error? You can even fork or download the project to check it in detail.
  
  – kboul
  Mar 29 at 14:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you get rid of the error?
  
  – kboul
  Mar 31 at 10:16
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55398069%2fleaflet-tag-filter-button-in-typescript-for-angular%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Install leaflet, leaflet-easybutton, leaflet-tag-filter-button

Import their css on angular.json:

...
"styles": [
 "../node_modules/leaflet/dist/leaflet.css",
 "../node_modules/leaflet-easybutton/src/easy-button.css",
 "../node_modules/leaflet-tag-filter-button/src/leaflet-tag-filter-button.css",
 "styles.css"
 ],
...

on .ts:

import "leaflet-easybutton";
import "leaflet-tag-filter-button/src/leaflet-tag-filter-button.js";

Create a markerIcon variable as L.icon & use it as follows:

 var fastMarker = L.marker([36.8963965256, 30.708771944], 
 icon: markerIcon,
 tags: ["fast"]
 )
 .addTo(map)
 .bindPopup("fast");

Use similar technique for the rest of the markers. Finally create an instance of your tagFilterButton class:

(L.control as any)
 .tagFilterButton(
 data: ["fast", "slow", "none"],
 icon: '<img src="assets/filter.png">',
 filterOnEveryClick: true
 )
 .addTo(map);

Demo

share|improve this answer

answered Mar 28 at 13:45

kboulkboul

3,44344 gold badges1717 silver badges2929 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for this but before can use tag filter button i have an Typescript error with easy button : Uncaught ReferenceError: L is not defined at easy-button.js:6 at easy-button.js:376 Any help will be appreciated
  
  – Sylvain Tersoglio
  Mar 29 at 14:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check the demo and do exactly as I did. If you do you will not receive any error. Where do you get this error? You can even fork or download the project to check it in detail.
  
  – kboul
  Mar 29 at 14:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you get rid of the error?
  
  – kboul
  Mar 31 at 10:16
  

  
  
  
  

add a comment
 | 

0

Install leaflet, leaflet-easybutton, leaflet-tag-filter-button

Import their css on angular.json:

...
"styles": [
 "../node_modules/leaflet/dist/leaflet.css",
 "../node_modules/leaflet-easybutton/src/easy-button.css",
 "../node_modules/leaflet-tag-filter-button/src/leaflet-tag-filter-button.css",
 "styles.css"
 ],
...

on .ts:

import "leaflet-easybutton";
import "leaflet-tag-filter-button/src/leaflet-tag-filter-button.js";

Create a markerIcon variable as L.icon & use it as follows:

 var fastMarker = L.marker([36.8963965256, 30.708771944], 
 icon: markerIcon,
 tags: ["fast"]
 )
 .addTo(map)
 .bindPopup("fast");

Use similar technique for the rest of the markers. Finally create an instance of your tagFilterButton class:

(L.control as any)
 .tagFilterButton(
 data: ["fast", "slow", "none"],
 icon: '<img src="assets/filter.png">',
 filterOnEveryClick: true
 )
 .addTo(map);

Demo

share|improve this answer

answered Mar 28 at 13:45

kboulkboul

3,44344 gold badges1717 silver badges2929 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for this but before can use tag filter button i have an Typescript error with easy button : Uncaught ReferenceError: L is not defined at easy-button.js:6 at easy-button.js:376 Any help will be appreciated
  
  – Sylvain Tersoglio
  Mar 29 at 14:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check the demo and do exactly as I did. If you do you will not receive any error. Where do you get this error? You can even fork or download the project to check it in detail.
  
  – kboul
  Mar 29 at 14:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Did you get rid of the error?
  
  – kboul
  Mar 31 at 10:16
  

  
  
  
  

add a comment
 | 

Install leaflet, leaflet-easybutton, leaflet-tag-filter-button

Import their css on angular.json:

...
"styles": [
 "../node_modules/leaflet/dist/leaflet.css",
 "../node_modules/leaflet-easybutton/src/easy-button.css",
 "../node_modules/leaflet-tag-filter-button/src/leaflet-tag-filter-button.css",
 "styles.css"
 ],
...

on .ts:

import "leaflet-easybutton";
import "leaflet-tag-filter-button/src/leaflet-tag-filter-button.js";

Create a markerIcon variable as L.icon & use it as follows:

 var fastMarker = L.marker([36.8963965256, 30.708771944], 
 icon: markerIcon,
 tags: ["fast"]
 )
 .addTo(map)
 .bindPopup("fast");

Use similar technique for the rest of the markers. Finally create an instance of your tagFilterButton class:

(L.control as any)
 .tagFilterButton(
 data: ["fast", "slow", "none"],
 icon: '<img src="assets/filter.png">',
 filterOnEveryClick: true
 )
 .addTo(map);

Demo

share|improve this answer

answered Mar 28 at 13:45

kboulkboul

3,44344 gold badges1717 silver badges2929 bronze badges

...
"styles": [
 "../node_modules/leaflet/dist/leaflet.css",
 "../node_modules/leaflet-easybutton/src/easy-button.css",
 "../node_modules/leaflet-tag-filter-button/src/leaflet-tag-filter-button.css",
 "styles.css"
 ],
...

import "leaflet-easybutton";
import "leaflet-tag-filter-button/src/leaflet-tag-filter-button.js";

 var fastMarker = L.marker([36.8963965256, 30.708771944], 
 icon: markerIcon,
 tags: ["fast"]
 )
 .addTo(map)
 .bindPopup("fast");

(L.control as any)
 .tagFilterButton(
 data: ["fast", "slow", "none"],
 icon: '<img src="assets/filter.png">',
 filterOnEveryClick: true
 )
 .addTo(map);

share|improve this answer

answered Mar 28 at 13:45

kboulkboul

3,44344 gold badges1717 silver badges2929 bronze badges

answered Mar 28 at 13:45

kboulkboul

3,44344 gold badges1717 silver badges2929 bronze badges

answered Mar 28 at 13:45

kboulkboul

3,44344 gold badges1717 silver badges2929 bronze badges