Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Created February 3, 2021 00:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/3388a4589aa43af7bcb9b54afd5510a1 to your computer and use it in GitHub Desktop.
Save ThomasG77/3388a4589aa43af7bcb9b54afd5510a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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', // 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: [-122.3190, 37.2147], // starting position
zoom: 12 // starting zoom
});
// Not working as there is a CORS issue so bypass using a proxy
var url = 'http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment