Skip to content

Instantly share code, notes, and snippets.

@vool

vool/.gitignore

Last active October 25, 2018 13:13
Show Gist options
  • Save vool/44d32694f21e5c2c036a6658e7fced5f to your computer and use it in GitHub Desktop.
Save vool/44d32694f21e5c2c036a6658e7fced5f to your computer and use it in GitHub Desktop.
Download ZIP
border_osm_vs_osi
Raw
README.md
Display the source blob
Display the rendered blob
Raw
Border_Exits__Entrances__OSi_National_1m_Map_Of_Ireland.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Irish Border Crossings - OSM vs OSI data</title>
<link rel="stylesheet" crossorigin="" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="info">
<div>
<h1>Irish Border Crossings</h1>
<h2>OSM vs OSi data</h2>
<hr>
<table>
<tr>
<td><img src="https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png" /></td>
<td>Ordnance Survey Ireland (<span id="osiCount"></span>)</td>
<td>(<a href="https://data.gov.ie/dataset/border-exits-entrances-osi-national-1m-map-of-ireland" target="_blank">Source</a>)</td>
</tr>
<tr>
<td><img src="https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png" /></td>
<td>Open Street Map (<span id="osmCount"></span>)</td>
<td>(<a href="http://overpass-turbo.eu/s/CRw" target="_blank">Source</a>)</td>
</tr>
</table>
<hr>
<a href="http://www.vool.ie/views-from-the-border" target="_blank"> Background info</a>
</div>
</div>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
ni_ie_osm.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
script.js
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var sat = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var baseMaps = {
"Map": osm,
"Satelite": sat
};
var urlRoots = {
"gmap": 'http://www.google.com/maps/place/',
'osm': 'https://www.openstreetmap.org/#map=18/'
}
var map = L.map('map', {
center: [54.1381228, -6.640066],
zoom: 8,
layers: [osm]
});
var osi = L.featureGroup();
var osm = L.featureGroup();
osm.addTo(map);
osi.addTo(map);
var overlayMaps = {
"OSM": osm,
"OSI": osi
};
L.control.layers(baseMaps, overlayMaps, {
collapsed: false
}).addTo(map);
var greenIcon = new L.Icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
var redIcon = new L.Icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
$(function() {
function onEachFeature(feature, layer) {
var gmapLink = urlRoots.gmap + feature.geometry.coordinates[1] + ',' + feature.geometry.coordinates[0];
var osmLink = urlRoots.osm + feature.geometry.coordinates[1] + '/' + feature.geometry.coordinates[0];
layer.bindPopup('<a href="' + osmLink + '" target="_blank"> &#128279; OpenStreetMap </a><br><a href="' + gmapLink + '" target="_blank"> &#128279; Google Maps</a>');
}
$.ajax({
dataType: "json",
url: "ni_ie_osm.geojson",
success: function(data) {
document.getElementById('osmCount').innerHTML= data.features.length;
$(data.features).each(function(key, data) {
L.geoJSON(data, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: greenIcon
});
},
onEachFeature: onEachFeature
}).addTo(osm);
});
}
});
$.ajax({
dataType: "json",
url: "Border_Exits__Entrances__OSi_National_1m_Map_Of_Ireland.geojson",
success: function(data) {
document.getElementById('osiCount').innerHTML= data.features.length;
$(data.features).each(function(key, data) {
L.geoJSON(data, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: redIcon
});
},
onEachFeature: onEachFeature
}).addTo(osi);
});
}
});
});
$(document).ready(function() {
console.log("ready!");
});
Raw
style.css
body {
padding: 0;
margin: 0;
font-family: Sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
html, body {
height: 100%;
width: 100%;
}
#info {
width: 25%;
color: #2c3e50;
}
#info div {
margin: 10px;
}
#map {
border-left: 1px solid #fff;
position: absolute;
left: 25%;
width: 75%;
top: 0;
bottom: 0;
}
a {
text-decoration: none;
color: #2980b9;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment