Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active May 12, 2017 14:04
Show Gist options
  • Save ramiroaznar/bf0b07777ceca24cb2900fb63455a90d to your computer and use it in GitHub Desktop.
Save ramiroaznar/bf0b07777ceca24cb2900fb63455a90d to your computer and use it in GitHub Desktop.
Download ZIP
Paula Scher basemap with Leaflet.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Paula Scher basemap with Leaflet.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://pbs.twimg.com/profile_images/780792637481689088/8y-GChEY.jpg" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style type="text/css">
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function main() {
// I have just followed Leaflet documentation
// http://leafletjs.com/examples/crs-simple/crs-simple.html
// Create map
var map = L.map('map', {
crs: L.CRS.Simple
});
// Add image as basemap
var width = 1584,
height = 864,
bounds = [[0,0], [height,width]];
var image = L.imageOverlay('https://s-media-cache-ak0.pinimg.com/originals/57/30/ad/5730ad98580c2f6303c259885f536b71.jpg', bounds).addTo(map);
map.fitBounds(bounds);
// add leaflet marker with Madrid fake coordinates
var madridCoordinates = [480, 725],
madridMarker = L.latLng(madridCoordinates);
L.marker(madridMarker).addTo(map).bindPopup(
"I am in Madrid <br>on a <b>Paulax Scher</b> <br>world map painting");;
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment