Help

Open
#119 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
15/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript
Domain
frontend, web-dev

Research direction

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.

Description

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

</script>

`
captura de tela de 2018-07-27 08-08-34

I need them to be the same

Dominant language
JavaScript
Stars
380
Forks
140
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mapbox/leaflet-image

All issues in mapbox/leaflet-image

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.