Skip to content

Instantly share code, notes, and snippets.

@cjseeger

cjseeger/index.html

Created August 22, 2018 15:31
Show Gist options
  • Save cjseeger/2b4d91f7a97822a9ff07d05831229f9e to your computer and use it in GitHub Desktop.
Save cjseeger/2b4d91f7a97822a9ff07d05831229f9e to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet API: Kersten Library Map 2018b Leaflet API: Kersten Library Map 2018 // source http://jsbin.com/gigumit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Leaflet API: Kersten Library Map 2018">
<title>Leaflet API: Kersten Library Map 2018b</title>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<script src="http://129.186.142.145/cjstesting/airports.js"></script>
<script src="https://indicator.extension.iastate.edu/classes/leaflet-ajax-gh-pages/dist/leaflet.ajax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style id="jsbin-css">
#map {
width: 500px;
height: 600px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"> </div>
<script id="jsbin-javascript">
console.clear();
var dist_a = 400;
var map = L.map('map').setView([43.4, -93], 4);
// add an OpenStreetMap tile layer as base map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'The map contributors',
maxZoom: 18
}).addTo(map);
//L.geoJson(airports).addTo(map);
function addPopups(feature, layer) {
layer.bindPopup("Name: "+feature.properties.FACILITY_N +
"<BR> City: "+feature.properties.CITY);
}
/*
L.geoJson(airports, {
onEachFeature:
addPopups,
filter: function(feature, layer) {
//FACILITY_T == 'HELIPORT'
//OWNER_TYPE == 'PU'
if (feature.properties.FACILITY_T == 'HELIPORT') {
return 'true';
}
}
}).addTo(map);
*/
//var jsonTest = new L.GeoJSON.AJAX(["colleges.geojson","counties.geojson"],{onEachFeature:popUp}).addTo(m);
usRouteURL = "https://raw.githubusercontent.com/dakotaBear/libraryTravelMap/master/usTravelMap_2018.geojson";
var geojsonLayer = new L.GeoJSON.AJAX(usRouteURL);
//geojsonLayer.addTo(map);
/*
var usRoute = $.ajax({
url: usRouteURL,
dataType: "json",
success: console.log("Data successfully loaded."),
error: function(xhr) {
alert(xhr.statusText);
}
});
*/
jQuery.when(
jQuery.getJSON(usRouteURL)
).done( function(json) {
//console.log(json.features[0].geometry.coordinates);
// console.log(json.features[0].geometry.coordinates.length);
routeLength = json.features[0].geometry.coordinates.length;
var routeArray = [];
for (var i = 0; i < routeLength; i++ ){
x = json.features[0].geometry.coordinates[i][0];
y = json.features[0].geometry.coordinates[i][1];
routeArray.push([x,y]);
}
//console.log(routeArray);
var line = turf.lineString(routeArray);
L.geoJson(line, {color:"grey", weight:3, opacity:0.25}).addTo(map);
var options = {units: 'miles'};
var along = turf.along(line, 50, options);
L.geoJson(along).addTo(map);
//L.geoJson(along, {color:"blue"}).addTo(map);
});
/*
//This is working!!
// define coordinates for line
var latlngs = [
[-93.266433, 42.78],
[-92.29, 41.8],
[-93.28, 42.82]
];
// add the line marker to the map
var line = turf.lineString(latlngs);
L.geoJson(line, {color:"red"}).addTo(map);
var options = {units: 'miles'};
var along = turf.along(line, 50, options);
console.log(along);
L.geoJson(along, {color:"red"}).addTo(map);
*/
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Leaflet API: Kersten Library Map 2018">
<title>Leaflet API: Kersten Library Map 2018b</title>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'><\/script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""><\/script>
<script src="http://129.186.142.145/cjstesting/airports.js"><\/script>
<script src="https://indicator.extension.iastate.edu/classes/leaflet-ajax-gh-pages/dist/leaflet.ajax.min.js"><\/script>
<script src="https://code.jquery.com/jquery-3.1.0.js"><\/script>
</head>
<body>
<div id="map"> </div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">#map {
width: 500px;
height: 600px;
margin: 0;
padding: 0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
var dist_a = 400;
var map = L.map('map').setView([43.4, -93], 4);
// add an OpenStreetMap tile layer as base map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'The map contributors',
maxZoom: 18
}).addTo(map);
//L.geoJson(airports).addTo(map);
function addPopups(feature, layer) {
layer.bindPopup("Name: "+feature.properties.FACILITY_N +
"<BR> City: "+feature.properties.CITY);
}
/*
L.geoJson(airports, {
onEachFeature:
addPopups,
filter: function(feature, layer) {
//FACILITY_T == 'HELIPORT'
//OWNER_TYPE == 'PU'
if (feature.properties.FACILITY_T == 'HELIPORT') {
return 'true';
}
}
}).addTo(map);
*/
//var jsonTest = new L.GeoJSON.AJAX(["colleges.geojson","counties.geojson"],{onEachFeature:popUp}).addTo(m);
usRouteURL = "https://raw.githubusercontent.com/dakotaBear/libraryTravelMap/master/usTravelMap_2018.geojson";
var geojsonLayer = new L.GeoJSON.AJAX(usRouteURL);
//geojsonLayer.addTo(map);
/*
var usRoute = $.ajax({
url: usRouteURL,
dataType: "json",
success: console.log("Data successfully loaded."),
error: function(xhr) {
alert(xhr.statusText);
}
});
*/
jQuery.when(
jQuery.getJSON(usRouteURL)
).done( function(json) {
//console.log(json.features[0].geometry.coordinates);
// console.log(json.features[0].geometry.coordinates.length);
routeLength = json.features[0].geometry.coordinates.length;
var routeArray = [];
for (var i = 0; i < routeLength; i++ ){
x = json.features[0].geometry.coordinates[i][0];
y = json.features[0].geometry.coordinates[i][1];
routeArray.push([x,y]);
}
//console.log(routeArray);
var line = turf.lineString(routeArray);
L.geoJson(line, {color:"grey", weight:3, opacity:0.25}).addTo(map);
var options = {units: 'miles'};
var along = turf.along(line, 50, options);
L.geoJson(along).addTo(map);
//L.geoJson(along, {color:"blue"}).addTo(map);
});
/*
//This is working!!
// define coordinates for line
var latlngs = [
[-93.266433, 42.78],
[-92.29, 41.8],
[-93.28, 42.82]
];
// add the line marker to the map
var line = turf.lineString(latlngs);
L.geoJson(line, {color:"red"}).addTo(map);
var options = {units: 'miles'};
var along = turf.along(line, 50, options);
console.log(along);
L.geoJson(along, {color:"red"}).addTo(map);
*/
</script></body>
</html>
Raw
jsbin.gigumit.css
#map {
width: 500px;
height: 600px;
margin: 0;
padding: 0;
}
Raw
jsbin.gigumit.js
console.clear();
var dist_a = 400;
var map = L.map('map').setView([43.4, -93], 4);
// add an OpenStreetMap tile layer as base map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'The map contributors',
maxZoom: 18
}).addTo(map);
//L.geoJson(airports).addTo(map);
function addPopups(feature, layer) {
layer.bindPopup("Name: "+feature.properties.FACILITY_N +
"<BR> City: "+feature.properties.CITY);
}
/*
L.geoJson(airports, {
onEachFeature:
addPopups,
filter: function(feature, layer) {
//FACILITY_T == 'HELIPORT'
//OWNER_TYPE == 'PU'
if (feature.properties.FACILITY_T == 'HELIPORT') {
return 'true';
}
}
}).addTo(map);
*/
//var jsonTest = new L.GeoJSON.AJAX(["colleges.geojson","counties.geojson"],{onEachFeature:popUp}).addTo(m);
usRouteURL = "https://raw.githubusercontent.com/dakotaBear/libraryTravelMap/master/usTravelMap_2018.geojson";
var geojsonLayer = new L.GeoJSON.AJAX(usRouteURL);
//geojsonLayer.addTo(map);
/*
var usRoute = $.ajax({
url: usRouteURL,
dataType: "json",
success: console.log("Data successfully loaded."),
error: function(xhr) {
alert(xhr.statusText);
}
});
*/
jQuery.when(
jQuery.getJSON(usRouteURL)
).done( function(json) {
//console.log(json.features[0].geometry.coordinates);
// console.log(json.features[0].geometry.coordinates.length);
routeLength = json.features[0].geometry.coordinates.length;
var routeArray = [];
for (var i = 0; i < routeLength; i++ ){
x = json.features[0].geometry.coordinates[i][0];
y = json.features[0].geometry.coordinates[i][1];
routeArray.push([x,y]);
}
//console.log(routeArray);
var line = turf.lineString(routeArray);
L.geoJson(line, {color:"grey", weight:3, opacity:0.25}).addTo(map);
var options = {units: 'miles'};
var along = turf.along(line, 50, options);
L.geoJson(along).addTo(map);
//L.geoJson(along, {color:"blue"}).addTo(map);
});
/*
//This is working!!
// define coordinates for line
var latlngs = [
[-93.266433, 42.78],
[-92.29, 41.8],
[-93.28, 42.82]
];
// add the line marker to the map
var line = turf.lineString(latlngs);
L.geoJson(line, {color:"red"}).addTo(map);
var options = {units: 'miles'};
var along = turf.along(line, 50, options);
console.log(along);
L.geoJson(along, {color:"red"}).addTo(map);
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment