Dygraph in Leaflet popup

by Michael Underwood

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>



<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

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

CSS

#mapid { width: 1000px; height: 1000px; }

JavaScript

//map code
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 10,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);
	
	var marker = L.marker([51.5, -0.09]).addTo(mymap);
var submit_Loc_popup = L.popup();

mymap.on('click', function(e) {
  doStuff(e);
});



function doStuff(e) {
  console.log("e.latlng: " + e.latlng);
  // coordinates in tile space
  var x = e.layerPoint.x;
  var y = e.layerPoint.y;
  console.log("e.layerpoint.x: & e.layerpoint.y: " + [x, y]);
  console.log("e.layerpoint.x:" + x);
  console.log("e.layerpoint.y:" + y);

 var xy = mymap.project([e.latlng.lat,e.latlng.lng],6); //(we need to change the zoom level 6-7 depending on the map's max zoom
 console.log("this is the pixel count location on the map: " + xy);

var xy3 = convertToInGameCords(xy);

console.log("this is after converting the cords using the offset, now the ingame cords are x,y: (" + xy3.x + "," + xy3.y + ")");

}