iframe-proxy | Sunbelt Computer Software

56 lines (51 loc) · 1.72 KB

<!DOCTYPE html>
<html lang="en" class="no-js">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Moving Stuff Map</title>
	<link rel="stylesheet" href="style/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" type="text/css" />
	<script src="//cdn.jsdelivr.net/pouchdb/3.0.5/pouchdb.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<div class="container">
		<h1>Moving Stuff Map</h1>
		<div id="map" style="width: 400px; height: 400px"></div>
	var p = 'https://<apikey>:<apipw>@<username>.cloudant.com/locationtracker';
	var db = new PouchDB(p);	
	db.changes({include_docs: true, live:true}).on('change', updateMovingLayer);
	var map = L.map('map').setView([42.36, -71.1], 10);
	L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
		maxZoom: 20,
		attribution: '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>',
		detectRetina: true, 
		id: 'examples.map-20v6611k'
	}).addTo(map);
	var movementLayer = L.geoJson().addTo(map);
	function updateMovingLayer(change) {
		if ( !change.doc._deleted && change.doc.longitude && change.doc.latitude ) {
			changegeo = {
				"type":"Feature", 
				"geometry": {
					"type":"Point", 
					"coordinates": [
						change.doc.longitude, change.doc.latitude
				"properties": {
					"id": change.doc.id, 
					"timestamp": change.doc.timestamp
			movementLayer.addData(changegeo);
			map.fitBounds(movementLayer.getBounds());

Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

map_tutorial.html

Latest commit

History

map_tutorial.html

File metadata and controls