Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Created February 2, 2021 23:55
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ThomasG77/867491f6299f0ed2cfb5d72735b585ea to your computer and use it in GitHub Desktop.
<!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', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["a", "b", "c"].map(subdomain => "http://" + subdomain + ".tile.openstreetmap.org/{z}/{x}/{y}.png"),
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 20
}]
},
center: [1.50, 44], // starting position
zoom: 5 // starting zoom
});
// Not working as there is a CORS issue
// var url = 'http://gisgeek.com/BikeTrails2.geojson';
var url = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_rivers_europe.geojson';
map.on('load', function () {
map.addSource('rivers', {'type': 'geojson', 'data': url});
map.addLayer({
'id': 'rivers',
'type': 'line',
'source': 'rivers',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#0000ff',
'line-width': 2
}
});
});
map.on('click', function(e) {
console.log(e);
var features = map.queryRenderedFeatures(e.point, {
layers: ['rivers']
});
if (!features.length) {
return;
}
var feature = features[0];
// console.log(feature);
var popup = new mapboxgl.Popup({
offset: [0, -15]
}).setLngLat(e.lngLat).setHTML('<h2>' + feature.properties.featureclass + '</h2>' + "Name : " + feature.properties.name + '</h3><br>' + "Id : " + feature.properties.rivernum).addTo(map);
});
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['rivers']
});
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment