1

I am working on a website using jQuery, Javascript, and OpenLayers. I am adding markers to an OpenLayers Vector layer using the following code:

var pointLayer = new OpenLayers.Layer.Vector("POI Markers", {projection: "EPSG:4326"});
$.getJSON('json/DATA.json', function(data) {
  $.each(data.transmitters, function() {
    var pointFeatures = [];
    var px = this.longitude;
    var py = this.latitude;
    // Create a lonlat instance and transform it to the map projection.
    var lonlat = new OpenLayers.LonLat(px, py);
    lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

    var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
    var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, null, {
        pointRadius: 16,
        fillOpacity: 0.7,
        externalGraphic: 'marker.png',
    });

    pointFeatures.push(pointFeature);
    pointLayer.addFeatures(pointFeatures);
  });
});

I am using the following code to select markers and create popups:

 var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, {
  hover: true,
  onSelect: function(feature) {
    var layer = feature.layer;
    feature.style.fillOpacity = 1;
    feature.style.pointRadius = 20;
    layer.drawFeature(feature);

        var content = "<div><strong>Feature:</strong> <br/>" + feature.id +  
            "<br/><br/><strong>Location:</strong> <br/>" + feature.geometry +"</div>";

        var popup = new OpenLayers.Popup.FramedCloud(
        feature.id + "_popup", 
        feature.geometry.getBounds().getCenterLonLat(),
        new OpenLayers.Size(250, 100),
        content,
        null, 
        false, 
        null);
        feature.popup = popup;
        map.addPopup(popup);
    },
    onUnselect: function(feature) {
        var layer = feature.layer;
        feature.style.fillOpacity = 0.7;
        feature.style.pointRadius = 16;
        feature.renderIntent = null;
        layer.drawFeature(feature);

        map.removePopup(feature.popup);
    }
});
map.addControl(selectControl);
selectControl.activate();

As you can see, the popup contains information regarding the feature id and geometry. What I would like to do is add information that is contained inside the DATA.json file referenced in the first code block to the corresponding popup.

I am using a large JSON file. The following is a sample:

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

I would like to add the latitude, longitude and status information to the corresponding popup so when the user selects a popup, they view this information.

In addition, it would be useful to change the "externalGraphic" file to reflect the status of each LOCATION. Continuing to use the above JSON file, if a POI were closed, the "externalGraphic" file should be one PNG file, while if the POI were open, it should be another.

I am using jQuery in this project.

2

You should try to use the builtin method of adding GeoJSON file. This gives a better and standard representation of features.

You can add it like this

var pointlayer = new OpenLayers.Layer.Vector("POI Markers", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: "json/DATA.json",
        format: new OpenLayers.Format.GeoJSON()
    }),
    strategies: [
        new OpenLayers.Strategy.Fixed()
    ]
});

This will give you point features with all the attributes (right now your method is getting only points)

then in Select Control, you can access the attribute value as feature.attributes['status']

Additionally you can also change the external Graphic using stylemap property of Layer.vector You should post it as a separate question.

  • I am not sure how to use the builtin method of GeoJSON when the data is in a JSON file. Can you provide me more information? Thanks! – GIS Student May 9 '14 at 18:12
1

A short workaround

var pointLayer = new OpenLayers.Layer.Vector("POI Markers", {projection: "EPSG:4326"});
    $.getJSON('json/DATA.json', function(data) {
    $.each(data.transmitters, function() {
    var pointFeatures = [];
    var px = this.longitude;
    var py = this.latitude;
// Create a lonlat instance and transform it to the map projection.
    var lonlat = new OpenLayers.LonLat(px, py);
    lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
var pointAttributes = {'altitude':this.altitude,'status':this.status,'serverAddress':this.serverAddress}
var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, pointAttributes, {
    pointRadius: 16,
    fillOpacity: 0.7,
    externalGraphic: 'marker.png',
});

pointFeatures.push(pointFeature);
pointLayer.addFeatures(pointFeatures);
});
});
  • Thank you for your suggestion! This does not solve the problem as the information is not shown when the popup is selected. How would the code below be modified to display the information based on your suggestion? var content = "<div><strong>Feature:</strong> <br/>" + feature.id + "<br/><br/><strong>Location:</strong> <br/>" + feature.geometry +"</div>"; – GIS Student May 9 '14 at 18:10
  • I re-read your answer from above and just noticed This will give you point features with all the attributes (right now your method is getting only points) then in Select Control, you can access the attribute value as feature.attributes['status'] which works wonderfully! Thank you for answering my question!!! – GIS Student May 9 '14 at 18:34

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.