Skip to content

Instantly share code, notes, and snippets.

@AlanPew

AlanPew/index.html

Last active May 31, 2022 02:35
Show Gist options
  • Save AlanPew/6d3d2f7def0d423db03d25d0dd331511 to your computer and use it in GitHub Desktop.
Save AlanPew/6d3d2f7def0d423db03d25d0dd331511 to your computer and use it in GitHub Desktop.
Download ZIP
scrape
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://code.jquery.com/jquery-1.6.4.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
<script src='https://raw.githack.com/mapbox/polyline/master/src/polyline.js'></script>
<script src="https://dl.dropboxusercontent.com/s/msbgdsvwp2pe1it/jsontest.js?dl=1?raw=1" type="application/javascript"> </script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<style>
.file-data {
-moz-tab-size: 4;
tab-size: 4;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var finishdownloading=true;
var jsonsource= [];
var idList=[];
var map = new mapboxgl.Map({
container: 'map',
style: 'https://dl.dropboxusercontent.com/s/j5ohy94t92ati4y/light_base_01.json?dl=1?raw=1',
center: [-77.5, 37.5],
zoom: 12,
hash: true
});
function checkID(features){
var newFeatures=[];
var len = features.length;
for (var i = 0; i < len; i++) {
// console.log(jsontest2.features[i]);
try{
var geoID=features[i].properties.id;
if (!idList.includes(geoID)){
idList.push(geoID);
newFeatures.push(features[i]);
}
}
catch (err) {
console.log("error adding id");
//console.error(err) // will log the error with the error stack
}
}
return features;
};
function renewJSON(){
var bounds = map.getBounds();
console.log('bounds');
console.log(bounds);
var swbounds = bounds._sw;
var nebounds=bounds._ne;
var address = "https://gpstrails.info/ex/gl/trailfork/trailfork.php?west="+swbounds.lng+
"&south="+swbounds.lat+"&east="+nebounds.lng+"&north="+nebounds.lat;
var jsontest;
if (finishdownloading){
finishdownloading=false;
$.get(address).done(function (data) {
console.log('renew jquery request');
console.log(data);
jsontest = JSON.parse(data);
jsontest=funtime2(jsontest);
console.log(jsontest)
//map.getSource('jsontest').setData(jsontest);
//jsonsource.features=jsontest.features;
//jsonsource.features.concat(jsontest.features);
var newFeatures = checkID(jsontest.features);
jsonsource.features.push.apply(jsonsource.features,newFeatures);
//this works>>>jsonsource.features.push.apply(jsonsource.features,jsontest.features);
map.getSource('jsontest').setData(jsonsource);
finishdownloading=true;
});
}
return jsontest;
}
map.addControl(new mapboxgl.NavigationControl());
function funtime2(jsontest2){
console.log("jsontest2 features and length");
console.log(jsontest2.features.length);
console.log(jsontest2.features);
var len = jsontest2.features.length;
for (var i = 0; i < len; i++) {
// console.log(jsontest2.features[i]);
try{
var geoCoords=jsontest2.features[i].geometry.encodedpath;
var newE = polyline.toGeoJSON(geoCoords);
jsontest2.features[i].geometry=newE;
delete jsontest2.features[i].geometry.encodedpath;
delete jsontest.features[i].geometry.simplepath;
console.log(jsontest.features[i].geometry.coordinates);
jsonsource.features.push( jsontest.features[i]);
console.log("length");
console.log(jsonsource.features.length);
}
catch (err) {
console.log("error");
//console.error(err) // will log the error with the error stack
}
}
return jsontest2;
};
map.on('load', function() {
var layers = map.getStyle().layers;
// Find the index of the first symbol layer in the map style
var firstSymbolId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol') {
firstSymbolId = layers[i].id;
break;
}
}
map.addSource('USGS_Source', {
'type': 'raster',
'tiles': [
'https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}?blankTile=false'
],
'tileSize': 256
});
map.addLayer({
'id':'USGS_Source',
'type': 'raster',
'source':'USGS_Source',
'paint': { 'raster-opacity': 1,
'raster-opacity-transition': {
duration: 0
}}
},firstSymbolId);
map.on('moveend', 'jsontest',function(e) {
renewJSON();
});
map.on('mousemove', 'jsontest',function(e) {
//mapPopUp(e);
});
map.on('mouseenter', 'jsontest',function(e) {
//mapPopUp(e);
});
function mapPopUp(e){
popup.remove();
map.getCanvas().style.cursor = 'crosshair';
var bbox = [[e.point.x - 1, e.point.y - 1], [e.point.x + 1, e.point.y + 1]];
var coordinates = e.features[0].geometry.coordinates.slice();
var featureName = e.features[0].properties;
popup = new mapboxgl.Popup
({closeButton: false,
closeOnClick: false})
.setLngLat(e.lngLat)
.setHTML(featureName+'"')
.addTo(map);
}
function funTime(jsontest){
for (var i = 0; i < jsontest.features.length; i++) {
try {
var geoCoords=jsontest.features[i].geometry.encodedpath;
var newE = polyline.toGeoJSON(geoCoords);
jsontest.features[i].geometry=newE;
delete jsontest.features[i].geometry.encodedpath;
delete jsontest.features[i].geometry.simplepath;
// console.log(jsontest.features[i].geometry.coordinates);
// console.log("transformed coordinates");
}
catch (err) {
// console.log("error");
// console.error(err) // will log the error with the error stack
}
}
};
function getJSON(){
var bounds = map.getBounds();
console.log('bounds');
console.log(bounds);
var swbounds = bounds._sw;
var nebounds=bounds._ne;
console.log(address);
var address = "https://gpstrails.info/ex/gl/trailfork/trailfork.php?west="+swbounds.lng+
"&south="+swbounds.lat+"&east="+nebounds.lng+"&north="+nebounds.lat;
var nocorsAddress= "https://www.trailforks.com/rms/?rmsP=j2&mod=trailforks&op=map&format=geojson&z=13.074601646266203&layers=markers,tracks,polygons&markertypes=poi,directory,region&region=&bboxa="+swbounds.lng+","+swbounds.lat+","+nebounds.lng+","+nebounds.lat+"&display=difficulty&activitytype=1&condition_time=0&trailids=&rid=0&season=0&ebike=0&filters=&hideunsanctioned=0";
console.log(address);
console.log('address');
$.get(address).done(function (data) {
console.log('jquery request');
console.log(data);
var jsontest = JSON.parse(data);
console.log(jsontest);
jsontest=funtime2(jsontest);
jsonsource=jsontest;
//adding features to list of features IDs below
var newFeatures = checkID(jsontest.features);
map.addSource("jsontest", {
"type": "geojson",
'data':jsonsource
});
map.addLayer({
"id": "jsontest",
"type": "line",
"source": 'jsontest',
"paint": {
"line-color": [ "get", "color"],
"line-width": [ "get", "width"],
"line-opacity":["get", "opacity"],
},
"filter": ["!=", "type", "route_sidebar"]
});
});
var xhr = new XMLHttpRequest();
xhr.open('GET', address, true);
// xhr.setRequestHeader('Accept', 'application/xhtml+xml')
//xhr.setRequestHeader("Access-Control-Allow-Origin","https://bl.ocks.org/");
//xhr.setRequestHeader("Host", 'https://www.trailforks.com/');
let data = {
headers: {
},
method: 'GET'
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(JSON.stringify(data));
console.log('sent xhr request ');
xhr.onreadystatechange = function(){processRequest(name);};
function processRequest(name,e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
console.log('response');
console.log(response);
funTime(response);
}
}
};
console.log('jsontest');
console.log(jsontest);
getJSON();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment