SWebMap

From OSF Wiki
Jump to: navigation, search

You might also want to see the How to Use the WebMap document.

Introduction

The sWebMap OSF Widgets is an interactive map that works seamlessly with the geo-localized information available on a Open Semantic Framework instance. If a web developer has access to an OSF instance, she can create her own sWebMap component in a single line of code. The only thing that is needed is to properly configure the options of the component.

The sWebMap marries a JavaScript Google map with the underlying structured data in an OSF instance. Any data that has geo-locational data of any type may utilize the sWebMap widget. The sWebMap component lets people search, browse, filter and display all kind of information on a map. The map may display three different kind of things:

  1. Records that have a single location. They are displayed on the map using a marker icon
  2. Records that represent a geographical area. They are displayed on the map using polygon shapes with different colors
  3. Records that represent a path. They are displayed on a map using polylines (lines with one or multiple vertices) with different colors.

The sWebMap has two different major modes:

  1. A mode that displays a single map, with a result set and multiple filtering criteria
  2. A mode that displays a main map, with 3 smaller maps that are used as focus maps. These focus maps are used to highlight specific areas of the main map. This mode also displays all the results and filters for each different focus map

Lastly, there are three main categories of filters that can be used to display the records on the map:

  1. Dataset filters
  2. Type filters
  3. Attribute/value filters.

OSF Web Service

The sWebMap control communicates with an OSF (Open Semantic Framework) instance. More specifically, a sWebMap control will send Search queries to a geo-enabled OSF Web Service Search web service endpoint.

Depending on the options you had specified when you created the sWebMap control, each time you move (option), zoom (option) or change the filtering criterias, this will send a query to the Search endpoint. The sWebMap control then requests JSON formatted resultset and display the results to the user.

Schemas

All of the records that are returned by the Search web service endpoint of a OSF instance are described using different ontologies. These ontologies should be defined in the OSF instance and the irON Schema; these ontologies may have been generated by the structOntology OSF-Drupal module. It is these schema that should be used by the sWebMap control (see the schemas setting). The structOntology module will generate one irON schema per loaded ontology.

What needs to be done is to load all the irON schema that describes the records that are expected to be manipulated in the sWebMap control. If the proper schema are not loaded, the tool will continue to work properly, but it may have to fallback on default behaviors.

Important Predicates

Some predicates/attributes describing a record are important for this sWebMap component. This is a list of those important predicates and their usage in the context of the sWebMap component. Depending how the record to display in the sWebMap component are described, the component may change its behavior, or the way it displays the records on the map. All the predicates below describe records that will be used by the sWebMap.

Prefixed Attribute Predicate URI Usage
geo:lat http://www.w3.org/2003/01/geo/wgs84_pos#lat If the record is described using the geo:lat predicate, then the sWebMap component positions the record, on a map, using a marker icon at that latitude.
geo:long http://www.w3.org/2003/01/geo/wgs84_pos#long If the record is described using the geo:long predicate, then the sWebMap component positions the record, on a map, using a marker icon at that longitude.
geonames:locatedIn http://www.geonames.org/ontology#locatedIn If the record is described using the geonames:locatedIn predicate, then the sWebMap component displays it within a specific region of the map, which is the place where the geonames:locatedIn attribute refers to.
sco:polygonCoordinates http://purl.org/ontology/sco#polygonCoordinates If the record is described using the sco:polygonCoordinates predicate, then the sWebMap component draws a polygon shape for all the vertices described for that polygon shape.
sco:polylineCoordinates http://purl.org/ontology/sco#polylineCoordinates If the record is described using the sco:polylineCoordinates predicate, then the sWebMap component draws a polyline for all the vertices described for that polyline.
iron:prefLabel http://purl.org/ontology/sco#prefLabel If the record is described using the iron:prefLabel predicate, then the sWebMap component uses the label of that property as the preferred label to use to refer to it in the user interface.

There are also important predicates that can be used to describe the classes and predicates of the ontologies loaded and used in the sWebMap. If these predicates are used then this may have an impact on the behavior of the sWebMap widget.

Prefixed Attribute Predicate URI Usage
iron:prefLabel http://purl.org/ontology/sco#prefLabel If a class or predicate is described using the iron:prefLabel predicate, then the sWebMap component uses that property as the preferred label to display with the user interface. This label is used in the filters section of the sWebMap.
sco:ignoredBy http://purl.org/ontology/sco#ignoredBy If a class is described using the sco:ignoredBy predicate and if the value of the predicate is sco:sWebMap, then this instructs the sWebMap to ignore this class. The end result is that this class reference does not appear in the list of types that can be used as a filter.

If a predicate is described using the sco:ignoredBy predicate and if the value of the predicate is sco:sWebMap, then this instructs the sWebMap to ignore this predicate. The end result is that this predicate reference does not appear in the list of attributes that can be used as a filter.

sco:mapMarkerImageUrl http://purl.org/ontology/sco#mapMarkerImageUrl Specifies the URL of an icon image to use as a marker on a web map. Normally, this property is used to annotate a Class description. All the records belonging to that class will be marked on a map, using this icon image.

Modes

There are two major modes to the sWebMap component:

  1. Normal Mode
  2. Focus Windows Mode

Let's take a look at each of these modes.

Normal Mode

The normal mode is the default, basic mapping mode. In this mode, users are able to search and browse records in a single map. Results are displayed in a results section, and filters are available to facet the information displayed to the user. Map sessions can be saved, loaded, deleted and shared.

Focus Windows Mode

The focus window mode is a special mode where 3 focus maps have been added to the user interface. The big map shows the area covered by each of the focus map, in different colors. What the user does is to move the focus windows around. Each of the focus windows is related to a particular region of the bigger map. Each time the user clicks on a different focus map, a different set of records is displayed within the selected focus window.

This mode is used to compare different regions on a map. The filters are applied to each focus window. Different records can be selected within each focus window. Maps in focus window mode can be saved, loaded, shared and deleted.

Templating

The sWebMap control uses templates to display two kind of information to the user:

  1. All the records from a resultset
  2. The complete description of an individual record

Two different templating technologies are used. The templating technology used to display the results within a resultset is native to the sWebMap control. The templating technology used to display the complete description of an individual record is the same as used by OSF-Drupal to display records' individual page using the structView Drupal module. This other method is discussed at length in the Building OSF-Drupal Templates tutorial. The templates that have been created that way will simply be re-used by the sWebMap control. No work needs to be duplicated.

Note that this second templating mechanism is only used by the sWebMap control if the enableRecordDisplayOverlay is enabled.

Resultset Templating

Each individual result displayed in the resultset list can be templated. Each result is templated according to its type. If there is no template defined for its type, the default template is used to display the result in the resultset.

Creating a Web Map Template

All of the sWebMap result templates are defined in the sWebMap-templates.js template. Each template is an element of the templates JavaScript object variable. Each property of that templates object refers to a type of record. The name of each of these attributes are the URIs used to define the type(s) of a record. It is that attribute's name that will bind a record's type to a result display template.

This templates JavaScript object is used by the JavaScript PURE Templating Engine as the basis for generating the template display and filling it with the record's description.

We would recommend you to refer to PURE's documentation to understand how the PURE templates works, and how they can be created. Here we will cover how to create PURE templates for displaying records that comes from OSF (Open Semantic Framework).

Here are two basic templates that can be used to template records of type foaf:Image and muni:Schools:


  var templates = {
         
    "http://xmlns.com/foaf/0.1/Image":
      '<div>\
         <div class="resultTitle">\
           <b>\
             <span class="http_--purl-org-ontology-iron-prefLabel"></span>\
           </b>\
         </div>\
         <table width="100%">\
          <tr>\
            <td width="75%">\
              <div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div>\
            </td>\
            <td width="25%">\
              <img class="http_--xmlns-com-foaf-0-1-thumbnail@src" src="" />\
            </td>\
          </tr>\
         </table>\
       </div>'
,
             
    "http://purl.org/ontology/muni#Schools":
      '<div>\
         <div class="resultTitle">\
           <b>\
             <span class="http_--purl-org-ontology-iron-prefLabel"></span>\
           </b>\
         </div>\
         <div class="schoolDistrict">\
           School\'s District: <span class="http_--purl-org-ontology-muni-district"></span>\
         </div>\
         <div>\
           <a class="http_--xmlns-com-foaf-0-1-homepage@href" target="_new">School\'s Homepage</a>\
         </div>\
       </div>'

       
  };

Note that if you invoke records with images with an empty src attribute, or links with an empty href attribute, then these HTML element will automatically be removed from the HTML code generated by the template. This happens for the usecases where not every records has an image or a link reference in their description. That way, instead of creating more complex PURE template with pseudo "if" statements, then we simply generate empty img and a elements that get removed from the code generated by the templating engine before being added to the DOM.

The resultTitle Special Class

A special class is available to the template developer: resultTitle. This class is used to specify that the content of the HTML element that has this class defined is clickable, and that when the user clicks on it, it gets redirected to the record's web page.

This special class is used to instruct the sWebMap where the "record's title link" is defined in the template. If this class is not defined for any element of a template, then the user won't be able to get to the record's webpage by clicking on it.

Rendering

The PURE Templating Engine takes three things at input:

  1. A template
  2. A set of records for which to apply the template
  3. A series of directives to modify the template's output.

Once we select a specific template to apply to a specific record's type, then each of the records of that type are processed by PURE using that template. A record is a simple JavaScript object with a series of attribute/value pairs. Here is an example of a record that would be displayed using the http://purl.org/ontology/muni#Schools template:

  {
    "http_--purl-org-dc-terms-isPartOf": "http://demo.citizen-dan.org/datasets/Schools/",
    "http_--purl-org-ontology-iron-prefLabel": "Heritage Christian School",
    "http_--www-w3-org-1999-02-22-rdf-syntax-ns-type": "http://purl.org/ontology/muni#Schools",
    "http_--www-w3-org-2003-01-geo-wgs84_pos-lat": "41.73471",
    "http_--www-w3-org-2003-01-geo-wgs84_pos-long": "-91.58091",
    "http_--xmlns-com-foaf-0-1-topic": "http://purl.org/ontology/muni#Faith_schools"
  }

Each of the record's attribute is used in the template's description, and its value is inserted into the HTML element according to the rules embedded into PURE template.

Using Directives

Optionally, PURE processing directives can be defined to apply special processing rules at time of rendering.

The directives are defined in the templatesDirectives JavaScript object that is also included in the sWebMap-templates.js file. Each attribute of this templatesDirectives object is a directive applied to a specific template. The attribute's name is the same as the one of the template.

Here is a simple directive that may be applied to the muni:Schools template:

  var templatesDirectives = {
    "http://purl.org/ontology/muni#Schools": {
      'div.schoolDistrict@style' : function(args) {
        if(args.context['http_--purl-org-ontology-muni-district'] == undefined ||
           args.context['http_--purl-org-ontology-muni-district'] == "")
        {
          return('display:none');
        }
      }
    }
  };

This directive checks for all the div elements that have a schoolDistrict class. Then it checks if the current record being templated has the muni:district attribute describing it. If it does, then it checks to make sure the value is not empty. If both assertions are true, then nothing is done. But if one of these two conditions is false, then PURE will assign the style display:none to the schoolDistrict div and so hide it from the display.

These directives have to be created when we want to hide sections, or sub-sections, of a template depending on the information that describes a record being templated. This is what replaces the more traditional if..else.. conditional statements. Such conditional statements are not existing in the PURE Templating Engine, so we have to rely on the directives to do to this kind of work.

Detailed View Templating

When a user clicks on a result in the results list, and if the enableRecordDisplayOverlay option is enabled, an overlay popup window appears to the user with the detailed information the system has about this specific record. This information comes from the structView module and the OSF-Drupal templates that are currently used in the OSF-Drupal installation.

If the enableRecordDisplayOverlay option is not enabled, the user is simply redirected to the URI of the record. However, it is possible to simply display information directly in the resultset, without giving the user the possibility to click on it to get more information about the record. To do this, you simply have to create a new PURE template that doesn't use the resultTitle class.

The detailed view overlay gets the HTML content to publish on the overlay canvas from the structView module. All of the HTML code, the CSS styles and the JavaScript code are taken from what is generated in the OSF-Drupal template. However, it is possible to add additional CSS to that overlay view by adding the additional CSS content to the recordDisplayCss option. This CSS content goes in the header of the web page, so you can refer to a specific CSS file using the <link rel="stylesheet" href="..." /> HTML element, or by injecting the CSS code directly using the <style></style> HTML element.

Styling

The entire sWebMap control can be styled by modifying the sWebMap.css stylesheet. The different portions of the control can be styled individually.

Focus Windows Styling

If the focus windows mode is enabled, three smaller focus windows are displayed to the user. Each focus window can be styled individually, depending if they are selected or not by the user. The styles can be changed by changing these 6 different classes: mapFocus1_selected, mapFocus1_unselected, mapFocus2_selected, mapFocus2_unselected, mapFocus3_selected and mapFocus3_unselected.

The color of the border-top-color CSS attribute is used as the color to use for the drawing the rectangle representing this focus window on the main map.

Options

  var options = {

    /** Default Latitude where to center the map control */
    defaultMapLat: "48.0",

    /** Default Longitude where to center the map control */
    defaultMapLong: "74.0",

    /** Default Zoom where to start the map control */
    defaultMapZoom: 10,

    /**
    * The URL where we can find the default marker icon if
    * none are defined for a record
    */

    defaultMarkerUrl: "",

    /**
    * This mode disable the default "browsing mode". The default
    * behavior is that if you perform a search without any keywords,
    * then all mappable record get displayed on the map. Also, if no
    * filters are selected, then all mappable records get displayed.
    * By disabling that mode, you force the user to enter a search
    * key string, or to select a filter in order to see any results.
    */

    disableBrowseMode = false,

    /** Displays the counts with the attribute/value filters */
    displayAttributeFiltersCounts: false,

    /** Displays the resultset section and the pagination */
    displayResultsHTML: true,

    /** Display the filters section */
    displayFilters: true,

    /**
    * Display the filters to the user without performed a search query
    * (so, without displaying the search results)
    */

    displayFiltersByDefault: false,


    /** Displays the counts with the type filters */
    displayTypeFiltersCounts: false,

    /**
    * Specifies if you want to enable the focus windows for
    * the sWebMap control. If these windows are enabled
    * the behavior of the component will change accordingly.
    */

    enableFocusWindows: false,

    /**
    * Enable the Record Display Overlay in the control. This option
    * should only be enabled if a structView is accessible on the same
    * domain. If this option is not enabled, then a new page will be
    * opened with the record's URI as the URL of the webpage.
    */

    enableRecordDisplayOverlay: true,  

    /** Let users persisting/tagging records on the map. */
    enableRecordSelection: true,
 

    /** Enable the map controls to save, load and share map sessions. */
    enableSessions: true,

    /**
    * The default lat/long positions, and the default zoom level, of  
    * each focus window. This option is only used if the focus windows
    * mode is enabled.
    */

    focusMapsCenterPositions: {
      "focusMap1": {
        "lat": "46.7659",
        "lng": "-71.3198",
        "zoom": 12
      },
      "focusMap2": {
        "lat": "46.8056",
        "lng": "-71.3153",
        "zoom": 12
      },
      "focusMap3": {
        "lat": "46.8303",
        "lng": "-71.2216",
        "zoom": 12
      }
    });

    /** Force to trigger a search after the map get loaded */
    forceSearch: false,

    /**
    * API Key for the Google URL shortener service. This is used
    * to share map sessions
    */
 
    googleUrlShortenerKey: "";

    /**
    * Base URL where the images used by the sWebMap are available
    * on the web
    */
 
    imagesFolder: "",

    /**
    * Specifies if we should only include the results that are
    * included in the target inclusion records at load time.
    */

    includeResultsInTargetInclusionRecords: false,

    /**
    * Session to use to initialize the web map. The webmap will focus on the
    * tagged records, will apply the default
    * filters, etc.
    */

    initializationSession: null,

    /**
    * Specify if the user that is using this tool can be considered
    * an administrator. This enables new admin oriented features.
    */

    isAdmin: false,

    /** The main labels used in the sWebMap control */
    labels: {
      searchButton: "Search",
      searchInput: "Search Map",
      saveSessionButton: "save",
      deleteSessionButton: "delete",
      shareSessionButton: "share",
      loadSavedMapSessionInput: "Load saved map...",
      sourcesFilterSectionHeader: "Sources",
      typesFilterSectionHeader: "Kinds",
      attributesFilterSectionHeader: "Attributes",
      inclusionRecordsButtonOff: "Show included records",
      inclusionRecordsButtonOn: "Show all records"
    }

    /** URI of the datasets to make available to the map */
    mapDatasets: [],

    /** The irJSON schemas to be used by the sWebMap */
    schemas: [],

    /** Default number of results per page (20, 50, 100 or 200) */
    mapResultsPerPage: 20,

    /**
    * Specifies if you want to send a search each time the map
    * is drag and dropped.
    */

    searchOnDrag: false,

    /**
    * Specifies if you want to send a search each time the zoom
    * of the map is changed.
    */

    searchOnZoomChanged: false,

    /**
    * This is the URL where the saved/shared map sessions will
    * get resolved. This URL has to be a URL where the sWebMap
    * is accessible. This sWebMap should have access to the OSF instance
    * that host the records referenced by this map session. This URL
    * is normally the current URL but it can be different if you have
    * a portal with multiple different sWebmap setups and where all
    * the saved map, accross all these applications, should be displayed.
    */

    sharedMapUrl: "",
 

    /** Base URI of the OSF Web Service endpoints. It as to end with a slash character. */
    OSF Web ServiceAddress: "http://localhost/ws/",

    /**
    * Additional CSS that have to be loaded when the content of
    * a record is displayed in the popup window
    */

    recordDisplayCss: "",

    /**
    * A list of records URI that can be used to toggle searches for records that are
    * included in one of these records. The included records
    * have to be related to one of these inclusion records using the geonames:locatedIn
    * predicate. It is the way the sWebMap will knows if a record is
    * geographically located within another record.
    * These inclusion records URI *have* to be defined in the "records" attribute of
    * the "session" option."
    */

    inclusionRecords: [],

    /** Show the zoom control on the small focus windows */
    focusMapShowZoomControl: true,
 
    /** Show the pan control on the small focus windows */
    focusMapShowPanControl: true,
 
    /** Show the maptype selection control on the small focus window */
    focusMapShowMapTypeControl: true,

    /**
    * Specifies where the paginator control should be displayed in the sWebMap control. There
    * are two possible values:
    *
    *   "top": shows the control above the list of results
    *   "bottom": shows the control below the list of results
    */

    paginatorLocation: "top",

    /**
    * Minimal radius distance between the center of a focus window and the sides of the rectangle
    * representing it on the main map. The distance is in meter. If this value is "0", then
    * the feature get disabled.
    */

    minimalFocusWindowRectangleRadius: 0,

    /**
    * When a search action is performed in focus windows mode, we only query the focused window. If false,
    * all three focus windows will be queried, and data will be shown across all three windows.
    */

    queryFocusWindowOnly: true,

    /** Specify if the user want to enable Google's directions service to get the path between two markers */
    enableDirectionsService: true,

    /**
    * List all map type IDs to use for the sWebMap
    */

    mapTypeIds: null,

    /**
    * Show the traffic layer when the user is requestion directions between two markers.
    */

    directionsShowTrafficLayer: false,

    /**
    * Automatically tag a record if he is the only one returned for a particular search query.
    */

    automaticallyTagOneResult: false,    

    /**
    * List of all the custom map type functions that can be used for creating new map types.
    * Map types are based map tiles used as the base of the map.
    *
    * This is an array of new map types. Two types are currently supported:
    *
    * (1) custom
    * (2) wms
    *
    * The custom type require a ID (a maptype ID) and a function. The function
    * is what is used to define the options of the map type.
    *
    * The wms type require a name, which is used to specify the name of the
    * map type. It requires a baseUrl where the geo server is located and a
    * set of custom parameters needed by the WMS server.
    *
    * This object looks like:
    *
    *  [
    *    {
    *      "id": "NEWTYPE",
    *      "type": "custom",
    *      "func": {
    *        getTileUrl: function(coord, zoom) {
    *            return "http://mygeoserver.com/mapapi/getTile.aspx?x=" + coord.x + "&y=" + coord.y + "&zoom="+zoom;
    *        },
    *        tileSize: new google.maps.Size(256, 256),
    *        name: "MyGeoMapTiles",
    *        maxZoom: 18
    *      }
    *    },
    *    {
    *      "id": "NEW-WMS-TYPE",
    *      "name": "New WMS Type",
    *      "type": "wms",
    *      "baseUrl": "http://mywmsgeoserver.com/mapapi/parcel.ashx?",
    *      "wmsParams": [
    *        "WIDTH=256",
    *        "HEIGHT=256",
    *        "cache=0",
    *        "FIDs=12567"
    *      ]
    *    },
    *  ]
    */

    mapTypes: [],
 
    /**
    * List of all the custom map type functions that can be used for creating new layer.
    * Overlay layers are superposed above a map type, and have some transparency.
    *
    * This is an array of new map types. Two types are currently supported:
    *
    * (1) custom
    * (2) wms
    *
    * The custom overlay layers require a ID (a maptype ID) and a function.
    * The function is what is used to define the options of the map type.
    *
    * The wms type require a name, which is used to specify the name of the
    * overlay layer. It requires a baseUrl where the geo server is located and a
    * set of custom parameters needed by the WMS server.
    *
    * This object looks like:
    *
    *  [
    *    {
    *      "id": "NEWTYPE",
    *      "type": "custom",
    *      "func": {
    *        getTileUrl: function(coord, zoom) {
    *            return "http://mygeoserver.com/mapapi/getTile.aspx?x=" + coord.x + "&y=" + coord.y + "&zoom="+zoom;
    *        },
    *        tileSize: new google.maps.Size(256, 256),
    *        name: "MyGeoMapTiles",
    *        maxZoom: 18
    *      }
    *    },
    *    {
    *      "id": "NEW-WMS-TYPE",
    *      "name": "New WMS Type",
    *      "type": "wms",
    *      "baseUrl": "http://mywmsgeoserver.com/mapapi/parcel.ashx?",
    *      "wmsParams": [
    *        "WIDTH=256",
    *        "HEIGHT=256",
    *        "cache=0",
    *        "FIDs=12567"
    *      ]
    *    },
    *  ]
    */
 
    mapLayers: [],    
 
    /**
    * Search plugins are used to let the user contrains their searches on pre-defined
    * and specific information spaces.
    *
    * If there is more than one search plugin defined, then a combo box will appear
    * next to the Search button to let the user selecting one of these search plugin.
    *
    * This option is an array of objects which are defined with three variables:
    *
    * (1) "name": the name of the search plugin; this is what appear in the combo box
    * (2) "datasets": the list of all datasets that have to be used by the plugin
    * (3) "target": where the results will be displayed: one of:
    *               (a) "all": all the maps; including the focus maps if they are enabled
    *               (b) "focus": only the focus maps
    *               (c) "main": only the main map
    *
    * target can be: (1) all, (2) focus, (3) main
    */

    searchPlugins: [{
      "name": "All",
      "datasets": ["all"],
      "target": "focus"
    }])
  }

Usage

Loading the JavaScript Libraries

The two core libraries used by the sWebMap are jQuery and the Google Map. These can be loaded directly from the googleapis.com domain:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script>
  <script src="https://apis.google.com/js/client.js" language="javascript"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false" language="javascript"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&language=en"></script>

There are a series of external libraries that are used by sWebMap that have to be loaded as well. Most of them are jQuery plugins, but a few of them are libraries of their own:

  <script src="js/jquery.enhanced.cookie.js" language="javascript"></script>
  <script src="js/jquery.autocomplete-webmap.js" language="javascript"></script>
  <script src="js/jquery.pagination.js" language="javascript"></script>
  <script src="js/jquery.scrollTo.js" language="javascript"></script>
  <script src="js/jsDraw2D.js" language="javascript"></script>
  <script src="js/pure.js" language="javascript"></script>
  <script src="js/jquery.quicksearch.js" language="javascript"></script>
  <script src="js/jquery.tipsy.js" language="javascript"></script>
  <script src="js/jquery.blockUI.js" language="javascript"></script>
  <script src="js/infobox_packed.js" language="javascript"></script>

The next step is to load the sComponent related libraries, which includes the sWebMap component:

  <script src="js/sWebMap.js" language="javascript"></script>
  <script src="js/sWebMap-templates.js" language="javascript"></script>
  <script src="js/wms.js" language="javascript"></script>
  <script src="js/resultset.js" language="javascript"></script>
  <script src="js/schema.js" language="javascript"></script>

The last step is to load all the irJSON Schemas that have to be used by the sWebMap component:

  <script src="schemas/NOW.js" language="javascript"></script>
  <script src="schemas/rdf.js" language="javascript"></script>

Loading the Minimized/Compiled Version

Once your sWebMap is in production, you should use the minimized/compiled version of the component. You can easily do this by using the JavaScript files located in the js-min folder.

  <script src="js-min/jquery.enhanced.cookie.min.js" language="javascript"></script>
  <script src="js-min/jquery.autocomplete-webmap.min.js" language="javascript"></script>
  <script src="js-min/jquery.pagination.min.js" language="javascript"></script>
  <script src="js-min/jquery.scrollTo.min.js" language="javascript"></script>
  <script src="js-min/jsDraw2D.min.js" language="javascript"></script>
  <script src="js-min/pure.min.js" language="javascript"></script>
  <script src="js-min/jquery.quicksearch.min.js" language="javascript"></script>
  <script src="js-min/jquery.tipsy.min.js" language="javascript"></script>
  <script src="js-min/jquery.blockUI.min.js" language="javascript"></script>
  <script src="js-min/infobox_packed.min.js" language="javascript"></script>        
  <script src="js-min/sWebMap.min.js" language="javascript"></script>
  <script src="js-min/sWebMap-templates.min.js" language="javascript"></script>
  <script src="js-min/resultset.min.js" language="javascript"></script>
  <script src="js-min/schema.min.js" language="javascript"></script>

Loading the Stylesheets

There are two stylesheets to load. The main sWebMap.css style sheet, and one from the Tipsy library:

  <link rel="stylesheet" type="text/css" href="css/sWebMap.css" />
  <link rel="stylesheet" type="text/css" href="css/tipsy.css" />

Internet Explorer Compatibility Mode

Make sure your HTML page instructs Internet Explorer of the compatibility mode to use to render the webpage. You simply have to put that meta tag into the head tag of your HTML webpage.

  <meta http-equiv="X-UA-Compatible" content="ie=8">

If you forget to add this meta tag, then Internet Explorer will complain that the JSON object is not defined. In fact, the JSON object has been implemented in Internet Explorer since version 8.

Creating a map using the normal mode

  var options = {
    defaultMapLat: "41.6611111",
    defaultMapLong: "-91.53",  
    defaultMapZoom: 8,
    defaultMarkerUrl: "http://localhost/swebmap/imgs/defaultMarker.png",
    enableFocusWindows: false,
    imagesFolder: "http://localhost/swebmap/imgs/",
    isAdmin: false,
    mapDatasets: ["all"],
    schemas: [new Schema(MUNI_schema_srz), new Schema(rdf_schema_srz)],
    mapResultsPerPage: 20,
    searchOnDrag: false,
    searchOnZoomChanged: false,
    OSF Web ServiceAddress: "http://localhost/ws/",
    googleUrlShortenerKey: "AIzaSyBA6WmtJfiVL7-f3xxMctz2ELnKCrM9Bjc",
    sharedMapUrl: "http://localhost/swebmap/index.html",
  }

  var webMap = new SWebMap("mapCanvas", options);


Creating a Multi-windows Map

  var options = {
    enableFocusWindows: true,

    defaultMapLat: "41.6611111",
    defaultMapLong: "-91.53",  
    defaultMapZoom: 8,
    defaultMarkerUrl: "http://localhost/swebmap/imgs/defaultMarker.png",
    imagesFolder: "http://localhost/swebmap/imgs/",
    isAdmin: false,
    mapDatasets: ["all"],
    schemas: [new Schema(MUNI_schema_srz), new Schema(rdf_schema_srz)],
    mapResultsPerPage: 20,
    searchOnDrag: false,
    searchOnZoomChanged: false,
    OSF Web ServiceAddress: "http://localhost/ws/",
    googleUrlShortenerKey: "AIzaSyBA6WmtJfiVL7-f3xxMctz2ELnKCrM9Bjc",
    sharedMapUrl: "http://localhost/swebmap/index.html",
    focusMapsCenterPositions: {
        "focusMap1": {
          "lat": "41.6613",
          "lng": "-91.5573",
          "zoom": 14
        },
        "focusMap2": {
          "lat": "41.6567",
          "lng": "-91.5072",
          "zoom": 14
        },
        "focusMap3": {
          "lat": "41.6377",
          "lng": "-91.5298",
          "zoom": 14
        }
    }
  }

  var webMap = new SWebMap("mapCanvas", options);