Niagara 4 - Map Options with Data

For the last few months, I've been working on loads of different mapping options for Tridium Niagara 4. A map is a great way to show a lot of sites, say as a dashboard landing page. There are a few map providers which provide loads of map features. Both Open Street Maps (map talks), and MapBox provide the functionality needed, such as adding markers, data, clustering, etc.

Niagara Open Street Maps:

The first is a simple map with just markers. Example:

Technically, it uses an iframe with srcDoc to build up the map. More on why I did it this way later. It takes a JSON config file which resides in the station shared folder. More info here:

---------------------------------------------------------------------------------------------------------------

N4 Street Maps With Values

The next mapping option shows values from station points on the tooltip, as well as markers change color in real-time. You can also add your own marker images, as well as many other options. Here I've added clustering, a marker search box, multiple theme, and icons.

More Info:

---------------------------------------------------------------------------------------------------------------

Niagara 4 - 3D Maps with Values

The 3D Mapping displays buildings in 3D using the Mapbox api and displays a street map of the world. Optionally, showing the buildings is quite useful, say you want to show a map for a large university campus that has many buildings. You might have a jace at each building you want to show point values. The free version of the mapbox api, allows you to load the page 50,000 times a month, which is more than enough. The MapBox api is quite extensive and you can configure it with many options, layers, themes, clustering, etc. Instead of showing a map, there is an option to show the markers as a table as well.

Again, you can add your own marker image, update points in real-time, change marker colors, tooltip images, clustering:

search box:

Additionally, you can set the latitude/longitude to a numeric point; and when it updates, you can make the marker move.

More Info:

---------------------------------------------------------------------------------------------------------------

N4 Vehicle Tracking Map

The Vehicle Tracking Map widget uses the Maptalks API and displays a street map of the world and you can add markers/vehicles via folders you have setup in the station. Geo-coodinates lat/long points in each folder update and move the markers in real-time to their location. NOTE: the service that updates the lat/long of the point automatically is not part of this widget and must be done by yourself. You could consider using some mobile app, sms, or rest api to update the Geo Location point.

More Info:

---------------------------------------------------------------------------------------------------------------

Mapbox Map - 3D Maps with Tiles and Data from MQTT, Http, or N4/AX

The last option is from View Builder IOT?? solution. This options allows you to pull in data from MQTT, HTTP(s) Rest API, or N4/Ax points, and show it on the tiles/tooltips. It still updates in real-time and doesn't require any special drivers.

Now, I could've used react-gl and map-gl npm libraries, but they add a whopping 2mb to the overall solution. You can actually do without it, again using an iframe, react hooks, and use effect methods. I was able to keep the payload light and include all the features. I didn't think it was necessary to add so much to the solution as we're going out to the internet anyway to pull in the map data. Might as well just load it when you view the map.

Instead of using a json config file, like I have done with others, you can add a marker to the screen, and then move it to the location required. Once you're happy with the map, you can come out of design mode and show the markers and data. Data and markers update in real-time.

In addition to the marker search, I have added the location search, which searches locations worldwide. You're allowed 100,000 free requests a month on the free mapbox api plan.

Example:

More Info:

---------------------------------------------------------------------------------------------------------------

That's it for today. Stay tuned for some more articles.