Dashboard Template

Version 7.0

Maps:

Hello everyone,

I'm really happy to share the latest version of Dashboard with you because I've incorporated a feature that I'm so excited about and I hope you'll love it too! The ability to display dynamic maps within Ninox is something many of us have been asking for and I'm so pleased to present the leaflet.

The Leaflet is a well-known, mature, super lightweight JavaScript mapping library with an active community. It's open-source and it gives us the power to do amazing things like add markers, popups, overlay lines, and shapes, use multiple layers, zoom, pan, and so much more. You can find plenty of examples in this free online book. As you can see in the screenshot, the map automatically shows markers for each address in the 'Accounts' table (on click, a nice popup appears that displays the Name).

Leaflet doesn't provide maps, but don't worry! It's provider-agnostic, which means you can easily call a map tiles API to get the map you need. Of course, you can use the OpenStreetMap API, which is completely free and open-source. Their maps are raw (precision but not neat), but they're great!

I've been looking into this a bit, and I've found two companies that might be worth checking out: Stadia Maps and MapTiler. I'm going with the Alidade Smooth-style map from Stadia Maps. I just love its muted color scheme and fewer points of interest, which makes it ideal for data presentation. If you want to use any of their maps, create a free account and copy their API call URL (including your API key) inside the 'Settings' subtable. I'll leave my API key for now, so you can see how it works.

Jacques TUR  I was wondering if you think it might be worth trying to download the library and make it work from the Ninox backend. I gave it a go myself, but I couldn't get it to work. Maybe the issue has to do with some icons that are used by the library, but I'm not sure how to modify the code to access them from a Ninox shared link. I've noticed that the Leaflet map hides the option wrench of the parent Ninox element, which we could probably fix by downloading the library and modifying the z-index values. Either way, it's not a big deal, but I'd love to hear your thoughts!

Rafael I've already centred the map on Madrid for you, so you can easily test it! Let me know if there's anything else I can help with.

我是我的我  could this particular implementation meet your needs in China as well?

RoSoft_Steven I saw your earlier post about using Google Maps with multiple markers. I was just wondering if you think Leaflet could be a cheaper alternative that's also functional and powerful. I'd love to hear your thoughts!

Enjoy! 

Version 7.2

Map improvements:

Hey there! You can now add some gorgeous custom icons to your map! Have fun finding or making your favorite icon and save it inside the Dashboard Photos subtable. Then, create a sharing URL and paste it into the respective code field.

Enjoy!

Version 7.3

Map improvements:

Hi everyone, custom markers are a great way to get creative since any image can be a marker on our map. However, if you want each point to have its unique one, it can become a bit time-consuming since you must introduce a new PNG file for each. In this version, I've added a few cool features to make the map more functional.

• Circle markers: The component lets you draw circles with a radius you specify in pixels (so the size in meters changes with zoom). You can use it to set the radius, width, colour, fill colour, opacity, and so on.
• GeoJSON: This is a special type of JSON object that's used to represent vector geometries, with or without non-spatial attributes. GeoJSON is a really popular format for mapping data, and Leaflet is great at handling it. Since Ninox scripting makes it so easy to construct JSON objects, we can present any data from our database on the map in whatever way we want. On top of that, we can also import external GeoJSONs. If you want to create your own, there's a really easy way to do it with geojson.io.
• Multiple maps: You can load a few different base maps, so the user can choose one that suits them best.
• Filtering and grouping: The library can filter the data based on geojson properties, which means we can create groups and show them on the map in a selective way.

In my example, you'll find a layer control panel in the top right corner where you can choose a base map and filter the markers based on the status field of the Accounts table.

Enjoy!