Help

[josielmoraes]

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

<script>
var exp_geoodk = ;
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 © Esri — 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);
	}

</script>

`

I need them to be the same

[jasperfirecai2]

see if your layers have a native way to export to a canvas, then edit the source code to add it to the image.