OpenLayers Tutorial 2 | Map with custom points from GeoJSON using JavaScript

Опубликовано: 01 Апрель 2025
на канале: MapTiler

8,200

This video shows how to load and display GeoJSON from an external file with OpenLayers and how to change the icon of GeoJSON points to a custom icon using JavaScript.

Step-by-step tutorial with code used in this video: https://maptiler.link/3rPE79Q
Airports from Natural Earth: https://www.naturalearthdata.com/down...
Vector data editor on MapTiler Cloud: https://maptiler.link/3Ti0a54
Plane icon: https://docs.maptiler.com/openlayers/...
Street map: https://maptiler.link/3TaQZnn

The first episode of this series
Markers:    • OpenLayers Tutorial 1 | Map with a ma...

Do you want to create a map in a specific framework?
React:    • React map with a marker maplibre gl j...
Svelte:    • Svelte map with a marker maplibre gl ...
Vue:    • Build a map in Vue.js in 5 minutes wi...
Angular:    • Learn in 5 min how to build a map in ...

Would you like to try different JavaScript libraries for creating maps?
Try Maplibre:
   • MapLibre tutorials
Try Leaflet:
   • Leaflet JS Tutorial 101

0:00 - 0:22 Introduction
0:23 - 0:52 What is GeoJSON
0:53 - 1:50 Add external GeoJSON to OpenLayers map
1:50 - 2:37 Change the icon

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: https://maptiler.link/YT_Subscribe

Follow us on
Twitter:   / maptiler
Facebook:   / maptiler
LinkedIn:   / maptiler