nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Esri Leaflete visible map service

francescodi_vito

Hy guys,

i'm using the esri leaflet plugin for a html5 css3 mobile app. I worked with arcgis javascript and the map service visibility it's possible to set with "visible" method, but this method don't fuction in esri leaflet.

How can i set visibility of map service leaflet ?

Thanks

Find more posts tagged with

Esri Leaflet

Accepted answers

PatrickArlt1

There a couple of problems with your above code sample.

1. You are listening for `map.on(click`, someFunction). This will fire when the map is clicked, not your checkbox.

2. The code in your click event handler checks if the checkbox is checked (which in your demo it is) and then adds/removes the layer. So when the map is clicked if the checkbox is also checked, add the layer, otherwise remove the layer.

3. The layer is being added to the map because you are calling .addTo(map) at the end of the line where you assign livello. If you want the layer off by default you need to not call this line.

4. The checkbox is checked by default because you have set checked="checked" on it.

What I think you are trying to achieve is this.

1. A checkbox whose state is paired to the visibility of a layer

2. Checkbox and layer should be off my default

cleaned up your code a bit to reflect what I think you are actually trying to achieve. CodePen - A Pen by Patrick Arlt

All comments

francescodi_vito

thanks Patrick for your reply.

I found a solution and i implemnted my code in this way:

// create the dynamic map layer

var livello = new L.esri.dynamicMapLayer('http://sgi1.isprambiente.it/ArcGIS/rest/services/servizi/strutturale1M/MapServer', {

opacity:0.5,

useCors: false

});

// query the checkbox

var checkbox = document.getElementById("liv");

// listen for the 'change' event on the checkbox and toggle the layer on and off

checkbox.addEventListener('change', function(e){

if(checkbox.checked){

livello.addTo(map);

livello.options.bboxSR = 102100;

livello.options.imageSR = 102100;

livello._update(); // private method but will be exposed in the next version.

} else {

map.removeLayer(livello);

}

});

and now it's work

francescodi_vito

I know layer control but i'm integrating the leaflet into html5 css3 code for mobile device.

So i created a second view called toc with a switch on off for layer and so i can't use the layer control

PaulCrickard1

Try using a layer control:

<html>

<head>

<style>

html, body, #map {

width : 100%;

height : 100%;

}

</style>

</head>

<body>

var map = L.map('map').setView([45.528, -122.680], 13);

var gray = L.esri.basemapLayer("Gray");

var street = L.esri.basemapLayer("Streets");

var topo = L.esri.basemapLayer("Topographic");

var baseMaps = {

"Gray": gray,

"Streets": street,

"Topo":topo

};

var parks = new L.esri.FeatureLayer("http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0", {

style: function () {

return { color: "#70ca49", weight: 2 };

}

}).addTo(map);

var freight = new L.esri.FeatureLayer("http://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Portland_Freight_Facillities/FeatureServer/0");

var rail = new L.esri.FeatureLayer("http://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Portland_Light_Rail_Lines/FeatureServer/0");

var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";

parks.bindPopup(function(feature){

return L.Util.template(popupTemplate, feature.properties)

});

var other = L.layerGroup([freight,rail]);

var overlay = {

"Other":other

};

L.control.layers(baseMaps,overlay).addTo(map);

</script>

</body>

</html>

francescodi_vito

Hy Paul,

thanks for your replay but this my code:

var map = L.map('map').setView([37.75, -122.23], 10);

L.esri.basemapLayer('Topographic').addTo(map);

var layer_esri = L.esri.dynamicMapLayer('http://maps1.arcgisonline.com/ArcGIS/rest/services/USA_Federal_Lands/MapServer', {

visible: false, opacity:0.5

}).addTo(map);

</script>

i would like to start my basemap with the map service off and anfter start with check box and so i use "visible" capability for this but don't work

PaulCrickard1

You make visible by adding the layer to the map:

MyESRIlayer.addTo(map);

You should be able to make it invisible by using:

map.removeLayer(myESRIlayer)

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.