How to add a GeoJSON in MapLibre
Watch the following video to learn the whole process step-by-step:
Code example (HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.14.0/maplibre-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.14.0/maplibre-gl.css" rel="stylesheet" />
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map"></div>
<button id="fly"></button>
<p><a href="https://www.maptiler.com/copyright/" target="_blank"> © MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank"> © OpenStreetMap contributors</a></p>
Code example (CSS)
#fly {
position: relative;
margin: 0px auto;
width: 10%;
height: 0px;
padding: 0px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #000;
background: #68707b;
}
Code example (JSON)
var map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=<get_your_own>',
center: [-0.07, 51.5],
zoom: 6,
hash: true,
});
map.on('load', function () {
map.loadImage(
'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-plane-512.png',
function (error, image) {
if (error) throw error;
map.addImage('AirPort_icon', image);
map.addSource('AirPorts_points', {
type: 'geojson',
data: 'https://api.maptiler.com/data/e3d8da3e-b365-4e71-9050-609de1ab6606/features.json?key=<get_your_own>'
});
map.addLayer({
'id': 'AirPorts',
'type': 'symbol',
'source': 'AirPorts_points',
'layout': {
'icon-image': 'AirPort_icon',
'icon-size': 0.05
}
});
}
);
});