Using OpenLayers 4, I want to make a map giving the ability to draw shapes AND features. For this I want to combine the draw shapes example with the draw features example, both given on the website of OpenLayers.

I have succeeded in making a point, circle, or polygon from the draw Shapes example. When I select square or Box from the dropdown (both from the Draw features example), I get an error and the map pan around.

Here is my code:

   <!DOCTYPE html>
        <meta charset="utf-8">
        <meta name="viewport">
        <title>Draw shapes and features</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
        <div id="map" class="map"></div>
        <form class="form-inline">
          <label>Geometry type &nbsp;</label>
          <select id="type">
            <option value="None">None</option>
            <option value="Point">Point</option>
            <option value="Circle">Circle</option>
            <option value="Square">Square</option>
            <option value="Box">Box</option>
            <option value="Polygon">Polygon</option>
        var raster = new ol.layer.Tile({
            source: new ol.source.OSM()

        var source = new ol.source.Vector({wrapX: false});

        var vector = new ol.layer.Vector({
            source: source

        var map = new ol.Map({
            layers: [raster, vector],
            target: 'map',
            view: new ol.View({
              center: [-11000000, 4600000],
              zoom: 4

        var typeSelect = document.getElementById('type');

        var draw; // global so we can remove it later
        function addInteraction() {
            var value = typeSelect.value;
            if (value === 'None'){

            } else {
                var geometryFunction;
                if(value !== 'None' || value !== 'Square' || value !=='Box'){
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */(typeSelect.value)
                } else if(value === 'Square'){
                    value = 'Circle';
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */ (value),
                        geometryFunction: geometryFunction
                } else if(value === 'Box'){
                    value = 'Circle';
                    geometryFunction = ol.interaction.Draw.createBox();
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */ (value),
                        geometryFunction: geometryFunction

        /*Handle change event */
        typeSelect.onchange = function() {


See my jsFiddle to see my issue.

How do I combine the 'draw shapes' and 'draw features' in one map using OpenLayers?


You made a mistake on the condition.

if(value !== 'None' || value !== 'Square' || value !=='Box'){ should be
if(value !== 'None' && value !== 'Square' && value !=='Box'){

with your condition, though the value is 'Square', it won't go to else if (value === 'Square') because value !== 'None' is true.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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