The GEOSS Discovery And Access Broker APIs
Authors: Fabrizio Papeschi, Mattia Santoro, Stefano Nativi
API version: 1.4.3-beta

ResultsMapWidget

Module: UI

This widget localizes all the nodes of the current result set page in a map using a marker for each node.
This widget can also show, when available, the layers associated to the nodes. See the constructor options for more info.

The map is realized by default using Google Maps API and gmaps.js. The map can be realized using Openlayers 3 also.

Required API CSS:


                        <!-- API CSS -->
                        <link rel="stylesheet" type="text/css" href="https://api.geodab.eu/docs/assets/css/giapi.css" />
The following scripts and CSS are required for Google Maps API:

                        <!-- Google Maps -->
                        <script type="text/javascript" src="http://maps.google.com/maps/api/js?" />
                        <!-- Gmap.js -->
                        <script type="text/javascript" src="https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js" />
The following scripts and CSS are required for Openlayers 3 :

                        <!-- Openlayers 3 API -->
                        <script type="text/javascript" src="http://openlayers.org/en/v3.15.1/build/ol.js" />
                        <!-- Openlayers 3 API CSS -->
                        <link rel="stylesheet" type="text/css" href="http://openlayers.org/en/v3.15.1/css/ol.css" />

                        <!-- Openlayers 3 Layer Switcher -->
                        <script type="text/javascript" src="http://cdn.rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js" />
                        <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css" />

                        


                        // creates the widget with the default options
                        var resMapWidget = GIAPI.ResultsMapWidget(id, 10, 10, {
                             'width': 370,
                             'height': 300,

                             // marker and selection options
                             'markerColor':'red',
                             'markerTitle':function(node){return node.report().title},
                             'selectionColor: '#0000FF',

                             // layers options
                             'addLayers': false,
                             'showLayersControl': false,
                             'layersControlWidth': 155,
                             'layersControlHeight': 100,
                             'layersControlOpacity': 0.8,

                             // map options
                             'mapType' : 'google',
                             'zoom': 6,
                             'scrollwheel' : true,
                             'panControl' : true,
                             'panControlOptions' : true,
                             'streetViewControl' : false,
                             'overviewMapControl' : true,
                             'mapTypeControl' : false,
                             'mapTypeControlOptions' : { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
                             'navigationControl': false,
                             'fullscreenControl': true,
                             'fullscreenControlOptions': { position: google.maps.ControlPosition.RIGHT_BOTTOM }
                        });

                        // ...

                        var onDiscoverResponse = function(result, response) {
                             var resultSet = response[0];
                             ...
                             // updates the widget with the current result set
                             resMapWidget.update(resultSet);
                             ...
                        }

Google Maps

Openlayers 3

The images above show the widget with all the default options. For additional personalization of the widget, see the map-widget class of the giapi.css file

Google Maps

Openlayers 3

The images above show the widget with some Google Maps layers or Openlayers 3 layers and with the layers control activated. For additional personalization of the layers control, see the layers-control class of the giapi.css file

Constructor

ResultsMapWidget

(
  • id
  • latitude
  • longitude
  • [options]
  • dabNode
)

Parameters:

  • id String

    id of an existent HTML container (typically <div> element) in which the widget is inserted

  • latitude Double

    latitude of the initial map center

  • longitude Double

    longitude of the initial map center

  • [options] Object optional

    all the available map options are also allowed

    • [mapType='google'] String optional

      type of the map. Possible values are: "google" (or "gmaps") and "openlayers" (or "ol"). Default value: 'google'

    • [width=370] Integer optional
    • [height=300] Integer optional
    • [showNoResultsMsg=true] Boolean optional
    • [noResultsMsg="No geolocalized results to show"] Boolean optional
    • [markerColor="red"] String optional

      possible values: "red", "yellow", "green", "red"

    • [markerIcon] String optional

      URL of an image to use as marker icon (overrides the options.markerColor option)

    • [markerTitle="return node.report().title"] Function optional
    • [onMarkerClick] Function optional
    • [onMarkerMouseOver] Function optional
    • [onMarkerMouseOut] Function optional
    • [selectionColor='#0000FF'] String optional
    • [addLayers=false] Boolean optional

      if true adds automatically all the layers available in the page of the current result set.
      See also addLayersButton method

    • [showLayersControl=false] Boolean optional

      if set to true a map control is showed on the right-top corner. The control allows to select/deselect the layers added to the map

    • [layersControlWidth=155] Boolean optional
    • [layersControlHeight=100] Boolean optional
    • [layersControlOpacity=0.8] Boolean optional
  • dabNode DAB

Methods

addLayersButton

(
  • node
)

If the given node has layers, this method returns a FontAwesomeButton ready for adding the layers to the map.
See also addLayers option

Parameters:

mapType

()

Returns the map type

Returns:

the map type

markerIcon

(
  • node
  • options
  • [url]
)

Parameters:

selection

() BBox

Returns:

BBox:

spatialRelation

()

update

(
  • resultSet
)

Updates the widget with the first page of the current result set

Parameters:

Properties

gmap

gmaps.js

The gmaps.js instance

olmap

Openlayers 3 API

The Openlayers 3 API instance