Preparing Data

1. Create Features

The first step in creating your web application is to produce your georeferenced data sets. These compilations of features will form the core of the data that will be illustrated and shared through the application. Datasets should contain individual fields for the various types of data that you would like to show in your application as shown in the figure to the right.

2. Export for Use Online

Your completed GIS files will need to be converted to an open format in order to be used with this application framework. The Leaflet mapping API supports several file types and integration with geodatabases, however we will only document methods of exporting to simple geojson files which can be served from any web server. The following are three methods to convert GIS shapefiles to GeoJSONs for use with this mapping framework:

Exporting from ArcGIS to GeoJSON

In order to convert your shapefiles in ArcGIS, we recommend using esri2open a free tool set available at through Project Open Data on GitHub. Documentation is available at the link provided.

Exporting from QGIS to GeoJSON

1. Ensure that all of the shapefile layers are set to a projection of WGS 84
2. Right-click on the layer you wish to export and select "Save as"
3. Select "geoJSON"
4. Repeat for all additional features

For those with access to a hosted ArcServer, feature sets can be served from there. For more information on that process consult ESRI and Leaflet documentation.

3. Add to Project Directory

When all file sets have been created they should be placed in the "/data" directory in the project folder. Be sure to save the file sets with simple clear names. If your web server is capable of utilizing geoJSON files then your data is ready for use. If your server is not you can a)contact your server adminstrator to enable this file type or b)convert all geoJSONs to .js (Javascript) files.

Converting geoJSON to Javascript

1. Ensure that all of the shapefile layers are set to a projection of WGS 84
2. Right-click on the layer you wish to export and select "Save as"
3. Select "geoJSON"
4. Repeat for all additional features

Creating a Map Instance

The Open Freight App comes preconfigured with a div element in the "index.htm" file of the application that is designed to contain the Leaflet map instance. This element has an ID of "mapDIV". This HTML content is necessary in order to populate the application with map elements, the ID will be used later to tell Leaflet where to put the map.

<div class="col-sm-9 col-lg-9 mapUI" id="mapDIV"  style="display:none;">
    <div id="loading" style="display: block;">
        <div class="loading-indicator">
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-info" style="width: 100%"></div>
            </div>
        </div>
    </div>
</div>

This code does not need to be edited in order for the application to work.

1. Define the Region

In order for the map to show your region in the default view it necessary to identify the appropriate center point of the region and the scale level at which the full extent is shown. You will need the lat/long coordinates and the correct scale level. Once you have acquired these open the "map.js" file and add the appropriate values for oLat, oLng and zLevel for your region.

//declare boundary of region
var oLat = 40.018, oLng = -75.148, zLevel = 10;

2. Define Basemap Layers

Basemap layers are tiled image layers that provide static data such as aerial imagery, roads, land features and labels. Many different basemap layers are available "out of the box" in Leaflet applications. To see all options check out Leaflet Providers.
In order to add basemap layers, we use the Leaflet API to declare them:

// Basemap Layers
var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var Esri_WorldGrayCanvas = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
    maxZoom: 16
});

3. Create Map Instance

With map context and basemaps declare we are now able to create the map instance using Leaflet API. To do this we create a variable "map" that uses the Leaflet API to create a map instance in the HTML DOM element "mapDIV" that is located in the "index.htm" file. In the "options" variables we can adjust the baselayer that loads by default using the "Layers" attribute.

//create map instance
var map = L.map("mapDIV", {
    minZoom: zLevel,
    zoomControl: false,
    layers: [Esri_WorldGrayCanvas]
}).setView([oLat, oLng],zLevel);

4. Add Base Layer Control (optional)

To allow users to control the visible base layer we use the default Leaflet base layer control. If this is not desired, simply do not add or remove the following code:

//add Layer Control to map
var baseLayers = {
    "Street Map": Esri_WorldGrayCanvas,
    "Satellite": Esri_WorldImagery     
};
L.control.layers(baseLayers).addTo(map);

