heckyel/mediagoblin
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Installed leaflet in extlib

Browse Source
This commit is contained in:
Joar Wandborg
2012-01-10 01:54:37 +01:00
parent c47a03b909
commit c5ba5b0456
96 changed files with 5756 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
extlib/leaflet/debug/control/map-control.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../include.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map').addLayer(cloudmade).setView(latlng, 15);
var zoomControl = new L.Control.Zoom();
map.addControl(zoomControl);
</script>
</body>
</html>

6
extlib/leaflet/debug/css/mobile.css Normal file
View File

@@ -0,0 +1,6 @@
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

5
extlib/leaflet/debug/css/screen.css Normal file
View File

@@ -0,0 +1,5 @@
#map {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}

50
extlib/leaflet/debug/geojson/geojson-sample.js Normal file
View File

@@ -0,0 +1,50 @@
var geojsonSample = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"prop0": "value0",
"color": "blue"
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]
},
"properties": {
"color": "red",
"prop1": 0.0
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]]
},
"properties": {
"color": "green",
"prop1": {
"this": "that"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [[[[100.0, 1.5], [100.5, 1.5], [100.5, 2.0], [100.0, 2.0], [100.0, 1.5]]], [[[100.5, 2.0], [100.5, 2.5], [101.0, 2.5], [101.0, 2.0], [100.5, 2.0]]]]
}
}
]
};

56
extlib/leaflet/debug/geojson/geojson.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button id="populate">Populate with 10 markers</button>
<script type="text/javascript" src="geojson-sample.js"></script>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = new L.Map('map', {
center: new L.LatLng(0.78, 102.37),
zoom: 7,
layers: [cloudmade]
});
var geojson = new L.GeoJSON();
/* points are rendered as markers by default, but you can change this:
var geojson = new L.GeoJSON(null, {
pointToLayer: function(latlng) { return new L.CircleMarker(latlng); }
});
*/
geojson.on('featureparse', function(e) {
// you can style features depending on their properties, etc.
var popupText = 'geometry type: ' + e.geometryType + '<br/>';
if (e.layer instanceof L.Path) {
e.layer.setStyle({color: e.properties.color});
popupText += 'color: ' + e.properties.color;
}
e.layer.bindPopup(popupText);
});
geojson.addGeoJSON(geojsonSample);
map.addLayer(geojson);
</script>
</body>
</html>

100
extlib/leaflet/debug/leaflet-include.js Normal file
View File

@@ -0,0 +1,100 @@
(function() {
//TODO replace script list with the one from ../buid/deps.js
var scripts = [
'Leaflet.js',
'core/Util.js',
'core/Class.js',
'core/Events.js',
'core/Browser.js',
'geometry/Point.js',
'geometry/Bounds.js',
'geometry/Transformation.js',
'geometry/LineUtil.js',
'geometry/PolyUtil.js',
'dom/DomEvent.js',
'dom/DomEvent.DoubleTap.js',
'dom/DomUtil.js',
'dom/Draggable.js',
'dom/transition/Transition.js',
'dom/transition/Transition.Native.js',
'dom/transition/Transition.Timer.js',
'geo/LatLng.js',
'geo/LatLngBounds.js',
'geo/projection/Projection.js',
'geo/projection/Projection.SphericalMercator.js',
'geo/projection/Projection.LonLat.js',
'geo/projection/Projection.Mercator.js',
'geo/crs/CRS.js',
'geo/crs/CRS.EPSG3857.js',
'geo/crs/CRS.EPSG4326.js',
'geo/crs/CRS.EPSG3395.js',
'layer/LayerGroup.js',
'layer/FeatureGroup.js',
'layer/tile/TileLayer.js',
'layer/tile/TileLayer.WMS.js',
'layer/tile/TileLayer.Canvas.js',
'layer/ImageOverlay.js',
'layer/Popup.js',
'layer/marker/Icon.js',
'layer/marker/Marker.js',
'layer/marker/Marker.Popup.js',
'layer/vector/Path.js',
'layer/vector/Path.VML.js',
'layer/vector/Path.Popup.js',
'layer/vector/Polyline.js',
'layer/vector/Polygon.js',
'layer/vector/MultiPoly.js',
'layer/vector/Circle.js',
'layer/vector/CircleMarker.js',
'layer/GeoJSON.js',
'handler/Handler.js',
'handler/MapDrag.js',
'handler/TouchZoom.js',
'handler/DoubleClickZoom.js',
'handler/ScrollWheelZoom.js',
'handler/ShiftDragZoom.js',
'handler/MarkerDrag.js',
'control/Control.js',
'control/Control.Zoom.js',
'control/Control.Attribution.js',
'map/Map.js',
'map/ext/Map.Geolocation.js',
'map/ext/Map.Popup.js',
'map/ext/Map.PanAnimation.js',
'map/ext/Map.ZoomAnimation.js',
'map/ext/Map.Control.js'
];
function getSrcUrl() {
var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
var src = scripts[i].src;
if (src) {
var res = src.match(/^(.*)leaflet-include\.js$/);
if (res) {
return res[1] + '../src/';
}
}
}
}
var path = getSrcUrl();
for (var i = 0; i < scripts.length; i++) {
document.writeln("<script type='text/javascript' src='" + path + "../src/" + scripts[i] + "'></script>");
}
})();

