I have a sting that I get from a server and I need to loop through it. This string is actually a geojson of locations that I want to visualize in a map using openLayers. Here is an example of the returned string:
{crs:
{"type":"name",
"properties":{
"name":"ESPG:4326"
},
},
"features":[{"properties":{
"image":"IMAGE1"},
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[0,0]
}},{"properties":{
"image":"IMAGE2"},
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[10,10]
}},{"properties":{
"image":"IMAGE3"},
"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[75,99]
}}]
,type:"FeatureCollection"
}
As you can see each feature
of features
has some properties
and a geometry
. I would like to create a new layer
(ol.layer.Vector), that for each element of the features will draw a point with the correspoinding coordinates and image. With the following code I'm managing to draw all the points in the map however with a predefined image. I guess I should loop through this string and get the coordinates and image and somehow create a layer (or many layers?) with those values as a source and style accordingly. Any ideas??Thanks!
//map is the actual map where the images load
//responseText is the String that I get from the server
//predefinedImage is actually a predefined image that I use as icon for the points.
//If I complitelly remove the "style" from geojson_layer it sets the image to a default value.
var geoJSONsource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(responseText)
});
geojson_layer = new ol.layer.Vector({
source: geoJSONsource,
style: predefinedImage
});
map.addLayer(geojson_layer);
IMAGE1
etc. represents some value which is appended to a link of a service ( java servlet ). So for instance, after i get somehow the valueIMAGE1
I will have a string in javascript like so:var imageSource = 'http://localhost:8080/project/getImage?' + IMAGE1
; – user2983190