topic Re: Esri Leaflete visible map service in Open Source Mapping Libraries Ques.

Esri Leaflete visible map service

francescodi_vito — Mon, 28 Aug 2023 13:50:48 GMT

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

Re: Esri Leaflete visible map service

PaulCrickard1 — Tue, 14 Oct 2014 15:00:51 GMT

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)

Re: Esri Leaflete visible map service

francescodi_vito — Tue, 14 Oct 2014 15:09:49 GMT

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

Re: Esri Leaflete visible map service

PaulCrickard1 — Tue, 14 Oct 2014 15:30:29 GMT

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>

Re: Esri Leaflete visible map service

francescodi_vito — Tue, 14 Oct 2014 15:38:18 GMT

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

Re: Esri Leaflete visible map service

francescodi_vito — Tue, 14 Oct 2014 15:41:03 GMT

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

Re: Esri Leaflete visible map service

PaulCrickard1 — Tue, 14 Oct 2014 16:14:19 GMT

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/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>

Re: Esri Leaflete visible map service

francescodi_vito — Wed, 15 Oct 2014 13:12:17 GMT

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

Re: Esri Leaflete visible map service

PatrickArlt1 — Thu, 16 Oct 2014 16:16:30 GMT

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

Re: Esri Leaflete visible map service

francescodi_vito — Fri, 17 Oct 2014 13:05:36 GMT

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

Re: Esri Leaflete visible map service

PatrickArlt1 — Fri, 17 Oct 2014 21:34:29 GMT

The MIME type error is ignorable. It never cases any problems.

Can you post any sample code (or JS Fiddle/CodePen) to show the problem you are seeing?

Re: Esri Leaflete visible map service

francescodi_vito — Tue, 21 Oct 2014 15:49:46 GMT

Hi Patrick,

i implemented your code with script for popup:

CodePen - Pen

and this don't work.

Re: Esri Leaflete visible map service

PatrickArlt1 — Tue, 21 Oct 2014 16:17:03 GMT

You need to set the useCors option to false on the layer since the MapService doesn't support CORS. You can see this in the Custom Popup with Dynamic Map Layer | Esri Leaflet example.

Re: Esri Leaflete visible map service

francescodi_vito — Tue, 28 Oct 2014 17:06:09 GMT

Hy Patrick,

thanks for your help and your advice.

Now the popup work but i try to implement more fields in the custom popup:

livello.bindPopup(function (error, featureCollection) {

if(error || featureCollection.features.length === 0) {

return false;

} else {

return 'Formazione: ' + featureCollection.features[0].properties.formazione;

return 'Object: ' + featureCollection.features[0].properties.objectid;

}

});

it's possible?

And i have other 2 question:

it's possibile to create a basemap gallery similar to Arcgis JS?

it's possible to mix esri leaflet api with leaflet plugin as: drawing, add shape, etc?

Thank you for your attention

Re: Esri Leaflete visible map service

PatrickArlt1 — Tue, 28 Oct 2014 17:36:31 GMT

It should be possible to do both of those things.

Here are some links that might help you get started.

Basemap switcher... Switching basemaps | Esri Leaflet

Its worth noting im aginst basemap switchers and they tend to be underused and clutter the interface. How the Public Actually Uses Local Government Web Maps: Metrics from Denver : MapBrief™ http://patrickarlt.github.io/uc-2014-esri-leaflet/demos/editing.html

Editing demo Esri Leaflet Editing Demo Code is at uc-2014-esri-leaflet/editing.html at gh-pages · patrickarlt/uc-2014-esri-leaflet · GitHub

Please leverage the Esri Leaflet website which has lots of examples and pretty complete documentation. The Leaflet plguins page is also a good resource for tasks like editing. Plugins - Leaflet - a JavaScript library for mobile-friendly maps

Re: Esri Leaflete visible map service

francescodi_vito — Wed, 29 Oct 2014 16:37:27 GMT

Patrick,

i have other question.

I use this map service in my code:

http://sgi.isprambiente.it/ArcGIS/rest/services/servizi/geologia1M/MapServer

and whene i call this service in debug mode i see a internal server error 500:

http://sgi.isprambiente.it/ArcGIS/rest/services/servizi/geologia1M/MapServer/export?bbox=1203118.8252086742%2C5287302.12054221%2C1408581.557239228%2C5361904.660148542&size=1344%2C488&dpi=96&format=png24&transparent=true&bboxSR=3857&imageSR=3857&f=image

this is the url that generate the error but if in this url i change imageSR and bboxSR with 102100 the map export is ok.

How i can set in the map leaflet to call service with 102100?

I try to set properties bbox and imageSR to 102100:

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

opacity:0.5,

useCors: false,

bboxSR: 102100,

imageSR:102100

});

but don't work.

any idea?

Thanks

Re: Esri Leaflete visible map service

PatrickArlt1 — Tue, 04 Nov 2014 16:31:15 GMT

Your not seeing an image because ArcGIS Server 9.3 doesn't understand the 3857 spatial reference which is the default in Leaflet.

I remember early in Esri Leaflet development that I ran into a lot of issues with using 102100 (old versions of ArcGIS Server) vs 3857 (Leaflet) so I simply made Esri Leaflet always default to the spatial reference of the map (3857).

In general Esri Leaflet only supports versions of server that haven't been retired yet http://downloads.esri.com/support/product%20life%20cycle/server_gis/ArcGISServer_PLC.pdf which is unfortunately 9.3.

bboxSR and imageSR are actually set to the CRS of the map object not passed in as options.

Re: Esri Leaflete visible map service

francescodi_vito — Tue, 04 Nov 2014 16:53:34 GMT

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