Hello All,

We are using Leaflet in our mobile app, we have added layer control to show multiple layer.

dafult value for the layer is checked i.e all layer are drawen by default, but i want default to false(unchecked) and on clicking of check box, layer should be shown on map.


Can any one help me out?

Thanks,

Preeti Kumari


Thiago Zuquinali wrote:

Hi Preeti Kumari,


you alredy try this one?
https://stackoverflow.com/questions/39415777/click-event-to-enable-and-disable-layer-in-leaflet-js

Hello Thiago

First of all sorry for the late reply, Yes i have seen this link, but not able to figure out how to use this in outsytems with leaflet Mobile plugin.

Actually i have added Below code in Leaflet js plugin :

Syntax Editor Code Snippet

EncodeJavaScript(TileLayer.Name) + ".addTo(" + EncodeJavaScript(LeafletMapName) + ");" +

"Wells = L.featureGroup().addTo(" + EncodeJavaScript(LeafletMapName) + ");" +
"Runs = L.featureGroup().addTo(" + EncodeJavaScript(LeafletMapName) + ");" +
"L.control.layers(null, { 'Active store: Stores,'Active Grounds': Grounds}, { position: 'topright', collapsed: false })"+ ".addTo(" + EncodeJavaScript(LeafletMapName) + ");" 


and then creating Marker on this layers in my main screen by feting data from data base.


Hi Preeti,

Are you using the Leaflet Mobile component that is already available? There are Actions in here that should help you. Or did you run into issues with this component?

best,

Vincent

Vincent Koning wrote:

Hi Preeti,

Are you using the Leaflet Mobile component that is already available? There are Actions in here that should help you. Or did you run into issues with this component?

best,

Vincent


Hello Vincent,


Yes, I am using this Component only, could you please help me with the Action or way Used to make my layer control check boxed unchecked by default and on checking them again it should bring the layers on Map?


Awaiting your response


Thanks,

Preeti Kumari

Hi Preeti,

Looking at your code I noticed that you are manually creating a Feature Group. Why don't you use the provided actions for this? The CreateFeatureGroup Action already has an option to hide the FeatureGroup when you are defining it;

Vincent Koning wrote:

Hi Preeti,

Looking at your code I noticed that you are manually creating a Feature Group. Why don't you use the provided actions for this? The CreateFeatureGroup Action already has an option to hide the FeatureGroup when you are defining it;


Hello Vincent, Thanks for your pointer, yes i can make the feature groups by the client action, but i am more concerned about creating the layer control on map with the defined feature groups.

Lets say i have created two feature groups , what i want is layer control should have both the feature groups  always, but with the unselected state by default( i.e Map should render with Layer control but no layers should be visible initially ), If user check any layer in layer control, that layer should be visible on map).

I have mainly two below question

1. How to add layer control in map?

2. How to handle layers check and unchecks events.

Ah I see you use case. This hasn't been implemented yet. We don't have a use case for this so it wasn't on my list to implement. I probably will do this in the future (Along with some other controls). 

I have read the documentation and I also don't see any option to add a layer and uncheck it by default. Perhaps you can ask the devs themself on Stack Overflow: https://stackoverflow.com/questions/tagged/leaflet

Solution

Preeti Kumari wrote:

Thiago Zuquinali wrote:

Hi Preeti Kumari,


you alredy try this one?
https://stackoverflow.com/questions/39415777/click-event-to-enable-and-disable-layer-in-leaflet-js

Hello Thiago

First of all sorry for the late reply, Yes i have seen this link, but not able to figure out how to use this in outsytems with leaflet Mobile plugin.

Actually i have added Below code in Leaflet js plugin :

Syntax Editor Code Snippet

EncodeJavaScript(TileLayer.Name) + ".addTo(" + EncodeJavaScript(LeafletMapName) + ");" +

"Wells = L.featureGroup().addTo(" + EncodeJavaScript(LeafletMapName) + ");" +
"Runs = L.featureGroup().addTo(" + EncodeJavaScript(LeafletMapName) + ");" +
"L.control.layers(null, { 'Active store: Stores,'Active Grounds': Grounds}, { position: 'topright', collapsed: false })"+ ".addTo(" + EncodeJavaScript(LeafletMapName) + ");" 


and then creating Marker on this layers in my main screen by feting data from data base.



Hello Preeti,

You are adding layers on Map by default using .addTo(Map) method. Please try by removing it like below code 

"Stores= L.featureGroup();" +
"Grounds= L.featureGroup();" +
"L.control.layers(null, { 'Active store: Stores,'Active Grounds': Grounds}, { position: 'topright', collapsed: false })"+ ".addTo(" + EncodeJavaScript(LeafletMapName) + ");"


Please do let me know if your problem is solved or not


Thanks

Prajakta Roshankhede

Solution

Prajakta Roshankhede wrote:

Preeti Kumari wrote:

Thiago Zuquinali wrote:

Hi Preeti Kumari,


you alredy try this one?
https://stackoverflow.com/questions/39415777/click-event-to-enable-and-disable-layer-in-leaflet-js

Hello Thiago

First of all sorry for the late reply, Yes i have seen this link, but not able to figure out how to use this in outsytems with leaflet Mobile plugin.

Actually i have added Below code in Leaflet js plugin :

Syntax Editor Code Snippet

EncodeJavaScript(TileLayer.Name) + ".addTo(" + EncodeJavaScript(LeafletMapName) + ");" +

"Wells = L.featureGroup().addTo(" + EncodeJavaScript(LeafletMapName) + ");" +
"Runs = L.featureGroup().addTo(" + EncodeJavaScript(LeafletMapName) + ");" +
"L.control.layers(null, { 'Active store: Stores,'Active Grounds': Grounds}, { position: 'topright', collapsed: false })"+ ".addTo(" + EncodeJavaScript(LeafletMapName) + ");" 


and then creating Marker on this layers in my main screen by feting data from data base.



Hello Preeti,

You are adding layers on Map by default using .addTo(Map) method. Please try by removing it like below code 

"Stores= L.featureGroup();" +
"Grounds= L.featureGroup();" +
"L.control.layers(null, { 'Active store: Stores,'Active Grounds': Grounds}, { position: 'topright', collapsed: false })"+ ".addTo(" + EncodeJavaScript(LeafletMapName) + ");"


Please do let me know if your problem is solved or not


Thanks

Prajakta Roshankhede

Thanks Prajakta, It worked for me :)