I have different figures created in my Django project.(icon with text, point,circle etc) but I try to create a simple popup with the coordinates when I click the mouse but I have a error:

My code is from an example, seen here

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
    view: new ol.View({
        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6

var popup = new ol.Overlay.Popup();

map.on('click', function(evt) {
    var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
    popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' + prettyCoord + '</p></div>');

I get this error:

Uncaught TypeError: ol.Overlay.Popup is not a constructor.

when trying to create --> var popup = new ol.Overlay.Popup();


1 Answer 1


You have not mentioned what are the javaScript and css files you have used in your page.

By looking at the error ol.Overlay.Popup is not a constructor, I understand that you have included only the openlayers basic javaScript and css.

For using the Popup functionality, you need to include the ol-ext.js and ol-ext.css in you page.

You can download the Openlayers extension from here.

I have tested your code after including the above files. It worked fine.

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.