Your first OpenLayers map
Quick answer
This tutorial introduces the four OpenLayers objects that every map is built from: Map, View, Layer and Source. It constructs a minimal page with ol.layer.Tile and ol.source.OSM, and stresses that View defaults to EPSG:3857 metres, so ol.proj.fromLonLat is required before passing longitude and latitude. It also compares OpenLayers with Leaflet and fixes half-drawn maps through map.updateSize. Readers can stand up a correct map and avoid the classic projection mistake.
Key points
- Wrap centre coordinates with ol.proj.fromLonLat before passing them to new ol.View.
- Give the map container an explicit height and include ol.css for control styling.
- Call map.updateSize after layout changes when the canvas renders only partially.
Example
var center = ol.proj.fromLonLat([116.391263, 39.907359]);
var view = new ol.View({
center: center,
zoom: 12
});<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() })
],
view: new ol.View({
center: ol.proj.fromLonLat([116.391263, 39.907359]),
zoom: 12
})
});
</script>Notes
- Raw [116, 39] treated as metres puts the view near the Gulf of Guinea.
- Geometry built from unprojected degrees sits outside the visible map extent.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Your first OpenLayers map. https://www.jingweizhi.com/en/openlayers/tutorials/minimal-scene.html (accessed 2026-11-03).