I want to add more controls to myOl3ViewTemplate application. If you can help me add:

  1. draw feature
  2. delete feature
  3. zoom[center] at a certain location

I looked at app.js and tried to add more controls but I couldn't get them to work. As for to zoom at a certain location I tried Bethlehem[South Africa] but the center goes to Congo I don't know why because these coordinates[-28.23333,28.3] says Bethlehem[SA] .

I would like you to help me on application launch to view only South-Africa and zoom at Bethlehem.

2 Answers 2


First, let me recommend this series of tutorials. The relevant parts for you will mostly be in part 3

Here's an example of drawing a feature.

function startDraw(type) {
    if (draw != null) {

    draw = new ol.interaction.Draw({


As far as centering over the Congo is concerned, I'm guessing it's an issue of map projections. I think you should be using spherical mercator projection, as explained in part 1 of the tutorial near the end. Here's a website that will help you go from whatever projection you are using right now to spherical mercator.

In addition to this tutorial, I'd also recommend going through the OL3 workshop as well. Hope this was helpful.


For "3. Zoom[center] at a certain location" have a look at this code:

import Map from 'ol/Map';
import { fromLonLat } from 'ol/proj';

// This will zoom to your provided location.
// Note: I am assuming you have a Map instance as *map*
function zoomToLocation(map, longlat, zoomLevel, duration = 1000) {
    const projectionCode = map.getView().getProjection().getCode();
    // Transforms a coordinate from longitude/latitude to a different projection.
    const center = fromLonLat(longlat, projectionCode);
      zoom: zoomLevel,

certain location is in a form of longitude latitude coodinates pair (Array) - longlat.

More detailed examples with map.animate() can be found in official OpenLayers examples page: https://openlayers.org/en/latest/examples/animation.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.