4

I have some GeoJson from the USGS as follows:

{"type":"Feature","properties":{"mag":4.3,"place":"30km ESE of Jarm, Afghanistan","time":1382069641720,"updated":1382071013039,"tz":270,"url":"http://earthquake.usgs.gov/earthquakes/eventpage/usb000kg6q","detail":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/usb000kg6q.geojson","felt":0,"cdi":1,"mmi":null,"alert":null,"status":"reviewed","tsunami":null,"sig":284,"net":"us","code":"b000kg6q","ids":",usb000kg6q,","sources":",us,","types":",cap,dyfi,general-link,geoserve,nearby-cities,origin,phase-data,tectonic-summary,","nst":null,"dmin":2.372,"rms":0.49,"gap":112,"magType":"mb","type":"earthquake","title":"M 4.3 - 30km ESE of Jarm, Afghanistan"},"geometry":{"type":"Point","coordinates":[71.1215,36.7111,215.63]},"id":"usb000kg6q"},

The geometry contains 3 dimensional data, where it is necessary to set the GeoJSON.ignoreExtraDims parameter to true to ignore that third dimension to load the Geojson into a Vector Layer

This third dimension appears to be the depth of the Earthquake! How can i get access to this if it does not appear in the data in the Vector Layer (It does not, I have checked, it is just ignored)

  • Perhaps you could pre-process it somehow (server side), but maybe an alternative approach (KML) might be easier to handle. – BradHards Oct 19 '13 at 23:22
1

I feel that it is possible to process the data on the client side itself. In your previous question, you have indicated that you are using a handler for the get request. In the handler, you could process the data received, and add the depth value as an attribute in the properties of each feature.

I would use something like this:

function handler(request) {

var geojson_format = new OpenLayers.Format.GeoJSON({
    'internalProjection': map.baseLayer.projection,
    'externalProjection': new OpenLayers.Projection("EPSG:4326")
});
geojson_format.ignoreExtraDims=true;
var processedData=ExtractZvalue(request.responseText) //this is the addition
vectorLayer.addFeatures(geojson_format.read(processedData));
}


function ExtractZvalue(ob){
    var features=ob["features"];
    var featCount=features.length;

    //iterate over each feature
    for(var i=0;i<featCount;i++){
        var f=features[i];
        var geom=f["geometry"];
        var coordinates=geom["coordinates"];
        var dep=coordinates[2]; //third coordinate
        var prop=f["properties"];
        prop["depth"]=dep;
    }

    return ob;
}

Another Alternative is that you could edit the parseFeature Function of the OpenLayers.Format.GeoJSON class, to do something similar.

|improve this answer|||||
  • I have a solution, have posted it as an Answer. Thanks fir the pointers in the right direction. – Mark Cupitt Oct 21 '13 at 12:33
1

Ok, the challenge was set by @Devdatta Tengshe (thanks for the pointer in the right direction) and I am happy to report that the problem is solved. All in all I have 5 days invested in this, so to help others, here is a complete set of working code that others can use/modify.

Here is what the end result looks like, I added layers with the Tectonic Plates, Trenches and ridges in as well so the Quakes can be overlaid on these for reference

enter image description here

Here is the code:

            //======================================================================================================================
            // EARTH QUAKE STYLE MAP
            // Displays diferent Circles Radius depending on Magnitude and also colours them depending on Magnitude
            //======================================================================================================================


                        var context = {
                            getColor: function(feature) {
                                if (feature.attributes["mag"] > 5.5 )
                                    {
                                        return "red";
                                    }
                                if (feature.attributes["mag"] < 5.6 && feature.attributes["mag"] > 3.5 )
                                    {
                                        return "orange";
                                    }
                                 if (feature.attributes["mag"] < 3.6 )
                                    {
                                        return "green";
                                    }

                            },
                            getSize: function(feature) {
                                var zoom=map.getZoom();
                                var mag = feature.attributes["mag"];
                                var size = (4 + (6 * mag )) + (zoom * 4);

                                return size;
                            },
                            getLabel: function(feature) {
                                var zoom=map.getZoom();
                                var txt;

                                //debugger;

                                if (zoom < 10)
                                {
                                    txt = feature.attributes["mag"];                    
                                }
                                if ( zoom > 9 && zoom < 15)
                                {
                                    txt = 'Magnitude: ' + feature.attributes["mag"] + "\n" + "Depth: "  + feature.attributes["depth"] + "km" ;                  
                                }
                                if ( zoom > 14 )
                                {
                                    txt = 'Magnitude: ' + feature.attributes["mag"] + "\n" + "Depth: " + feature.attributes["depth"] + "km";                    
                                }

                                return txt;
                            },
                            getFont: function(feature) {
                                var zoom=map.getZoom();
                                var txt;

                                //debugger;

                                if (zoom < 10)
                                {
                                    txt = '10px';                   
                                }
                                if ( zoom > 9 && zoom < 15)
                                {
                                    txt = '14px';                   
                                }
                                if ( zoom > 14 )
                                {
                                    txt = '18px';                   
                                }

                                return txt;
                            },
                            getFontColor: function(feature) {
                                var zoom=map.getZoom();
                                var txt;

                                //debugger;

                                if (zoom < 10)
                                {
                                    txt = 'white';                  
                                }
                                if ( zoom > 9 && zoom < 15)
                                {
                                    txt = 'black';                  
                                }
                                if ( zoom > 14 )
                                {
                                    txt = 'black';                  
                                }

                                return txt;
                            },
                            getOutlineColor: function(feature) {
                                var zoom=map.getZoom();
                                var txt;

                                //debugger;

                                if (zoom < 11)
                                {
                                    txt = 'black';                  
                                }
                                if ( zoom > 10 )
                                {
                                    txt = 'white';                  
                                }

                                return txt;
                            }

                        };
                        var template = {
                            pointRadius: "${getSize}", // using context.getSize(feature)
                            fillColor: "${getColor}", // using context.getColor(feature)
                            strokeColor: "${getColor}", // using context.getColor(feature)
                            strokeWidth: 0,
                            label : "${getLabel}",
                            fillOpacity: 0.5,
                            fontColor: "${getFontColor}",
                            fontSize: "${getFont}",
                            fontFamily: "Verdana, Geneva, Arial, sans-serif",
                            fontWeight: "normal",
                            labelAlign: "cm",
                            labelXOffset: "0",
                            labelYOffset: "0",
                            labelOutlineColor: "${getOutlineColor}",
                            labelOutlineWidth: 1


                        };
                        var eqStyle = new OpenLayers.Style(template, {context: context});



            //===========================================================================================================================================
            // Set JSON format variables 
            //===========================================================================================================================================

            // Note, projections are required or data will not display on te map
                    var geojson_format = new OpenLayers.Format.GeoJSON({

                                    'internalProjection': map.baseLayer.projection,
                                    'externalProjection': wgs84,
                                    ignoreExtraDims:true

                                    });

                    var json_format = new OpenLayers.Format.JSON({
                                //    ignoreExtraDims:true
                                    });

            //===========================================================================================================================================
            // Extract Earthquake Thrid Dimensions - Depth
            //===========================================================================================================================================

                    function ExtractDepthValue(featureList)
                    {

            // Parse the geoJson data as JSON data and dig out the Z Dimension which is the Depth
            // Parse the GeoJson Data so we can add the Depth back into the array
            // Assumes that the arrays of JSOn and GeoJson are parallel, which is a reasonable assumption as they are from the same 
            // data passed into the function

                        var orgFeatures=json_format.read(featureList);
                        var modFeatures=geojson_format.read(featureList);


                        //iterate over each feature and dig out the depth from the third dimension
                        for(var i=0; i < orgFeatures.features.length; i++ )
                        {
                            modFeatures[i].attributes.depth = orgFeatures.features[i].geometry.coordinates[2]; //third coordinate
                         }
            // Return object with modified features, reprojected into the map projection from wgs84
                        return modFeatures;
                    }


            //===========================================================================================================================================
            // Load an Earthquake Layer
            //===========================================================================================================================================

                                var newlayer = new OpenLayers.Layer.Vector(
                                            layername, 
                                            {
                                            styleMap: new OpenLayers.StyleMap(styletouse),
                                            projection: wgs84,                          

            //It does not like teh Fixed Strategy, but layer seems to work quite well without it
            //                              strategies: [new OpenLayers.Strategy.Fixed()],


                                            eventListeners: {
                                                        "loadstart": layerLoadStart,
                                                        "loadend": layerLoadEnd
                                                        }

                                            }
                                    );

                                map.addLayers([newlayer]);
                                map.setLayerIndex(newlayer,map.getNumLayers());
                                saveLayers();

            // Get the data from the server, append a random string to ensure we do not get a cached copy
                                var request = OpenLayers.Request.GET({
                                    url: urlstring + '?' + forcedownload,

            // After data loaded, go and oarse out teh Z Depth
                                    callback: function(request) {
                                                                var processedData=ExtractDepthValue(request.responseText);

            // Note geojson_format.read not needed as data is returned already parsed and reprojected
                                                                newlayer.addFeatures(processedData);
                                                                }
                                });                 
|improve this answer|||||
0

Well, I spent the day looking at this in depth. The only way to accomplish this as far as I can tell is as follows:

  1. Load the USGS Feed to a server at regular intervals
  2. Post Process the Feed and extract the depth form the Z component
  3. Add the depth as an additional field in either kml or Geojson
  4. Write the modified feed to the Application

Downside is that the Server has to pass the data to the client, rather than the client getting it direct from the USGS which adds some bandwidth overhead server side.

This is doable, but it sure would be nice if OpenLayers fixed the issue so the Z values can be read from GeoJson data.

If anyone has a better way, would love to hear it.

|improve this answer|||||

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.