Skip to content

Instantly share code, notes, and snippets.

@yarl

yarl/wikizabytki-geocoder.htm

Created August 21, 2013 22:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save yarl/6301270 to your computer and use it in GitHub Desktop.
Save yarl/6301270 to your computer and use it in GitHub Desktop.
Download ZIP
Geocoder for Wiki Loves Monuments in Poland
Raw
wikizabytki-geocoder.htm
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Geokoder dla Wiki Lubi Zabytki</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Paweł Marynowski (yarl@o2.pl)">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /><![endif]-->
<style type="text/css">
body {
font-family: 'Open Sans', sans-serif;
padding-top: 20px;
padding-bottom: 40px;
}
.container-narrow {
margin: 0 auto;
max-width: 900px;
}
.container-narrow > hr {
margin: 30px 0;
}
.jumbotron {
margin: 30px 0;
text-align: center;
}
.marketing {
margin: 60px 0;
}
.marketing h4 {
text-align: center;
}
.marketing p + h4 {
margin-top: 28px;
}
#map {
height: 400px;
}
</style>
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/2.3.2/assets/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container-narrow">
<div class="jumbotron">
<h3>Geokoder dla Wiki Lubi Zabytki</h3>
<p class="lead">Wpisz poniżej adres, np. Opole, Armii Krajowej 16</p>
<div class="input-append">
<input class="span2" id="addr-text" type="text">
<button class="btn" id="addr-btn" type="button">Szukaj</button>
</div>
</div>
<hr>
<div class="row-fluid marketing">
<div class="span6">
<h4>Google Maps</h4>
<p id="gm-result-info"></p>
<p id="gm-result"></p>
<h4>OpenStreetMap</h4>
<p id="osm-result-info"></p>
<p id="osm-result"></p>
</div>
<div class="span6">
<div id="map"></div>
</div>
</div>
<hr>
<div class="footer">
<p>&copy; 2013</p>
</div>
</div>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://osmapa.pl/2/js/leaflet/leaflet.bing.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script>
var map = L.map('map').setView([52.093, 18.984], 5);
var heide = new L.TileLayer('http://129.206.74.245:8001/tms_r.ashx?x={x}&y={y}&z={z}', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> | rendering <a href="www.geog.uni-heidelberg.de">University of Heidelberg</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>)',
maxZoom: 18
});
var bing = new L.BingLayer("Aof80DCiA7y03b6b3qi28v438KSMhXU5fmUL6K9op7N4U2wmW82qbRDHWUxyfpD8", {
maxZoom: 18
});
heide.addTo(map);
L.control.layers({"OSM" : heide, "Bing" : bing}, {}).addTo(map);
map.on('click', function(e) {
L.popup({minWidth: 350})
.setLatLng(e.latlng)
.setContent('<pre><small>| długość&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= '+String(e.latlng.lng).substring(0,9)+' | szerokość&nbsp;&nbsp;= '+String(e.latlng.lat).substring(0,9)+'</small></pre>')
.openOn(map);
});
var markers = {};
markers.layer = new L.LayerGroup();
map.addLayer(markers.layer);
function SelectText(element) {
var text = document.getElementById(element);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari || $.browser.chrome) {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
$('#gm-result').click(function(){
SelectText('gm-result');
});
$('#osm-result').click(function(){
SelectText('osm-result');
});
//SEARCH
$("#addr-text").keyup(function (e) {
if (e.keyCode == 13)
geocode($(this).val());
});
$('#addr-btn').click(function(){
geocode($('#addr-text').val());
});
function geocode(address){
//clear
markers.layer.clearLayers();
markers.array = new Array();
var address = $('#addr-text').val();
markers.google = null;
markers.osm = null;
//Google Maps
$('#gm-result-info').text('');
$('#gm-result').text('Szukam...');
$.get('http://maps.googleapis.com/maps/api/geocode/json?address='+encodeURI(address)+'&sensor=true', function(data) {
if(data.status === "OK") {
var coor = data.results[0].geometry.location;
$('#gm-result-info').html('Współrzędne dla: '+data.results[0].formatted_address);
$('#gm-result').html('<pre>| długość&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= '+String(coor.lng).substring(0,9)+' | szerokość&nbsp;&nbsp;= '+String(coor.lat).substring(0,9)+'</pre>');
markers.array.push(new L.LatLng(coor.lat, coor.lng));
markers.google = new L.Marker([coor.lat, coor.lng]);
markers.google.bindPopup("Google Maps");
markers.layer.addLayer(markers.google);
} else {
$('#gm-result-info').text('');
$('#gm-result').text('Brak wyników');
}
});
//OSM
$('#osm-result-info').text('');
$('#osm-result').text('Szukam...');
$.get('http://nominatim.openstreetmap.org/search?q='+encodeURI(address)+'&format=json&polygon=0&addressdetails=0', function(data) {
if(data[0] !== undefined) {
$('#osm-result-info').html('Współrzędne dla: '+data[0].display_name);
$('#osm-result').html('<pre>| długość&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= '+String(data[0].lon).substring(0,9)+' | szerokość&nbsp;&nbsp;= '+String(data[0].lat).substring(0,9)+'</pre>');
markers.array.push(new L.LatLng(data[0].lat, data[0].lon));
markers.osm = new L.Marker([data[0].lat, data[0].lon]);
markers.osm.bindPopup("OSM");
markers.layer.addLayer(markers.osm);
//map
} else {
$('#osm-result-info').text('');
$('#osm-result').text('Brak wyników');
}
});
setTimeout(function(){
var b = new L.LatLngBounds(markers.array);
map.fitBounds(b, {padding: [50, 50]});
}, 1000);
}
</script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment