vool/.gitignore

## .gitignore
.ftpconfig

## README.md

      
    Raw
  

              README.md
            
          
    Irish Border Crossings - OSM vs OSI data

A map which shows road crossings along the Irish Border, from Ordnance Survey and OpenStreetMap data sets.

More info

View map
Data sources

Ordnance Survey Ireland

Open Street Map

  
## Border_Exits__Entrances__OSi_National_1m_Map_Of_Ireland.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              Border_Exits__Entrances__OSi_National_1m_Map_Of_Ireland.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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/leaflet@1.0.3/dist/leaflet.css" />

  <script src="https://unpkg.com/leaflet@1.3.4/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/leaflet@1.3.4/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>

## ni_ie_osm.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ni_ie_osm.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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!");
});

## 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;
}
	<!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/leaflet@1.0.3/dist/leaflet.css" />

	<script src="https://unpkg.com/leaflet@1.3.4/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/leaflet@1.3.4/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>
	var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <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 © Esri — 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"> 🔗 OpenStreetMap </a><br><a href="' + gmapLink + '" target="_blank"> 🔗 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!");
	});
	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;
	}