Put the Data on the Server

Copy the data to a place where Geoserver can see it:

cd EIA-Oil-Gas-Maps
sudo cp -r shapefiles /var/lib/tomcat7/webapps/geoserver/data/data/oilgas1
sudo chown -R tomcat7:tomcat7 /var/lib/tomcat7/webapp/geoserver/data/data/oilgas1

Make Workspace

The first step is to create a workspace, which I'll call "oilgas".

Geoserver > Data > Workspaces, and create new workspace

Make Data Store

The next step is to create a data store, which is a directory of shape files. I point to the data in the oilgas1 directory.

Dealing with Projection Issues

I had some issues with the projection not being recognized by Geoserver.

I opened up the .prj projection file, and copied and pasted the contents at http://prj2epsg.org/

This gave me a four- or five-digit EPSG code, which would help me find the correct EPSG projection in Geoserver.

I used Geoserver's find projection feature to search for the four digit EPSG code, and selected that as the projection. This allowed Geoserver to correctly interpret the shapefile data. (I also had to specify this information in my Leaflet script, i.e., where I'm actually using the map data).

Below is an image showing how this looks on the prj2epsg website:

Make A Map

Next step is to make a map with that data. We need to know the name of our map. In the case above, I added a shapefile called US_ShalePlays_EIA_May2011.shp, into the oilgas workspace, so my map is at oilgas:US_ShalePlays_EIA_May2011.

I can point to this map when I give Leaflet.js my map data URL. Here is the Leaflet script to map this data:

var map = L.map('map').setView([35.0, -100.0], 4);

L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
    maxZoom: 18
}).addTo(map);

var owsrootUrl = 'http://104.236.163.66:8080/geoserver/ows';

var defaultParameters = {
    service : 'WFS',
    version : '1.0',
    request : 'GetFeature',
    typeName : 'US_ShalePlays_EIA_May2011',
    maxFeatures : '200',
    outputFormat : 'text/javascript',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:4269'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

Now use the data to construct a map:

//ajax to get map features
$.ajax({
    type: "POST",
    url: URL,
    dataType: 'jsonp',
    jsonpCallback : 'getJson',

    //upon success extraction of data
    success: function (data) {

        // the data.geometry field contains coordinate/location data.
        //
        // now use this page on Leaflet+GeoJSON:
        // http://leafletjs.com/examples/geojson.html

        //create a new geojson layer
        var geojson = new L.geoJson(data, {

                // apply a style
                style: {"color":"#ff7800","weight":2}
        }).addTo(map);

        //var marker = L.marker([40.7543, -73.9858]).addTo(map);
    }
});

Finished Product

You should see the map below when you navigate to the page with the embedded map:

Geoserver OilGas

From charlesreid1

Contents