code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
const map = new maplibregl. Map ({ container: 'map' , style: 'https://api.maptiler.com/maps/dataviz-dark/style.json?key=YOUR_MAPTILER_KEY' , center: [ 14.42 , 50.08 ], zoom: 10 }); const pts = []; for ( let i = 0 ; i < 500 ; i ++ ) { const a = Math. random () * Math. PI * 2 , r = Math. random () * 0.1 ; pts. push ({ type: 'Feature' , geometry: { type: 'Point' , coordinates: [ 14.42 + Math. cos (a) * r, 50.08 + Math. sin (a) * r] }, properties: { weight: Math. random () } }); } map. on ( 'load' , () => { map. addSource ( 'heat' , { type: 'geojson' , data: { type: 'FeatureCollection' , features: pts } }); map. addLayer ({ id: 'heatmap' , type: 'heatmap' , source: 'heat' , paint: { 'heatmap-weight' : [ 'get' , 'weight' ], 'heatmap-intensity' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 8 , 1 , 13 , 3 ], 'heatmap-color' : [ 'interpolate' , [ 'linear' ], [ 'heatmap-density' ], 0 , 'rgba(33,102,172,0)' , 0.2 , '#4393c3' , 0.4 , '#d6604d' , 0.6 , '#f4a582' , 0.8 , '#fddbc7' , 1 , '#fff' ], 'heatmap-radius' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 8 , 10 , 13 , 25 ], 'heatmap-opacity' : 0.8 } }); }); content_copy Copyopen_in_new Open
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" /> < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script type = "module" > import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs' ; const map = new maplibregl. Map ({ container: 'map' , style: 'https://api.maptiler.com/maps/dataviz-dark/style.json?key=YOUR_MAPTILER_KEY' , center: [ 14.42 , 50.08 ], zoom: 10 }); const pts = []; for ( let i = 0 ; i < 500 ; i ++ ) { const a = Math. random () * Math. PI * 2 , r = Math. random () * 0.1 ; pts. push ({ type: 'Feature' , geometry: { type: 'Point' , coordinates: [ 14.42 + Math. cos (a) * r, 50.08 + Math. sin (a) * r] }, properties: { weight: Math. random () } }); } map. on ( 'load' , () => { map. addSource ( 'heat' , { type: 'geojson' , data: { type: 'FeatureCollection' , features: pts } }); map. addLayer ({ id: 'heatmap' , type: 'heatmap' , source: 'heat' , paint: { 'heatmap-weight' : [ 'get' , 'weight' ], 'heatmap-intensity' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 8 , 1 , 13 , 3 ], 'heatmap-color' : [ 'interpolate' , [ 'linear' ], [ 'heatmap-density' ], 0 , 'rgba(33,102,172,0)' , 0.2 , '#4393c3' , 0.4 , '#d6604d' , 0.6 , '#f4a582' , 0.8 , '#fddbc7' , 1 , '#fff' ], 'heatmap-radius' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 8 , 10 , 13 , 25 ], 'heatmap-opacity' : 0.8 } }); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import maplibregl from 'maplibre-gl' ; import 'maplibre-gl/dist/maplibre-gl.css' ; const map = new maplibregl. Map ({ container: 'map' , style: 'https://api.maptiler.com/maps/dataviz-dark/style.json?key=YOUR_MAPTILER_KEY' , center: [ 14.42 , 50.08 ], zoom: 10 }); const pts = []; for ( let i = 0 ; i < 500 ; i ++ ) { const a = Math. random () * Math. PI * 2 , r = Math. random () * 0.1 ; pts. push ({ type: 'Feature' , geometry: { type: 'Point' , coordinates: [ 14.42 + Math. cos (a) * r, 50.08 + Math. sin (a) * r] }, properties: { weight: Math. random () } }); } map. on ( 'load' , () => { map. addSource ( 'heat' , { type: 'geojson' , data: { type: 'FeatureCollection' , features: pts } }); map. addLayer ({ id: 'heatmap' , type: 'heatmap' , source: 'heat' , paint: { 'heatmap-weight' : [ 'get' , 'weight' ], 'heatmap-intensity' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 8 , 1 , 13 , 3 ], 'heatmap-color' : [ 'interpolate' , [ 'linear' ], [ 'heatmap-density' ], 0 , 'rgba(33,102,172,0)' , 0.2 , '#4393c3' , 0.4 , '#d6604d' , 0.6 , '#f4a582' , 0.8 , '#fddbc7' , 1 , '#fff' ], 'heatmap-radius' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 8 , 10 , 13 , 25 ], 'heatmap-opacity' : 0.8 } }); }); const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/dataviz-dark/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 10
});
const pts = [];
for (let i = 0; i < 500; i++) {
const a = Math.random() * Math.PI * 2, r = Math.random() * 0.1;
pts.push({ type: 'Feature', geometry: { type: 'Point', coordinates: [14.42 + Math.cos(a) * r, 50.08 + Math.sin(a) * r] },
properties: { weight: Math.random() } });
}
map.on('load', () => {
map.addSource('heat', { type: 'geojson', data: { type: 'FeatureCollection', features: pts } });
map.addLayer({ id: 'heatmap', type: 'heatmap', source: 'heat', paint: {
'heatmap-weight': ['get', 'weight'],
'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 8, 1, 13, 3],
'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(33,102,172,0)', 0.2, '#4393c3', 0.4, '#d6604d', 0.6, '#f4a582', 0.8, '#fddbc7', 1, '#fff'],
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 8, 10, 13, 25],
'heatmap-opacity': 0.8
} });
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" />
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs';
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/dataviz-dark/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 10
});
const pts = [];
for (let i = 0; i < 500; i++) {
const a = Math.random() * Math.PI * 2, r = Math.random() * 0.1;
pts.push({ type: 'Feature', geometry: { type: 'Point', coordinates: [14.42 + Math.cos(a) * r, 50.08 + Math.sin(a) * r] },
properties: { weight: Math.random() } });
}
map.on('load', () => {
map.addSource('heat', { type: 'geojson', data: { type: 'FeatureCollection', features: pts } });
map.addLayer({ id: 'heatmap', type: 'heatmap', source: 'heat', paint: {
'heatmap-weight': ['get', 'weight'],
'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 8, 1, 13, 3],
'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(33,102,172,0)', 0.2, '#4393c3', 0.4, '#d6604d', 0.6, '#f4a582', 0.8, '#fddbc7', 1, '#fff'],
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 8, 10, 13, 25],
'heatmap-opacity': 0.8
} });
});
</script>
</body>
</html> import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/dataviz-dark/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 10
});
const pts = [];
for (let i = 0; i < 500; i++) {
const a = Math.random() * Math.PI * 2, r = Math.random() * 0.1;
pts.push({ type: 'Feature', geometry: { type: 'Point', coordinates: [14.42 + Math.cos(a) * r, 50.08 + Math.sin(a) * r] },
properties: { weight: Math.random() } });
}
map.on('load', () => {
map.addSource('heat', { type: 'geojson', data: { type: 'FeatureCollection', features: pts } });
map.addLayer({ id: 'heatmap', type: 'heatmap', source: 'heat', paint: {
'heatmap-weight': ['get', 'weight'],
'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 8, 1, 13, 3],
'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(33,102,172,0)', 0.2, '#4393c3', 0.4, '#d6604d', 0.6, '#f4a582', 0.8, '#fddbc7', 1, '#fff'],
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 8, 10, 13, 25],
'heatmap-opacity': 0.8
} });
});
