How to embed leaflet map to html page? - html

Question

I'm new with web developing, and I want to embed a map to my html page.
How I can do this?
I'm using leaflet map generated from QuantumGIS with qgis2leaflet plugins.
In the future, I want to show a heat graph in the map that represent population distribution.
this is my html code:
<div class="widget span8">
<div class="widget-header">
<i class="icon-map-marker"></i>
<h5>Map Visualization</h5>
<div class="widget-buttons">
</div>
</div>
<div class="widget-body clearfix">
<div style="height:274px;" id="graph" class="widget-analytics-large"></div>
</div>
</div>
</div>

Answer 1

Have a look here: http://leafletjs.com/examples/quick-start.html
This is an example page: http://leafletjs.com/examples/quick-start-example.html
generally, you would have to add a placeholder div for your map in the body
<div id="my-custom-map" style="width: 600px; height: 400px"></div>
and then create the leaflet map via the Javascript API:
var map = L.map('my-custom-map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(map);
Note that you are using the id of the element (my-custom-map) to create the leaflet map within that div