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 } }); } ); });
Comments
0 comments
Please sign in to leave a comment.