87
rated 0 times
[
92]
[
5]
/ answers: 1 / hits: 8124
/ 10 Years ago, mon, january 26, 2015, 12:00:00
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?
More From » css
