Skip to content

Instantly share code, notes, and snippets.

@ryanclark2

ryanclark2/index.html

Created May 15, 2012 00:29
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 ryanclark2/2698278 to your computer and use it in GitHub Desktop.
Save ryanclark2/2698278 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Marker
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css" />
<link rel="icon" type="image/png" href="http://cleversketch.com/blog/wp-content/uploads/2011/11/Pencil1.png">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/index.html">Cleversketch.com</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
<a href="./index.html">San Francisco Weather</a>
</li>
<!-- <li class="">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">Javascript plugins</a>
</li>
<li class="">
<a href="./less.html">Using LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>-->
</ul>
</div>
</div>
</div>
</div>
<h1>San Francisco Weather!</h1>
<script src="/Leaflet/dist/leaflet-src.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="map" style="height: 700px"></div>
<script>
var map = new L.Map('map');
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/4a94630d171f47a9a62cf3c7fc99de47/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
});
var sanFrancisco = new L.LatLng(37.770, -122.43192); // geographical point (longitude and latitude)
map.setView(sanFrancisco, 13).addLayer(cloudmade);
var markerMission = new L.Marker(new L.LatLng(37.758234, -122.419728));
map.addLayer(markerMission);
var markerFiDi = new L.Marker(new L.LatLng(37.793579, -122.399330));
map.addLayer(markerFiDi);
var markerMarina = new L.Marker(new L.LatLng(37.795012, -122.438799));
map.addLayer(markerMarina);
var markerSunset = new L.Marker(new L.LatLng(37.752174, -122.465805));
map.addLayer(markerSunset);
var markerATT = new L.Marker(new L.LatLng(37.777922, -122.389971));
map.addLayer(markerATT)
jQuery(document).ready(function($) {
$.ajax({
url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR128.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['observation_location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
var iconPic = new L.Icon({
iconUrl: "http://icons-ak.wxug.com/i/c/k/partlycloudy.gif"
});
var markerRichmond = new L.Marker(new L.LatLng(37.782398, -122.471497), {icon: iconPic});
map.addLayer(markerRichmond);
markerRichmond.bindPopup("Current temperature in " +location+ " is: " + temp_f).openPopup();
}});
$.ajax({
url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR79.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['observation_location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
markerMission.bindPopup("Current temperature in " +location+ " is: " + temp_f).openPopup();
}});
$.ajax({
url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR102.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['observation_location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
markerFiDi.bindPopup("Current temperature in " +location+ " is: " + temp_f).openPopup();
}});
$.ajax({
url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR82.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['observation_location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
markerMarina.bindPopup("Current temperature in " +location+ " is: " + temp_f).openPopup();
}});
$.ajax({
url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR46.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['observation_location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
markerSunset.bindPopup("Current temperature in " +location+ " is: " + temp_f).openPopup();
}});
$.ajax({
url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR14.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['observation_location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
markerATT.bindPopup("Current temperature at AT&T Park is: " + temp_f).openPopup();
}});
});
</script>
</body>
Raw
indexSub.html
jQuery(document).ready(function($) {
$.ajax({
url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR128.json",
dataType: "jsonp",
success: function(parsed_json) {
var location = parsed_json['current_observation']['observation_location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
var iconPic = new L.Icon({
iconUrl: "http://icons-ak.wxug.com/i/c/k/partlycloudy.gif"
});
var markerRichmond = new L.Marker(new L.LatLng(37.782398, -122.471497), {icon: iconPic});
map.addLayer(markerRichmond);
markerRichmond.bindPopup("Current temperature in " +location+ " is: " + temp_f).openPopup();
}});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment