2 
var mymap = L.map('map').setView([53.7983587, -1.6191674], 11);
    mymap.createPane('labels');
    mymap.getPane('labels').style.zIndex = 650;
    mymap.getPane('labels').style.pointerEvents = 'none';

    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(mymap);

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
}).addTo(mymap);

    L.tileLayer('https://api.mapbox.com/styles/v1/adam97x/cjavcj1680vgz2sqshn70q5pg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWRhbTk3eCIsImEiOiJjamF2Y2k1NmswYzhuMnZtazlpNXU2NDExIn0.RifBBI5nelL-4d21mkn7Wg', {
        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);

        // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (mymap) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>Highlighted Postcode</h4>' +  (props ?
            '<b> Postcode: ' + props.Name
            : 'Hover over a state');
    };

    info.addTo(mymap);


function style(feature) {
    return {
        fillColor: 'grey',
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.5
    };
}

L.geoJson(statesdata, {style: style}).addTo(mymap);

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            opacity: 1,
            color: '#000',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }
        function zoomToFeature(e) {
    mymap.fitBounds(e.target.getBounds());
                var coords = layer.feature.geometry.coordinates;
                console.log(coords);
    }
    coords = []; //define an array to store coordinates
    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }


    geojson = L.geoJson(statesdata, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(mymap);
    test = [];
geojson.eachLayer(function (layer) {
    layer.bindPopup(layer.feature.properties.Name);

});

  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>KML Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript" src="https://project-adam97.c9users.io/asset/bd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>

</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>


</body>
</html>

I'm trying to output the geojson file's coordinates into an array upon clicking a sector (post code) of the map so i can flip them to lat,lng instead of lng,lat however I am struggling to do so.

function zoomToFeature(e) {
    mymap.fitBounds(e.target.getBounds());
                var coords = layer.feature.geometry.coordinates;
                console.log(coords);
}

I would have thought it is something along these lines however I am getting feature is not defined as a result in the console.

Does anybody have any suggestions?

Improve this question

1 Answer 1

Reset to default
2

I'm using them differently in my onEachFeature but I get the coordinates like this:

var coords = layer.feature.geometry.coordinates;

Without hacking at it, I believe you are just missing the word "layer" before feature.geometry.

Improve this answer
3
  • Hi yeah that seems to have worked, however I'm actually trying to pull the coordinates into the array upon clicking a poly. I've tried to add "var coords = layer.feature.geometry.coordinates; into my ZoomToFeature however the console error becomes layer is not defined.
    – Adam
    Commented Dec 7, 2017 at 15:17
  • Your array would have worked you were missing "layer.feature.properties." You had "feature.properties. gistechsolutions.com/leaflet/DEMO/Select/SelectPoints3.html Takes a click and finds sites within a distance of. and creates a new geojson layer. This creates an array and brings the points in as a layer and if I added map.fitBounds(geojsonLayer.getBounds(), {padding: [12, 12]}) It would zoom to the selected set.
    – Bill Chappell
    Commented Dec 7, 2017 at 18:13
  • The link may help, the last four topics here are close. I use Turf to get features inside the polygon. gistechsolutions.com/leaflet/DEMO
    – Bill Chappell
    Commented Dec 7, 2017 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.