Mendix Community
Published in

Mendix Community

Custom Maps using Leaflet.js in Mendix

Custom Maps using Leaflet.js in Mendix

We’ll go through several different requirements for the integration of a map in this blog along with their corresponding solutions.

Let me begin by giving a brief overview of Leaflet.js before moving on to the requirements.

“Leaflet is an open-source JavaScript library for interactive maps. It functions well on all popular desktop and mobile platforms and may be enhanced with a variety of plugins.”

A quick pre-requisites check before proceeding:

1) The Mendix Marketplace module HTML and Javascript snippet should be used.

2) The Head section of index.html must be updated by including this CSS file.

<link rel=”stylesheet” href=”https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"integrity=”sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==”crossorigin=””/>

Let’s begin right away!

For illustration purposes, let us imagine that we have a client who is involved in a business that has numerous branches throughout the world. The client plans to open new locations and wants to research specific activities as well as any other type of activity that happens in all its locations.

The map must first be set up with a zoom level and set the view to our preferred geographic coordinates:

var map = L.map(‘map’).setView([51.505, -0.09], 13);

For illustration, we are setting the map view to the Mendix’s Headquarters in Rotterdam.

Mendix Headquarters — Rotterdam

It’s done! Looks great, right?! This is a simple, functional Leaflet map with OpenStreetMap. We could get the map view with the coordinates and zoom level.

Additionally, it supports all mouse functions including moving and zooming.

The next task is to place markers throughout the entire firm.

To add a marker to the map,

var marker = L.marker([51.5, -0.09]).addTo(map);

This can be added more than once with various coordinates for various sites.

Mendix Rotterdam with marker

Another awesome feature that Leaflet supports is that we can replace the standard marker icon with one that is personalized. However, we’ll cover this in-depth in another blog, as this one is focused on step one customizations.

We now have a different requirement: The map must display a specific area with circles or polygons at the specified coordinates.

Do you believe that adding a shape with coordinates, a background color, opacity, and other properties are difficult?

How do you feel knowing that it only takes three to four lines of coding?? This is it!!

Circle:

var circle = L.circle([51.508, -0.11], {color: ‘red’,fillColor: ‘#f03’,fillOpacity: 0.5,radius: 500}).addTo(map);

Polygon:

var polygon = L.polygon([[51.509, -0.08],[51.503, -0.06],[51.51, -0.047]]).addTo(map);

The map now looks like this:

Mendix Rotterdam with a marker, circle and polygon

Now we get an intriguing request from our client!! He wants to obtain all the location's latitudes and longitude from his map rather than continuing to use a third-party map provider. He wants to see that feature added to his map service.

We now have a straightforward function to obtain coordinates: all we need to do is connect it to our event listeners.

function onMapClick(e){alert(“You clicked the map at “ + e.latlng);}map.on(‘click’, onMapClick);

Our coordinates will appear in an alert message as a result, but for a more user-friendly interface, we’ve created a pop-up that displays them wherever the user clicks.

var popup = L.popup();function onMapClick(e) {popup.setLatLng(e.latlng).setContent(“You clicked the map at “ + e.latlng.toString()).openOn(map);}map.on(‘click’, onMapClick);

The outcome:

Popup to display co-ordinates

Amazing functionalities in a few seconds!

Now our client has one last requirement: “We have markers for each of our businesses, labels for each marker, and even coordinate retrieval function. Is it possible to display each company’s logo on the marker by superimposing an image on it?”

Yes!! The image can be overlaid by simply adding another layer with coordinates.

var imageUrl = ‘https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';var errorOverlayUrl = ‘https://cdn-icons-png.flaticon.com/512/110/110686.png';var altText = ‘Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.’;var latLngBounds = L.latLngBounds([[40.799311, -74.118464], [40.68202047785919, -74.33]]);var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {opacity: 0.8,errorOverlayUrl: errorOverlayUrl,alt: altText,interactive: true}).addTo(map);

By placing the image in the on-click of the marker, as we did before, we can give a more robust interface.

Image overlay on Marker

It would be great if an image pops up when the marker is clicked, right? We have a surprise for our client!! In addition to what they requested, we can offer them a recommendation for the video overlay and ask, “How about this?” For video overlay, a few lines of coding are required. It is as follows:

var videoUrls = [‘https://www.mapbox.com/bites/00188/patricia_nasa.webm',‘https://www.mapbox.com/bites/00188/patricia_nasa.mp4'];var errorOverlayUrl = ‘https://cdn-icons-png.flaticon.com/512/110/110686.png';var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {opacity: 0.8,errorOverlayUrl: errorOverlayUrl,interactive: true,autoplay: true,muted: true,playsInline: true}).addTo(map);

The outcome of using video overlay:

Video overlay on Marker

Coming up next

Other functions that Leaflet allows us to perform in Mendix, shall be posted in the next blog.

A few of those functions would be:

1) Changing the map’s default marker with a custom marker.

2) Using the source and destination coordinates, list the road route and directions.

I hope you would have found this blog useful and had fun doing some custom maps in Mendix using Leafletjs! Feel free to get in touch with me if you have any questions.

Thank you so much and happy coding!

Read more

From the Publisher -

If you enjoyed this article you can find more like it on our Medium page. For great videos and live sessions, you can go to MxLive or our community Youtube page.

For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.

Interested in getting more involved with our community? Join us in our Slack community channel.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store