<script src=" https://unpkg.com/@joergdietrich/[email protected]/L.Terminator.js"></script>
<script>
function runMap() {
map = new L.map('map', {
maxZoom: 10,
minZoom: 0.1,
attributionControl: false, //This is to hide the leaflet label at the bottom right of the map
});
// L.tileLayer('<?= $map_url ?>').addTo(map);
// L.terminator().addTo(map);
var screen_height = $(window).height();
var initial_zoomLevel = 3;
if (screen_height <= 768) {
initial_zoomLevel = 2;
}
if (default_zoom_level > 0) {
initial_zoomLevel = default_zoom_level;
}
map.setView(new L.LatLng(15, 0), initial_zoomLevel);
// add logo to watermark bottom left
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create('img');
img.src = '<?= $cloud_icon ?>';
// img.style.width = '100px';
img.style.margin = '0 0 18px 18px';
return img;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
}
L.control.watermark({
position: 'bottomleft'
}).addTo(map);
generateMapHeatData();
//add heatmap layer to map
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
"radius": 5,
"maxOpacity": .5,
"minOpacity": .02,
blur: .75,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'.35': '#00e500',
'.40': '#00e500',
'.50': '#00e500'
},
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'count'
};
// heatmap
var heatmapLayer = new HeatmapOverlay(cfg);
heatmap_layer = heatmapLayer.addTo(map);
heatmapLayer.setData(mapHeatData);
// add markers layer to map
markers_layer = L.layerGroup().addTo(map);
markers_event_layer = L.layerGroup().addTo(map);
machine_markers_layer = L.layerGroup().addTo(map);
machine_idle_layer = L.layerGroup().addTo(map);
machine_down_layer = L.layerGroup().addTo(map);
machine_sale_layer = L.layerGroup().addTo(map);
// echart
overlay = new L.echartsLayer3(map, echarts);
chartsContainer = overlay.getEchartsContainer();
overlay.initECharts(chartsContainer);
option = get_map_options();
// 使用刚指定的配置项和数据显示图表。
overlay.setOption(option);
// hide leaflet attribution control
$('.leaflet-control-attribution').hide();
}
function generateMapHeatData() {
var heatmap_data = [];
for (var key in machine_coordinate_list) {
var unique_id = key;
var coordinate_data = machine_coordinate_list[key];
var heat_item = {
lat: coordinate_data.location_coordinate_lat,
lng: coordinate_data.location_coordinate_lng,
count: 1
}
heatmap_data.push(heat_item);
}
mapHeatData["max"] = 35;
mapHeatData["data"] = heatmap_data;
}
</script>
<script src=" https://unpkg.com/@joergdietrich/[email protected]/L.Terminator.js"></script>
<script>
function runMap() {
map = new L.map('map', {
maxZoom: 10,
minZoom: 0.1,
attributionControl: false, //This is to hide the leaflet label at the bottom right of the map
});
// L.tileLayer('<?= $map_url ?>').addTo(map);
// L.terminator().addTo(map);
var screen_height = $(window).height();
var initial_zoomLevel = 3;
if (screen_height <= 768) {
initial_zoomLevel = 2;
}
if (default_zoom_level > 0) {
initial_zoomLevel = default_zoom_level;
}
map.setView(new L.LatLng(15, 0), initial_zoomLevel);
// add logo to watermark bottom left
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create('img');
img.src = '<?= $cloud_icon ?>';
// img.style.width = '100px';
img.style.margin = '0 0 18px 18px';
return img;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
}
L.control.watermark({
position: 'bottomleft'
}).addTo(map);
generateMapHeatData();
//add heatmap layer to map
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
"radius": 5,
"maxOpacity": .5,
"minOpacity": .02,
blur: .75,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'.35': '#00e500',
'.40': '#00e500',
'.50': '#00e500'
},
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'count'
};
// heatmap
var heatmapLayer = new HeatmapOverlay(cfg);
heatmap_layer = heatmapLayer.addTo(map);
heatmapLayer.setData(mapHeatData);
// add markers layer to map
markers_layer = L.layerGroup().addTo(map);
markers_event_layer = L.layerGroup().addTo(map);
machine_markers_layer = L.layerGroup().addTo(map);
machine_idle_layer = L.layerGroup().addTo(map);
machine_down_layer = L.layerGroup().addTo(map);
machine_sale_layer = L.layerGroup().addTo(map);
// echart
overlay = new L.echartsLayer3(map, echarts);
chartsContainer = overlay.getEchartsContainer();
overlay.initECharts(chartsContainer);
option = get_map_options();
// 使用刚指定的配置项和数据显示图表。
overlay.setOption(option);
// hide leaflet attribution control
$('.leaflet-control-attribution').hide();
}
function generateMapHeatData() {
var heatmap_data = [];
for (var key in machine_coordinate_list) {
var unique_id = key;
var coordinate_data = machine_coordinate_list[key];
var heat_item = {
lat: coordinate_data.location_coordinate_lat,
lng: coordinate_data.location_coordinate_lng,
count: 1
}
heatmap_data.push(heat_item);
}
mapHeatData["max"] = 35;
mapHeatData["data"] = heatmap_data;
}
</script>
<script src=" https://unpkg.com/@joergdietrich/[email protected]/L.Terminator.js"></script>
<script>
function runMap() {
map = new L.map('map', {
maxZoom: 10,
minZoom: 0.1,
attributionControl: false, //This is to hide the leaflet label at the bottom right of the map
});
// L.tileLayer('<?= $map_url ?>').addTo(map);
// L.terminator().addTo(map);
var screen_height = $(window).height();
var initial_zoomLevel = 3;
if (screen_height <= 768) {
initial_zoomLevel = 2;
}
if (default_zoom_level > 0) {
initial_zoomLevel = default_zoom_level;
}
map.setView(new L.LatLng(15, 0), initial_zoomLevel);
// add logo to watermark bottom left
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create('img');
img.src = '<?= $cloud_icon ?>';
// img.style.width = '100px';
img.style.margin = '0 0 18px 18px';
return img;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
}
L.control.watermark({
position: 'bottomleft'
}).addTo(map);
generateMapHeatData();
//add heatmap layer to map
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
"radius": 5,
"maxOpacity": .5,
"minOpacity": .02,
blur: .75,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'.35': '#00e500',
'.40': '#00e500',
'.50': '#00e500'
},
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'count'
};
// heatmap
var heatmapLayer = new HeatmapOverlay(cfg);
heatmap_layer = heatmapLayer.addTo(map);
heatmapLayer.setData(mapHeatData);
// add markers layer to map
markers_layer = L.layerGroup().addTo(map);
markers_event_layer = L.layerGroup().addTo(map);
machine_markers_layer = L.layerGroup().addTo(map);
machine_idle_layer = L.layerGroup().addTo(map);
machine_down_layer = L.layerGroup().addTo(map);
machine_sale_layer = L.layerGroup().addTo(map);
// echart
overlay = new L.echartsLayer3(map, echarts);
chartsContainer = overlay.getEchartsContainer();
overlay.initECharts(chartsContainer);
}
function generateMapHeatData() {
var heatmap_data = [];
for (var key in machine_coordinate_list) {
var unique_id = key;
var coordinate_data = machine_coordinate_list[key];
var heat_item = {
lat: coordinate_data.location_coordinate_lat,
lng: coordinate_data.location_coordinate_lng,
count: 1
}
heatmap_data.push(heat_item);
}
mapHeatData["max"] = 35;
mapHeatData["data"] = heatmap_data;
}
</script>
How to use Leaflet Terminator together with the Heatmap
I have a code where, upon running the Leaflet terminator, the heatmap disappears, but the terminator runs successfully. However, when I remove the terminator, the heatmap appears. Below is my code snippet:
<script src=" https://unpkg.com/@joergdietrich/[email protected]/L.Terminator.js"></script>
<script>
function runMap() {
map = new L.map('map', {
maxZoom: 10,
minZoom: 0.1,
attributionControl: false, //This is to hide the leaflet label at the bottom right of the map
});
// L.tileLayer('<?= $map_url ?>').addTo(map);
// L.terminator().addTo(map);
var screen_height = $(window).height();
var initial_zoomLevel = 3;
if (screen_height <= 768) {
initial_zoomLevel = 2;
}
if (default_zoom_level > 0) {
initial_zoomLevel = default_zoom_level;
}
map.setView(new L.LatLng(15, 0), initial_zoomLevel);
// add logo to watermark bottom left
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create('img');
img.src = '<?= $cloud_icon ?>';
// img.style.width = '100px';
img.style.margin = '0 0 18px 18px';
return img;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
}
L.control.watermark({
position: 'bottomleft'
}).addTo(map);
generateMapHeatData();
//add heatmap layer to map
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
"radius": 5,
"maxOpacity": .5,
"minOpacity": .02,
blur: .75,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'.35': '#00e500',
'.40': '#00e500',
'.50': '#00e500'
},
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'count'
};
// heatmap
var heatmapLayer = new HeatmapOverlay(cfg);
heatmap_layer = heatmapLayer.addTo(map);
heatmapLayer.setData(mapHeatData);
// add markers layer to map
markers_layer = L.layerGroup().addTo(map);
markers_event_layer = L.layerGroup().addTo(map);
machine_markers_layer = L.layerGroup().addTo(map);
machine_idle_layer = L.layerGroup().addTo(map);
machine_down_layer = L.layerGroup().addTo(map);
machine_sale_layer = L.layerGroup().addTo(map);
// echart
overlay = new L.echartsLayer3(map, echarts);
chartsContainer = overlay.getEchartsContainer();
overlay.initECharts(chartsContainer);
option = get_map_options();
// 使用刚指定的配置项和数据显示图表。
overlay.setOption(option);
// hide leaflet attribution control
$('.leaflet-control-attribution').hide();
}
function generateMapHeatData() {
var heatmap_data = [];
for (var key in machine_coordinate_list) {
var unique_id = key;
var coordinate_data = machine_coordinate_list[key];
var heat_item = {
lat: coordinate_data.location_coordinate_lat,
lng: coordinate_data.location_coordinate_lng,
count: 1
}
heatmap_data.push(heat_item);
}
mapHeatData["max"] = 35;
mapHeatData["data"] = heatmap_data;
}
</script>
I tried placing the terminator before generating the heatmap data, but only the terminator appeared. Conversely, if I execute the terminator after the heatmap data, only the heatmap data is displayed, and the terminator does not execute. Now, I want both the heatmap data and terminator to be shown together on the map
lang-js