I am working on a heat map that will show by region the number of issues found in which area. The code are not displaying any error on console, my functions which parse my data are ok (I have just debbuged all of them), but for some reason I don't know, the features are not displayed.

This is my code

var listaBairros = document.getElementById("lista-bairros").value;
var lotes = [];

lotes = lotes_parser();

var bairros = assignFeaturesToPolygon();        

var styles = [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
    new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'orange'
        geometry: function (feature) {
            // return the coordinates of the first ring of the polygon
            var coordinates = feature.getGeometry().getCoordinates()[0];
            return new ol.geom.MultiPoint(coordinates);

var osm = new ol.layer.Tile({
    source: new ol.source.OSM()

var source = new ol.source.Vector({
    features: bairros

var layer = new ol.layer.Vector({
    source: source,
    style: styles

var map = new ol.Map({
    layers: [osm, layer],
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([-46.539028170768447, -23.952416758520052], 'EPSG:3857'),
        zoom: 11

function polygonToArray(entrada) {        
    var removePolygon = entrada.replace("POLYGON ((", "").replace("))", "");
    var points = removePolygon.split(", ");
    var finalPoints = [];
    points.forEach(function (point) {
        var temporaryPoint = point.split(" ");
        temporaryPoint[0] = Number(temporaryPoint[0]);
        temporaryPoint[1] = parseFloat(temporaryPoint[1]);
    return finalPoints;

function assignFeaturesToPolygon() {
    var lot = [];
    lotes.forEach(function (value, index) {
        var new_feature = criarFeature(value);
    return lot;

function  criarFeature (geometria) {
    var feature = new ol.Feature({ geometry: new ol.geom.Polygon([geometria]) });
    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
    return feature;

function lotes_parser() {
    var bairros_separados = [];
    var bairros_parser = listaBairros.split(" _ ");
    bairros_parser.forEach(function (lote, index) {
    return bairros_separados;

What am I doing wrong?

Before you ask about my projection, that is everything ok with them.

This is the input field that my first line is reading (I used pastebin because is too many characters to write here)


  • Have you checed your data is correct? I've found one polygon which is not displayed but there'll be few more I guess.
    – Chase Choi
    Mar 8 '18 at 0:49
  • 1
    put first polyon only, it displays but with second which is not displayed, it doesn't. jsfiddle.net/Lw05gmdr/11
    – Chase Choi
    Mar 8 '18 at 0:51
  • Create a proper GeoJSON file with your polygons and use the GeoJSON source in OpenLayers. Much easier and less error prone.
    – jgrocha
    Mar 8 '18 at 9:19
  • The data is correct, I've just found that are some freaking ")" and "(" randomly in the middle of the data, these should not be there and this is what is driving me crazy. I'll try to remove then in my JS Mar 8 '18 at 12:37
  • Thanks for your help, guys! The data I've been working on always piss me off because of these things broken that does not make sense. Mar 8 '18 at 12:44

Your Answer

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

Browse other questions tagged or ask your own question.