Create a gist now

Instantly share code, notes, and snippets.

@jsanz /README.md
Last active Jan 9, 2017

OL3 map from Google Doc forms

This is an example of extending the OL3 TextFeature format class to parse the data coming from a Google Form backed by a public Google Spreadsheet.

Add an event (name, web and coordinates) and check the demo.

The magic comes from calling the JSON version of the spreadsheet. The weirdest part is the owz14uv string that I had to guess thanks to this blog post.

The code is really horrible and dirty, but as this is a proof of concept, I'm satisfied as it is. I've used bootstrap Superhero theme just to have a nice presentation, modernizr just in case and moustache to render the popup.

<!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>
@aborruso
aborruso commented Nov 2, 2014

Great work @jsanz!

A question: if someone submits new data via your form, is the data source and the map automatically updated?

Thank you

@jsanz
Owner
jsanz commented Apr 24, 2015

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.

@peeter-t2

Looks great! However the example doesn't seem to include any events now. Maybe Googledocs or OpenStreetMap have changed their interface somehow? Does it still work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment