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('earthquakes', {
type: 'geojson',
data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson'
});
map.addLayer({
id: 'quake-points', type: 'circle', source: 'earthquakes',
paint: {
'circle-radius': 8,
'circle-color': '#9C27B0',
'circle-stroke-width': 2,
'circle-stroke-color': '#e0e0e0'
}
});
map.on('click', 'quake-points', (e) => {
const props = e.features[0].properties;
new maptilersdk.Popup().setLngLat(e.lngLat).setHTML(`<b>${props.title}</b>`).addTo(map);
});
});
<!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('earthquakes', {
type: 'geojson',
data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson'
});
map.addLayer({
id: 'quake-points', type: 'circle', source: 'earthquakes',
paint: {
'circle-radius': 8,
'circle-color': '#9C27B0',
'circle-stroke-width': 2,
'circle-stroke-color': '#e0e0e0'
}
});
map.on('click', 'quake-points', (e) => {
const props = e.features[0].properties;
new maptilersdk.Popup().setLngLat(e.lngLat).setHTML(`<b>${props.title}</b>`).addTo(map);
});
});
</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('earthquakes', {
type: 'geojson',
data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson'
});
map.addLayer({
id: 'quake-points', type: 'circle', source: 'earthquakes',
paint: {
'circle-radius': 8,
'circle-color': '#9C27B0',
'circle-stroke-width': 2,
'circle-stroke-color': '#e0e0e0'
}
});
map.on('click', 'quake-points', (e) => {
const props = e.features[0].properties;
new maptilersdk.Popup().setLngLat(e.lngLat).setHTML(`<b>${props.title}</b>`).addTo(map);
});
});
