Esri Leaflete visible map service

francescodi_vito · ‎10-14-2014

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

PatrickArlt1 · ‎10-16-2014

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

View solution in original post

PaulCrickard1 · ‎10-14-2014

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)

francescodi_vito · ‎10-14-2014

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 · ‎10-14-2014

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/Featur...");

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

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 · ‎10-14-2014

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

francescodi_vito · ‎10-14-2014

This is my code for show and hide the map service but don't work

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

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

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

}).addTo(map);

</script>

$("#isAgeSelected").click(function(){

$("layer_esri").hide();

});

$("#isAgeSelected").click(function(){

$("layer_esri").show();

});

</script>

You have any idea?

Thanks

PaulCrickard1 · ‎10-14-2014

I wrapped my checkbox watcher in an onclick function but you can do it however you want. The key is layer.addTo(map) when checked and map.removeLayer(layer) when not - or do nothing.

map.on("click",function(){

var x = document.getElementById("isAgeSelected").checked;

if(x){parks.addTo(map);}

else{map.removeLayer(parks);}

});

Here is the full code. check the box and lick the map. Then uncheck and click again.

<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

};

map.on("click",function(){

var x = document.getElementById("isAgeSelected").checked;

if(x){parks.addTo(map);}

else{map.removeLayer(parks);}

});

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 };

}

});

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

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

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 · ‎10-15-2014

Hi Paul,

thanks but this is my code:

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

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

map.on("click",function(){

var x = document.getElementById("isAgeSelected").checked;

if(x){livello.addTo(map);}

else{map.removeLayer(livello);}

});

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

}).addTo(map);

</script>

and the layer don't remove.

Why? And if i would like to start the app with map service off?

Thanks

PatrickArlt1 · ‎10-16-2014

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

francescodi_vito · ‎10-17-2014

Hi Patrick,

thanks for your reply. Now with your advice i resolved my problem and i set on off my layer with a check box, but after i test also the popup function attach to the map service but it's not visible the content of popup and the developer tool of chrome say me this:

Resource interpreted as Script but transferred with MIME type text/plain

Have you any idea of this error?

Unfortunately, this is the first time I work with leaflets, usually working with arcgis javascript

Thanks