frodrigo · August 8, 2014 15:02
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="http://techblog.mappy.com/Leaflet-active-area/src/L.activearea.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
    <style>
        body            { margin:0; padding:0; }
        #map            { position:absolute; top:0; bottom:0; width:100%; z-index: 1; }
        .viewport       { position: absolute;  top: 50px; left: 50%; right: 50px; height: 400px; }
        .border         { border: 2px solid green; position: absolute; z-index: 2; }
        .b1             { top: 50px; left: 50%; right: 50px; height: 0; }
        .b2             { top: 450px; left: 50%; right: 50px; height: 0; }
        .b3             { top: 50px; left: 50%; height: 400px; }
        .b4             { top: 50px; right: 50px; height: 400px; }
        .explanation    { position: absolute; top: 500px; left: 50px; right: 50px; z-index: 2; background-color: rgba(255, 255, 255, 0.9); padding: 0 1em;
    </style>
 </head>
 <body>
    <div id="map"></div>
    <div class="border b1"></div>
    <div class="border b2"></div>
    <div class="border b3"></div>
    <div class="border b4"></div>
    <div class="explanation">
        <h1>Leaflet-active-area</h1>
        <h2>An active area ?</h2>
    </div>
    <script type="text/javascript">
        
        var Paris = [48.85346, 2.34956];
        var London = [51.505, -0.09];
        
        var map = new L.Map('map', {maxZoom: 18}).setActiveArea('viewport').setView(Paris, 13);
        map.scrollWheelZoom.disable();
        
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var layers_cluster = new L.MarkerClusterGroup([mparis, mlondon]);
        var mparis = L.marker(Paris);
        var mlondon = L.marker(London);
        mparis.addTo(layers_cluster).bindPopup('Ici Paris');
        mlondon.addTo(layers_cluster).bindPopup('Here London');
        layers_cluster.addTo(map);

        layers_cluster.zoomToShowLayer(mparis, function () {
            mparis.openPopup();
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
	<script src="http://techblog.mappy.com/Leaflet-active-area/src/L.activearea.js"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
	<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; z-index: 1; }
	.viewport { position: absolute; top: 50px; left: 50%; right: 50px; height: 400px; }
	.border { border: 2px solid green; position: absolute; z-index: 2; }
	.b1 { top: 50px; left: 50%; right: 50px; height: 0; }
	.b2 { top: 450px; left: 50%; right: 50px; height: 0; }
	.b3 { top: 50px; left: 50%; height: 400px; }
	.b4 { top: 50px; right: 50px; height: 400px; }
	.explanation { position: absolute; top: 500px; left: 50px; right: 50px; z-index: 2; background-color: rgba(255, 255, 255, 0.9); padding: 0 1em;
	</style>
	</head>
	<body>
	<div id="map"></div>
	<div class="border b1"></div>
	<div class="border b2"></div>
	<div class="border b3"></div>
	<div class="border b4"></div>
	<div class="explanation">
	<h1>Leaflet-active-area</h1>
	<h2>An active area ?</h2>
	</div>
	<script type="text/javascript">

	var Paris = [48.85346, 2.34956];
	var London = [51.505, -0.09];

	var map = new L.Map('map', {maxZoom: 18}).setActiveArea('viewport').setView(Paris, 13);
	map.scrollWheelZoom.disable();

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	var layers_cluster = new L.MarkerClusterGroup([mparis, mlondon]);
	var mparis = L.marker(Paris);
	var mlondon = L.marker(London);
	mparis.addTo(layers_cluster).bindPopup('Ici Paris');
	mlondon.addTo(layers_cluster).bindPopup('Here London');
	layers_cluster.addTo(map);

	layers_cluster.zoomToShowLayer(mparis, function () {
	mparis.openPopup();
	});
	</script>
	</body>
	</html>
No results found