[GIS] How to add markers and attributes contained in JSON data to an OpenLayers 3 vector layer

jqueryjsonopenlayers

My question is similar to a previous question I asked (Adding attributes contained in JSON data to OpenLayers popup?). However, since I originally asked this question, I have upgraded to OpenLayers 3 (OL3) and am having some difficulties.

I am currently displaying an OL3 map using the following snippet code:

    var sourceBingMaps = new ol.source.BingMaps({
    key: '<My API Key>',
    imagerySet: 'Road',
    culture: 'en-us'
   });
    // Microsoft Bing tile source for roads
   var bingMapsRoad = new ol.layer.Tile({
    preload: Infinity,
    source: sourceBingMaps
   });
    var bingMapsAerial = new ol.layer.Tile({
    preload: Infinity,
    source: new ol.source.BingMaps({
    key: '<My API Key>',
    imagerySet: 'AerialWithLabels',
    })
   });

   var map = new ol.Map({
    renderer: 'canvas',
    layers: [bingMapsRoad,bingMapsAerial],
    controls: [],
    target: 'map',
    view: new ol.View({
    center: ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857'),
    zoom: 3,
    minZoom: 3,
    maxZoom: 19
    })
   });

The code displays the BING layer without issue. I have a JSON file, with a sample of the data below:

"LOCATION_A": {
      "latitude": 10.2070,
      "longitude": 25.3215,
      "altitude": 1.2,
      "status": "CLOSED",
      "serverAddress": "192.168.0.1"
 }

I am using the code below with jQuery to cycle through the JSON file and place the markers on the BING map layer.

$.getJSON('json/XMIT.json', function(data) {
      $.each(data.markers, function(key, val) {
        var pointFeatures = [];
        var markerName = this.name;
        var markerLocation = this.location;
        var markerLatitude = this.latitude;
        var markerLongitude = this.longitude;
        var markerAltitude = this.altitude;
        var markerStatus = this.commsState;
        var pointGeometry = new ol.geom.Point(ol.proj.transform([markerLongitude, markerLatitude], 'EPSG:4326', 'EPSG:3857'));
        var pointAttributes = {'location': markerLocation, 'latitude': markerLatitude, 
                               'longitude': markerLongitude, 'altitude': markerAltitude, 
                              };


        var pointFeature = new ol.Feature(pointGeometry, pointAttributes, {
            title: markerLocation,
            pointRadius: 16,
            });

        var vectorSource = new.ol.source.Vector({
            projection: 'EPSG:4326'
        });
        vectorSource.addFeatures([pointFeature]);

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

When this code is executed, the browser console provides the following error:

expected expression, got '.'

In regards to this variable:

var vectorSource = new.ol.source.Vector({
        projection: 'EPSG:4326'
        });

Best Answer

You need to create the layer and add it to the map's list of layers. You can just add the properties to the feature and then add that feature to the source for the layer. You can later access any of these properties with feature.get('altitude') for example. I would try doing something like this:

var markerSource = new ol.source.Vector(),
  markerLayer = new ol.layer.Vector({
    source: markerSource
  });

var map = new ol.Map({
renderer: 'canvas',
layers: [bingMapsRoad,bingMapsAerial,markerLayer],
...

$.getJSON('json/XMIT.json', function(data) {
  $.each(data.markers, function(key, val) {
    var newMarker = new ol.Feature({
      markerName: this.name,
      markerLocation: this.location;
      markerLatitude: this.latitude;
      markerLongitude: this.longitude;
      altitude: this.altitude;
      markerStatus: this.commsState;
      geometry: new ol.geom.Point(ol.proj.transform([markerLongitude, markerLatitude], 'EPSG:4326', 'EPSG:3857'));
      pointAttributes: {'location': markerLocation, 'latitude': markerLatitude, 
                           'longitude': markerLongitude, 'altitude': markerAltitude, 
    });
    markerSource.addFeature(newMarker);
  };

});
Related Question