humangeo / leaflet-dvf

Leaflet Data Visualization Framework
MIT License
689 stars 153 forks source link

How to customize Tooltip Title (ChoroplethDataLayer with GeoJSON) #110

Closed cdrfun closed 7 years ago

cdrfun commented 7 years ago

Hi there, I have a GeoJSON dataset and use the following data layer definition:

var dataLayer = new L.ChoroplethDataLayer(data, {
    recordsLayer: 'features',
    locationMode: L.LocationModes.GEOJSON,
    maxZoom: 18,
    displayOptions: {
        'properties.NAME_3' : {
            displayName: 'Landkreis'
        }
    },  
    layerOptions: {
        gradient: true,
        fillOpacity: 0.8,
        weight: 1.0,
        opacity: 1.0,
        color: '#000000'
    },
    tooltipOptions: {
        iconSize: new L.Point(100, 80),
        iconAnchor: new L.Point(-10, 0)
    }
});

This results in: image

But I want to write the Information in properties.NAME_3 (Landkreis) in the title of the tooltip where it currently says [object Object].

How can I achieve that? Many thanks in advance!

sfairgrieve commented 7 years ago

Use the locationTextField option. This can either be a reference to a property like properties.NAME_3 or it can be a function that takes a record as input and returns a string. Try this:

var dataLayer = new L.ChoroplethDataLayer(data, {
    recordsLayer: 'features',
    locationMode: L.LocationModes.GEOJSON,
        locationTextField: 'properties.NAME_3',
    maxZoom: 18,
    displayOptions: {
        'properties.NAME_3' : {
            displayName: 'Landkreis'
        }
    },  
    layerOptions: {
        gradient: true,
        fillOpacity: 0.8,
        weight: 1.0,
        opacity: 1.0,
        color: '#000000'
    },
    tooltipOptions: {
        iconSize: new L.Point(100, 80),
        iconAnchor: new L.Point(-10, 0)
    }
});
cdrfun commented 7 years ago

Thank you! Works like a charm 😃