With the core map elements now declared and pushed to the index file custom data layers can now be added to the "map" instance.

Creating Custom Map Layers

The Open Freight Application has been built to simplify and partially automate the production of a web mapping application leveraging the Leaflet Javascript library. The creation of Map Layers and the variables declared in these steps are essential for the application to build and render the map features, legend and the associated information popup window.

The application includes a plugin capable of building map markers and associated legend icons from a selection of predefined markers and any icon font that user selects. This Dynamic Icon Marker plugin is an expansion on the Awesome Marker project. Learn more about Dynamic Icon Marker.

(a) The first step is define the Dynamic Icon Marker presets as the variable "IconPresets". These will be used to style the map and legend markers as well as tell the plugin which icon set to draw from. The required options are as follows:

//define Icon Set and Marker Types 
var IconPresets = {iconSet:'dynico', markerSet: 'open-freight', mapMarker: 'circle-cm', legendMarker: 'circle-md'};

As noted in the Dynamic Icon Marker plugin docs the "legendMarker" is optional and will match the mapMarker is desired. Learn more about variable options...

(b) The next step is to define an icon for each layer that will be: i. clickable in the map (all poly, point, or combo layers), ii. toggled by the sidebar layer control. If a layer is represented by both point and poly features it only require the declaration of one icon. In the options that are declared the "layer:" is most important as it will be related to layer control functions later in the application's development. In this case the code is declared for four layers: layer1, layer2, layer3, and layer4. Each layer will require an icon, markerColor, layer name, title(label) and the inclusion of the "IconPresets" variable.

var layer1icon = L.OpenFreightMarkers.icon({
	icon: 'nhs', markerColor: 'red', layer:'layer1', title: 'Layer 1'}, IconPresets),
layer2icon = L.OpenFreightMarkers.icon({
	icon: 'parking', markerColor: 'red', layer:'layer2', title: 'Layer 2'}, IconPresets),
layer3icon = L.OpenFreightMarkers.icon({
	icon: 'nhs', markerColor: 'teal', layer:'layer3', title: 'Layer 3'}, IconPresets),
layer4icon = L.OpenFreightMarkers.icon({
	icon: 'bridge', markerColor: 'teal', layer:'layer4', title: 'Layer 4'}, IconPresets);

Add Layer Data

• Polyline/Polygon Layer
• Point Layer
• Combo Layer

var layer1 = L.geoJson(null, {

style: {fillColor: "#F9AB90", fillOpacity:.50, weight:1, color:"#E0E0E0 ", opacity:.75}, 

onEachFeature: function (feature, layer){

layer.on({
    //action on click --> function must be created in actions.js
    click: highlightLayer1,	
    //action on double click  --> zoom to polygon function predefined in action.js						
    dblclick: zoomToFeature 						
});

layer1Search.push({							
	//search name: based on field name "Name"
	name: layer.feature.properties.Name,			
	//layer source for use as title in Typeahead
	source: "Layer 1",	
	//leaflet id for callback							
	id: L.stamp(layer),	
	//geometric bounds declaration for polygon						
	bounds: layer.getBounds()						 
    });
}
});

$.getJSON("data/layer1.json", function (data) {
	layer1.addData(data);
});
polyLayer.push('layer1');

//define Layer 1 (poly feature only)
var layer1 = L.geoJson(null, {
    style: {fillColor: "#F9AB90", fillOpacity:.50, weight:1, color:"#E0E0E0 ", opacity:.75},  
    onEachFeature: function (feature, layer){		
        layer.on({						
            click: highlightLayer1,					
            dblclick: zoomToFeature 					
        });
        layer1Search.push({							
            name: layer.feature.properties.Name,			
            source: "Layer 1",							
            id: L.stamp(layer),							
            bounds: layer.getBounds()						
        });
    }
});
$.getJSON("data/layer1.json", function (data) {		
	layer1.addData(data);
});
polyLayer.push('layer1');

