Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 22, 2015 15:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/fe19008c911e1e6b6490 to your computer and use it in GitHub Desktop.
Save anonymous/fe19008c911e1e6b6490 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet test // source http://jsbin.com/yozulubipi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet test</title>
<meta name="viewport" content="width=device-width">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<style id="jsbin-css">
* {margin: 0; padding: 0;}
#map { height: 500px; width: 500px }
</style>
</head>
<body>
<div id="map"></div>
<ul>
<li class="icon activity">
<strong>Place 1</strong> <span class="latlong"><span class="lat">51.215232</span><span class="lng">-4.093562</span></span>
</li>
<li class="icon activity">
<strong>Place 2</strong> <span class="latlong"><span class="lat">51.134649</span><span class="lng">-4.234248</span></span>
</li>
<li class="icon activity">
<strong>Place 3</strong> <span class="latlong"><span class="lat">51.148677</span><span class="lng">-4.223514</span></span>
</li>
</ul>
<script id="jsbin-javascript">
var map = L.map('map');
var cloudmade = new L.TileLayer('https://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q').addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [36, 36],
iconAnchor: [18, 36],
popupAnchor: [0, -32]
}
});
var markerLayer = [],
bounds = [];
var mapList = $('ul li.activity');
mapList.each(function (i) {
$(this).attr('data-id', i);
var a = $(this),
popupDetail = $(this).find('strong').text(),
title = $(this).find('strong').text(),
iconType,
lat = parseFloat($(this).find('.lat').text()),
lng = parseFloat($(this).find('.lng').text());
if ($(this).hasClass('activity')) {
iconType = 'activity';
}
else if ($(this).hasClass('accommodation')) {
iconType = 'accommodation';
}
if (lat != '' || lng != '') {
var marker = new L.Marker(new L.LatLng(lat, lng),
{ id: i, title: title, icon: new LeafIcon({ iconUrl: 'http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/pin_map.png' }) })
.addTo(map)
.bindPopup(popupDetail);
markerLayer.push(marker);
bounds.push([lat, lng]);
}
});
map.fitBounds(bounds);
map.setZoom(10);
mapList.on({
click: function () {
markerLayer[$(this).attr('data-id')].openPopup();
}
});
</script>
<script id="jsbin-source-css" type="text/css">* {margin: 0; padding: 0;}
#map { height: 500px; width: 500px }</script>
<script id="jsbin-source-javascript" type="text/javascript"> var map = L.map('map');
var cloudmade = new L.TileLayer('https://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q').addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [36, 36],
iconAnchor: [18, 36],
popupAnchor: [0, -32]
}
});
var markerLayer = [],
bounds = [];
var mapList = $('ul li.activity');
mapList.each(function (i) {
$(this).attr('data-id', i);
var a = $(this),
popupDetail = $(this).find('strong').text(),
title = $(this).find('strong').text(),
iconType,
lat = parseFloat($(this).find('.lat').text()),
lng = parseFloat($(this).find('.lng').text());
if ($(this).hasClass('activity')) {
iconType = 'activity';
}
else if ($(this).hasClass('accommodation')) {
iconType = 'accommodation';
}
if (lat != '' || lng != '') {
var marker = new L.Marker(new L.LatLng(lat, lng),
{ id: i, title: title, icon: new LeafIcon({ iconUrl: 'http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/pin_map.png' }) })
.addTo(map)
.bindPopup(popupDetail);
markerLayer.push(marker);
bounds.push([lat, lng]);
}
});
map.fitBounds(bounds);
map.setZoom(10);
mapList.on({
click: function () {
markerLayer[$(this).attr('data-id')].openPopup();
}
});</script></body>
</html>
Raw
jsbin.yozulubipi.css
* {margin: 0; padding: 0;}
#map { height: 500px; width: 500px }
Raw
jsbin.yozulubipi.js
var map = L.map('map');
var cloudmade = new L.TileLayer('https://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q').addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [36, 36],
iconAnchor: [18, 36],
popupAnchor: [0, -32]
}
});
var markerLayer = [],
bounds = [];
var mapList = $('ul li.activity');
mapList.each(function (i) {
$(this).attr('data-id', i);
var a = $(this),
popupDetail = $(this).find('strong').text(),
title = $(this).find('strong').text(),
iconType,
lat = parseFloat($(this).find('.lat').text()),
lng = parseFloat($(this).find('.lng').text());
if ($(this).hasClass('activity')) {
iconType = 'activity';
}
else if ($(this).hasClass('accommodation')) {
iconType = 'accommodation';
}
if (lat != '' || lng != '') {
var marker = new L.Marker(new L.LatLng(lat, lng),
{ id: i, title: title, icon: new LeafIcon({ iconUrl: 'http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/pin_map.png' }) })
.addTo(map)
.bindPopup(popupDetail);
markerLayer.push(marker);
bounds.push([lat, lng]);
}
});
map.fitBounds(bounds);
map.setZoom(10);
mapList.on({
click: function () {
markerLayer[$(this).attr('data-id')].openPopup();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment