Skip to content

Instantly share code, notes, and snippets.

@SiggyF

SiggyF/index.html

Forked from mbostock/.block
Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SiggyF/26a81cf0fca4c4f3fab6 to your computer and use it in GitHub Desktop.
Save SiggyF/26a81cf0fca4c4f3fab6 to your computer and use it in GitHub Desktop.
Download ZIP
Update
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script src="http://smeijer.github.io/GeoSearch/js/l.control.geosearch.js"></script>
<script src="l.geosearch.provider.google.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#googlemap {
height: 50%;
}
#leafletmap {
height: 50%;
}
.leaflet-center {
width: 40%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.leaflet-control-geosearch, .leaflet-control-geosearch ul {
border-radius: 7px;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
margin: 10px 0 0 0;
padding: 5px;
width: 100%;
height: auto;
}
.leaflet-control-geosearch-msg ul {
list-style: none;
display: none;
height: auto;
background: none;
padding: 0;
}
.leaflet-control-geosearch ul li {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
border-radius: 4px;
margin: 2px 0;
padding: 4px;
font: 12px arial;
text-indent: 4px;
}
.leaflet-container .leaflet-control-geosearch input {
width: 100%;
height: 28px;
padding: 0;
text-indent: 8px;
background: rgba(255, 255, 255, 0.75);
border-radius: 4px;
border: none;
}
</style>
</head>
<body>
<div id="googlemap"></div>
<div id="leafletmap"></div>
<script src="render.js"></script>
<script src="leaflet.js"></script>
</body>
</html>
Raw
l.geosearch.provider.google.js
/**
* L.Control.GeoSearch - search for an address and zoom to it's location
* L.GeoSearch.Provider.Google uses google geocoding service
* https://github.com/smeijer/leaflet.control.geosearch
*/
$(function(){
L.GeoSearch.Provider.Google = L.Class.extend({
options: {
},
initialize: function(options) {
options = L.Util.setOptions(this, options);
},
GetLocations: function(qry, callback) {
var geocoder = new google.maps.Geocoder();
var parameters = L.Util.extend({
address: qry
}, this.options);
var results = geocoder.geocode(parameters, function(data){
data = {results: data};
if (data.results.length == 0)
return [];
var results = [];
for (var i = 0; i < data.results.length; i++)
results.push(new L.GeoSearch.Result(
data.results[i].geometry.location.lng(),
data.results[i].geometry.location.lat(),
data.results[i].formatted_address
));
if(typeof callback == 'function')
callback(results);
});
},
});
});
Raw
leaflet.js
$(function(){
var lmap = L.map('leafletmap').setView([52.1, 5.5], 10);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
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>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(lmap);
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google({
region: ''
})
}).addTo(lmap);
d3.json("http://swapp.deltares.nl/db/measurements", function(data) {
var features = [];
data.objects.forEach(function(x){
features.push(x.data);
});
var geojson = {
"type": "FeatureCollection",
"features": features
};
// Colormap
var colormap = d3.scale.linear()
.domain([10, 20, 30])
.range(["red", "white", "green"]);
var coorsLayer = L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
var marker = L.circleMarker(latlng, {
radius: 10,
fillColor: colormap(feature.properties.waterTemperature),
weight: 0,
opacity: 1,
fillOpacity: 1
});
marker.on('mouseover', function(e) {console.log(e.target.feature);});
return marker;
}
}).addTo(lmap);
});
});
Raw
render.js
// Create the Google Map…
var map = new google.maps.Map(d3.select("#googlemap").node(), {
zoom: 10,
center: new google.maps.LatLng(52.1, 5.5),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Load the station data. When the data comes back, create an overlay.
d3.json("http://swapp.deltares.nl/db/measurements", function(data) {
var features = [];
data.objects.forEach(function(x){
features.push(x.data);
});
var geojson = {
"type": "FeatureCollection",
"features": features
};
map.data.addGeoJson(geojson);
// This should now contain the features.
map.data.toGeoJson(function(x){console.log(x);});
// Colormap
var colormap = d3.scale.linear()
.domain([10, 20, 30])
.range(["red", "white", "green"]);
map.data.addListener('mouseover', function(event) {
event.feature.toGeoJson(function(x){console.log(x);});
});
map.data.setStyle(function(feature) {
var t = feature.getProperty('waterTemperature');
var color = colormap(t);
return {
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: color,
fillColor: color,
fillOpacity: 1.0,
strokeWeight: 0.0
}
};
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment