code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
var features = []; for ( var i = 0 ; i < 500 ; i ++ ) { var feature = new ol. Feature ({ geometry: new ol.geom. Point (ol.proj. fromLonLat ([ 2.3 + Math. random () * 0.15 , 48.83 + Math. random () * 0.06 ])), weight: Math. random () }); features. push (feature); } var heatmap = new ol.layer. Heatmap ({ source: new ol.source. Vector ({ features: features }), blur: 15 , radius: 10 , weight : function ( feature ) { return feature. get ( 'weight' ); } }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), heatmap ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.37 , 48.86 ]), zoom: 13 }) }); 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/ol@10.10.0/ol.css" /> < script src = "https://unpkg.com/ol@10.10.0/dist/ol.js" ></ script > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > var features = []; for ( var i = 0 ; i < 500 ; i ++ ) { var feature = new ol. Feature ({ geometry: new ol.geom. Point (ol.proj. fromLonLat ([ 2.3 + Math. random () * 0.15 , 48.83 + Math. random () * 0.06 ])), weight: Math. random () }); features. push (feature); } var heatmap = new ol.layer. Heatmap ({ source: new ol.source. Vector ({ features: features }), blur: 15 , radius: 10 , weight : function ( feature ) { return feature. get ( 'weight' ); } }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), heatmap ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.37 , 48.86 ]), zoom: 13 }) }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import Map from 'ol/Map' ; import View from 'ol/View' ; import TileLayer from 'ol/layer/Tile' ; import { fromLonLat } from 'ol/proj' ; import 'ol/ol.css' ; var features = []; for ( var i = 0 ; i < 500 ; i ++ ) { var feature = new ol. Feature ({ geometry: new ol.geom. Point (ol.proj. fromLonLat ([ 2.3 + Math. random () * 0.15 , 48.83 + Math. random () * 0.06 ])), weight: Math. random () }); features. push (feature); } var heatmap = new ol.layer. Heatmap ({ source: new ol.source. Vector ({ features: features }), blur: 15 , radius: 10 , weight : function ( feature ) { return feature. get ( 'weight' ); } }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), heatmap ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.37 , 48.86 ]), zoom: 13 }) }); var features = [];
for (var i = 0; i < 500; i++) {
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([2.3 + Math.random() * 0.15, 48.83 + Math.random() * 0.06])),
weight: Math.random()
});
features.push(feature);
}
var heatmap = new ol.layer.Heatmap({
source: new ol.source.Vector({ features: features }),
blur: 15,
radius: 10,
weight: function(feature) { return feature.get('weight'); }
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
heatmap
],
view: new ol.View({ center: ol.proj.fromLonLat([2.37, 48.86]), zoom: 13 })
}); <!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/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var features = [];
for (var i = 0; i < 500; i++) {
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([2.3 + Math.random() * 0.15, 48.83 + Math.random() * 0.06])),
weight: Math.random()
});
features.push(feature);
}
var heatmap = new ol.layer.Heatmap({
source: new ol.source.Vector({ features: features }),
blur: 15,
radius: 10,
weight: function(feature) { return feature.get('weight'); }
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
heatmap
],
view: new ol.View({ center: ol.proj.fromLonLat([2.37, 48.86]), zoom: 13 })
});
</script>
</body>
</html> import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';
var features = [];
for (var i = 0; i < 500; i++) {
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([2.3 + Math.random() * 0.15, 48.83 + Math.random() * 0.06])),
weight: Math.random()
});
features.push(feature);
}
var heatmap = new ol.layer.Heatmap({
source: new ol.source.Vector({ features: features }),
blur: 15,
radius: 10,
weight: function(feature) { return feature.get('weight'); }
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
heatmap
],
view: new ol.View({ center: ol.proj.fromLonLat([2.37, 48.86]), zoom: 13 })
});
