地図タイルに情報を書き込むLeaflet.jsのサンプル
Leaflet.js
code:js
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
</head>
<style>
width: 100%;
height: 1000px;
}
.my-tile{
}
.my-marker-icon{
font-size: 16px;
background-color:rgba(255,255,255,0.9);
padding: 0.1em 0.5em;
}
</style>
<script>
$(function () {
$("#map").height(window.innerHeight);
var baseLayer = createBaseLayer().addTo(map);
var tileInfoLayer = createTileInfoLayer().addTo(map);
var controller = L.control.layers({"base": baseLayer}, {"tileInfo": tileInfoLayer}).addTo(map);
});
function createBaseLayer(){
minZoom: 2, maxZoom: 17,
return layer;
}
function createTileInfoLayer(){
var TileInfoLayer = L.GridLayer.extend({
createTile: function (coords) {
var tile = L.DomUtil.create('div', 'leaflet-tile my-tile');
return tile;
}});
var layer = new TileInfoLayer();
function createMarker(layer, e){
var zxy = "z/x/y=" + e.coords.z + "/" + e.coords.x + "/" + e.coords.y;
var bounds = layer._tileCoordsToBounds(e.coords);
icon: L.divIcon({
className: "my-marker-icon",
html: "<div>"+zxy+"</div>"+"<div></div>"
})
});
}
var markers = {};
layer.on("tileload", function (e) {
var marker = createMarker(layer, e).addTo(this._map);
L.DomEvent.on(marker._icon, event , L.DomEvent.stopPropagation);
})
});
layer.on("tileunload", function (e) {
});
return layer;
}
</script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="map"></div>
</div>
</div>
</div>
</body>