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;
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