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 found. I ended up opening the .prj projection file (in the same directory as the shapefile), and using http://prj2epsg.org/ to find the corresponding EPSG code. Once I found the code (a four- or five-digit number), I was able to search for it, and find it. This allowed Geoserver to correctly interpret the shapefile data.

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