Skip to content

Instantly share code, notes, and snippets.

@bhuiyanmobasshir94

bhuiyanmobasshir94/index.html

Created December 9, 2018 13:42
Show Gist options
  • Save bhuiyanmobasshir94/e7138dd325272951e91b197a9a149d71 to your computer and use it in GitHub Desktop.
Save bhuiyanmobasshir94/e7138dd325272951e91b197a9a149d71 to your computer and use it in GitHub Desktop.
Download ZIP
Folium heatmap demonstration of Bashundhara Area
Raw
index.html
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>L_PREFER_CANVAS=false; L_NO_TOUCH=false; L_DISABLE_3D=false;</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.3.4/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.3.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>#map_5545e190ab4b469095583a1f337429fa {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://rawcdn.githack.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<script src="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/pa7_hm.min.js"></script>
<script src="https://rawcdn.githack.com/pa7/heatmap.js/develop/plugins/leaflet-heatmap/leaflet-heatmap.js"></script>
<link rel="stylesheet" href="http://apps.socib.es/Leaflet.TimeDimension/dist/leaflet.timedimension.control.min.css"/>
<script>
var TDHeatmap = L.TimeDimension.Layer.extend({
initialize: function(data, options) {
var heatmapCfg = {
radius: 15,
maxOpacity: 1.,
scaleRadius: false,
useLocalExtrema: false,
latField: 'lat',
lngField: 'lng',
valueField: 'count',
defaultWeight : 1,
};
heatmapCfg = $.extend({}, heatmapCfg, options.heatmapOptions || {});
var layer = new HeatmapOverlay(heatmapCfg);
L.TimeDimension.Layer.prototype.initialize.call(this, layer, options);
this._currentLoadedTime = 0;
this._currentTimeData = {
data: []
};
this.data= data;
this.defaultWeight = heatmapCfg.defaultWeight || 1;
},
onAdd: function(map) {
L.TimeDimension.Layer.prototype.onAdd.call(this, map);
map.addLayer(this._baseLayer);
if (this._timeDimension) {
this._getDataForTime(this._timeDimension.getCurrentTime());
}
},
_onNewTimeLoading: function(ev) {
this._getDataForTime(ev.time);
return;
},
isReady: function(time) {
return (this._currentLoadedTime == time);
},
_update: function() {
this._baseLayer.setData(this._currentTimeData);
return true;
},
_getDataForTime: function(time) {
delete this._currentTimeData.data;
this._currentTimeData.data = [];
var data = this.data[time-1];
for (var i = 0; i < data.length; i++) {
this._currentTimeData.data.push({
lat: data[i][0],
lng: data[i][1],
count: data[i].length>2 ? data[i][2] : this.defaultWeight
});
}
this._currentLoadedTime = time;
if (this._timeDimension && time == this._timeDimension.getCurrentTime() && !this._timeDimension.isLoading()) {
this._update();
}
this.fire('timeload', {
time: time
});
}
});
L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({
initialize: function(index, options) {
var playerOptions = {
buffer: 1,
minBufferReady: -1
};
options.playerOptions = $.extend({}, playerOptions, options.playerOptions || {});
L.Control.TimeDimension.prototype.initialize.call(this, options);
this.index = index;
},
_getDisplayDateFormat: function(date){
return this.index[date.getTime()-1];
}
});
</script>
</head>
<body>
<div class="folium-map" id="map_5545e190ab4b469095583a1f337429fa" ></div>
</body>
<script>
var bounds = null;
var map_5545e190ab4b469095583a1f337429fa = L.map(
'map_5545e190ab4b469095583a1f337429fa', {
center: [23.8196, 90.4415],
zoom: 12,
maxBounds: bounds,
layers: [],
worldCopyJump: false,
crs: L.CRS.EPSG3857,
zoomControl: true,
});
var tile_layer_55c1e26a48454809aca41a59a97ac1a3 = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
"attribution": null,
"detectRetina": false,
"maxNativeZoom": 18,
"maxZoom": 18,
"minZoom": 0,
"noWrap": false,
"opacity": 1,
"subdomains": "abc",
"tms": false
}).addTo(map_5545e190ab4b469095583a1f337429fa);
var times = [1];
map_5545e190ab4b469095583a1f337429fa.timeDimension = L.timeDimension(
{times : times, currentTime: new Date(1)}
);
var heat_map_92bf2d39b88944a2b966ee24f995994aControl = new L.Control.TimeDimensionCustom(['Dec'], {
autoPlay: false,
backwardButton: true,
displayDate: true,
forwardButton: true,
limitMinimumRange: 5,
limitSliders: true,
loopButton: true,
maxSpeed: 10,
minSpeed: 0.1,
playButton: true,
playReverseButton: true,
position: "bottomleft",
speedSlider: true,
speedStep: 0.1,
styleNS: "leaflet-control-timecontrol",
timeSlider: true,
timeSliderDrapUpdate: false,
timeSteps: 1
})
.addTo(map_5545e190ab4b469095583a1f337429fa);
var heat_map_92bf2d39b88944a2b966ee24f995994a = new TDHeatmap([[[' \xa0 23.8107', 90.4309], [23.8253, 90.4259], ['\xa023.8220', 90.434], [23.8209, 90.4276], [23.8174, 90.4285], [23.8141, 90.427], ['\xa023.8183', 90.4357], [23.8182, '\xa0 90.4233'], [23.8157, 90.4244], [23.8109, 90.4308], ['\xa023.8088', 90.4333], [23.8056, 90.4343], [23.8047, 90.4319], [23.8046, 90.429], [23.8221, 90.4431], [23.8255, 90.4401], [23.8259, 90.4372], [23.8238, 90.4373], [23.8199, 90.4355], [23.8255, 90.4333], [23.8242, 90.4315], [23.8226, 90.4296], ['\xa023.8203', '\xa090.4303'], [23.8193, 90.4317], [23.8161, 90.4326], [23.822, 90.4318], [23.8164, 90.4324], [23.8139, 90.4363], [23.8158, 90.4251], [23.8194, 90.4249], [23.8197, 90.4312], ['\xa023.8283', 90.4334], [23.8304, 90.4306], [23.8294, '\xa090.4279'], [23.8266, 90.4275], [23.8287, 90.4248], [23.8316, 90.4261], [23.8312, 90.4224], ['\xa023.8133', 90.4775], ['\xa023.8092', 90.4557], [23.8182, 90.4621], [23.8149, 90.4444], [23.8194, 90.4349], [23.8188, 90.4298], [23.8257, 90.4295], [23.8269, 90.4406], [23.8259, 90.429], [23.829, 90.4431], [23.8276, 90.4386], [23.8272, 90.4352], [23.8271, 90.4333], [23.8266, 90.4314], ['\xa023.8305', 90.4304], [23.8324, 90.4308], [23.832, '\xa090.4278'], [23.8314, 90.4258], [23.8285, 90.4263], [23.8281, 90.423], [23.8268, 90.4219], [23.8292, 90.4209], [23.8335, 90.4227], [23.8201, 90.4253], [23.8184, 90.4223], [23.8175, 90.4225], [23.8172, 90.4234], [23.8177, 90.4227], ['\xa023.8202', 90.4216], [23.8198, 90.4258], ['\xa023.8192', 90.4261], [23.8215, 90.4268], [23.8219, 90.4242], [23.8186, 90.4298], [23.8161, 90.4296], [23.8168, 90.4221], [23.8144, 90.4231], [23.8128, 90.4253], [23.8183, 90.4427], [23.8214, 90.4423], [23.8233, 90.4388], [23.8257, 90.4345], [23.8281, 90.4335], [23.8341, 90.4327], [23.8364, 90.4345], [23.8334, '\xa090.4347'], [23.8296, 90.4334], [23.8263, 90.4337], [23.8229, 90.4301], [23.8326, 90.4213], [23.8226, 90.4283], [23.8185, 90.4355], [23.8159, 90.4365], [23.8137, 90.4362], [23.8264, 90.4525], [23.8237, 90.4551], [23.8221, 90.4596], [23.8158, 90.4665], [23.8123, 90.4699], [23.8185, 90.4536], [23.8236, 90.4518], [23.8215, 90.4487], [23.8264, 90.4456], [23.8255, 90.4404], [23.8197, 90.4382], [23.8234, 90.4301], [23.8216, 90.4259], [23.8213, 90.4269], [23.8145, 90.4248], [23.8192, 90.4223], [23.8183, 90.4289], [23.8136, 90.4331], [23.8095, 90.4376], [23.8223, 90.4461], [23.8206, 90.4418], [23.8258, 90.4396], [23.8237, 90.4477], [23.8172, 90.4471], [23.8214, 90.4432], [23.8211, 90.4489], [23.8214, 90.4439], [23.8231, 90.4372], [23.8245, 90.4299], [23.8216, 90.4299], [23.8208, 90.4294], [23.8195, 90.4259], [23.8242, 90.4263], [23.8252, 90.4255], [23.8348, 90.4248], [23.8347, 90.4227], [23.8342, 90.4204], [23.8326, 90.4206], [23.8293, 90.4213], [23.8271, 90.4222], [23.8275, 90.4258], [23.8318, 90.427], [23.8349, 90.431], [23.8299, 90.4337], [23.8332, 90.4315], [23.8357, 90.4276], [23.8371, 90.4342], [23.8339, 90.4358], [23.8294, 90.4393], [23.8265, 90.4457], [23.8233, 90.4455], [23.8186, 90.4437], [23.8144, 90.4384], [23.8103, 90.4344], [23.8158, 90.4303], [23.8155, 90.4275], [23.8043, 90.4308], [23.8025, 90.4319], [23.8004, '\xa090.4304'], [23.7989, 90.4321], [23.8124, 90.411], [23.8052, 90.4152], [23.7972, 90.4193], [23.8196, 90.4186], [23.8082, 90.4311], [23.8221, 90.4389], [23.8234, 90.4466], [23.8212, 90.4465], [23.8178, 90.4417], [23.8156, 90.4385], [23.8142, 90.4365], [23.8114, 90.4348], [23.8224, 90.4312], [23.8187, 90.4324], [23.8161, 90.4363], [23.8126, 90.4334], [23.8087, 90.4303], [23.8063, 90.4302], [23.8049, 90.4283], [23.8029, 90.4267], [23.8019, 90.4266], [23.8013, 90.4259], [23.8006, 90.4254], [23.7997, 90.4252], [23.7989, 90.4234], [23.809, 90.431], [23.8088, 90.4327], [23.8106, 23.8106], [23.8089, 90.431], [23.8108, '\xa090.4308'], [23.8102, 90.4307], [23.8101, 90.4293], [23.8097, 90.4307], [23.8098, '\xa090.4294'], [23.8092, '\xa090.4297'], ['\xa023.8094', 90.4307], ['\xa023.8093', 90.4304], [23.8093, 90.4296], [23.8097, 90.4296], [23.8097, 90.4293], [23.8092, 90.4287], [23.8092, 90.4286], [23.8088, 90.4287], [23.8082, '\xa090.4288'], [23.8088, 90.4304], ['\xa023.8090', 90.4308], [23.8108, 90.4308], ['\xa023.8109', 90.4307], ['\xa023.8117', '\xa090.4307'], [23.8126, 90.4324], ['\xa023.8131', '\xa090.4326'], ['\xa023.8130', 90.4284], [23.8129, 90.4278], [23.8129, 90.4277], [23.8129, 90.4272], [23.8142, 90.4271], [23.8123, '\xa090.4283'], [23.8122, 90.4266], [23.8117, 90.4259], [23.8113, 90.4272], [23.8127, 90.4282], [23.8082, 90.4287], [23.8101, 90.4285], [23.8098, 90.4263], [23.8098, 90.4227], [23.8109, 90.4229], [23.811, 90.424], [23.8123, 90.425], [23.8124, 90.4235], [23.8142, 90.4229], [23.8145, '\xa090.4249'], [23.8159, 90.425], [23.8161, 90.428], [23.8172, 90.4278], [23.8182, 90.4278], [23.8192, 90.4276], [23.8193, 90.4297], [23.8183, '\xa090.4300'], [23.8175, '\xa090.4332'], ['\xa023.8175', 90.4342], [23.8177, 90.4363], [23.8168, 90.4362], [23.8162, 90.4363], ['\xa023.8155', 90.4344], ['\xa023.8149', 90.4363], [23.8146, 90.4326], [23.8141, 90.4327], ['\xa023.8137', '\xa090.4327'], [23.8134, '\xa090.4328'], [23.8133, '\xa090.4326'], [23.814, 90.4345], [23.8139, 90.4345], [23.8142, 90.427], [23.8161, 90.4281], [23.8149, '\xa090.4282'], [23.8148, 90.4275], [23.8149, 90.4271], [23.8147, 90.4253], [23.8136, 90.4253], [23.8127, '\xa090.4255'], [23.8137, '\xa090.4265'], [23.8141, 90.4265], [23.8142, 90.4271], [23.8128, 90.4266], [23.8129, '\xa090.4272'], ['\xa023.8142', 90.4272], [23.8142, 90.4276], [23.8129, '\xa090.4277'], [23.8142, '\xa090.4277'], [23.8143, '\xa090.4283'], [23.813, 90.4284], [23.8133, 90.4284], [23.8135, 90.4303], [23.8134, '\xa090.4284'], ['\xa023.8138', 90.4284], [23.8229, 90.4475], ['\xa023.8135', '\xa090.4303'], ['\xa023.8138', 90.4284], ['\xa023.8143', 90.4283], [23.8144, 90.4302], ['\xa023.8143', '\xa090.4283'], [23.8145, 90.4302], [23.8149, 90.4302], [23.8147, '\xa090.4283'], [23.8152, 90.4282], [23.8153, 90.4301], [23.8153, '\xa090.4283'], [23.8156, 90.4283], ['\xa023.8158', 90.4301], [23.8162, 90.4282], [23.8163, '\xa090.4300'], [23.8164, 90.43], [23.8172, 90.4299], [23.8171, 90.4292], [23.8183, 90.4298], ['\xa023.8183', 90.4292], [23.8182, '\xa090.4285'], [23.8172, 90.4292], [23.8172, 90.4287], ['\xa023.8172', 90.428], ['\xa023.8182', 90.4277], [23.8182, 90.4284], [23.8183, 90.4291], [23.8185, 90.4298], ['\xa023.8183', '\xa090.4277'], ['\xa023.8187', 90.4277], [23.8189, '\xa090.4298'], [23.8189, 90.4276], ['\xa023.8186', 90.4243], ['\xa023.8181', '\xa090.4243'], [23.8182, 90.4251], ['\xa023.8179', 90.4251], ['\xa023.8176', '\xa090.4249'], ['\xa023.8174', 90.4252], ['\xa023.8172', '\xa090.4251'], [23.8172, 90.425], [23.8186, '\xa090.4242'], [23.8186, '\xa090.4238'], [23.8184, '\xa090.4237'], [23.8183, '\xa090.4230'], [23.8182, 90.4221], [23.8177, 90.4219], ['\xa023.8168', 90.422], ['\xa023.8163', 90.4224], [23.8157, 90.4226], ['\xa023.8157', '\xa090.4227'], [23.8154, '\xa090.4228'], ['\xa023.8152', 90.4229], ['\xa023.8151', 90.423], [23.8151, 90.4233], ['\xa023.8150', 90.4233], [23.8144, '\xa090.4233'], ['\xa023.8147', 90.4251], [23.8125, '\xa090.4255'], [23.8112, 90.4258], [23.8113, '\xa090.4250'], [23.8123, '\xa090.4245'], [23.8291, 90.4209], [23.8313, 90.425], [23.8313, 90.4243], [23.8326, 90.4224], [23.832, 90.4252], [23.8313, 90.4258], [23.8307, 90.4257], [23.8309, 90.4274], [23.8317, 90.4292], [23.8313, 90.4303], [23.8323, 90.43], [23.833, 90.4347], [23.8296, 90.4259], [23.8323, 90.4251], [23.8345, 90.4236], [23.8351, 90.4256], [23.8351, 90.4281], [23.8322, 90.4308], [23.8322, 90.4301], [23.8308, 90.4294], [23.8332, 90.4227], [23.8338, 90.429], [23.8333, 90.4294], [23.8324, 90.4272], [23.8333, 90.4293], [23.8319, 90.432], [23.8318, 90.4305], [23.8315, 90.4306], [23.8314, 90.4312], [23.8309, 90.4306], [23.8307, 90.4304], [23.8309, 90.4298], [23.8307, 90.4297], [23.8314, 90.4297], [23.8316, 90.4291], [23.8314, 90.4291], [23.8311, 90.4285], [23.8309, 90.4285], [23.8313, 90.4293], [23.8311, 90.4293], [23.831, 90.4294], [23.8309, 90.4295], [23.8307, 90.4294], [23.8306, 90.4293], [23.8306, 90.4292], [23.8306, 90.4291], ['\xa023.8169', 90.4363], [23.8167, 90.4344], [23.8176, 90.4343], [23.8166, 90.4342], ['\xa023.8163', '\xa090.4304'], [23.8178, 90.4301], [23.8179, '\xa090.4330'], [23.8176, 90.4332], [23.8175, '\xa090.4341'], [23.818, 90.43], [23.8179, 90.433], ['\xa023.8164', 90.4324], ['\xa023.8165', 90.4342], [23.8203, 90.4341], [23.8207, 90.4325], [23.8208, 90.4301], [23.8203, 90.4304], [23.8203, 90.4311], [23.8193, 90.43], [23.8192, '\xa090.4286'], [23.8186, 90.4292], [23.8234, 90.4396], [23.8178, 90.4398], [23.814, 90.4347], [23.8118, 90.4213]]],
{heatmapOptions: {
radius: 15,
minOpacity: 0,
maxOpacity: 0.6,
scaleRadius: false,
useLocalExtrema: false,
defaultWeight: 1,
}
})
.addTo(map_5545e190ab4b469095583a1f337429fa);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment