code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ - 98 , 39 ], zoom: 3 }); map. on ( 'load' , () => { map. addSource ( 'quakes' , { type: 'geojson' , data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson' }); map. addLayer ({ id: 'quake-heat' , type: 'heatmap' , source: 'quakes' , paint: { 'heatmap-weight' : [ 'interpolate' , [ 'linear' ], [ 'get' , 'mag' ], 0 , 0 , 6 , 1 ], 'heatmap-radius' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 0 , 2 , 9 , 20 ], 'heatmap-color' : [ 'interpolate' , [ 'linear' ], [ 'heatmap-density' ], 0 , 'rgba(0,0,0,0)' , 0.2 , '#e8d5f5' , 0.4 , '#ce93d8' , 0.6 , '#9C27B0' , 0.8 , '#7b1fa2' , 1 , '#4a148c' ] } }); }); 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://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" /> < script src = "https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js" ></ script > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ - 98 , 39 ], zoom: 3 }); map. on ( 'load' , () => { map. addSource ( 'quakes' , { type: 'geojson' , data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson' }); map. addLayer ({ id: 'quake-heat' , type: 'heatmap' , source: 'quakes' , paint: { 'heatmap-weight' : [ 'interpolate' , [ 'linear' ], [ 'get' , 'mag' ], 0 , 0 , 6 , 1 ], 'heatmap-radius' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 0 , 2 , 9 , 20 ], 'heatmap-color' : [ 'interpolate' , [ 'linear' ], [ 'heatmap-density' ], 0 , 'rgba(0,0,0,0)' , 0.2 , '#e8d5f5' , 0.4 , '#ce93d8' , 0.6 , '#9C27B0' , 0.8 , '#7b1fa2' , 1 , '#4a148c' ] } }); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import * as maptilersdk from '@maptiler/sdk' ; import '@maptiler/sdk/dist/maptiler-sdk.css' ; maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ - 98 , 39 ], zoom: 3 }); map. on ( 'load' , () => { map. addSource ( 'quakes' , { type: 'geojson' , data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson' }); map. addLayer ({ id: 'quake-heat' , type: 'heatmap' , source: 'quakes' , paint: { 'heatmap-weight' : [ 'interpolate' , [ 'linear' ], [ 'get' , 'mag' ], 0 , 0 , 6 , 1 ], 'heatmap-radius' : [ 'interpolate' , [ 'linear' ], [ 'zoom' ], 0 , 2 , 9 , 20 ], 'heatmap-color' : [ 'interpolate' , [ 'linear' ], [ 'heatmap-density' ], 0 , 'rgba(0,0,0,0)' , 0.2 , '#e8d5f5' , 0.4 , '#ce93d8' , 0.6 , '#9C27B0' , 0.8 , '#7b1fa2' , 1 , '#4a148c' ] } }); }); maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [-98, 39],
zoom: 3
});
map.on('load', () => {
map.addSource('quakes', {
type: 'geojson',
data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
});
map.addLayer({
id: 'quake-heat', type: 'heatmap', source: 'quakes',
paint: {
'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(0,0,0,0)', 0.2, '#e8d5f5', 0.4, '#ce93d8',
0.6, '#9C27B0', 0.8, '#7b1fa2', 1, '#4a148c']
}
});
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" />
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [-98, 39],
zoom: 3
});
map.on('load', () => {
map.addSource('quakes', {
type: 'geojson',
data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
});
map.addLayer({
id: 'quake-heat', type: 'heatmap', source: 'quakes',
paint: {
'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(0,0,0,0)', 0.2, '#e8d5f5', 0.4, '#ce93d8',
0.6, '#9C27B0', 0.8, '#7b1fa2', 1, '#4a148c']
}
});
});
</script>
</body>
</html> import * as maptilersdk from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [-98, 39],
zoom: 3
});
map.on('load', () => {
map.addSource('quakes', {
type: 'geojson',
data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
});
map.addLayer({
id: 'quake-heat', type: 'heatmap', source: 'quakes',
paint: {
'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(0,0,0,0)', 0.2, '#e8d5f5', 0.4, '#ce93d8',
0.6, '#9C27B0', 0.8, '#7b1fa2', 1, '#4a148c']
}
});
});