46
extlib/leaflet/debug/map/canvas.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<script type="text/javascript">
var tiles = new L.TileLayer.Canvas();
tiles.drawTile = function(canvas, tile, zoom) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 255, 255);
ctx.fillStyle = 'black';
ctx.fillText('x: ' + tile.x + ', y: ' + tile.y + ', zoom:' + zoom, 20, 20);
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(255, 0);
ctx.lineTo(255, 255);
ctx.lineTo(0, 255);
ctx.closePath();
ctx.stroke();
}
var map = new L.Map('map', {center: new L.LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
</script>
</body>
</html>

42
extlib/leaflet/debug/map/map-mobile.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = new L.Map('map').addLayer(cloudmade);
map.on('locationfound', function(e) {
var marker = new L.Marker(e.latlng);
map.addLayer(marker);
marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
});
map.on('locationerror', function(e) {
alert(e.message);
map.fitWorld();
});
map.locateAndSetView();
</script>
</body>
</html>

56
extlib/leaflet/debug/map/map.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button id="populate">Populate with 10 markers</button>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
var markers = new L.FeatureGroup();
function populate() {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
for (var i = 0; i < 10; i++) {
var latlng = new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
markers.addLayer(new L.Marker(latlng));
}
return false;
};
markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>");
map.addLayer(markers);
populate();
L.DomUtil.get('populate').onclick = populate;
</script>
</body>
</html>

30
extlib/leaflet/debug/map/wms-marble.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 1024px; height: 440px; border: 1px solid #ccc"></div>
<script type="text/javascript">
var map = new L.Map('map', {crs: L.CRS.EPSG4326});
var bluemarble = new L.TileLayer.WMS("http://maps.opengeo.org/geowebcache/service/wms", {
layers: 'bluemarble',
attribution: "Data &copy; NASA Blue Marble, image service by OpenGeo",
minZoom: 2,
maxZoom: 5,
});
map.addLayer(bluemarble).fitWorld();
</script>
</body>
</html>

37
extlib/leaflet/debug/map/wms.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script type="text/javascript">
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r-900913',
format: 'image/png',
transparent: true,
attribution: "Weather data &copy; 2011 IEM Nexrad",
opacity: 0.4
});
var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
map.addLayer(cloudmade).addLayer(nexrad).fitBounds(bounds);
</script>
</body>
</html>

1
extlib/leaflet/debug/vector/route.js Normal file
View File

File diff suppressed because one or more lines are too long

38
extlib/leaflet/debug/vector/vector-mobile.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script src="route.js"></script>
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
for (var i = 0, latlngs = [], len = route.length; i < len; i++) {
latlngs.push(new L.LatLng(route[i][0], route[i][1]));
}
var path = new L.Polyline(latlngs, {smoothFactor: 1});
var map = new L.Map('map', {layers: [cloudmade]});
map.fitBounds(new L.LatLngBounds(latlngs));
map.addLayer(new L.Marker(latlngs[0]));
map.addLayer(new L.Marker(latlngs[latlngs.length - 1]));
map.addLayer(path);
</script>
</body>
</html>

38
extlib/leaflet/debug/vector/vector.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script src="route.js"></script>
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
for (var i = 0, latlngs = [], len = route.length; i < len; i++) {
latlngs.push(new L.LatLng(route[i][0], route[i][1]));
}
var path = new L.Polyline(latlngs);
var map = new L.Map('map', {layers: [cloudmade]});
map.fitBounds(new L.LatLngBounds(latlngs));
map.addLayer(new L.Marker(latlngs[0]));
map.addLayer(new L.Marker(latlngs[len - 1]));
map.addLayer(path);
path.bindPopup("Hello world");
</script>
</body>
</html>