Example Code

Maps for WebVI (Google Maps and Open Street Maps)

Products and Environment

This section reflects the products and operating system used to create the example.

To download NI software, including the products shown below, visit ni.com/downloads.

    Software

  • G Web Development Software
  • LabVIEW NXG
  • LabVIEW NXG Web Module

Code and Documents

Attachment

Description

This library provides APIs for using Google Maps and OpenStreetMap (via the Leaflet) library. See a demo online.

 

 

 

Features

  • Create Maps at specific latitude & longitude
  • Programmatically create markers:
    • Custom marker images
    • Update marker popup content
    • Trigger showing marker popup
    • Listen for marker clicks
    • Marker grouping for large number of markers
  • Programmatically create shapes:
    • Polylines

 

Important Note:

  • This library does not include map tile content and makes request to 3rd party servers for map content.
  • The Google Map API requires the creation of an API key (see GoogleMap::Map::Initialize Map.gvi).
  • The Leaflet Map API requires use of a tile server. The API includes several example tile servers:

 

Diagram Palette 

 

Google Maps

 

Leaflet

 

 

Changelog

Release 8: Support for G Web Development Software 2021

Release 7: Breaking Change: VIs now take a coordinate gtype instead of a separate latitude and longitude. Added support for polyline shapes. 

Release 6: Add Zoom to Marker in Marker Group VI for Leaflet library to use when opening a marker in a marker group. 

Release 5: Breaking Change:  Previously Create Marker took a map reference and automatically added a marker to a specified Map. This change enables support for Marker Groups by allowing markers to be added to either a Map using the Add Markers to Map VI or a Marker Group using the Add Marker Group to Map VI.

Release 4: Adds support for marker click events and adds VI icons to the library VIs.

Release 3: First release available on the community

 

 


Milan

Example code from the Example Code Exchange in the NI Community is licensed with the MIT license.

Comments
søren_hallberg_jensen
Member
Member
on

This is such a great toolkit for creating interactive geographical MAPs in LabVIEW NXG Web, I highly recommend it. Thanks.

 

Any chance we could get a grouping function ? I currently have a project with some 250 units worldwide, however, many of them are located rather close to each other, making it hard to see that there are multiple units without zooming.

søren_hallberg_jensen
Member
Member
on

Attached an example of how I use this tool. Unfortunately I cant show the web-site. Each of the dots indicate "one device" either in running = green or in stopped = red mode. More data can be visualized upon clicking on the icons or selecting "user interface/graphs/list view". 

 

WebGUI.png

MilanR
Active Participant
Active Participant
on

Hi søren_hallberg_jensen,

 

I'm glad the Map API has been useful! I made an update as Release 5 that exposes grouping support for both of the libraries. There is a small API change to allow markers to be added to either a Marker Group or directly to the map as described in the Changelog for Release 5.


Milan
zhangzzd
Member
Member
on

Hello, how do I create a function to draw polylines on a map?

zhangzzd
Member
Member
on

 

Hello! I want to create polylines on the map. How do I do that? I've tried everything and I've failed, and I need your help.

zhangzzd
Member
Member
on

BKLQ7K5FQ05SR@1{V)_XGQE.png

Hello, How do I add the right function to create polyline on the map?

MilanR
Active Participant
Active Participant
on

Hi zhangzzd,

 

I updated the Map example to include a demonstration of creating Polyline shapes. Hopefully that is a useful getting started point for seeing how to add new behavior to the library!


Milan
zhangzzd
Member
Member
on

@MilanR Thank you very much!

zhangzzd
Member
Member
on

@MilanR Thank you very much!I was able to create a polyline on the map, using the example you provided,and I want to achieve the loading of offline maps, how to achieve it?

Contributors