Help

Nobody has claimed this yet.

I am new to this API, I need to generate the image of a map already configured.
`

var exp_geoodk = <?php echo "$jsonsqlodk[json]"; ?>;
var lat = exp_geoodk.features[0].geometry.coordinates[1];
var lng = exp_geoodk.features[0].geometry.coordinates[0];
console.log(lat);

var map = L.map('map', {
zoomControl:false, maxZoom:17, preferCanvas: true,
}).fitBounds([[-15.6182654858,-56.0972058944],[-15.5906940937,-56.0642626114]]);

map.setView(new L.LatLng(lat, lng), 15);

var hash = new L.Hash(map);
var feature_group = new L.featureGroup([]);
var raster_group = new L.LayerGroup([]);
//var basemap_0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { });

var LimiteAssentamento = L.tileLayer.wms("http://radis.ufmt.br:8080/geoserver/SIGRA/wms", {layers: 'SIGRA:limiteassentamento',
format: 'image/png',version: '1.1.0',
transparent: true,
attribution: "",
tiled:true});
var Loteamento = L.tileLayer.wms("http://radis.ufmt.br:8080/geoserver/SIGRA/wms", {layers: 'SIGRA:loteamento',
format: 'image/png',version: '1.1.0',
transparent: true,
attribution: "",
layers: '5',
tiled:true,
tilesorigin: [-180, 90]}).addTo(map);
var UsoSolo = L.tileLayer.wms("http://radis.ufmt.br:8080/geoserver/SIGRA/wms", {layers: 'SIGRA:usosolo',
format: 'image/png',version: '1.1.0',
transparent: true,
attribution: "",
tiled:true});
var Nascente = L.tileLayer.wms("http://radis.ufmt.br:8080/geoserver/SIGRA/wms", {layers: 'FINATEC:nascente',
format: 'image/png',version: '1.1.0',
transparent: true,
attribution: "",
tiled:true});
var Hidrografia = L.tileLayer.wms("http://radis.ufmt.br:8080/geoserver/SIGRA/wms", {layers: 'SIGRA:hidrografia',
format: 'image/png',version: '1.1.0',
transparent: true,
attribution: "",
tiled:true});
var mapabase = L.tileLayer('mapbox.satellite');
var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});

//var ggl = new L.Google('HYBRID');
//map.addLayer(ggl);
//basemap_0.addTo(map);
map.addLayer(Esri_WorldImagery);
map.addLayer(UsoSolo);
map.addLayer(Loteamento);
map.addLayer(LimiteAssentamento);
map.addLayer(Hidrografia);
//map.addLayer(Nascente);
var layerOrder=new Array();

/////minimap////////

var minimapa = {
OSM: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
LimiteAssentamento: L.tileLayer.wms("http://radis.ufmt.br:8080/geoserver/SIGRA/wms", {
layers: 'SIGRA:limiteassentamento',
format: 'image/png',
transparent: true,
tiled:true}),
}

var layers = new L.LayerGroup([minimapa.OSM, minimapa.LimiteAssentamento]);
var miniMap = new L.Control.MiniMap(layers,
{ toggleDisplay: true, minimized: false, position: 'topleft' })
.addTo(map);

///////////////////////
var exp_geoJSONodk = new L.geoJson(exp_geoodk,{});

layerOrder[layerOrder.length] = exp_geoJSONodk;
for (index = 0; index < layerOrder.length; index++) {
feature_group.removeLayer(layerOrder[index]);feature_group.addLayer(layerOrder[index]);
}

feature_group.addLayer(exp_geoJSONodk);
feature_group.addTo(map);

var title = new L.Control();
title.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
title.update = function () {
this._div.innerHTML = '<h2>This is the title</h2>This is the subtitle'
};
//title.addTo(map);

//L.control.layers(mapabase,vetor,{collapsed:false}).addTo(map);
//L.control.layers(baseMaps,{"geo": exp_geoJSON},{collapsed:false}).addTo(map);
L.control.scale({options: {position: 'bottomleft', maxWidth: 200, metric: true, imperial: false, updateWhenIdle: false}}).addTo(map);

uri = "http://radis.ufmt.br:8080/geoserver/SIGRA/wms?service=WMS&version=1.1.0&VERSION=1.3.0&SLD_VERSION=1.1.0&request=GetLegendGraphic&FORMAT=image/jpeg&layer=SIGRA:relatorio&style=";
L.wmsLegend(uri);

console.log(map);
//map.setView(new L.LatLng(lat, lng), 15);
leafletImage(map, doImage);

function doImage(err, canvas) {
var img = document.createElement('img');
var dimensions = map.getSize();
img.width = dimensions.x;
img.height = dimensions.y;
img.src = canvas.toDataURL();
var ifrm = window.frameElement; // reference to iframe element container
var doc = ifrm.ownerDocument;
doc.getElementById('images').innerHTML = '';
doc.getElementById('images').appendChild(img);
}

`

I need them to be the same

Start with the inline JavaScript example, especially the Leaflet map setup and the leafletImage(map, doImage) call. Reproduce the configured map and generated image to identify which layers or controls differ; the issue does not name a repository file or test, and completion criteria are not defined beyond making the images match.

Written by the indexing model from the issue text.