Toggle navigation Highcharts
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter
  • Home
  • Products
    • Highcharts
    • Highcharts Stock
    • Highcharts Maps
    • Highcharts Gantt
    • Highcharts Editor
    • Highcharts Mobile
    • Wrappers & add-ons
  • Demo
    • Highcharts demos
    • Stock demos
    • Maps demos
    • Gantt demos
    • Customer showcase
  • Developer
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
    • Code Examples
  • Support
  • Blog
  • Get it
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter

Highcharts Configuration Preview

var H = Highcharts,
    map = H.maps['countries/us/us-all'],
    chart;

// Add series with state capital bubbles
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/us-capitals.json', function (json) {
    var data = [];
    json.forEach(function (p) {
        p.z = p.population;
        data.push(p);
    });

    chart = Highcharts.mapChart('container', {
        title: {
            text: 'Highcharts Maps lat/lon demo'
        },

        tooltip: {
            pointFormat: '{point.capital}, {point.parentState}<br>' +
                'Lat: {point.lat}<br>' +
                'Lon: {point.lon}<br>' +
                'Population: {point.population}'
        },

        xAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },

        yAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },

        series: [{
            name: 'Basemap',
            mapData: map,
            borderColor: '#606060',
            nullColor: 'rgba(200, 200, 200, 0.2)',
            showInLegend: false
        }, {
            name: 'Separators',
            type: 'mapline',
            data: H.geojson(map, 'mapline'),
            color: '#101010',
            enableMouseTracking: false,
            showInLegend: false
        }, {
            type: 'mapbubble',
            dataLabels: {
                enabled: true,
                format: '{point.capital}'
            },
            name: 'Cities',
            data: data,
            maxSize: '12%',
            color: H.getOptions().colors[0]
        }]
    });
});

// Display custom label with lat/lon next to crosshairs
document.getElementById('container').addEventListener('mousemove', function (e) {
    var position;
    if (chart) {
        if (!chart.lab) {
            chart.lab = chart.renderer.text('', 0, 0)
                .attr({
                    zIndex: 5
                })
                .css({
                    color: '#505050'
                })
                .add();
        }

        e = chart.pointer.normalize(e);
        position = chart.fromPointToLatLon({
            x: chart.xAxis[0].toValue(e.chartX),
            y: chart.yAxis[0].toValue(e.chartY)
        });

        chart.lab.attr({
            x: e.chartX + 5,
            y: e.chartY - 22,
            text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)
        });
    }
});

document.getElementById('container').addEventListener('mouseout', function () {
    if (chart && chart.lab) {
        chart.lab.destroy();
        chart.lab = null;
    }
});
              

Highcharts Maps Demos › Advanced lat/long

Default Dark Unica Sand Signika Grid Light
  • General
    • Overview
    • Color axis and data labels
    • Categorized areas
    • Distribution map
    • Highlighted areas
    • Detailed map US counties
    • Data classes and popup
    • Multiple data classes
    • Small US with data labels
    • Map with overlaid pie charts
    • Simple flight routes
    • Map with pattern fills
    • Map with marker clusters
  • Dynamic
    • Drilldown
    • Rich information on click
    • Fixed tooltip with HTML
    • Zoom to area by double click
    • Current temperatures in capitals of Europe
  • Input formats
    • GeoJSON areas
    • GeoJSON with rivers and cities
    • Map point with lat/long
    • Advanced lat/long
  • Series types
    • Map bubble
    • Heat map
    • Tile map honeycomb
    • Tile map circles
    • Tile map diamonds
    • Lines and points in maps
Hide Menu More...

Advanced lat/long

Edit in jsFiddle Edit in CodePen
© 2020 Highcharts. All rights reserved.

Privacy Policy

Cookie Policy

Cookie Preferences