Cara merubah icon titik cursor di leaflet, sering kita lihat di berbagai aplikasi pemetaan sebuah titik kursor yang berbeda2, jika anda yang lagi belajar pemetaan dengan memakai leaflet dan ingin merubah titik dengan berbagai bentuk, ini dia kode nya.
<!DOCTYPE html>
<html>
<head>
<title>Center Position Control - ETRS89_UTM31N</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<link rel="stylesheet" href="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<script src="./lib/proj4leaflet.min.js"></script>
<script src="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
.leaflet-control-mapcentercoord-icon {
background: url(http://xguaita.github.io/Leaflet.MapCenterCoord/dist/icons/MapCenterCoordIcon2.svg) 50% 50% no-repeat;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var etrs89N31 = new L.Proj.CRS("EPSG:25831", "+proj=utm +zone=31 +ellps=GRS80 +units=m +no_defs", {
origin: [238379.2278, 4265559.3497],
resolutions: [305.75, 152.87, 76.437, 38.219, 19.109, 9.5546, 4.7773, 2.3887, 1.1943, 0.5972]
});
//Ortofoto ideib
var orto = new L.TileLayer.WMS("http://ideib.caib.es/pub_ideib/public/Ortofoto/MapServer/WMSServer", {
layers: '0,1,2',
format: 'image/jpeg',
attribution: "© IDEIB",
maxZoom: 9,
minZoom: 0,
continuousWorld: true
});
var map = L.map('map', {
crs: etrs89N31,
center: [39.588, 2.935],
zoom: 0,
layers: [orto],
continuousWorld: true
});
L.control.mapCenterCoord({
iconFile: 'MapCenterCoordIcon2.png',
template: '<b>ETRS89 UTM31N</b><br>x:{x} y:{y}',
projected: true,
onMove: true,
formatProjected: '#.##0,'
}).addTo(map);
</script>
</body>
</html>
Related Post