Show Point data from GeoJSON on the Map
This tutorial shows how to add a Point GeoJSON overlay to the map using OpenLayers.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file.
Check out the step-by-step tutorial How to use OpenLayers
-
Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
-
The next is up to you. You can center your map wherever you desire (modifying the
starting position
) and set an appropriate zoom level (modifying thestarting zoom
) to match your users’ needs. Additionally, you can change the map’s look (by updating thesource URL
); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.
-
To follow this tutorial you can use Airports from Natural Earth. Download the Airports from Natural Earth
-
Open the data tab on MapTiler choose a new dataset - upload dataset and upload ne_10m_airports.shp.
-
Publish the dataset and copy the link to the geojson.
-
Create GeoJSON layer. The following snippet creates GeoJSON layer from an external file with point geometry.
-
Add style to this layer. Here you can get the example image icon-plane-512.png
-
Display the layer.
-
Import the new modules needed to add the new functionality.
import VectorLayer from 'ol/layer/Vector.js'; import VectorSource from 'ol/source/Vector.js'; import Style from 'ol/style/Style.js'; import Icon from 'ol/style/Icon.js'; import GeoJSON from 'ol/format/GeoJSON.js';
-
Create GeoJSON layer. The following snippet creates GeoJSON layer from an external file with point geometry.
-
Add style to this layer. Here you can get the example image icon-plane-512.png
-
Display the layer.