Skip to content

Instantly share code, notes, and snippets.

@MathRobin

MathRobin/LICENSE

Created September 24, 2012 21:07
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 MathRobin/3778385 to your computer and use it in GitHub Desktop.
Save MathRobin/3778385 to your computer and use it in GitHub Desktop.
Download ZIP
osmLeaflet.jQuery, lightning talk for Paris JS, september 2012
Raw
LICENSE
CREATIVE COMMONS BY
Raw
osmLeaflet.jQuery.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=1024"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>osmLeaflet.jQuery</title>
<meta name="description" content=""/>
<meta name="author" content=""/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic"
rel="stylesheet"/>
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet"/>
<link href="http://leaflet.cloudmade.com/dist/leaflet.css" rel="stylesheet"/>
<link rel="shortcut icon" href="favicon.png"/>
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Votre navigateur <b>ne supporte pas les fonctionnalités requises</b> par impress.js, du coup vous allez avoir une version allégée.</p>
<p>Pour une meilleure expérience, utilisez le dernier <b>Chrome</b>, <b>Safari</b> ou <b>Firefox</b>.</p>
</div>
<div id="impress">
<div class="step slide" data-x="0" data-y="0">
<q>
<div id="mini_map" style="height: 240px; width: 100%;"></div>
<h1>osmLeaflet.jQuery</h1>
</q>
</div>
<div class="step slide" style="text-align: justify;" data-x="1000" data-y="0">
<br /><br />
Copyright : <a href="http://www.openstreetmap.org/copyright">http://www.openstreetmap.org/copyright</a>
<br/>
<br/>
<i>Vous êtes libre de copier, distribuer, transmettre et adapter nos cartes et données, à condition que vous créditiez
OpenStreetMap et ses
contributeurs. Si vous modifiez ou utilisez nos cartes ou données dans d’autres œuvres dérivées, vous ne pouvez distribuer celles-ci que sous la
même licence.
</i>
<br/>
<br/>
Licence : Creative Commons BY
</div>
<div class="step slide" data-x="2000" data-y="0">
<div id="big_map" style="height: 100%; width: 100%;"></div>
</div>
<div class="step slide" data-x="3000" data-y="0">
<br /><br /><br /><br />
<a href="http://www.mathieurobin.com/osmLeaflet/">http://www.mathieurobin.com/osmLeaflet/</a>
</div>
<div class="step slide" data-x="4000" data-y="0">
<b>API</b>
<br /><br />
<ul style="list-style: disc;">
<li><pre>
$("#big_map").osmLeaflet({
zoom : 13,
latitude : 48.853,
longitude : 2.350
});</pre></li>
<li><pre>
$("#big_map").osmLeaflet('addMarker', {
latitude : 48.853,
longitude : 2.350
});</pre></li>
<li><pre>
$("#big_map").osmLeaflet('addPopup', {
latitude : 48.853,
longitude : 2.350,
text : 'Hello world !'
});</pre></li>
</ul>
</div>
<div class="step slide" data-x="5000" data-y="0">
<b>jQuery style</b>
<br /><br />
<pre>
$("#big_map").osmLeaflet({
zoom : 13,
latitude : 48.853,
longitude : 2.350
}).osmLeaflet('addMarker', {
latitude : 48.853,
longitude : 2.350
}).osmLeaflet('addPopup', {
latitude : 48.853,
longitude : 2.350,
text : 'Hello world !'
});</pre>
</div>
<div class="step slide" data-x="6000" data-y="0">
<b>A venir</b>
<br /><br />
<ul style="list-style : disc;">
<li>Suivi d'évolution de l'API de Leaflet</li>
<li>Formes géométriques (polygones, rectangles, cercles)</li>
<li>Customisation des markers</li>
<li>Vos idées</li>
</ul>
</div>
<div class="step slide" data-x="7000" data-y="0">
<q>Questions ?</q>
</div>
<div class="step slide" data-x="8000" data-y="0">
<q>Merci !</q>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://raw.github.com/MathRobin/osmLeaflet.jQuery/master/osmLeaflet.jquery.js"></script>
<script>
$("#mini_map").osmLeaflet({
zoom : 11,
latitude : 48.853,
longitude : 2.333,
markers : [
{
latitude : 48.840,
longitude : 2.270,
click : 'J\'ai cliqué ici'
},
{
latitude : 48.860,
longitude : 2.395
}
],
popup : {
latitude : 48.849,
longitude : 2.333,
content : 'Hello ParisJS !'
}
});
$("#big_map").osmLeaflet({
zoom : 13,
latitude : 48.853,
longitude : 2.350,
markers : [
{
latitude : 48.840,
longitude : 2.300,
click : 'J\'ai cliqué ici'
},
{
latitude : 48.860,
longitude : 2.395
}
],
popup : {
latitude : 48.849,
longitude : 2.333,
content : 'Cliquez moi dessus et regardez la console ;)'
},
click : function (point) {
console.log(point);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment