Use Shapefile maps in VehicleTracker using Geoserver
2010-07-15 17:36 by Fredrik Development, Guides

Here we will setup a GeoServer mapdata server, add shapefile data to it, configure a map, and then display it in GpsGate Server and VehicleTracker using OpenLayers.

This guide assumes you have access to shapefile map data that you’d like to use with GpsGate Server and VehicleTracker. Besides GpsGate Server we’ll use GeoServer and OpenLayers, both of which are free and open source.


Note that you can use shapefile maps regardless of whether you host your own licenced GpsGate Server or have it hosted as a subscription at GpsGate.com. You can also setup a combination, for example hosting GeoServer and the bandwidth-hungry maps locally but still host the GpsGate Server with us.


As the title says, we choose to use shapefiles in this guide but the data import is similar for many of the other map data formats supported by GeoServer. We also chose to use OpenLayers as map client, since it has become almost a de-facto standard when it comes to custom maps - If you can show your map using OpenLayers, you can also show it in VehicleTracker!


This step-by-step guide might seem long and boring, but don’t despair.


So, let’s start!


1. Verify that you have the required Shapefile data

A shapefile is actually a set of several files. Apart from the file with the .shp extension, .shx and .dbf files are also necessary to form the mandatory triplet that defines a shapefile. You might also have a mix of other optional files that describe projection, geocoding etc. GeoServer will automatically handle any optional files.

Typical map data is split in several layers of shape files. In this guide we’ll assume a typical case of three layers:

  • polygon.(shp/shx/dbf) = country, coast line.
  • line.(shp/shx/dbf) = roads, rivers.
  • poi.(shp/shx/dbf) = Point-of-interest. I.e customers, hospitals, pubs and other important places.


2. Install GeoServer

Download the GeoServer installer here. Note that this blog post was first written for GeoServer version 2.0.2 and has since been updated for version 2.5.2. The UI may have changed slightly but is virtually the same as when the original screenshots were taken.

In my experience on Windows, the installation was very smooth, a simple wizard installer.
When asked about the “Type of Installation” you’ll most likely want to select “Run as Service” for a production setup.

Apart from the actual map data storage and bandwidth usage, please note that GeoServer will also consume memory and CPU resources, so place it on a machine with cycles to spare. By default the map data will be located under the installation directory but you can also specify the data directory location separately.
In this guide we’ll assume the default directory.


3. Copy your shape file data to the GeoServer data store

By default the map data directory is located in [ProgramFiles]/GeoServer[version]/data_dir/data.
Create a new sub-directory, for example “MyNewMap”, and copy your all your shapefiles there.


4. Login to GeoServer

Start your favorite web browser and go to the GeoServer login page.  The default url is: http://www.yourserver.com:8080/geoserver/web/ but it’s also available as “GeoServer Web Admin Page” link in the Windows’ start menu.

See GeoServer’s quickstart guide on howto setup user accounts, logging etc. In this tutorial we require only the default settings and default user, thus you don’t need to change anything.

When you have logged in the left-hand side of the interface contains the menu with the main functionalities. In the rest of this guide we’ll reference a certain menu by saying: Root Menu->Directory->Function, ex: Data->Syles->Add new Style.
In particular, all menus needed in this guide happen to be located in the “Data” group.

Now we’re ready to start creating the actual map.


5. Create a workspace

Workspaces are used as a logical grouping of your data. You typically create workspaces based on your company name and/or per project.

Go to: Data->Workspaces->Add new workspace to create a new workspace.

Here we choose the name “MyCompany”.

Press the “Submit” button.

 

6. Import your shapefiles

Now we can import the shapefiles into GeoServer’s data store. Easiest is to import the entire directory of shapefiles in one go, though you can also import individual files.

Go to: Data->Stores->Add new Store.
Select “Directory of spatial files”.

Select your workspace, in this case “MyCompany”, and then give your data a name. Here we choose “MyNewMap”.


Point to your shapefile data on disk

In “Connection Parameters” you set the URL to file:data/MyNewMap, where “MyNewMap” refers to the directory where you placed your map data files in step 3.

Press the “Save” button.


7. Create map layers

Now we need to turn the raw shape data into map layers.

Go to: Data->Layers->Add a new resource to create a new layer.
Choose your data store in the drop-down list. In this example it will be “MyCompany:MyNewMap”.
Now you should see the available layers corresponding to your shapefiles.

Next, the layers need to be configured and “published”. Click “Publish” in the right-hand side.


7.1 Specify Coordinate Reference Systems, SRS

Click “Find” to see if the coordinate system is already included in your data files. Otherwise the most common coordinate system is probably EPSG:4326 (Same as WGS84)
Add it manually in that case by typing “EPSG:4326” in the “Declared SRS” field.


7.2 Specify Bounding Boxes

Bounding Boxes describe the extent of your map (since your map most likely doesn’t cover the entire globe).

Easiest is to click “Compute from data” and “Compute from native bounds” respectively to generate bounding boxes (if you don’t have any particular reasons for custom settings).

Press the “Save” button.

! Repeat the above steps (from “Publish”) for all your layers !


When you’re done you should be able to see your layers in the list something like this:

 

8. Style your layers

Now you need to specify the look of your layers, coloring, width of different roads etc.

Go to the layer (as in step 7) and select the “Publishing” tab at the top.

Under “WMS Settings”, choose for example one of the default styles in the drop-down menu.
Tip: Consult your “web-page-guy” if you need more advanced styling wink


Press the “Save” button.

! Repeat this step for the remaining layers !


Note: The map background color can for some reason not be configured here, it is instead specified in the OpenLayers setup (more about this in step 11).

Note: This styling will be the the default for the layer, but you can also associate a separate style with your layer when creating the “Layer group” in the next step.

 

9. Group your layers into a map

Now we need to specify that our layers are intended to be grouped into a map.

Go to: Data->Layer Groups->Add new layer group to create a new group. Here we call it “MyNewMap”.


Add your layers to the group
Click “Add Layer” and select each of your layers.

When you’ve added all your layers click “Generate Bounds” (the bounds will be the union of the individual layers’ bounds as we set in step 7).


Verify the order of the layers

Here we indicate which visible order our layers shall have.

The bottom layer will be first in the list, next layer will end up above, cover, the previous.
In our example case this means the correct order should be:
- polygon (ground).
- line (roads).
- poi (customers).

Click the green up/down-arrows on each layer to change the ordering.

Press the “Save” button.

 

10. Verify the map looks ok in the Demo/preview

.. Almost done!

Go to: Layer Preview (at the bottom in the left-hand menu).
Here you should now be able to see your separate layers, “MyCompany:line”, “MyCompany:poi”, “MyCompany:polygon” and most importantly the resulting map: “MyNewMap”.

Now simply click “OpenLayers” to see the result of your hard work!

If the map doesn’t look the way you like you need to go back and tune the styling (in Data->Styles). Needless to say, if the map doesn’t show correctly here, it won’t show correctly in VehicleTracker either!

Keep this preview window open, it is needed in the next step.


11. Install the GpsGate Server plugins CoreMap and GeoServer to load your map

We can now start the final phase of importing the map to GpsGate Server and VehicleTracker using OpenLayers map plugins.

From SiteAdmin -> Plugins -> Get More Plugins, first install CoreMap and then install the plugin named GeoServer.

You can now configure a GeoServer map in GpsGate from the SiteAdmin -> Maps -> GeoServer page.

On that page you can configure settings such as WMS URL, background color, maxResolution (affects map scale) and other settings that should be specifically tuned for the group layer that you have created in GeoServer.

Fortunatelly, you can find suitable values for these settings by previewing your layer from the GeoServer Web Admin page. Go to Layer Preview (as in step 10) in the GeoServer Web Admin page and select your “MyNewMap”, then select “view source” in your web browser.

Here’s an example snippet of the relevant parts of the preview source code you should see.
(should start at about line #130 in the “view source” window).

....

var options = {
    controls: [],
    maxExtent: bounds,
    maxResolution: 0.01869921875, // (1)
    projection: "EPSG:4326", // (2)
    units: 'degrees'
};

var map = new OpenLayers.Map('map', options); 

// setup tiled layer
var tiled = new OpenLayers.Layer.WMS(
    "Geoserver layers - Tiled", "http://yourserver.com/geoserver/MyCompany/wms", // (3) url will point to your GeoServer
    {
        height: '123',
        width: '123',
        layers: 'MyNewMap', // (4)
        styles: '', 
        srs: 'EPSG:4326',
        format: format,
        tiled: 'true',
        bgColor: '0xECD0D5', // (5) background color in 0xRRGGBB format
        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
    },
    {
        buffer: 0,
        displayOutsideMaxExtent: true
    }
);
....

You can read more about OpenLayers’ WMS layer settings here.


11.1 Create a Map in GpsGate SiteAdmin by copying map settings from GeoServer

Now we must create a GeoServer map in GpsGate SiteAdmin by copying the necessary map parameters from this GeoServer example map.

- Go to SiteAdmin -> Maps -> GeoServer.
- Click “Create New”.


Edit GeoServer Map


- Look for the the relevant settings indicated in the snippet above with (1), (2) etc.
- Enter the value into the corresponding input field in the SiteAdmin form.
- When you’re done, click Save.


Finally, to enable the GeoServer map for an application go to SiteAdmin -> Applications tab and click the an application.



1. Enable Maps -> _UseMapPlugin -> GeoServer.
2. Enable Maps -> _UseGeoServerMap -> MyNewMap.
3. Click “Save”.


13. Finished!

Fire up VehicleTracker, go to the “Maps” menu and select “GeoServer”. Voilà - you can now get started tracking on your very own brand new map!
Note that if you configure many GeoServer maps you can select one of them by clicking the blue and white plus sign in the upper right edge of the map view.


.. What’s next?

Was this guide successful to you? - Why not make your map available to the entire GpsGate community! (you’re free to handle any charges). Send a mail to support-at-gpsgate.com and we’ll publish it on the site!

Something you miss? Do you have other kinds of maps you’d like to use with GpsGate Server? Post a comment and we’ll take note!

Discuss this blog post on the forum please

Blog categories

GpsGate Video gallery

Collection of video tutorials.

Latest Blog posts

User Notes
2014-10-23 13:07
Trip and Idle report with Ignition
2014-10-21 10:37
Statistic
2014-10-20 15:39
Variables in Vehicle List
2014-10-16 14:30

Active Forum topics

Subscribe to our Newsletter

Subscribe to the GpsGate Newsletter and get all the latest product updates, useful guides and tutorials and even receive hot offers.
E-mail
© 2014 GpsGate AB, All rights reserved. Privacy Policy
Wrong Username or Password