OpenLayers Example 4

author(s): Mike Graves

by cs09g

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<div id="test" style="width:500px;height:500px;"></div>

CSS

html, body {
    width: auto;
    height: 98%;
}
 
#map {
    height: 90%;
}

JavaScript

const targetElement = document.getElementById('test');

const vectorSource = new ol.source.Vector({});
const map = new ol.Map({
  layers: [
    new ol.layer.Vector({
      source: vectorSource,
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
  }),
  target: targetElement
});

const coord = [-11690933.557134805, 4804814.791959302]

vectorSource.addFeature(new ol.Feature({
  geometry: new ol.geom.Point(coord),
}));
map.renderSync();
const pixel = map.getPixelFromCoordinate(coord)
console.log(pixel);