var layer2 = L.geoJson(null, {

pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: layer2icon});	
},

onEachFeature: function (feature, layer){

layer.on({
    //action on click --> function must be created in actions.js
    click: highlightLayer2,	
    //action on double click  --> zoom to point function predefined in action.js						
    dblclick: zoomToPoint 						
});

layer2Search.push({							
	//search name: based on field name "Name"
	name: layer.feature.properties.Name,			
	//layer source for use as title in Typeahead
	source: "Layer 2",	
	//leaflet id for callback							
	id: L.stamp(layer),	
	//geometric bounds declaration for points (requires lat and lng)						
	lat: layer.feature.geometry.coordinates[1],		
	lng: layer.feature.geometry.coordinates[0]						 
    });
}
});

$.getJSON("data/layer2.json", function (data) {
	layer2.addData(data);
});

//define Layer 2 (point feature only)
var layer2 = L.geoJson(null, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: layer2icon});	
        },
    onEachFeature: function (feature, layer){		
        layer.on({											
           click: highlightLayer2,							
            dblclick: zoomToPoint							
        });
        layer2Search.push({								
            name: layer.feature.properties.Name,			
            source: "Layer 2",							
            id: L.stamp(layer),								
            lat: layer.feature.geometry.coordinates[1],		
            lng: layer.feature.geometry.coordinates[0]						
        });
    }
});  
$.getJSON("data/layer2.json", function (data) {
	layer2.addData(data);
});

//define Layer 3 (point and poly combo)
//declare point data first 
var layer3pt = L.geoJson(null, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: layer3icon});	
        },
    onEachFeature: function (feature, layer){			
        layer.on({											
            click: highlightLayer3,								
            dblclick: zoomToPoint								
        });
    }
});  
$.getJSON("data/layer3pt.json", function (data) {
	layer3pt.addData(data);
});
//declare polygon data 
var layer3poly = L.geoJson(null, {
    style: {fillColor: "#C1332B", fillOpacity:.50, weight:1, color:"#E0E0E0 ", opacity:.75},   
    onEachFeature: function (feature, layer){
        layer.on({
            click: highlightLayer3,
            dblclick: zoomToFeature
        });
        layer4Search.push({
            name: layer.feature.properties.Name,
            source: "Layer 3",
            id: L.stamp(layer),
            bounds: layer.getBounds()
        });
    }
});
$.getJSON("data/layer3poly.json", function (data) {
    layer3poly.addData(data);
});
polyLayer.push('layer3poly');
//create layer group for Layer 3 point and polyline features
var layer3 = new L.FeatureGroup([layer3pt, layer3poly]);

Add Typeahead Search Functionality for Layers

The Open Freight Application leverages the Typeahead.js library to provide a simple search functionality. In order to make use of the framework each data set pushes search criteria to a corresponding array and the following code processes that data for use and consumption in the Typeahead search box. These code elements should be added in the "map.js" file.

$("#searchbox").click(function () {
    $(this).select();
});

