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: [ 2.35 , 48.86 ], zoom: 12 }); map. addControl ( new maplibregl. NavigationControl ()); const start = [ 2.3364 , 48.8606 ], end = [ 2.2945 , 48.8584 ]; map. on ( 'load' , async () => { const url = `https://router.project-osrm.org/route/v1/driving/${ start [ 0 ] },${ start [ 1 ] };${ end [ 0 ] },${ end [ 1 ] }?overview=full&geometries=geojson` ; const res = await fetch (url); const data = await res. json (); if ( ! data.routes. length ) return ; map. addSource ( 'route' , { type: 'geojson' , data: { type: 'Feature' , geometry: data.routes[ 0 ].geometry } }); map. addLayer ({ id: 'route-line' , type: 'line' , source: 'route' , layout: { 'line-join' : 'round' , 'line-cap' : 'round' }, paint: { 'line-color' : '#2196F3' , 'line-width' : 5 } }); new maplibregl. Marker ({ color: '#4CAF50' }). setLngLat (start). setPopup ( new maplibregl. Popup (). setText ( 'Start: Louvre' )). addTo (map); new maplibregl. Marker ({ color: '#F44336' }). setLngLat (end). setPopup ( new maplibregl. Popup (). setText ( 'End: Eiffel Tower' )). addTo (map); const coords = data.routes[ 0 ].geometry.coordinates; const bounds = coords. reduce (( b , c ) => b. extend (c), new maplibregl. LngLatBounds (coords[ 0 ], coords[ 0 ])); map. fitBounds (bounds, { padding: 60 }); }); 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: [ 2.35 , 48.86 ], zoom: 12 }); map. addControl ( new maplibregl. NavigationControl ()); const start = [ 2.3364 , 48.8606 ], end = [ 2.2945 , 48.8584 ]; map. on ( 'load' , async () => { const url = `https://router.project-osrm.org/route/v1/driving/${ start [ 0 ] },${ start [ 1 ] };${ end [ 0 ] },${ end [ 1 ] }?overview=full&geometries=geojson` ; const res = await fetch (url); const data = await res. json (); if ( ! data.routes. length ) return ; map. addSource ( 'route' , { type: 'geojson' , data: { type: 'Feature' , geometry: data.routes[ 0 ].geometry } }); map. addLayer ({ id: 'route-line' , type: 'line' , source: 'route' , layout: { 'line-join' : 'round' , 'line-cap' : 'round' }, paint: { 'line-color' : '#2196F3' , 'line-width' : 5 } }); new maplibregl. Marker ({ color: '#4CAF50' }). setLngLat (start). setPopup ( new maplibregl. Popup (). setText ( 'Start: Louvre' )). addTo (map); new maplibregl. Marker ({ color: '#F44336' }). setLngLat (end). setPopup ( new maplibregl. Popup (). setText ( 'End: Eiffel Tower' )). addTo (map); const coords = data.routes[ 0 ].geometry.coordinates; const bounds = coords. reduce (( b , c ) => b. extend (c), new maplibregl. LngLatBounds (coords[ 0 ], coords[ 0 ])); map. fitBounds (bounds, { padding: 60 }); }); </ 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: [ 2.35 , 48.86 ], zoom: 12 }); map. addControl ( new maplibregl. NavigationControl ()); const start = [ 2.3364 , 48.8606 ], end = [ 2.2945 , 48.8584 ]; map. on ( 'load' , async () => { const url = `https://router.project-osrm.org/route/v1/driving/${ start [ 0 ] },${ start [ 1 ] };${ end [ 0 ] },${ end [ 1 ] }?overview=full&geometries=geojson` ; const res = await fetch (url); const data = await res. json (); if ( ! data.routes. length ) return ; map. addSource ( 'route' , { type: 'geojson' , data: { type: 'Feature' , geometry: data.routes[ 0 ].geometry } }); map. addLayer ({ id: 'route-line' , type: 'line' , source: 'route' , layout: { 'line-join' : 'round' , 'line-cap' : 'round' }, paint: { 'line-color' : '#2196F3' , 'line-width' : 5 } }); new maplibregl. Marker ({ color: '#4CAF50' }). setLngLat (start). setPopup ( new maplibregl. Popup (). setText ( 'Start: Louvre' )). addTo (map); new maplibregl. Marker ({ color: '#F44336' }). setLngLat (end). setPopup ( new maplibregl. Popup (). setText ( 'End: Eiffel Tower' )). addTo (map); const coords = data.routes[ 0 ].geometry.coordinates; const bounds = coords. reduce (( b , c ) => b. extend (c), new maplibregl. LngLatBounds (coords[ 0 ], coords[ 0 ])); map. fitBounds (bounds, { padding: 60 }); }); const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [2.35, 48.86],
zoom: 12
});
map.addControl(new maplibregl.NavigationControl());
const start = [2.3364, 48.8606], end = [2.2945, 48.8584];
map.on('load', async () => {
const url = `https://router.project-osrm.org/route/v1/driving/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson`;
const res = await fetch(url);
const data = await res.json();
if (!data.routes.length) return;
map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: data.routes[0].geometry } });
map.addLayer({ id: 'route-line', type: 'line', source: 'route',
layout: { 'line-join': 'round', 'line-cap': 'round' },
paint: { 'line-color': '#2196F3', 'line-width': 5 } });
new maplibregl.Marker({ color: '#4CAF50' }).setLngLat(start).setPopup(new maplibregl.Popup().setText('Start: Louvre')).addTo(map);
new maplibregl.Marker({ color: '#F44336' }).setLngLat(end).setPopup(new maplibregl.Popup().setText('End: Eiffel Tower')).addTo(map);
const coords = data.routes[0].geometry.coordinates;
const bounds = coords.reduce((b, c) => b.extend(c), new maplibregl.LngLatBounds(coords[0], coords[0]));
map.fitBounds(bounds, { padding: 60 });
}); <!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: [2.35, 48.86],
zoom: 12
});
map.addControl(new maplibregl.NavigationControl());
const start = [2.3364, 48.8606], end = [2.2945, 48.8584];
map.on('load', async () => {
const url = `https://router.project-osrm.org/route/v1/driving/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson`;
const res = await fetch(url);
const data = await res.json();
if (!data.routes.length) return;
map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: data.routes[0].geometry } });
map.addLayer({ id: 'route-line', type: 'line', source: 'route',
layout: { 'line-join': 'round', 'line-cap': 'round' },
paint: { 'line-color': '#2196F3', 'line-width': 5 } });
new maplibregl.Marker({ color: '#4CAF50' }).setLngLat(start).setPopup(new maplibregl.Popup().setText('Start: Louvre')).addTo(map);
new maplibregl.Marker({ color: '#F44336' }).setLngLat(end).setPopup(new maplibregl.Popup().setText('End: Eiffel Tower')).addTo(map);
const coords = data.routes[0].geometry.coordinates;
const bounds = coords.reduce((b, c) => b.extend(c), new maplibregl.LngLatBounds(coords[0], coords[0]));
map.fitBounds(bounds, { padding: 60 });
});
</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: [2.35, 48.86],
zoom: 12
});
map.addControl(new maplibregl.NavigationControl());
const start = [2.3364, 48.8606], end = [2.2945, 48.8584];
map.on('load', async () => {
const url = `https://router.project-osrm.org/route/v1/driving/${start[0]},${start[1]};${end[0]},${end[1]}?overview=full&geometries=geojson`;
const res = await fetch(url);
const data = await res.json();
if (!data.routes.length) return;
map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: data.routes[0].geometry } });
map.addLayer({ id: 'route-line', type: 'line', source: 'route',
layout: { 'line-join': 'round', 'line-cap': 'round' },
paint: { 'line-color': '#2196F3', 'line-width': 5 } });
new maplibregl.Marker({ color: '#4CAF50' }).setLngLat(start).setPopup(new maplibregl.Popup().setText('Start: Louvre')).addTo(map);
new maplibregl.Marker({ color: '#F44336' }).setLngLat(end).setPopup(new maplibregl.Popup().setText('End: Eiffel Tower')).addTo(map);
const coords = data.routes[0].geometry.coordinates;
const bounds = coords.reduce((b, c) => b.extend(c), new maplibregl.LngLatBounds(coords[0], coords[0]));
map.fitBounds(bounds, { padding: 60 });
});
