Menu
i have Leaflet map with coordinates finder, the coordinates commend contains Heading point. im trying to rotate my icon marker to the Heading point. the code: (live at: http://84.95.7.35/~hzcoil/index2.html)
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js" type="text/javascript"></script>
<script src="http://84.95.7.35/~hzcoil/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script>
function init() {
var latScaleVal = 8300;
var longScaleVal = 8300;
var latScale = latScaleVal / 256;
var longScale = longScaleVal / 256;
var fixLat = function(e) {
if (e > 0) {
e = -e
} else {
e = Math.abs(e)
}
return e
};
var coords = function(e, t) {
e = fixLat(e);
var n = e / latScale + latScaleVal / 2 / latScale;
var r = t / longScale + longScaleVal / 2 / longScale;
return [-n, r]
};
var mapMinZoom = 0;
var mapMaxZoom = 6;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 8192], mapMaxZoom),
map.unproject([8192, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('http://www.h1z1maps.com/images/newmap/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
noWrap: true
}).addTo(map);
var roticon = L.icon({
iconUrl: "https://www.mapbox.com/maki/renders/[email protected]",
className: 'RotatedMarker',
iconSize: [50, 50],
iconAnchor: [10, 21],
popupAnchor: [5, -35]
});
$("#findmyloc").on("submit", function() {
try {
var e = $("#locbox").val().match(/-?[0-9.0-9]+/g);
$("#locbox").val("");
var goto = L.marker(coords(e[0], e[2], e[3]), {icon:roticon}).addTo(map);
} catch (t) {
console.log(t)
}
return false
});
}
</script>
<style>
html, body, #map { width:700px; height:500px; margin:0; padding:0; }
</style>
</head>
<body onload="init()">
<div id="map"></div>
<form id="findmyloc">
<input id="locbox" type="text" value="x=2196.170 y=39.880 z=1895.350, Heading: 0.624" />
<input type="submit" class="search" value="submit" />
</form>
</body>
i found this: https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js
i was working on it about 5 hours but i could not match it to my code.
this it the coordinates commend: x=2196.170 y=39.880 z=1895.350, Heading: 0.624
The "Heading" should be the rotate.
How can i match it to my code?
999
Your example page does not include the RotatedMarker extension.
Once you include it you can call it by using the rotatedMarker method for creating the marker and passing the angle in the options object (it must be in degrees, not radians)
var goto = L.rotatedMarker( coords(e[0], e[2]), {
icon:roticon,
angle:+e[3]*180/Math.PI // convert to degrees
}).addTo(map);
Demo at http://plnkr.co/edit/QioXRLA8PYnrlb2ZH7kr?p=preview
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
