map

map

new map()

Module for mapping data.

Source:

Methods

(static) addGeoRasterLayer(params, args) → {Object}

Adds a georaster layer to the map for elevation/terrain visualization

Parameters:
Name Type Description
params Object

Contains: maptype (google, leaflet)
args Object

Contains: data (georaster object), name (layer name), style options
Source:
Returns:

Georaster layer object

Type
Object
Example
hydro.map.addGeoRasterLayer({params: {maptype: 'leaflet'}, args: {data: georasterObj, name: 'DEM'}})

(static) addMarker(params, args) → {Element}

Adds a new marker to the map, given coordinates, map type and marker type.

Parameters:
Name Type Description
params Object

Contains: maptype (google, osm)
args Object

Contains: markertype (rectangle, circle, circleMarker, polyline, polygon, marker), coord (JS array with coordinates)
Source:
Returns:

Layer object rendered on the map

Type
Element
Example
hydro.map.addMarker({params: {maptype: 'someMap'}, args: {markertype: 'someMarker', coord: [markerLat, markerLon]}})

(static) addPopup(params, args, data)

Adds a popup to a specific layer with support for various content types including charts.

Parameters:
Name Type Description
params Object

Configuration parameters

Properties
Name Type Attributes Description
type string

Type of popup content: 'chart', 'html', 'text'
name string <optional>

Optional title for the popup
args Object

Arguments

Properties
Name Type Attributes Description
layer Object

The layer object to attach the popup to
chartOptions Object <optional>

Configuration options for the chart (passed to visualize.draw)
data Object | Array

Data to be visualized in the popup
Source:

(static) draw(params) → {Element}

Adds a drawing tool functionality to an exisiting map to create layers inside.

Parameters:
Name Type Description
params Object

Contains: maptype(google, osm)
Source:
Returns:

Toolkit layer added to map.

Type
Element
Examples
// Enable standard drawing tools on the map
hydro.map.draw({
  params: { maptype: 'leaflet' }
});
// The draw tool allows users to create:
// - Markers
// - Polylines
// - Polygons
// - Rectangles
// - Circles
// Created shapes are added to a FeatureGroup and can be interacted with.

(static) generateColors() → {String}

Returns a hex color for rendering

Source:
Returns:
  • Random color to be rendered.
Type
String

(static) geoJSON(params, data) → {Element}

geoJSON type renderer for Leaflet and Google Maps. It attaches point, lines, and polygon layers to a rendered map. Must be called through the Layers function passing the argument

Parameters:
Name Type Description
params Object

Contains: maptype (google, osm)
args.markerOptionsCallback function

Callback function to set the geojsonMarkerOptions based on geoJson properties
args.markerPopupCallback function

Callback function to set the bindPopup based on geoJson properties
args.onClickFunction function

Callback function for an onClick event for the geoJson properties
data Object

Data as geoJSON format compliant to OGM standards. See: https://docs.ogc.org/is/17-003r2/17-003r2.html
Source:
Returns:

geoJSON layer added into a rendered map.

Type
Element
Example
hydro.map.geoJSON({params: {maptype: 'someMapType'}, data: {somegeoJSON}})

(static) kml(params, data) → {Element}

Creates layer of kml data passed through an object to anexisting map. Notice that the map most be already created for the method to be used.

Parameters:
Name Type Description
params Object

Contains: maptype (google, osm)
data Object

Contains: KML data in XML format.
Source:
Returns:

Appends KML layer to rendered map.

Type
Element
Example
hydro.map.kml({params: {maptype: 'someMapType'}, data: {someKMLdata}})

(static) Layers(args, data) → {Element}

Layer function for appending tiles, geodata, markers, kml, georaster, or drawing tools to a map.

Parameters:
Name Type Description
args Object

Contains: type (tile, geodata, markers, kml, georaster, draw, removelayers), name (name of layer)
data Object

Contains: data as a JS array or georaster object.
Source:
Returns:

Layer appended to a map div that has already been created. The layer is added into the global layer object.

Type
Element
Examples
// Add a standard OpenStreetMap tile layer
hydro.map.Layers({
  args: { type: 'tile', name: 'OpenStreetMap' }
});
// Add a GeoJSON layer with custom styling
hydro.map.Layers({
  args: { 
    type: 'geojson', 
    name: 'Rivers',
    styleFunction: (feature) => ({ color: 'blue', weight: 2 })
  }, 
  data: riverGeoJSON 
});
// Add markers to the map
hydro.map.Layers({
  args: { 
    type: 'marker', 
    name: 'Station Locations',
    markertype: 'marker',
    coord: [42.3601, -71.0589],
    popUpContent: 'Boston Station'
  }
});
// Add a WMS layer (e.g., weather radar)
hydro.map.Layers({
  args: {
    type: 'wms',
    name: 'Radar',
    layers: 'nexrad-n0r-900913',
    format: 'image/png',
    transparent: true
  },
  data: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi'
});
// Add a GeoRaster layer (DEM/Elevation)
hydro.map.Layers({
  args: { 
    type: 'georaster', 
    name: 'Elevation',
    styleOptions: { colorScheme: 'terrain', opacity: 0.7 }
  }, 
  data: georasterObj 
});

(static) loader(params, args:) → {Element}

Calls the map type according to the user input. The renderMap function is required for map visualization.

Parameters:
Name Type Description
params Object

Contains: maptype (google or osm[leaflet])
args: Object

Contains: key (required by google)
Source:
Returns:

Libraries appended to the header of webpage.

Type
Element
Example
hydro.map.loader({params: {maptype: 'osm'}, args: {key: 'somekey'}})

(static) markerStyles(params) → {CSSRule}

Creaes different styles for depending on the marker that has been selected for drawing.

Parameters:
Name Type Description
params Object

Contains: maptype (google, osm), fig (rectangle, circle, circleMarker, polyline, polygon, marker)
Source:
Returns:

New styles that are used for drawing a marker.

Type
CSSRule
Example
hydro.map.markerStyles({params: {map: 'someMap', fig: 'someFig'}})

(static) renderMap(param, args) → {Element}

Rendering function according to the map selected by the user. Currently loads everything with the Leaflet render and OSM tile. The funciton loads the library to the header. It automatically is zoomed to 15.

Parameters:
Name Type Description
param Object

Contains: null object, not necessary to be passed.
args Object

Contains: maptype (osm, google maps), lat, lon
Source:
Returns:

Map object appended to the web page. zoom.

Type
Element
Example
hydro.map.renderMap({params: {}, args: {{maptype: "leaflet", lat: "40", lon: "-100"}})