Esri Leaflete visible map service

4312
17
Jump to solution
10-14-2014 07:20 AM
Labels (1)
francescodi_vito
New Contributor

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

0 Kudos
1 Solution

Accepted Solutions
PatrickArlt1
Esri Contributor

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

0 Kudos
17 Replies
PaulCrickard1
Occasional Contributor II

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)

0 Kudos
francescodi_vito
New Contributor

Hy Paul,

thanks for your replay but this my code:

<script>

            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

0 Kudos
PaulCrickard1
Occasional Contributor II

Try using a layer control:

Capture.JPGUntitled.jpg

<html>

  <head>

     <!-- Load Leaflet from CDN-->

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->

    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>

    <style>

      html, body,  #map {

        width : 100%;

        height : 100%;

      }

    </style>

  </head>

  <body>

    <div id="map"></div>

    <script>

      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>

0 Kudos
francescodi_vito
New Contributor

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

0 Kudos
francescodi_vito
New Contributor

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

<script>

            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>

        <script>

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

  $("layer_esri").hide();

});

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

  $("layer_esri").show();

});

</script>

<input type="checkbox" id="isAgeSelected" class="position">

You have any idea?

Thanks

0 Kudos
PaulCrickard1
Occasional Contributor II

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.

<input type="checkbox" id="isAgeSelected" class="position" value="isSelected">

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>

     <!-- Load Leaflet from CDN-->

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->

    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>

    <style>

      html, body,  #map {

        width : 100%;

        height : 100%;

      }

    </style>

  </head>

  <body>

<input type="checkbox" id="isAgeSelected" class="position" value="isSelected">

    <div id="map"></div>

    <script>

      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>

0 Kudos
francescodi_vito
New Contributor

Hi Paul,

thanks but this is my code:

<input type="checkbox" id="isAgeSelected" class="position" value="checked" checked="checked">

<script>

            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

0 Kudos
PatrickArlt1
Esri Contributor

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

0 Kudos
francescodi_vito
New Contributor

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

0 Kudos