// Typeahead search functionality
$(document).one("ajaxStop", function() {
    $("#loading").hide();

var layer1BH = new Bloodhound({
    name: "Layer 1",
    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: layer1Search,
    limit: 10
});
var layer2BH = new Bloodhound({
    name: "Layer 2",
    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: layer2Search,
    limit: 10
});
//intialize
layer1BH.initialize();
layer2BH.initialize();

$("#searchbox").typeahead({
    //define options (see Typeahead documentation)
    minLength: 2,
    highlight: true,
    hint: false
},{
    name: "Layer1data",
    displayKey: "name",
    source: layer1BH.ttAdapter(),
    templates: {
        header: "<h5 class='typeahead-header'><img src='lib/images/flat/layer1.png' class='searchico'>Layer 1</h5>"
    }
},{
    name: "Layer2data",
    displayKey: "name",
    source: layer2BH.ttAdapter(),
    templates: {
        header: "<h5 class='typeahead-header'><img src='lib/images/flat/layer2.png' class='searchico'>Layer 2</h5>"
    }
})

.on("typeahead:selected", function (obj, datum) {       //define action on selection of a search result
if (datum.source === "Layer 1") {                       
    if (!map.hasLayer(layer1)) {                        
        map.addLayer(layer1);                       
        $("#layer1").prop("checked", true);         
    };
    map.fitBounds(datum.bounds);                        
    if (map._layers[datum.id]) {                    
        map._layers[datum.id].fire("click");    
    }; 
};
if (datum.source === "Layer 2") {
    if (!map.hasLayer(layer2)) {
        map.addLayer(layer2);
        $("#layer2").prop("checked", true);
    };
    map.setView([datum.lat, datum.lng], 17);        
    if (map._layers[datum.id]) {
        map._layers[datum.id].fire("click");
    }; 
};

All other code related to the Typeahead functionality provides the formatting for the search box.

Create Highlight Actions for Layer(s)

Once a feature layer is declared, it is neccesary to create the action that populates the info window on a click event with the feature's data. This action will be created in the "action.js" file. Multiple data layers can use the same highlight function only if they share the same field names and data structure. Otherwise, each data layer will require its own highlight function.

function highlightLayer1(e) {
initializeHL(e);

header = '<p>' + props.Name + '</p>',
content = "<div id='baseInfo'>\
<div class='datafield'>" + props.Center_Typ + "</div><div class='labelfield'>Type</div>\
<div class='datafield'>" + props.Township_s + "</div><div class='labelfield'>Municipality(ies): </div>\
</div><!--close baseInfo-->\
<div class='infoDivider'></div>\
<div id='indactorInfo'>\
<ul class='nav nav-tabs'><!--tabs for indicators-->\
<li class='active'><a href='#Cap' data-toggle='tab'>Capacity & Activity</a></li></ul></ul>\
<div id='indicator' class='tab-content'><!--tab panes-->\
<div class='tab-pane active' id='Cap' style='padding-bottom: 12px;'>\
        <table class='table table-hover'>\
        <tr class='active'><td><strong>Acres: </strong></td><td>" + numeral(props.Acres).format('0,0.0') + "</td></tr>\
        <tr><td><strong>Output: </strong></td><td>not available</td></tr></table>\
</div></div>\
<div class='labelfield source'>Data Source: " + props.Source + "</div></div>",

//optional featureName override for use in place of title variable
titleName = '<p>Type: '+ props.Name +'</p>',
//optional header class override
headerClass = 'layer1NewClass',

layerName = 'layer1';
contentPush(header, content, layerName, titleName, headerClass);

function highlightLayer1(e) {
    initializeHL(e);
    header = '<p>' + props.Name + '</p>',
    content = "<div id='baseInfo'>\
    <div class='datafield'>" + props.Center_Typ + "</div><div class='labelfield'>Type</div>\
    <div class='datafield'>" + props.Township_s + "</div><div class='labelfield'>Municipality(ies): </div>\
    </div><!--close baseInfo-->\
    <div class='infoDivider'></div>\
    <div id='indactorInfo'>\
    <ul class='nav nav-tabs'><!--tabs for indicators-->\
    <li class='active'><a href='#Cap' data-toggle='tab'>Capacity & Activity</a></li></ul></ul>\
    <div id='indicator' class='tab-content'><!--tab panes-->\
    <div class='tab-pane active' id='Cap' style='padding-bottom: 12px;'>\
        <table class='table table-hover'>\
        <tr class='active'><td><strong>Acres: </strong></td><td>" + numeral(props.Acres).format('0,0.0') + "</td></tr>\
        <tr><td><strong>Output: </strong></td><td>not available</td></tr></table>\
    </div></div>\
    <div class='labelfield source'>Data Source: " + props.Source + "</div></div>",
    layerName = 'layer1';
    contentPush(header, content, layerName, titleName, headerClass);
};

Add Layers to Sidebar

Adding layer control functionality to the application when using Dynamic Icon Marker. The layer controls are built based on the declarations of the layers in the "map.js", however in order to render them properly it is necessary to build out some HTML components in the sidebar. These components are built using the bootstrap accordion panels. The can be divided by groupings or as a single panel. This example demonstrates adding a single panel with all the necessary code elements for the application helpers to populate the elements.

<div class="panel-group legend">
    <div class="panel panel-default">
        <div class="panel-heading">

<a href="modal_1.html" data-toggle="modal" data-target="#modal_1"><div class="panelinfo group1_panel"></div></a>

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#Group_1">
    <div class="panellink group1_panel">
        <span>Layer Group 1</span>
    </div>
</a>

<a class="checked_all togglebox group1_panel"></a>

The final compiled panel heading should look like this

<div class="panel-heading">
    <a href="modal_1.html" data-toggle="modal" data-target="#modal_1"><div class="panelinfo group1_panel"></div></a>
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#Group_1">
        <div class="panellink group1_panel">
            <span>Layer Group 1</span>
        </div>
    </a>
    <a class="checked_all togglebox"></a>
</div> 

<div id="Group_1" class="panel-collapse collapse in">
    <div class="panel-body legPanel">

      <input type="checkbox" name="LayerCont" id="layer1" class="dyna layer" z-index="2" >
        <input type="checkbox" name="LayerCont" id="layer2" class="dyna layer" z-index="3" > 
    </div>
</div>

The full final compiled legend panel should look like this

<div class="panel-group legend">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a href="modal_1.html" data-toggle="modal" data-target="#modal_1"><div class="panelinfo group1_panel"></div></a>
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#Group_1">
                <div class="panellink group1_panel">
                    <span>Layer Group 1</span>
                </div>
            </a>
            <a class="checked_all togglebox"></a>
        </div> 
        <div id="Group_1" class="panel-collapse collapse in">
            <div class="panel-body legPanel">
                    <input type="checkbox" name="LayerCont" id="layer1" class="dyna layer" z-index="2" >
                    <input type="checkbox" name="LayerCont" id="layer2" class="dyna layer" z-index="3" >
               
            </div>
        </div>
    </div>
</div>

Dynamic Icon Markers and Layer Control

This functionality provides users of the Open Freight Application an easy, streamlined method for creating custom map markers using any icon font set. For those requiring custom icons, the IcoMoon App can be used to create icon fonts from SVG source files. Using Dynamic Icon Markers and Layer Control functionality, the user can declare a series of options that will create a uniform identity for individual layers across the applicaiton. Using this functionality much of the layer control panel is built automatically and the styling for infowindows is created to the selected layer.

Below are the options that can be declared in the "map.js" file, when creating custom layers.

Basic Options

Open Freight Icon Set

This icon set has been created as a part of the Open Freight App project and is a launching point for agencies to identify key freight facilities in their region. The guide below shows the usage classes for each of the icons within the font set.

To utilize other icon fonts for icons you need to replace the "iconSet" option with the prefix of that icon font such as "fa" for Font Awesome or "glyphicon" for Glyphicons.

Dynamic Icon Marker Sets

The Dynamic Icon and Layer Control system includes several marker options to be used with the application framework. In addition, you will find an editable file in the "lib/core/dist/" folder of the project that can be used to create new color palettes using predesigned markers.

Open Freight Markers

• mapMarker or legendMarker: 'circle-cm'
  
• mapMarker or legendMarker: 'circle-md'
  
• mapMarker or legendMarker: 'circle-sm'
  

Dyna Markers

• mapMarker or legendMarker: 'crc-cm'
  
• mapMarker or legendMarker: 'crc-md'
  
• mapMarker or legendMarker: 'crc-sm'
  

Open Freight App License

Copyright (c) 2014 Delaware Valley Regional Planning Commission

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.