testInstagram.html | searchcode

/testInstagram.html

https://github.com/JackDougherty/bikemapcode
HTML | 135 lines | 122 code | 5 blank | 8 comment | 0 complexity | 224b33137a5427a9038658b3348344f4 MD5 | raw file

<!DOCTYPE html>
<html lang='en'>
<head>
	<title>bikemapcode</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="shortcut icon" href="favicon.ico">
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<link rel="stylesheet" href="css/bootstrap.min.css"/>
	<script src="src/Control.Geocoder.js"></script>
	<link rel="stylesheet" href="css/Control.Geocoder.css"/>
	<script src="layer/vector/GPX.js"></script>
	<script src="layer/vector/KML.js"></script>
	<!-- trying to make Google tile work <script src="layer/tile/Google.js"></script>-->
	<!-- Load Esri Leaflet from CDN, rather than local: <script src="lib/esri-leaflet/esri-leaflet.js"></script>-->
  	<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.2/esri-leaflet.js"></script>
	<script src="src/L.Control.Locate.js"></script>
	<link rel="stylesheet" href="css/L.Control.Locate.css"/>
	<script src="src/leaflet-compass.js"></script>
	<link rel="stylesheet" href="css/leaflet-compass.css"/>
	<script src="src/leaflet-sidebar.js"></script>
	<link rel="stylesheet" href="css/leaflet-sidebar.css" />
	<link rel="stylesheet" href="src/cluster/MarkerCluster.css" />
	<link rel="stylesheet" href="css/Leaflet.Instagram.css" />
	<script src="src/reqwest.min.js"></script>
	<script src="src/cluster/leaflet.markercluster.js"></script>
	<script src="src/Leaflet.Instagram.Cluster.js"></script>

	<!--[if lt IE 9]>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" />
		<link rel="stylesheet" href="css/L.Control.Locate.ie.css"/>
		<![endif]-->
	<link rel="stylesheet" href="css/custom.css"/>
</head>
<body>

	<div id="sidebar" class="sidebar collapsed">
		<!-- Nav tabs -->
		<ul class="sidebar-tabs" role="tablist">
			<li><a href="#home" role="tab"><i class="fa fa-question-circle"></i></a></li>
		</ul>

		<!-- Tab panes -->
		<div class="sidebar-content active">
			<div class="sidebar-pane" id="home">
			<strong>bikemapcode</strong> displays mobile-friendly cycling maps on your website with easy-to-modify <a href="https://github.com/JackDougherty/bikemapcode#bikemapcode" target="_blank">open-source code</a>.
			<p>Layer Control:</br>
			<ul>
			<li>Select a basemap such as <a href="http://opencyclemap.org/" target="_blank">Open Cycle Map</a>, a user-edited layer that features bike routes and facilities from <a href="http://www.openstreetmap.org/" target="_blank">Open Street Map</a>.</li>
			<li>Select overlay maps to display a bike ride from a GPX or KML file, or a network of routes from an ArcGIS server. </li>
			</ul>
			</p>
			<p>Show your current location</p>
			<p>Search for any place </p>
			<p>Compass directions (with mobile devices)</p>
			<p>Learn how to modify and host your own version online.</p>
			<p>Distributed as-is with no warranty under an MIT license. Feedback and code contributions welcome on <a href="https://github.com/JackDougherty/bikemapcode" target="_blank">GitHub</a> or email to jack.dougherty@trincoll.edu</p>
			</div>
		</div>
	</div>

<div id="map"></div>
	<script>
	var ocmUrl = 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
	ocmAttr = 'Map data &copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a> and <a href="http://openstreetmap.org">OpenStreetMap</a> contributors <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	osmAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
	var ocm   = L.tileLayer(ocmUrl, {attribution: ocmAttr}),
	osm   = L.tileLayer(osmUrl, {attribution: osmAttr}),
	esriStreets = L.esri.basemapLayer("Streets"),
	// TO DO: add this Google layer
	// ggl = new L.Google(),
	// ggl2 = new L.Google('TERRAIN'),
	HartfordGISBikeRoutes = L.esri.featureLayer('http://gis1.hartford.gov/arcgis/rest/services/OpenData_Community/MapServer/9',{
		style: function () {
          	return { color: "#70ca49", opacity: 0.7, weight: 5};
        	}
	}),
	TrinGISPrimaryRoutes = L.esri.featureLayer('http://services1.arcgis.com/5rblLCKLgS4Td60j/ArcGIS/rest/services/PrimaryRoutes/FeatureServer/0',{
		style: function () {
          	return { color: "#4BACC6", opacity: 0.7, weight: 5};
        	}
	}),
	TrinGISMuniBikeLanes = L.esri.featureLayer('http://services1.arcgis.com/5rblLCKLgS4Td60j/ArcGIS/rest/services/HartfordMuniBikeLanes/FeatureServer/0',{
		style: function () {
          	return { color: "#00FF00", opacity: 0.7, weight: 5 };
        	}
	}),
	TrinGISMuniBikeLanes_Connex = L.esri.featureLayer('http://services1.arcgis.com/5rblLCKLgS4Td60j/ArcGIS/rest/services/HartfordMuniBikeLanes_Connex/FeatureServer/0',{
		style: function () {
          	return { color: "#9BBB59", opacity: 0.7, weight: 5 };
        	}
	}),
	FVTC = new L.GPX("routes/FVTCJune28loop.gpx", {async: true, display_wpt:false}); // semicolor for last variable

	var map = L.map('map', {
	center: [41.77, -72.69],
	zoom: 14,
	zoomControl: false,  // add new zoom control further below, after layer control
	layers: [ocm]   //default display can be base + overlays [ocm, arcGIS, track]
	});
	var baseMaps = {
	"OpenCycleMap": ocm,
	"OpenStreetMap": osm,
	// "Google Terrain": ggl2,
	// "Google Satellite": ggl,
	"ESRI StreetMap": esriStreets
	};
	var overlayMaps = {
	"Hartford city bike lanes (City of Hartford ArcGIS)": HartfordGISBikeRoutes,
	"Hartford area primary routes (Trinity ArcGIS)": TrinGISPrimaryRoutes,
	"Hartford city bike lanes (Trinity ArcGIS)": TrinGISMuniBikeLanes,
	"Hartford city bike lanes connex (Trinity ArcGIS)": TrinGISMuniBikeLanes_Connex,
	"Farmington Valley Canal Trail loop (GPX)": FVTC   //no comma after last layer
	};
	// TO DO: improve positioning of controls with custom.css
	var sidebar = L.control.sidebar('sidebar').addTo(map);
	//sidebar.open('home');   -- option to open on startup
	layerControl = L.control.layers(baseMaps, overlayMaps, {position: 'topleft'});
	layerControl.addTo(map);
	map.addControl(L.control.locate({locateOptions: {maxZoom: 16}}));
	L.Control.geocoder({position: 'topleft'}).addTo(map);
	new L.Control.Zoom({position: 'topleft'}).addTo(map);
	map.addControl( new L.Control.Compass() );
	//esri-leaflet popup
	TrinGISPrimaryRoutes.bindPopup(function (feature) {
    	return L.Util.template('<p>Primary Route<br>FID: {FID}</p>', feature.properties);
  	});
			L.instagram.cluster('https://api.instagram.com/v1/users/1420892972/media/recent?access_token=1420892972.1fb234f.b85fa08f0a7947488abaff2687d46b1d'
	).addTo(map);
	</script>
</body>
</html>