추적: • leafletjs

목차

, ,

Leafletjs

http://leafletjs.com/ An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

http://www.osgeo.org

예제

타일맵

<html>
<head>
<link rel="stylesheet"
    href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style>
    #map { height: 360px; }
</style>
<script language="javascript"> 
function onLoAd() 
{
    var map = L.map('map');
    L.tileLayer('http://f4map.vaslor.net/files/maps/f4/{z}/{x}/{y}.png?',
    {
        maxZoom: 6,
        minZoom: 2,
        continuousWorld: false,
        noWrap:true,
        tms:true,
        attribution: '<a href="http://openwiki.kr/tech/leafletjs">test</a>',
        id: 'test' 
    }
      ).addTo(map);
    map.setView([-55,-80], 2);
}
</script>
</head>
<body onLoad="onLoAd()">
    <div id="map"></div>
</body>
</html>

단일이미지

출처: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html 

<html>
<head>
<link rel="stylesheet"
    href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style>
    #map { height: 360px;
    width:300px; }
</style>
<script language="javascript"> 
function onLoAd() 
{
 
// create the slippy map
var map = L.map('map', {
  minZoom: 1,
  maxZoom: 4,
  center: [0, 0],
  zoom: 1,
  crs: L.CRS.Simple
});
 
// dimensions of the image
var w = 4158,
    h = 4155,
    url = './fallout-4-map.png';
 
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);
 
// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);
 
// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);
 
}
</script>
</head>
<body onLoad="onLoAd()">
    <div id="map"></div>
</body>
</html>

플러그인

탐색