index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Demo raster tile source + GeoJSON line + onclick on map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js'></script>
<link href='https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["a", "b", "c"].map(subdomain => "//" + subdomain + ".tile.openstreetmap.org/{z}/{x}/{y}.png"),
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 20
}]
},
center: [-122.3190, 37.2147],
zoom: 12
});
var url = '//gisgeek.com/BikeTrails2.geojson';
url = `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`
map.on('load', function () {
map.addSource('trails', {'type': 'geojson', 'data': url});
map.addLayer({
'id': 'trails',
'type': 'line',
'source': 'trails',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#222222',
'line-width': 2
}
});
});
map.on('click', function(e) {
console.log(e);
var features = map.queryRenderedFeatures(e.point, {
layers: ['trails']
});
if (!features.length) {
return;
}
var feature = features[0];
var popup = new mapboxgl.Popup({
offset: [0, -15]
}).setLngLat(e.lngLat).setHTML('<h2>' + feature.properties.Name + '</h2>' + "Name : " + feature.properties.Park).addTo(map);
});
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['trails']
});
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
</script>
</body>
</html>