Leaflet API: Kersten Library Map 2018bLeaflet API: Kersten Library Map 2018// source http://jsbin.com/gigumit

8/22/2018 - 3:31 PM

Leaflet API: Kersten Library Map 2018b Leaflet API: Kersten Library Map 2018 // source http://jsbin.com/gigumit

Leaflet API: Kersten Library Map 2018b

Leaflet API: Kersten Library Map 2018

<!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/leaflet@1.3.3/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>

 <script src="https://unpkg.com/leaflet@1.3.3/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/leaflet@1.3.3/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>

 <script src="https://unpkg.com/leaflet@1.3.3/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>

jsbin.gigumit.css

#map {
	width: 500px;
	height: 600px;
	margin: 0; 
	padding: 0; 
}

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);
*/

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Leaflet API: Kersten Library Map 2018b Leaflet API: Kersten Library Map 2018 // source http://jsbin.com/gigumit