OpenLayers Tutorial 3 | Map with polygon and popup from GeoJSON using JavaScript

This video shows how to load GeoJSON with polygon features from an external file with OpenLayers and how to create a popup from GeoJSON in OpenLayers.
Written tutorials
Step-by-step add GeoJSON (in single file): docs.maptiler....
Add popup (in 3 files): openlayers.org...
Vector Data Editor on MapTiler Cloud: cloud.maptiler...
Episodes of this series:
Markers: • OpenLayers Tutorial 1 ...
GeoJSON with points and custom icon: • OpenLayers Tutorial 2 ...
Do you need the best maps for your web or mobile app?
Start with MapTiler at maptiler.com/cloud
Thank you for watching this video.
If you find this video helpful, don't forget to like it and subscribe to our channel for the latest videos: maptiler.link/...
Follow us on
Twitter: / maptiler​
Facebook: / maptiler​
LinkedIn: / maptiler

[@gabrmaciel-1999]

1:30 Hi, can I fill the polygon with a 'backgroundImage' or something like this here? thanks for the video.

[@youngtotem]

Is there anyway you can add images to a pop-up too? How can you make the pop-up be a side window that collapes?

[@georgeuy3465]

can i make a customized LONG & LAT data? within the projects backend?

[@user-cv3im6gn3m]

What if I have multiple layers and I would like to get info just for selected one?

[@cmlosaria]

Appreciate the tutorial but the sample scenario kills me

[@TheRolldone]

the real case is what if we have a lot of geojson? is it getting slow?

[@maptilerofficial]

Yes, a lot of geojsons will be slow; in such cases, it is better to convert geojson to tiles. You can do so with MapTiler Engine: bit.ly/4aFBSvl Then, you can include those tiles in the map.

[@aliozturk-qc4he]

hello, I am writing to you from Turkey and thank you for sharing your valuable information with everyone here. This is very valuable. I was going to have a question and when I search the internet I can't find it anywhere. I want to cover the whole world map with popup hexagon grids, each one will be named uniquely. I have never been able to find and know how to do this. I'm stuck.

[@maptilerofficial]

Hi Ali, I am glad that the video was helpful for you. The solution to your problem is the same as it was shown in the video. However, with large data, you might experience performance issues. You can optimize that by using tiles instead of GeoJSON. You can create tiles with MapTiler Engine www.maptiler.com/engine/.

[@Vodorodtyt-msk]

tell me how to implement sending a geotag and writing it to the card using Telegram app? Can it be done with the bluetooth button? thank you very much for your work🫶🏻

[@maptilerofficial]

Hi, your question is quite far from a topic of this video try to ask on Telegram related forums :)

[@gituman3858]

hi is there a way to add a legend to the map

[@maptilerofficial]

Hi @Gituman you can, for example, create HTML element overlay with a legend. Learn how to do it here: maptiler.link/3X2ajVk