Leaflet + canvas

by jpeter06

HTML

<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<div id="map"></div>

CSS

html,body,#map{
    width:100%;
    height:100%;  
}
body{
    perspective:600px;
    overflow:hidden;
    width:100%;
    height:100%;
}

		.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

JavaScript

// tarancon 40.014992 -3.020852
// 0.409135 0.690804
/// Canvas Layer
L.GridLayer.CanvasCircles = L.GridLayer.extend({
    createTile: function (coords) {
        var tile = document.createElement('canvas');
        var tileSize = this.getTileSize();
        var markerPixelCoords = map.project([40.424127 , -3.711656 ], map.getZoom());
        
        tile.setAttribute('width', tileSize.x);
        tile.setAttribute('height', tileSize.y);
        var ctx = tile.getContext('2d');
        ctx.fillStyle = "orange";
        ctx.strokeStyle = '#ffaa00';
        ctx.rect(0,0,255,255);	ctx.stroke();
        if(markerPixelCoords.x > coords.x*256 &&
        	markerPixelCoords.x < (coords.x+1)*256 &&
          markerPixelCoords.y > coords.y*256 &&
        	markerPixelCoords.y< (coords.y+1)*256 ){
         		ctx.beginPath();
            var x=markerPixelCoords.x-coords.x*256;
            var y=markerPixelCoords.y -coords.y*256;
       			ctx.arc(x,y	, 8, 0, 2*Math.PI, false);	
            ctx.fill();
            
            }
        return tile;
    }
});


var map = L.map('map').setView([40.424127, -3.711656], 5.4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {maxZoom: 19}).addTo(map); 

L.gridLayer.canvasCircles = function(opts) {
    return new L.GridLayer.CanvasCircles(opts);
};

map.addLayer( L.gridLayer.canvasCircles() );
//LATLONG to x y