How to load a GeoJSON layer on a MapBox GL JS map? -
i need load geojson feature collection layer (points) in mapbox gl js map.
i've tried use html / javascript code
<!doctype html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id='map'></div> <script> mapboxgl.accesstoken = '<put mapbox key here>'; var map = new mapboxgl.map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', center: [7.828,44.836], zoom: 9 }); map.addcontrol(new mapboxgl.navigationcontrol()); thecoords = { "type": "featurecollection", "features": [ { "type": "feature", "properties": { "name": "<b>entrata castello del valentino<\/b>", "info": "torino", "img_src": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/database\/1t.jpg\">", "image,c": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/database\/1.entrata_castello_del_valentino.jpg\" target=\"_blank\">immagine 360 ΓΈ<\/a>", "longitudine": 7.6855111, "latitudine": 45.0546417, "altitudine": 288.39, "direzione": 202.5, "data": "2017:06:06", "ora": "17:57" }, "geometry": { "type": "point", "coordinates": [ 7.6855111, 45.0546417 ] } }, { "type": "feature", "properties": { "name": "<b>via frazione di buriasco<\/b>", "info": "buriasco (to)", "img_src": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/database\/1b.jpg\">", "image,c": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/database\/1.via_frazione_di_buriasco.jpg\" target=\"_blank\">immagine 360›<\/a>", "longitudine": 7.4303883, "latitudine": 44.8816653, "altitudine": 0.0, "direzione": 292.5, "data": "2017:06:16", "ora": "19:27" }, "geometry": { "type": "point", "coordinates": [ 7.4303883, 44.8816653 ] } }, { "type": "feature", "properties": { "name": "<b>via regione maineri<\/b>", "info": "buriasco (to)", "img_src": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/database\/1a.jpg\">", "image,c": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/database\/1.via_regione_maineri.jpg\" target=\"_blank\">immagine 360›<\/a>", "longitudine": 7.4328394, "latitudine": 44.8790463, "altitudine": 336.29, "direzione": 180.0, "data": "2017:06:16", "ora": "20:23" }, "geometry": { "type": "point", "coordinates": [ 7.4328394, 44.8790463 ] } }, { "type": "feature", "properties": { "name": "<b>via frazione di buriasco<\/b>", "info": "buriasco (to)", "img_src": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/database\/10b.jpg\">", "image,c": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/database\/10.via_frazione_di_buriasco.jpg\" target=\"_blank\">immagine 360›<\/a>", "longitudine": 7.4236184, "latitudine": 44.8790577, "altitudine": 0.0, "direzione": 270.0, "data": "2017:06:16", "ora": "19:30" }, "geometry": { "type": "point", "coordinates": [ 7.4236184, 44.8790577 ] } }, { "type": "feature", "properties": { "name": "<b>via rivasecca<\/b>", "info": "buriasco (to)", "img_src": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/database\/10c.jpg\">", "image,c": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/database\/10.via_rivasecca.jpg\" target=\"_blank\">immagine 360›<\/a>", "longitudine": 7.4266083, "latitudine": 44.88725, "altitudine": 348.79, "direzione": 0.0, "data": "2017:06:16", "ora": "20:16" }, "geometry": { "type": "point", "coordinates": [ 7.4266083, 44.88725 ] } }, { "type": "feature", "properties": { "name": "<b>viale mattioli<\/b>", "info": "torino", "img_src": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/database\/10t.jpg\">", "image,c": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/database\/10.viale_mattioli.jpg\" target=\"_blank\">immagine 360›<\/a>", "longitudine": 7.687725, "latitudine": 45.0566306, "altitudine": 282.6, "direzione": 292.5, "data": "2017:06:06", "ora": "17:44" }, "geometry": { "type": "point", "coordinates": [ 7.687725, 45.0566306 ] } } ] }; map.on('load', function () { map.addsource("route", { "type": "geojson", "data": { "type": "featurecollection", "properties": {}, "geometry": thecoords } }); map.addlayer({ "id": "route", "type": "symbol", "source": "route", "paint": { "circle-radius": 10, "circle-color": "#ff0000" } }); }); </script> </body> </html> no errors come out in browser console can't see layer on map. i've checked geojson using http://geojsonlint.com/ , seems right (and using tool geojson drawn on tool map ....).
i think geojson structure don't know hao resolve
i've solved!
here you're right code ...
<!doctype html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id='map'></div> <script> mapboxgl.accesstoken = '<put mapbox key here>'; var map = new mapboxgl.map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', center: [7.828,44.836], zoom: 9 }); map.addcontrol(new mapboxgl.navigationcontrol()); map.on('load', function () { map.addsource("route", { "type": "geojson", "data": "./data/test.geojson" }); map.addlayer({ "id": "route", "type": "circle", "source": "route", "paint": { "circle-radius": 5, "circle-color": "#ff0000" } }); }); </script> </body> </html> i've put geojson in file , used "data": "./data/test.geojson" upload .....
Comments
Post a Comment