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 ()); function makeCircle ( center , radiusKm , steps = 64 ) { const coords = []; for ( let i = 0 ; i <= steps; i ++ ) { const angle = (i / steps) * Math. PI * 2 ; const dx = radiusKm / ( 111.32 * Math. cos (center[ 1 ] * Math. PI / 180 )); const dy = radiusKm / 110.574 ; coords. push ([center[ 0 ] + Math. cos (angle) * dx, center[ 1 ] + Math. sin (angle) * dy]); } return { type: 'Feature' , geometry: { type: 'Polygon' , coordinates: [coords] } }; } map. on ( 'load' , () => { map. addSource ( 'fuzzy' , { type: 'geojson' , data: makeCircle ([ 14.42 , 50.08 ], 0.5 ) }); map. addLayer ({ id: 'fuzzy-fill' , type: 'fill' , source: 'fuzzy' , paint: { 'fill-color' : '#2196F3' , 'fill-opacity' : 0.15 } }); map. addLayer ({ id: 'fuzzy-border' , type: 'line' , source: 'fuzzy' , paint: { 'line-color' : '#2196F3' , 'line-width' : 2 , 'line-dasharray' : [ 4 , 2 ] } }); }); 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 ()); function makeCircle ( center , radiusKm , steps = 64 ) { const coords = []; for ( let i = 0 ; i <= steps; i ++ ) { const angle = (i / steps) * Math. PI * 2 ; const dx = radiusKm / ( 111.32 * Math. cos (center[ 1 ] * Math. PI / 180 )); const dy = radiusKm / 110.574 ; coords. push ([center[ 0 ] + Math. cos (angle) * dx, center[ 1 ] + Math. sin (angle) * dy]); } return { type: 'Feature' , geometry: { type: 'Polygon' , coordinates: [coords] } }; } map. on ( 'load' , () => { map. addSource ( 'fuzzy' , { type: 'geojson' , data: makeCircle ([ 14.42 , 50.08 ], 0.5 ) }); map. addLayer ({ id: 'fuzzy-fill' , type: 'fill' , source: 'fuzzy' , paint: { 'fill-color' : '#2196F3' , 'fill-opacity' : 0.15 } }); map. addLayer ({ id: 'fuzzy-border' , type: 'line' , source: 'fuzzy' , paint: { 'line-color' : '#2196F3' , 'line-width' : 2 , 'line-dasharray' : [ 4 , 2 ] } }); }); </ 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 ()); function makeCircle ( center , radiusKm , steps = 64 ) { const coords = []; for ( let i = 0 ; i <= steps; i ++ ) { const angle = (i / steps) * Math. PI * 2 ; const dx = radiusKm / ( 111.32 * Math. cos (center[ 1 ] * Math. PI / 180 )); const dy = radiusKm / 110.574 ; coords. push ([center[ 0 ] + Math. cos (angle) * dx, center[ 1 ] + Math. sin (angle) * dy]); } return { type: 'Feature' , geometry: { type: 'Polygon' , coordinates: [coords] } }; } map. on ( 'load' , () => { map. addSource ( 'fuzzy' , { type: 'geojson' , data: makeCircle ([ 14.42 , 50.08 ], 0.5 ) }); map. addLayer ({ id: 'fuzzy-fill' , type: 'fill' , source: 'fuzzy' , paint: { 'fill-color' : '#2196F3' , 'fill-opacity' : 0.15 } }); map. addLayer ({ id: 'fuzzy-border' , type: 'line' , source: 'fuzzy' , paint: { 'line-color' : '#2196F3' , 'line-width' : 2 , 'line-dasharray' : [ 4 , 2 ] } }); }); 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());
function makeCircle(center, radiusKm, steps = 64) {
const coords = [];
for (let i = 0; i <= steps; i++) {
const angle = (i / steps) * Math.PI * 2;
const dx = radiusKm / (111.32 * Math.cos(center[1] * Math.PI / 180));
const dy = radiusKm / 110.574;
coords.push([center[0] + Math.cos(angle) * dx, center[1] + Math.sin(angle) * dy]);
}
return { type: 'Feature', geometry: { type: 'Polygon', coordinates: [coords] } };
}
map.on('load', () => {
map.addSource('fuzzy', { type: 'geojson', data: makeCircle([14.42, 50.08], 0.5) });
map.addLayer({ id: 'fuzzy-fill', type: 'fill', source: 'fuzzy',
paint: { 'fill-color': '#2196F3', 'fill-opacity': 0.15 } });
map.addLayer({ id: 'fuzzy-border', type: 'line', source: 'fuzzy',
paint: { 'line-color': '#2196F3', 'line-width': 2, 'line-dasharray': [4, 2] } });
}); <!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());
function makeCircle(center, radiusKm, steps = 64) {
const coords = [];
for (let i = 0; i <= steps; i++) {
const angle = (i / steps) * Math.PI * 2;
const dx = radiusKm / (111.32 * Math.cos(center[1] * Math.PI / 180));
const dy = radiusKm / 110.574;
coords.push([center[0] + Math.cos(angle) * dx, center[1] + Math.sin(angle) * dy]);
}
return { type: 'Feature', geometry: { type: 'Polygon', coordinates: [coords] } };
}
map.on('load', () => {
map.addSource('fuzzy', { type: 'geojson', data: makeCircle([14.42, 50.08], 0.5) });
map.addLayer({ id: 'fuzzy-fill', type: 'fill', source: 'fuzzy',
paint: { 'fill-color': '#2196F3', 'fill-opacity': 0.15 } });
map.addLayer({ id: 'fuzzy-border', type: 'line', source: 'fuzzy',
paint: { 'line-color': '#2196F3', 'line-width': 2, 'line-dasharray': [4, 2] } });
});
</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());
function makeCircle(center, radiusKm, steps = 64) {
const coords = [];
for (let i = 0; i <= steps; i++) {
const angle = (i / steps) * Math.PI * 2;
const dx = radiusKm / (111.32 * Math.cos(center[1] * Math.PI / 180));
const dy = radiusKm / 110.574;
coords.push([center[0] + Math.cos(angle) * dx, center[1] + Math.sin(angle) * dy]);
}
return { type: 'Feature', geometry: { type: 'Polygon', coordinates: [coords] } };
}
map.on('load', () => {
map.addSource('fuzzy', { type: 'geojson', data: makeCircle([14.42, 50.08], 0.5) });
map.addLayer({ id: 'fuzzy-fill', type: 'fill', source: 'fuzzy',
paint: { 'fill-color': '#2196F3', 'fill-opacity': 0.15 } });
map.addLayer({ id: 'fuzzy-border', type: 'line', source: 'fuzzy',
paint: { 'line-color': '#2196F3', 'line-width': 2, 'line-dasharray': [4, 2] } });
});
