JSFiddle - React, Tailwind, and code Playground

by Angelos Chaidas

HTML

<script 
    type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry">
</script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
        
<h1>Adzuna Map location optimiser</h1>
<p>Map dimensions as on stats interface: 598 x 288 pixels</p>
<aside>
    <h2>Location data:</h2>
    <textarea>
[
   {
      "count" : 28190,
      "lat" : "51.503378",
      "name" : "London",
      "percentage" : "33.45",
      "tag" : "london",
      "id" : "86384",
      "lng" : "-0.139134"
   },
   {
      "count" : 12138,
      "lat" : "51.320086",
      "name" : "South East England",
      "percentage" : "14.40",
      "tag" : "south-east-england",
      "id" : "86394",
      "lng" : "-0.605907"
   },
   {
      "count" : 3788,
      "lat" : "53.954491",
      "name" : "North West England",
      "percentage" : "4.49",
      "tag" : "north-west-england",
      "id" : "86396",
      "lng" : "-2.749077"
   },
   {
      "count" : 3742,
      "lat" : "52.242674",
      "name" : "Eastern England",
      "percentage" : "4.44",
      "tag" : "eastern-england",
      "id" : "86399",
      "lng" : "0.545858"
   },
   {
      "count" : 3687,
      "lat" : "50.950482",
      "name" : "South West England",
      "percentage" : "4.37",
      "tag" : "south-west-england",
      "id" : "86392",
      "lng" : "-3.230444"
   },
   {
      "count" : 3285,
      "lat" : "52.509745",
      "name" : "West Midlands",
      "percentage" : "3.90",
      "tag" : "west-midlands",
      "id" : "86407",
      "lng" : "-2.355658"
   },
   {
      "count" : 3134,
      "lat" : "53.679185",
      "name" : "Yorkshire and Humberside",
      "percentage" : "3.72",
      "tag" : "yorkshire-and-the-humber",
      "id" : "86386",
      "lng" : "-1.162449"
   },
   {
      "count" : 2657,
      "lat" : "52.934907",
      "name" : "East Midlands",
      "percentage" :...

CSS

body { padding-left:260px; font-family:arial; font-size:12px; }
aside { position:absolute; left:0; top:0; background-color:#EFEFEF; height:100%; padding:10px; width:230px;  }
textarea { width:228px; max-width:228px; font-family:monospace; font-size:11px;min-height:300px; }
h1 { font-weight:bold; font-size:24px; line-height:1.4em; }
h1,h2,p,#map { margin-bottom:10px; }
#map { width:598px; height:288px; background-color:#EFEFEF; }
.ui-slider {
    height:10px;
    background-color:#EFEFEF;
    border:1px solid #999;
    margin-bottom:10px;
}
.ui-slider-handle {
    position:relative;
    display:block;
    width:10px;
    height:10px;
    background-color:#999;
}
h2 span {
    font-weight:bold;
    color:green;
}

.infoBox {
            width:100px;
            font-size:18px;
            font-weight:bold;
            color:white;
            line-height:20px;
            padding:0px;
            text-align:center;
            color:white;
            text-shadow:0 0 4px black;
        }

        .infoBox span {
            font-size:11px;
            font-weight:normal;
            line-height:14px;
            display:block;
        }

JavaScript

var map = {};
var loc = null;
var markers = [];
var inner = [];
var outer = [];
var labels = [];
$(document).ready(function() {

    $('#zoom_slider').slider({
        value: 6,
        min: 1,
        max: 15,
        step: 1,
        slide: function(event, ui) {
            $('#zoom_value').text(ui.value);
            map.setZoom(ui.value);
        }
    });

    $('#radius_min_slider').slider({
        value: 40000,
        min: 0,
        max: 100000,
        step: 100,
        slide: function(event, ui) {
            $('#radius_min_value').text(ui.value);
            $.each(inner, function() {
                this.setRadius(ui.value);
            });
        }
    });

    $('#radius_max_slider').slider({
        value: 55000,
        min: 0,
        max: 100000,
        step: 100,
        slide: function(event, ui) {
            $('#radius_max_value').text(ui.value);
            $.each(outer, function() {
                this.setRadius(ui.value);
            });
        }
    });

    map = new google.maps.Map($('#map').get(0), {
        disableDefaultUI: true,
        disableDoubleClickZoom: true,
        zoom: 6,
        noClear: true,
        zoomControl: false,
        keyboardShortcuts: false,
        scrollwheel: false,
        center: new google.maps.LatLng(51.50487147437787, -0.14110620117186112),
        // Default center is London
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $('#locdata').on('click', function(e) {
        e.preventDefault();
        // First clear everything from the map
        for(var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
            inner[i].setMap(null);
            outer[i].setMap(null);
            labels[i].close();
        }
        markers = [];
        inner = [];
        outer = [];
        labels = [];

        var js = $('textarea').val();
        try {
            loc = eval(js);
            // Create markers and circles for each loc
            $.each(loc,...