DayZDB Rangefinder Overlay

header.md

DayZDB Rangefinder Overlay

A bit of javascript to add a simple rangefinder overlay onto the interactive map over at http://dayzdb.com/map

Example

http://i.imgur.com/2M9BSM4.jpg

How to use

• Simply go to http://dayzdb.com/map
• Open the javascript development console (F12)
• Copy the contents of loader.js into the console and hit enter (you can now close the console)
• Click anywhere on the map and an overlay of concentric circles denoting ranges will be added to the map

Multiple overlays can be placed, an overlay can me moved by dragging and removed by clicking it.

If you want to change the range whilst the script is running, type (without quotes and changing the number to the desired range): "RangeFinder.range(1000)" and hit enter.

loader.js

A small amount of JS that pulls the (minified) source from this gist and loads it into the page. To do so, copy the contents of the loader.js file, paste it into the development console and hit enter.

localstorage.js

If you want the JS to persist across page loads then it needs to be stored somewhere, to do so copy line 1 of the file localstorage.js into the console and hit enter. Then to load the js (in the future) you will need to do the same steps but for line 3 instead. Unfortunately, in all cases you will have to run some amount of javascript as this is a plugin and not implemented by DayzDB (yet ;) ).

history.md

05/01/2014 10:37

• Fixed/accommodated changes done to DayZDB
• Changed default range to 800m

loader.js

(function(){var a=document.createElement('script');a.type='text/javascript';a.src='https://gist.github.com/stuartbannerman/8173488/raw/rangefinder.min.js';document.head.appendChild(a)})();

localstorage.js

localStorage.rangefinder = "((function(){var a=document.createElement('script');a.type='text/javascript';a.src='https://gist.github.com/stuartbannerman/8173488/raw/rangefinder.min.js';document.head.appendChild(a);})())"

eval(localStorage.rangefinder)

rangefinder.js

// See https://gist.github.com/stuartbannerman/8173488/ for instructions
var RangeFinder = (function(map)
{
    // The default range
    var range = 800;
    // Range to image mappings
    var RANGES = {
        500 : 'http://i.imgur.com/yaJb2OM.png',
        800 : 'http://i.imgur.com/QJyYkH9.png',
        1000 : 'http://i.imgur.com/WhXVOeq.png'
    };

    var imageURL = function()
    {
        return RANGES[range];
    };

    var imageSize = function(scale)
    {
        // (180px x 100m) + 8px padding
        return ((range / 100 * 180) + 8) * (scale || 1);
    };

    var setRange = function(num)
    {
        if(!RANGES[num])
        {
            throw "Invalid range: " + num + " use RangeFinder.ranges to see valid ranges";
        }

        range = Number(num);

        IMAGE.iconUrl(imageURL());
        // Update all the markers
        self.refresh();

        return range;
    };

    // Returns the scale of the current zoom level of the map
    var scale = function()
    {
        var diff = map.getMaxZoom() - map.getZoom();

        return 1 / (!diff ? 1 : (diff == 1 ? 2 : diff * diff));
    };

    var size = imageSize(scale());

    var IMAGE = L.icon({
        'iconUrl': imageURL(),
        'iconSize': [size, size],
        'iconAnchor': [size / 2, size / 2]
    });

    // Add some accessors to the image to allow changing of options
    ['iconSize', 'iconUrl', 'iconAnchor'].forEach(function(property, index)
    {
        this[property] = function(value)
        {
            return this.options[property] = (value === undefined ? this.options[property] : value);
        };
    }, IMAGE);

    // Custom accessor for setting the image scale
    IMAGE.scale = function(scale)
    {
        var size = imageSize(scale);

        IMAGE.iconSize([size, size]);
        IMAGE.iconAnchor([size / 2, size / 2]);
    };

    var tracking = function(action, id, latlng)
    {
        ga('send', 'event', 'Marker', action, JSON.stringify({ 'id' : id, 'utc' : +new Date(), 'lat' : latlng.lat, 'lng' : latlng.lng }));
    };

    var markers = [];

    map.on('click', function(e)
    {
        // Add a map marker where the user clicked
        var marker = L.marker(e.latlng, { 'icon' : IMAGE, 'draggable' : true }).addTo(map);

        var id = (Math.random() * 10000000) | 0;

        tracking('Add', id, e.latlng);
            
        // Remove the marker if the user clicks it
        marker.on('click', function(e)
        {
            map.removeLayer(e.target);
            markers.splice(markers.indexOf(this), 1);

            tracking('Remove', id, {});
        });

        marker.on('dragend', function(e)
        {
            tracking('Update', id, e.target._latlng);
        });

        markers.push(marker);
    });

    map.on('load zoomend', function(e)
    {
        self.refresh();
    });

    var self;

    return self = {
        'refresh' : function()
        {
            IMAGE.scale(scale());
            // Update all the markers
            for(var i = 0, len = markers.length; i < len; i++)
            {
                markers[i].setIcon(IMAGE);
            }
        },
        'ranges' : Object.keys(RANGES),
        'range' : function(num)
        {
            return num ? setRange(num) : range;
        },

    }

})(dzMap.map);

// Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-46869405-1', 'github.com');
ga('send', 'pageview');

rangefinder.min.js

// See https://gist.github.com/stuartbannerman/8173488/ for instructions
var RangeFinder=(function(b){var g=800;var a={500:"http://i.imgur.com/yaJb2OM.png",800:"http://i.imgur.com/QJyYkH9.png",1000:"http://i.imgur.com/WhXVOeq.png"};var e=function(){return a[g]};var h=function(m){return((g/100*180)+8)*(m||1)};var j=function(m){if(!a[m]){throw"Invalid range: "+m+" use RangeFinder.ranges to see valid ranges"}g=Number(m);k.iconUrl(e());i.refresh();return g};var d=function(){var m=b.getMaxZoom()-b.getZoom();return 1/(!m?1:(m==1?2:m*m))};var l=h(d());var k=L.icon({iconUrl:e(),iconSize:[l,l],iconAnchor:[l/2,l/2]});["iconSize","iconUrl","iconAnchor"].forEach(function(n,m){this[n]=function(o){return this.options[n]=(o===undefined?this.options[n]:o)}},k);k.scale=function(n){var m=h(n);k.iconSize([m,m]);k.iconAnchor([m/2,m/2])};var c=function(m,o,n){ga("send","event","Marker",m,JSON.stringify({id:o,utc:+new Date(),lat:n.lat,lng:n.lng}))};var f=[];b.on("click",function(n){var m=L.marker(n.latlng,{icon:k,draggable:true}).addTo(b);var o=(Math.random()*10000000)|0;c("Add",o,n.latlng);m.on("click",function(p){b.removeLayer(p.target);f.splice(f.indexOf(this),1);c("Remove",o,{})});m.on("dragend",function(p){c("Update",o,p.target._latlng)});f.push(m)});b.on("load zoomend",function(m){i.refresh()});var i;return i={refresh:function(){k.scale(d());for(var n=0,m=f.length;n<m;n++){f[n].setIcon(k)}},ranges:Object.keys(a),range:function(m){return m?j(m):g}}})(dzMap.map);(function(d,e,j,h,f,c,b){d.GoogleAnalyticsObject=f;d[f]=d[f]||function(){(d[f].q=d[f].q||[]).push(arguments)},d[f].l=1*new Date();c=e.createElement(j),b=e.getElementsByTagName(j)[0];c.async=1;c.src=h;b.parentNode.insertBefore(c,b)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create","UA-46869405-1","github.com");ga("send","pageview");