code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
const map = new maplibregl. Map ({ container: 'map' , style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY' , center: [ 14.42 , 50.08 ], zoom: 13 }); map. addControl ( new maplibregl. NavigationControl ()); const places = [ { coords: [ 14.4205 , 50.0875 ], name: 'Old Town Square' , desc: 'Historic center of Prague' }, { coords: [ 14.4006 , 50.0904 ], name: 'Prague Castle' , desc: 'Largest castle complex' }, { coords: [ 14.4141 , 50.0814 ], name: 'Charles Bridge' , desc: 'Iconic Gothic bridge' } ]; places. forEach ( p => { new maplibregl. Marker ({ color: '#2196F3' }) . setLngLat (p.coords) . setPopup ( new maplibregl. Popup ({ offset: 25 }). setHTML ( `<b>${ p . name }</b><br>${ p . desc }` )) . addTo (map); }); 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/streets-v4/style.json?key=YOUR_MAPTILER_KEY' , center: [ 14.42 , 50.08 ], zoom: 13 }); map. addControl ( new maplibregl. NavigationControl ()); const places = [ { coords: [ 14.4205 , 50.0875 ], name: 'Old Town Square' , desc: 'Historic center of Prague' }, { coords: [ 14.4006 , 50.0904 ], name: 'Prague Castle' , desc: 'Largest castle complex' }, { coords: [ 14.4141 , 50.0814 ], name: 'Charles Bridge' , desc: 'Iconic Gothic bridge' } ]; places. forEach ( p => { new maplibregl. Marker ({ color: '#2196F3' }) . setLngLat (p.coords) . setPopup ( new maplibregl. Popup ({ offset: 25 }). setHTML ( `<b>${ p . name }</b><br>${ p . desc }` )) . addTo (map); }); </ 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/streets-v4/style.json?key=YOUR_MAPTILER_KEY' , center: [ 14.42 , 50.08 ], zoom: 13 }); map. addControl ( new maplibregl. NavigationControl ()); const places = [ { coords: [ 14.4205 , 50.0875 ], name: 'Old Town Square' , desc: 'Historic center of Prague' }, { coords: [ 14.4006 , 50.0904 ], name: 'Prague Castle' , desc: 'Largest castle complex' }, { coords: [ 14.4141 , 50.0814 ], name: 'Charles Bridge' , desc: 'Iconic Gothic bridge' } ]; places. forEach ( p => { new maplibregl. Marker ({ color: '#2196F3' }) . setLngLat (p.coords) . setPopup ( new maplibregl. Popup ({ offset: 25 }). setHTML ( `<b>${ p . name }</b><br>${ p . desc }` )) . addTo (map); }); const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 13
});
map.addControl(new maplibregl.NavigationControl());
const places = [
{ coords: [14.4205, 50.0875], name: 'Old Town Square', desc: 'Historic center of Prague' },
{ coords: [14.4006, 50.0904], name: 'Prague Castle', desc: 'Largest castle complex' },
{ coords: [14.4141, 50.0814], name: 'Charles Bridge', desc: 'Iconic Gothic bridge' }
];
places.forEach(p => {
new maplibregl.Marker({ color: '#2196F3' })
.setLngLat(p.coords)
.setPopup(new maplibregl.Popup({ offset: 25 }).setHTML(`<b>${p.name}</b><br>${p.desc}`))
.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://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/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 13
});
map.addControl(new maplibregl.NavigationControl());
const places = [
{ coords: [14.4205, 50.0875], name: 'Old Town Square', desc: 'Historic center of Prague' },
{ coords: [14.4006, 50.0904], name: 'Prague Castle', desc: 'Largest castle complex' },
{ coords: [14.4141, 50.0814], name: 'Charles Bridge', desc: 'Iconic Gothic bridge' }
];
places.forEach(p => {
new maplibregl.Marker({ color: '#2196F3' })
.setLngLat(p.coords)
.setPopup(new maplibregl.Popup({ offset: 25 }).setHTML(`<b>${p.name}</b><br>${p.desc}`))
.addTo(map);
});
</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/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 13
});
map.addControl(new maplibregl.NavigationControl());
const places = [
{ coords: [14.4205, 50.0875], name: 'Old Town Square', desc: 'Historic center of Prague' },
{ coords: [14.4006, 50.0904], name: 'Prague Castle', desc: 'Largest castle complex' },
{ coords: [14.4141, 50.0814], name: 'Charles Bridge', desc: 'Iconic Gothic bridge' }
];
places.forEach(p => {
new maplibregl.Marker({ color: '#2196F3' })
.setLngLat(p.coords)
.setPopup(new maplibregl.Popup({ offset: 25 }).setHTML(`<b>${p.name}</b><br>${p.desc}`))
.addTo(map);
});
