JSFiddle - React, Tailwind, and code Playground

by Leon Alvarez Del Canto

HTML

<script src="//npmcdn.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="//npmcdn.com/[email protected]/dist/leaflet.css">
<script src="http://gps-leondaw.c9users.io/leaflet-ajax/dist/leaflet.ajax.js"></script>

  
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

	<div id="map"></div>
	<div id="chart"></div>

CSS

#map{
              width:100%;
              height:716px;
              padding:0;
              margin:0;
            }
            .content{
              padding:5px;
              
            }
            #chart{
                width:100%;
                height: 200px; 
                margin: 0 auto;
            }

JavaScript

$(function () {
  
  var mymap = L.map('mapid').setView([51.505, -0.09], 13);

		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'mapbox.streets'
		}).addTo(mymap);
    
    $.getJSON('http://gps-leondaw.c9users.io/prueba7/3?callback=?', function (data) {

        $('#chart').highcharts({
            chart: {
                zoomType: 'x'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Speed (km/h)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                     return 'Extra data: <b>' + this.point.LatLng+ '</b>';
                }
            },
            plotOptions: {
                 series:{      point: {
                    events: {
                        mouseOver: function () {
                            console.log('mouse over: ' + this.LatLng);
                        }
                    }
                },
                events: {
                    mouseOut: function () {
                        console.log('mouse out '+ this.LatLng);
                        
                        }
                    
                },
                    turboThreshold:10000//set it to a larger threshold, it is by default to 1000
                 }
            },

            series: [{
                type: 'line',
      ...