Skip to content

Instantly share code, notes, and snippets.

@mourner

mourner/index.html

Last active December 18, 2015 12:09
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 mourner/5780503 to your computer and use it in GitHub Desktop.
Save mourner/5780503 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet, Jony Ive edition
Raw
index.html
<!doctype html>
<html>
<head>
<title>Leaflet, Jony Ive edition</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<style>
html, body, #map {
margin: 0;
height: 100%;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-bar,
.leaflet-control-attribution {
box-shadow: none;
border: none;
}
.leaflet-popup-content-wrapper,
.leaflet-control-attribution {
background-color: #ff9900;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#3fff0f)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #ff9900, #3fff0f); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #ff9900, #3fff0f); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #ff9900, #3fff0f); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #ff9900, #3fff0f); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
color: white;
}
.leaflet-container a.leaflet-popup-close-button,
.leaflet-control-zoom a,
.leaflet-container a {
color: red;
}
.leaflet-popup-tip {
background: #3fff0f;
}
.leaflet-bar-part {
background-color: #00bbff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#00bbff), to(#ffa6ca)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #00bbff, #ffa6ca); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #00bbff, #ffa6ca); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #00bbff, #ffa6ca); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #00bbff, #ffa6ca); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.leaflet-control-zoom a {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 40px;
}
.leaflet-container .leaflet-control-attribution {
font-size: 20px;
}
.leaflet-popup-content-wrapper {
font-size: 16px;
}
.ive-marker {
background: blue;
border: 5px solid yellow;
border-radius: 10px;
margin-left: -20px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.5, -0.2], 6);
L.tileLayer('http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/4376/256/{z}/{x}/{y}.png', {
attribution: 'Tiles &copy; 2013 <a href="http://cloudmade.com">CloudMade</a>, Map Data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.2], {icon: L.divIcon({iconSize: [30, 30], iconAnchor: [20, 20], className: 'ive-marker'})})
.addTo(map)
.bindPopup('Leaflet maps total redesign, Jony Ive edition.<br>iOS will never be the same!<br>I for one welcome our new design overlord.')
.openPopup();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment