Skip to content

Commit

Permalink
added vintage italy showcase
Browse files Browse the repository at this point in the history
  • Loading branch information
gka committed Feb 27, 2012
1 parent d125168 commit 436fa21
Show file tree
Hide file tree
Showing 10 changed files with 277 additions and 30 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -2,3 +2,4 @@ update
update_remote
old/
_site/
demos/shp/
25 changes: 25 additions & 0 deletions _layouts/core.html
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/k.css" type="text/css" />
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">
<script type="text/javascript" src="http://assets.kartograph.org/vendor/jquery.min.js"></script>
</head>
<body>

{{ content }}

</body>
</html>

48 changes: 18 additions & 30 deletions _layouts/default.html
@@ -1,30 +1,20 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/k.css" type="text/css" />
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>

---
layout: core
---
<div class="container">
<div class="row">
<div class="span12">
<h1>Header</h1>
<div class="span6 offset6">
<ul class="nav nav-tabs">
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="span9 offset3">
<div class="span3 k-about">
<a href="/"><img src="/img/logotype.png" alt="Kartograph" /></a>
<p class="tagline">A simple and lightweight framework for creating beautiful, interactive vector maps.</p>
</div>
<div class="span9">
<div class="hero-unit">
<h1>{{ page.headline }}</h1>
<p>{{ page.tagline }}</p>
Expand All @@ -34,17 +24,15 @@ <h1>{{ page.headline }}</h1>
<div class="row">
<div class="span3 k-menu">
<ul class="nav nav-tabs nav-stacked">
<li><a href="index.html">Hello Kartograph</a></li>
<li><a href="showcase.html">Showcase</a></li>
<li><a href="http://github.com/kartograph/">Download</a></li>
<li><a href="/">Hello Kartograph</a></li>
<li><a href="/showcase/">Demonstration</a></li>
<li><a href="/tech.html">How does is work?</a></li>
<li><a href="http://github.com/kartograph/">Fork on Github</a></li>
<li><a href="http://twitter.com/#!/kartographjs/">Say Hi on Twitter</a></li>
</ul>
</div>
<div class="span9">
{{ content }}
</div>
</div>
</div> <!-- /container -->

</body>
</html>

</div>
25 changes: 25 additions & 0 deletions css/k.css
@@ -0,0 +1,25 @@
.k-about .tagline {
font-style: italic;
font-size: 14px;
margin-left: 55px;
color: #888;
}

.k-menu ul.nav {
margin-left: 0;
}

.k-menu ul.nav li {
list-style: none;
font-size: 18px;
line-height: 20px;
margin-bottom: 1em;
}

.hero-unit h1 {
font-weight: 100;
}

.hero-unit p {
margin-left: 0.4em;
}
Binary file added img/logotype.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions index.html
Expand Up @@ -20,6 +20,10 @@ <h1>What’s in the box?</h1>
<li>Symbol maps</li>
<li>Hell, it even works in Internet Explorer 7 (at least 90%)</li>
</ul>
<h2>And what's not in it?</h2>
<ul>
<li>Sorry, but no tile maps. If you really need street-level details in your map, try <a href="http://leaflet.cloudmade.com">other</a> <a href="http://polymaps.org">great</a> <a href="http://openlayers.org">mapping</a> <a href="http://developers.cartodb.com/">frameworks</a>.</li>
</ul>
</div>
</div>

Expand Down
53 changes: 53 additions & 0 deletions showcase/index.html
@@ -0,0 +1,53 @@
---
layout: default
title: Kartograph
headline: See it in action
---

<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="" />
</a>
</li>
</ul>
46 changes: 46 additions & 0 deletions showcase/italy/index.html
@@ -0,0 +1,46 @@
---
layout: demo
title: Vintage Map of Italy
---

<link rel="stylesheet" href="style.css" type="text/css" />

<script>
$(function() {

// import some classes
window.map = $K.map('#map');

var resize = function() {
var c = $('#map');
var ratio = map.viewAB.width / map.viewAB.height;
c.height( c.width() / ratio );
map.resize();
};

$(window).resize(resize);

map.loadMap('italy.svg', function(map) {

map.addLayer('graticule', 'g1');
map.addLayer('land', 'bg');
map.addLayer('land', 'bgstroke');
map.addLayer('context');
map.addLayer('ITA', 'fg');

map.addFilter('glow', 'glow', { size: 4, color: '#D1BEB0', inner: true });
map.applyFilter('bg', 'glow');

resize();

}, { padding: -10 });


});
</script>


<div id="map">

</div>

6 changes: 6 additions & 0 deletions showcase/italy/italy.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 99 additions & 0 deletions showcase/italy/style.css
@@ -0,0 +1,99 @@
body,html { background: #fff; height:100%; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; padding: 0; margin: 0;}

#head {
margin: 20px auto 5px;
width: 1000px;
}
#map {
margin: 0 auto 30px;
width: 100%;
border: 6px solid #D1BEB0;
height: 50%;
position: relative;
}
.city2 .label {
font-family: Georgia;
font-size: 12px;
text-transform: uppercase;
font-style: italic;
color: #000;
opacity: 1;
padding-left: 1px;
text-shadow: 1px 1px 1px #fff;
display: inline;
}
.city .label {
font-family: Georgia;
font-size: 12px;
color: #411;
opacity: .8;
padding-left: 1px;
text-shadow: 1px 1px 1px #fff;
display: none;
background: #fff;
}
.city:hover .label {
display: inline;
}
svg .flight {
stroke-width: .4px;
stroke: #922;
}
svg path { stroke-linejoin: round }
svg .sea { fill: #fff;stroke-width: .25px; }
svg .g1 {
fill: none;
stroke-width: .2px;
}
svg .g2 {
fill: none;
stroke-width: .2px;
stroke-opacity: .1;
}
svg .bg {
stroke: none;
fill: #fff;
fill-opacity: 0.75;
}
svg .bgstroke {
stroke: #7C5B27;
stroke-width:.7px;
fill:none;
}
svg .context {
stroke: #D1BEB0;
stroke-opacity: .3;
fill: #D1BEB0;
fill-opacity: .2;
}
svg .fg {
stroke: #cbb;
stroke-opacity: 1;
stroke-dasharray: 3,5;
fill: #fff;
fill-opacity: 0;
}
svg .polygon.fg:hover {
fill: #fca;
fill-opacity: .5;
}

svg .dotMarker {
stroke: #330;
stroke-opacity: .8;
fill: #ff7;
fill-opacity: .2;
}
svg .dotMarker:hover {
stroke: #000;
fill: #ff3;
fill-opacity: .7;
}
#tutorial {
margin: 20px auto 30px;
width: 1000px;
padding: 30px;
}
#map svg .sea {
background: lightblue;
}

0 comments on commit 436fa21

Please sign in to comment.