Leaflet和GeoJSON

Question

One question regarding Leaflet and GeoJSON. After successfully (I hope) converting MySQL data to GeoJSON I don't know for what reason but converted GeoJSON doesn't show on map.

Here is javascript(Leaflet) block of code:

var karta = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
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'
});

var roads = new L.geoJson(null, {
            style: function (feature) {
                return {
                    color: '#9a9afc',
                    weight: 2,
                    opacity:1
                };
            },

onEachFeature: function (feature, layer) {
if (feature.properties) {
    var content = '<table border="1" style="border-collapse:collapse;" cellpadding="2">' +
    '<tr>' + '<th>Oznaka</th>' + '<td>' + feature.properties.oznaka + '</td>' + '</tr>' +
    '<tr>' + '<th>Opis</th>' + '<td>' + feature.properties.opis + '</td>' + '</tr>' +
    '<tr>' + '<th>Podloga</th>' + '<td>' + feature.properties.podloga + '</td>' + '</tr>' +
    '<table>';
layer.bindPopup(content);}}
});

$.getJSON(parseFloat("php/cesta_geojson.php"), function (data) {
        roads.addData(data);
    });

var map = L.map('map', {
        center: [46.15796, 15.75336],
        zoom: 11,
        layers: [karta, roads]
    });

var baseLayers = {
        "Podloga": karta
    };

    var overlays = {
        "Cesta": roads
    };

L.control.layers(baseLayers, overlays).addTo(map);

I successfully called map but without vector layer. When I press F12 in Chrome I don't see any errors in code.

Here I added parseFloat(); because I was getting this kind of error

Uncaught TypeError: Cannot read property 'length' of undefined

With parseFloat() it was ok, without any error

(parseFloat("php/cesta_geojson.php")

And finally here is echoed GeoJSON file from cesta_geojson.php file

{"type":"FeatureCollection","features":[{"type":"LineString","geometry":{"type":"LineString","coordinates":[[15.724070907944,46.188443457772],[15.72425781562,46.188344185019],[15.724433034035,46.188218470156],[15.724559402649,46.188111948013],[15.724699297028,46.187990209886],[15.724812369871,46.18786041665],[15.724892165425,46.187729597635],[15.724971918506,46.187587520468],[15.725035777742,46.187481355449],[15.725105549827,46.187407292182],[15.725202581782,46.187342477582],[15.725321929846,46.187288459964],[15.725497857863,46.187225059864],[15.725739143267,46.187161204115],[15.725983191502,46.187106791869],[15.726194987431,46.187080890038],[15.726450533317,46.187073593716],[15.726602817686,46.187066995093],[15.726732946012,46.18703782005],[15.726868107328,46.186958068465],[15.726998796286,46.186811432945],[15.727134720374,46.186645560889],[15.727237900023,46.186502972888],[15.727374482222,46.186387000962],[15.727609563629,46.186189834001],[15.728096496604,46.185818387862],[15.728458503155,46.185542277868],[15.728743661394,46.185371657495],[15.728957680163,46.185259021799],[15.729172360784,46.185188581679],[15.729304310741,46.185137873122],[15.729369597827,46.185060721014],[15.729363091546,46.184984028821],[15.729328718982,46.184892184228],[15.729199870962,46.184762535748],[15.729071126927,46.184640592675],[15.728885780977,46.184525116727],[15.72887607759,46.184519072234],[15.728614827463,46.18440564005],[15.728282035417,46.184319532788],[15.728019456787,46.184201277051],[15.72762504466,46.184046453459],[15.727313665573,46.183902676003],[15.727130059528,46.183815574507],[15.726919608728,46.183782381293],[15.726687496419,46.183780027307],[15.726460925269,46.183781470428],[15.726240046183,46.183798247915],[15.725992218515,46.183861189086],[15.725841694066,46.183920515407],[15.725715865521,46.183874844727],[15.72565370341,46.183799755202],[15.725630852585,46.183709708534],[15.725634974679,46.183611977506],[15.7256379558,46.183427810893],[15.725685548243,46.183341072494],[15.725723013948,46.183206133169],[15.725809501193,46.183107700845],[15.725866680473,46.183003917087],[15.725960645834,46.182866651324],[15.726067912912,46.182727453662],[15.726190146802,46.182621424687],[15.726207337253,46.182606513725],[15.726244838952,46.182546780958],[15.726262053424,46.18251936173],[15.726297354311,46.182371391634],[15.726409723863,46.182212815967],[15.726455021424,46.182089085775],[15.726458519589,46.182079529914],[15.72654271426,46.182008813531],[15.726634629323,46.181917731008],[15.726792632784,46.181770199109],[15.726870857759,46.181649656343],[15.726912197146,46.181557050494],[15.726967278539,46.181495749682],[15.727067305319,46.181413846382],[15.727138343041,46.181354299035],[15.727214739778,46.181296555638],[15.727473161746,46.181121306861],[15.727754239725,46.180928261967],[15.727917519199,46.180774825857],[15.727918248443,46.180774140105],[15.728083066145,46.180681243366],[15.728268727778,46.180597218759],[15.728449559848,46.18052169389],[15.728548286636,46.180459010509],[15.728575622997,46.180441653688],[15.728626260839,46.180345881025],[15.728632981715,46.180266602979],[15.728631308038,46.180130877024],[15.728609388865,46.180042767469],[15.728631196407,46.179925578114],[15.728675382394,46.179736203158],[15.728754103416,46.179605518579],[15.728781671,46.179531509339],[15.728787555328,46.179527496718],[15.728853653803,46.17948242148],[15.729002926254,46.179391428483],[15.729178351986,46.179316475034],[15.729213424685,46.179222607354],[15.729243660268,46.179119997272],[15.729286990802,46.178940460721],[15.729302693271,46.178746820197],[15.729213398482,46.178659136971],[15.72916803677,46.178526359768],[15.729134552992,46.178405644044],[15.729135908104,46.178292729464],[15.72917552165,46.178190870101],[15.729232569898,46.178113930792],[15.72931294954,46.178044867023],[15.729428405555,46.177993744556],[15.729561627668,46.17796869873],[15.72976723911,46.177925063612],[15.729926481858,46.177895819181],[15.729998631576,46.177859065783],[15.730047156025,46.177800306668],[15.730080843602,46.177713416008],[15.730117005178,46.177590217794],[15.730153622997,46.177509337477],[15.730213731036,46.177440402819],[15.730294124893,46.177372576296],[15.730441029813,46.177280928037],[15.730544656814,46.177213711041],[15.730607373996,46.177126634301],[15.730649660998,46.177027590548],[15.730673997218,46.17689640446],[15.730686159037,46.176492333822],[15.73067821304,46.176331131495],[15.730644702458,46.176216444564],[15.730591136986,46.176118015619],[15.730532059953,46.176041779721],[15.730402473853,46.175910779433],[15.730311198495,46.175818660514],[15.730202718835,46.175734675489],[15.73000384574,46.175625079374],[15.729839704149,46.175515260703],[15.72969233216,46.175372356528],[15.729618528197,46.175276053085],[15.729562090074,46.175183670243],[15.729499659066,46.175069167915],[15.729446444294,46.174996966156],[15.72937016675,46.174936968289],[15.729212526507,46.174871463189],[15.729107168368,46.174815683654],[15.729054167406,46.174759569411],[15.72904170233,46.174695171342],[15.729052085512,46.17460236206],[15.729071071151,46.174497439542],[15.729087154347,46.174396528595],[15.72910546319,46.17424853196],[15.729094644915,46.17408531172],[15.7290668912,46.173966554875],[15.729033892426,46.1738901515],[15.728983769139,46.173827990596],[15.728872275277,46.173739313429],[15.728754586493,46.173621131114],[15.728657109853,46.173490722624],[15.728603498553,46.173388260382],[15.728590633883,46.173293603095],[15.728612735251,46.173208782415],[15.728646626319,46.17313730148],[15.728726199522,46.173007798075],[15.728831150529,46.172825712971],[15.728916739981,46.172712260059],[15.728991455769,46.172630617447],[15.7291006952,46.172549311964],[15.729258934442,46.172437431421],[15.729414216596,46.172325568664],[15.729546276642,46.172213855114],[15.729655393513,46.172107398665],[15.72974966273,46.171995925696],[15.72984693943,46.171880401689],[15.72991521628,46.171775124009],[15.729934468671,46.171698427],[15.72994194617,46.171601602666],[15.729920665681,46.17153322935],[15.729873420227,46.171473046011],[15.729800556251,46.171447282199],[15.729695765454,46.171433859113],[15.729553262543,46.171410576692],[15.729389846248,46.171370420111],[15.729270112466,46.171320761745],[15.729164786157,46.171258953799],[15.729123053626,46.171176577112],[15.7291044619,46.171087984683],[15.729068374669,46.170993474941],[15.728991729979,46.170905294001],[15.728892103246,46.170835384143],[15.728746006765,46.170763735876],[15.728573253272,46.170655965933],[15.728425511252,46.170555701764]]},"properties":{"id":1,"oznaka":"K-8","opis":"D206 - Vulica - Kraljevec - Horvati - Kordej - S1","sirina":"5m","podloga":"Asfalt-makadam","mo":"Kostel"}}]}

I really don't know what I'm missing here and what is the reason for not showing GeoJSON vector. Thx for any help, much appreciated

Answer 1

I'm kind of baffled as to why you would try to use parseFloat on your URL. It takes a string and turns it into a number:

parseFloat parses its argument, a string, and returns a floating point number.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

You can just pass the URL to $.getJSON and it should load just fine. You can verify this by checking your network tab of your browser's developer tools.

Once you've got the loading part correct, you'll need to make sure your sending a valid GeoJSON featurecollection object. At the moment it isn't valid. The featurecollection is valid:

{
    "type": "FeatureCollection",
    "features": [
        // Features
    ]
}

But the feature object contained within the collection isn't:

{
    "type": "LineString",
    "geometry": {
        "type": "LineString",
        "coordinates": [
            // Coordinates
        ]
    },
    "properties": {
        // Properties
    }
}

A GeoJSON object with the type "Feature" is a feature object.

http://geojson.org/geojson-spec.html#feature-objects

So you'll need to change the type member property of the object to feature:

{
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": [
            // Coordinates
        ]
    },
    "properties": {
        // Properties
    }
}

Then it should work properly. For the next time, when you want to make sure your GeoJSON is valid you validate it online at http://geojsonlint.com