How can I plot Point type geometry in OpenLayers from a JSON file

Question

I have a web page which contains a MAP instance which is created using OpenLayers. It is supposed to display all straits in the world by Point type geometry. The data (Latitude,Longitude) is available in JSON format. I was able to draw a single Point on map and give it a Style like red dot etc. but since I am naive in openlayers I quiet couldn't figure out a way to do the same for all the Points in JSON file. So my question is how can I draw all the points from JSON file on the map and provide some styling to them like coloring and showing the name beside the point from JSON data. I am using OpenLayers 5.1.3 with jQuery 2.3, my code

<body> 
<div id="map" class="map"></div>

<script type="text/javascript">
     var raster = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

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

    function styleFunction(feature) { 
                var geometry = feature.getGeometry();
                console.log(feature);

                var styles = [
                    new ol.style.Style({   
                        image: new ol.style.Circle({
                            radius: 3,
                            stroke: new ol.style.Stroke({
                                color: [180, 0, 0, 1]
                            }),
                            fill: new ol.style.Fill({
                                color: [180, 0, 0, 0.3]
                            })
                        })
                    })
                ];
               return styles;
    }

     var vectorPoints = new ol.layer.Vector({
                source: vectorSource,
                style: styleFunction
            });
     const map = new ol.Map({
            layers: [raster,vectorPoints],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
     });
</script>
</body>

and the json data

[{
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 67.259166666667,
    "longitude": 26.082222222222,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 280000,
    "preferredGazetteerName": "Denmark Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  },
  {
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 55.31,
    "longitude": 14.49,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 35000,
    "preferredGazetteerName": "Bornholm Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  }]

How to show the preferredGazetteerName along marker

var features = data.map(item => { //iterate through array...
        let longitude = item.longitude,
            latitude = item.latitude,
            iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                    'EPSG:3857')),
                name: item.preferredGazetteerName

            }),
iconStyle = new ol.style.Style({
                image: new ol.style.Icon ({
                    anchor: [0.3, 10],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: '//openlayers.org/en/v3.20.1/examples/data/icon.png'
                }),
                text: new ol.style.text({
                    text: "sample"
                })
            });
iconFeature.setStyle(iconStyle);
        return iconFeature;

Narendra Jadhav · Accepted Answer · 2018-08-22T09:14:56.530

For this you need to use ol.Feature() and also need to do looping for your json data.

DEMO

var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
    }),

    vectorSource = new ol.source.Vector({
        wrapX: false
    }),

    json = [{
        "gazetteerSource": "ASFA thesaurus",
        "placeType": "Strait",
        "latitude": 67.259166666667,
        "longitude": 26.082222222222,
        "minLatitude": null,
        "minLongitude": null,
        "maxLatitude": null,
        "maxLongitude": null,
        "precision": 280000,
        "preferredGazetteerName": "Denmark Strait",
        "preferredGazetteerNameLang": "English",
        "status": "standard"
    }, {
        "gazetteerSource": "ASFA thesaurus",
        "placeType": "Strait",
        "latitude": 55.31,
        "longitude": 14.49,
        "minLatitude": null,
        "minLongitude": null,
        "maxLatitude": null,
        "maxLongitude": null,
        "precision": 35000,
        "preferredGazetteerName": "Bornholm Strait",
        "preferredGazetteerNameLang": "English",
        "status": "standard"
    }],


    /**
     * Elements that make up the popup.
     */
    container = document.getElementById('popup'),
    content = document.getElementById('popup-content'),
    closer = document.getElementById('popup-closer'),

    /**
     * Create an overlay to anchor the popup to the map.
     */
    overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });

/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 */
closer.onclick = function() {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
};

function styleFunction(feature) {
    var geometry = feature.getGeometry();
    console.log(feature);

    var styles = [
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: 3,
                stroke: new ol.style.Stroke({
                    color: [180, 0, 0, 1]
                }),
                fill: new ol.style.Fill({
                    color: [180, 0, 0, 0.3]
                })
            })
        })
    ];
    return styles;
}

var vectorPoints = new ol.layer.Vector({
    source: vectorSource,
    style: styleFunction
});

const map = new ol.Map({
    layers: [raster, vectorPoints],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 1
    }),

    overlays: [overlay]
});




/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function(evt) {
    let f = map.forEachFeatureAtPixel(
        evt.pixel,
        function(ft, layer) {
            return ft;
        }
    );

    if (f && f.get('type') == 'click') {
        let coordinate = evt.coordinate;

        content.innerHTML = '<p>You clicked here:</p><code>' + f.get('desc');
        overlay.setPosition(coordinate);
    }
});


function addMarker(data) {

    var features = data.map(item => { //iterate through array...
        let longitude = item.longitude,
            latitude = item.latitude,
            iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                    'EPSG:3857')),

                type: 'click',
                desc: item.preferredGazetteerName,
            }),
            iconStyle = new ol.style.Style({
                image: new ol.style.Icon( /** @type {module:ol/style/Icon~Options} */ ({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: '//openlayers.org/en/v3.20.1/examples/data/icon.png'
                })),
                text: new ol.style.Text({
                    text: item.preferredGazetteerName
                })
            });

        iconFeature.setStyle(iconStyle);
        return iconFeature;
    });

    var vectorSource = new ol.source.Vector({
        features: features //add an array of features
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);

}

addMarker(json);

.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet" />

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

<div id="map" class="map"></div>

<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

For showing popup on click of marker follow this popup.html

I am referring this [https://openlayers.org/en/latest/examples/vector-labels.html] — capnam, Aug 22 '18 at 07:00
that is not what I intend to do. See I want to show some text along the marker. like this [https://ibb.co/chxmSe] — capnam, Aug 22 '18 at 08:52
ok @shrinath need to be check first because it's customise marker — Narendra Jadhav, Aug 22 '18 at 08:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178578/discussion-between-shrinath-and-narendra-jadhav). — capnam, Aug 23 '18 at 05:13

capnam · Answer 2 · 2018-08-22T09:10:54.883

0

I got it, I was missing use of style class

   text : new ol.style.Text({
                        font: '10px Verdana',
                        text: item.preferredGazetteerName,
                        fill: new ol.style.Fill({
                            color: [64, 64, 64, 1]
                        })
                    })

edited Aug 22 '18 at 09:10

answered Aug 22 '18 at 09:03

capnam

429
9
25

How can I plot Point type geometry in OpenLayers from a JSON file

2 Answers2