|
<!DOCTYPE html> |
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> |
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> |
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> |
|
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
<title>OL3 from GDoc</title> |
|
<meta name="description" content="Eventos desde un gdoc"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.2.0+2/superhero/bootstrap.min.css" /> |
|
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" /> |
|
<style> |
|
#map{height:500px;} |
|
.popover-content{width:100px;} |
|
.popover-content a{color: white;} |
|
</style> |
|
</head> |
|
<body> |
|
<!--[if lt IE 7]> |
|
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|
<![endif]--> |
|
|
|
<div class="container"> |
|
<div class="page-header"> |
|
<h1>Events</h1> |
|
<p class="lead">Map of events loaded from a Google Docs <a href="https://docs.google.com/forms/d/1U4bXioc-nopGvSFt4-plWTajNs3m5Rk97CWIdfYXGfE/viewform">form</a>.</p> |
|
</div> |
|
<div class="row"> |
|
<div class="md-12"> |
|
<div id="map"> |
|
<div id="popup"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> |
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
|
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
|
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script> |
|
<script> |
|
'use strict'; |
|
|
|
$( document ).ready(function() { |
|
|
|
// Get a list of features from the JSON object |
|
var getFeaturesFromData = function(data) { |
|
var features = []; |
|
|
|
// Common style |
|
var iconStyle = new ol.style.Style({ |
|
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ |
|
anchor: [0.5, 24], |
|
anchorXUnits: 'fraction', |
|
anchorYUnits: 'pixels', |
|
opacity: 0.75, |
|
src: 'https://raw.githubusercontent.com/mapbox/maki/mb-pages/renders/marker-24.png' |
|
})) |
|
}); |
|
|
|
// Convert the text coordinates into a valid OL Coordinates array |
|
var getPoint = function(entry){ |
|
var lonlat = entry.gsx$longitudlatitud.$t.split(','); |
|
return [lonlat[0]*1.0,lonlat[1]*1.0]; |
|
} |
|
|
|
// Process the data and create a feature for every entry |
|
data.feed.entry.forEach(function(entry){ |
|
try{ |
|
var iconFeature = new ol.Feature({ |
|
geometry: new ol.geom.Point(ol.proj.transform(getPoint(entry),'EPSG:4326','EPSG:3857')), |
|
entry: entry |
|
}); |
|
|
|
iconFeature.setStyle(iconStyle); |
|
features.push(iconFeature); |
|
} catch(e){ |
|
console.log(e); |
|
} |
|
}); |
|
|
|
return features; |
|
}; |
|
|
|
|
|
// Function to process when JSON data is received |
|
var loadFeatures = function(data){ |
|
// Parse data and get the features |
|
var features = getFeaturesFromData(data); |
|
// Instance a vector layer |
|
var vector = new ol.layer.Vector({ |
|
source: new ol.source.Vector({ |
|
features: features |
|
}) |
|
}); |
|
// Instance a map |
|
var map = new ol.Map({ |
|
layers: [ |
|
new ol.layer.Tile({ |
|
source: new ol.source.OSM() |
|
}), |
|
vector |
|
], |
|
renderer: ['canvas','svg'], |
|
target: 'map', |
|
view: new ol.View({ |
|
center: ol.proj.transform([-5.383301,34.397845],'EPSG:4326','EPSG:3857'), |
|
zoom: 4 |
|
}) |
|
}); |
|
|
|
// Get the popup div |
|
var element = document.getElementById('popup'); |
|
|
|
// Instance the OL popup overlay |
|
var popup = new ol.Overlay({ |
|
element: element, |
|
positioning: 'bottom-center', |
|
stopEvent: false |
|
}); |
|
map.addOverlay(popup); |
|
|
|
var renderContent = function(feature){ |
|
var entry = feature.get('entry'); |
|
var view = { |
|
web : entry.gsx$web.$t, |
|
evento: entry.gsx$nombredelevento.$t |
|
}; |
|
|
|
var template = "<a href={{web}}>{{evento}}</a>" |
|
|
|
return Mustache.render(template, view); |
|
}; |
|
|
|
|
|
// display popup on click |
|
map.on('click', function(evt) { |
|
// get the closest feature to the event point |
|
var feature = map.forEachFeatureAtPixel(evt.pixel, |
|
function(feature, layer) { |
|
return feature; |
|
}); |
|
// show the popup |
|
if (feature) { |
|
var geometry = feature.getGeometry(); |
|
var coord = geometry.getCoordinates(); |
|
popup.setPosition(coord); |
|
$(element).popover('destroy'); |
|
$(element).popover({ |
|
'placement': 'top', |
|
'html': true, |
|
'content': renderContent(feature) |
|
}); |
|
$(element).popover('show'); |
|
} else { |
|
$(element).popover('destroy'); |
|
} |
|
}); |
|
|
|
// change mouse cursor when over marker |
|
$(map.getViewport()).on('mousemove', function(e) { |
|
var pixel = map.getEventPixel(e.originalEvent); |
|
var hit = map.forEachFeatureAtPixel(pixel, function(feature, layer) { |
|
return true; |
|
}); |
|
if (hit) { |
|
document.getElementById('map').style.cursor = 'pointer'; |
|
} else { |
|
document.getElementById('map').style.cursor = ''; |
|
} |
|
}); |
|
} |
|
|
|
/* |
|
Action begins here, loading the JSON data |
|
from the Google Doc spreadsheet |
|
*/ |
|
$.ajax({ |
|
url: "https://spreadsheets.google.com/feeds/list/1JGbPVzaPwES_MsOv0alDnb5vl42qJeXoMmJp18_anMs/owzl4uv/public/values?alt=json", |
|
dataType: 'jsonp', |
|
success: loadFeatures, |
|
error: function(obj){ |
|
console.error(obj); |
|
} |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
Hey @aborruso, sorry for not answering 😦 . Yes, the JSON always retreives the data from the spreadsheet, next reload of the page and it's done.