Files
librenms-librenms/doc/Extensions/World-Map.md
eskyuu 30953c386f Add functionality for custom maps (weathermaps) (#15633)
* Initial commit with editor.

* Added custom map models and database migrations.
Modified the controller and view to support saving the custom map settings to the database

* Added menu items and sorted out access permissions for maps and nodes

* Cleaned up some of the conditions in the javascript section of the blade

* Started work on the map data save

* Save of map nodes and edges is complete

* Got the map to load data on page load and added the delete functionality

* Fixed a typo and made link colour black if intertface is down

* Various usability fix-ups

* Show the save button on node and edge delete

* Fixed up access for users without global read

* Increase typeahead search size and standardised the way modals are triggered.

* Update data fetch to copy values into array so I can add more fields

* Convert blank array check to use count()

* Formatting changes

* More formatting fixes

* Formatting again

* DB schema update

* Revert previous commit

* Pass device id to pages

* Remove bad characters from javascript

* Re-add the - character in search results

* Update to avoid background colour being set to the current colour for offline devices

* Fixed a bug in speed detection when no suffix is given

* Fixed up the speed colour calculation and added comments

* Update default edge font size to 12

* Reduce arrow size

* Formatting fix

* Update the custom map controller to handle null interface speeds

* Alter JSON columns to be longtext instead

* Only refresh map data on successful save

* Update labels on default settings to make it clear that they are not saved

* Added timestamps to all custom map tables
Use HasFactory instead of static definitions for custom map tables
convert JSON DB fields to longtext and updated PHP to do the appropriate JSON decoding as a result

* Added missing vis.js images for the editor

* Split the custom map blade into different pages

* formatting fixes

* Initial commit with editor.

* Added custom map models and database migrations.
Modified the controller and view to support saving the custom map settings to the database

* Added menu items and sorted out access permissions for maps and nodes

* Cleaned up some of the conditions in the javascript section of the blade

* Started work on the map data save

* Save of map nodes and edges is complete

* Got the map to load data on page load and added the delete functionality

* Various usability fix-ups

* Show the save button on node and edge delete

* Fixed up access for users without global read

* Increase typeahead search size and standardised the way modals are triggered.

* Convert blank array check to use count()

* Formatting changes

* More formatting fixes

* Formatting again

* DB schema update

* Revert previous commit

* Pass device id to pages

* Remove bad characters from javascript

* Re-add the - character in search results

* Update to avoid background colour being set to the current colour for offline devices

* Reduce arrow size

* Only refresh map data on successful save

* Update labels on default settings to make it clear that they are not saved

* Added timestamps to all custom map tables
Use HasFactory instead of static definitions for custom map tables
convert JSON DB fields to longtext and updated PHP to do the appropriate JSON decoding as a result

* Added missing vis.js images for the editor

* Split the custom map blade into different pages

* Updated the custom maps to use the select2 searches for ports and devices

* Fix port search clearing with select2

* Update DB schema to add timestamps

* Add the ability to set a node alignment value where nodes will align to a grid

* Add a checkbox to re-center edge lines

* Schema update for node alignment

* Removed unused route

* Fixups after rebase

* Remove DevicePortSearchController

* Rebase fixups

* Remove unneeded controller

* Formatting fixes

* Update all network map documentation

* Fixed typo in doc

* Change background imgae database migration

* Update migration for custom map background to fix schema error

* Place a try/catch around the BLOB->MEDIUMBLOB migration

* Formatting fix

* Moved custom map background image location and added some SVG images to test as image options

* Updated the editor to use a static set of device images

* Update the image logic in the editor and added to the viewer

* DB Schema update

* Formatting

* remove svg height/width attributes

* Added some more icon options for arrows

* Added database migration to allow nodes to link to another custom map
Fixed an error in the image migration

* Added the ability to link a node to another custom map

* Formatting fixes

* DB Schema update

* Remove images-custom directory

* Explicitly cast map ID to int

* Made the image selection list dynamic based on the contents of the custom map icons directory

* Formatting fix

* Double-clicking on a link will take you to the link

* Remove whitespace

* Add translations
fix an xss and hopefully not add any new ones
refactor node image to use translations with fallback

* split modals out into separate files
return width/height to avoid js scope issues

* Formatting fixes

* refactor edit select page into a "manage" page
Still left:
validation/custom request
Controller refactor
ui tweaks

* MapSettingsRequest

* Refactor more routes, policy, controller
I think this is the last refactor. Everything is now organized in a standard way.
Missing a method to check if a user has access to a map

* Fix booleans and style

* Add versioning to the background image to prevent browser caching

* Fixed the background image update by splitting it into a separate modal
Changed the delete button on the map editor screen to return to the map list

* Formatting fix

* Added double-click actions in editor to edit nodes and edges

---------

Co-authored-by: Tony Murray <murraytony@gmail.com>
2024-01-31 08:56:59 -06:00

4.0 KiB

World Map Configuration

LibreNMS comes with a configurable Geo Map based on World Map Widget to visualize where your equipment is located geographically.

World Map Widget

World Map Widget, requires you to have properly formatted addresses in sysLocation or sysLocation override. As part of the standard poller these addresses will be Geocoded by Google and stored in the database.

Location resolution happens as follows

  1. If device['location'] contains [lat, lng] (note the square brackets), that is used
  2. If there is a location overide for the device in the WebUI and it contains [lat, lng] (note the square brackets), that is used.
  3. Attempt to resolve lat, lng using lnms config:set geoloc.engine
  4. Properly formatted addresses in sysLocation or sysLocation override, under device settings.

Example:

[40.424521, -86.912755]

or

1100 Congress Ave, Austin, TX 78701 (3rd floor cabinet)

Information inside parentheses is ignored during GEO lookup

We have two current mapping engines available:

  • Leaflet (default)
  • Jquery-Mapael

World Map Widget Settings

  • Initial Latitude / Longitude: The map will be centered on those coordinates.
  • Initial Zoom: Initial zoom of the map. More information about zoom levels.
  • Grouping radius: Markers are grouped by area. This value define the maximum size of grouping areas.
  • Show devices: Show devices based on status.

Example Settings:

Example World Map Settings

Device Overview World Map Settings

If a device has a location with a valid latitude and logitude, the device overview page will have a panel showing the device on a world map. The following settings affect this map:

# Does the world map start opened, or does the user need to clivk to view
lnms config:set device_location_map_open false
# Do we show all other devices on the map as well
lnms config:set device_location_map_show_devices false
# Do we show a network map based on device dependencies
lnms config:set device_location_map_show_device_dependencies false

Offline OpenStreet Map

If you can't access OpenStreet map directly you can run a local tile server. To specify a different url you can set:

lnms config:set leaflet.tile_url 'localhost.com'

Additional Leaflet config

lnms config:set map.engine leaflet
lnms config:set leaflet.default_lat "51.981074"
lnms config:set leaflet.default_lng "5.350342"
lnms config:set leaflet.default_zoom 8
# Device grouping radius in KM default 80KM
lnms config:set leaflet.group_radius 1
# Enable network map on world map
lnms config:set network_map_show_on_worldmap true
# Use CDP/LLDP for network map, or device dependencies
lnms config:set network_map_worldmap_link_type xdp/depends
# Do not show devices that have notifications disabled
lnms config:set network_map_worldmap_show_disabled_alerts false

Geocode engine config

!!! setting "external/location" bash lnms config:set geoloc.engine google lnms config:set geoloc.api_key 'abcdefghijklmnopqrstuvwxyz'

Google:
Pros: fast, accurate
Cons: requires a credit card even for a free account

MapQuest:
Pros: free, no credit card required
Cons: inaccurate: most addresses are returned as locations at the center of the US

Bing:
Pros: free, no credit card required, accurate
Cons: Microsoft (debatable)

Jquery-Mapael config

Further custom options are available to load different maps of the world, set default coordinates of where the map will zoom and the zoom level by default. An example of this is:

lnms config:set map.engine jquery-mapael
lnms config:set mapael.default_map 'mapael-maps/united_kingdom/united_kingdom.js'
lnms config:set mapael.map_width 400
lnms config:set mapael.default_lat '50.898482'
lnms config:set mapael.default_lng '-3.401402'
lnms config:set mapael.default_zoom 20

A list of maps can be found in html/js/maps/ or html/js/mapael-maps/.