Methods
(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) 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
Example
hydro.map.draw({params:{maptype: 'someMap'}})(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 or drawing tools to a map.
Parameters:
| Name | Type | Description |
|---|---|---|
args |
Object | Contains: type (tile, geodata, markers, kml, draw, removelayers), name (name of layer) |
data |
Object | Contains: data as a JS array. |
- Source:
Returns:
Layer appended to a map div that has already been created. The layer is added into the global layer object.
- Type
- Element
Example
hydro.map.Layers({args: {type: 'tile', name: 'someName'}, data: [data1, data2...]})
hydro.map.Layers({args: {type: 'geodata', name: 'someName'}, data: {somegeoJSON}})
hydro.map.Layers({args: {type: 'marker', name: 'someName'}, data: [markerLat, marketLon]})(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"}})