0

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'
        });
  • The error you obtain is due to a typo, write instead var vectorSource = new ol.source.Vector({. Rather than pasting a lot of code, consider setting up and sharing a JSFiddle, this way it's easier for others to help you. – Germán Carrillo Feb 23 '15 at 23:43
  • 1
    Thank you for the help and your suggestion about a JSFiddle. I have corrected the typo and while my BING map layer now loads fine, there are still no markers shown. I believe I need to add the vectorLayer to the map in order for these to be seen. Does this sound reasonable to you? I will post a JSFiddle link soon. – GIS Student Feb 24 '15 at 15:52
0

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

}); 

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.