code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
var polygon = new ol. Feature ({ geometry: new ol.geom. Polygon ([[ ol.proj. fromLonLat ([ 2.33 , 48.87 ]), ol.proj. fromLonLat ([ 2.37 , 48.87 ]), ol.proj. fromLonLat ([ 2.37 , 48.85 ]), ol.proj. fromLonLat ([ 2.33 , 48.85 ]), ol.proj. fromLonLat ([ 2.33 , 48.87 ]) ]]) }); var vectorLayer = new ol.layer. Vector ({ source: new ol.source. Vector ({ features: [polygon] }), style: new ol.style. Style ({ fill: new ol.style. Fill ({ color: 'rgba(230, 57, 70, 0.3)' }), stroke: new ol.style. Stroke ({ color: '#e63946' , width: 2 }) }) }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), vectorLayer ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.35 , 48.86 ]), zoom: 14 }) }); 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/ol@10.10.0/ol.css" /> < script src = "https://unpkg.com/ol@10.10.0/dist/ol.js" ></ script > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > var polygon = new ol. Feature ({ geometry: new ol.geom. Polygon ([[ ol.proj. fromLonLat ([ 2.33 , 48.87 ]), ol.proj. fromLonLat ([ 2.37 , 48.87 ]), ol.proj. fromLonLat ([ 2.37 , 48.85 ]), ol.proj. fromLonLat ([ 2.33 , 48.85 ]), ol.proj. fromLonLat ([ 2.33 , 48.87 ]) ]]) }); var vectorLayer = new ol.layer. Vector ({ source: new ol.source. Vector ({ features: [polygon] }), style: new ol.style. Style ({ fill: new ol.style. Fill ({ color: 'rgba(230, 57, 70, 0.3)' }), stroke: new ol.style. Stroke ({ color: '#e63946' , width: 2 }) }) }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), vectorLayer ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.35 , 48.86 ]), zoom: 14 }) }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import Map from 'ol/Map' ; import View from 'ol/View' ; import TileLayer from 'ol/layer/Tile' ; import { fromLonLat } from 'ol/proj' ; import 'ol/ol.css' ; var polygon = new ol. Feature ({ geometry: new ol.geom. Polygon ([[ ol.proj. fromLonLat ([ 2.33 , 48.87 ]), ol.proj. fromLonLat ([ 2.37 , 48.87 ]), ol.proj. fromLonLat ([ 2.37 , 48.85 ]), ol.proj. fromLonLat ([ 2.33 , 48.85 ]), ol.proj. fromLonLat ([ 2.33 , 48.87 ]) ]]) }); var vectorLayer = new ol.layer. Vector ({ source: new ol.source. Vector ({ features: [polygon] }), style: new ol.style. Style ({ fill: new ol.style. Fill ({ color: 'rgba(230, 57, 70, 0.3)' }), stroke: new ol.style. Stroke ({ color: '#e63946' , width: 2 }) }) }); var map = new ol. Map ({ target: 'map' , layers: [ new ol.layer. Tile ({ source: new ol.source. XYZ ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }), vectorLayer ], view: new ol. View ({ center: ol.proj. fromLonLat ([ 2.35 , 48.86 ]), zoom: 14 }) }); var polygon = new ol.Feature({
geometry: new ol.geom.Polygon([[
ol.proj.fromLonLat([2.33, 48.87]),
ol.proj.fromLonLat([2.37, 48.87]),
ol.proj.fromLonLat([2.37, 48.85]),
ol.proj.fromLonLat([2.33, 48.85]),
ol.proj.fromLonLat([2.33, 48.87])
]])
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({ features: [polygon] }),
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(230, 57, 70, 0.3)' }),
stroke: new ol.style.Stroke({ color: '#e63946', width: 2 })
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
vectorLayer
],
view: new ol.View({ center: ol.proj.fromLonLat([2.35, 48.86]), zoom: 14 })
}); <!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/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var polygon = new ol.Feature({
geometry: new ol.geom.Polygon([[
ol.proj.fromLonLat([2.33, 48.87]),
ol.proj.fromLonLat([2.37, 48.87]),
ol.proj.fromLonLat([2.37, 48.85]),
ol.proj.fromLonLat([2.33, 48.85]),
ol.proj.fromLonLat([2.33, 48.87])
]])
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({ features: [polygon] }),
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(230, 57, 70, 0.3)' }),
stroke: new ol.style.Stroke({ color: '#e63946', width: 2 })
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
vectorLayer
],
view: new ol.View({ center: ol.proj.fromLonLat([2.35, 48.86]), zoom: 14 })
});
</script>
</body>
</html> import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';
var polygon = new ol.Feature({
geometry: new ol.geom.Polygon([[
ol.proj.fromLonLat([2.33, 48.87]),
ol.proj.fromLonLat([2.37, 48.87]),
ol.proj.fromLonLat([2.37, 48.85]),
ol.proj.fromLonLat([2.33, 48.85]),
ol.proj.fromLonLat([2.33, 48.87])
]])
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({ features: [polygon] }),
style: new ol.style.Style({
fill: new ol.style.Fill({ color: 'rgba(230, 57, 70, 0.3)' }),
stroke: new ol.style.Stroke({ color: '#e63946', width: 2 })
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '© <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
vectorLayer
],
view: new ol.View({ center: ol.proj.fromLonLat([2.35, 48.86]), zoom: 14 })
});
