Plot marker on a map in canvas created by processing

I am creating a GUI for my airplane which should look like the image

So need to add a map showing live location of my airplane How would I do this using processing

1 Like

Hi iamgsshetty
First you load the map with loadImage(), then load a small plane image with transparent background.
Than in draw() you use image() to draw map, and after that draw the plane. You can use the map() function to display real distances if you wish.


Or you could take a look at Unfolding. It‘s a library that gives you access to Google Maps (and others) and allows you to place markers (and Chance their image).

Although you‘d probably need an Internet Connection to load the map, so maybe that‘s not ideal :sweat_smile:


You might also want to consider the tradeoffs of Processing (Java) vs p5.js here. If you want to be using web-embedded maps, then building a web interface that mixes controls with a map embed might be easier in JavaScript – again, depending on your specific needs.

Have a look at the Unfolding library, thus you can access a number of maps (like Google Maps) + place markers.