Carregando arquivo GeoJSON externo no mapa do Leaflet?

54

Gostaria de carregar um arquivo geoJSON (polígono) no meu mapa de folhetos. Eu já vi exemplos em que o geoJSON está incorporado no código javascript, mas não consigo encontrar nenhum exemplo mostrando como isso é feito com um arquivo externo.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <script src="usStates.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map" style="height: 100%"</div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

    <script type="text/javascript"> 

    var map = L.map('map').setView([38.57, -94.71], 4);

    L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);

    var featureStyle = {
        "color": "#ff7800",
        "weight": 5, 
        "opacity": 0.2
    };

    L.geoJson(usStates).addTo(map);

    </script>

</body>
leaflet geojson Bailey
fonte
arraste e solte o geojson em geojson.io
Mapperz
@ Mapperz, o OP não estava perguntando sobre como colar o conteúdo de seu conteúdo geojson no script.
Dave-Evans

Respostas:

37

Olhe para o Leaflet-Ajax. Ele simplifica tudo. Vai desistir de votar em Neogeomat por mencioná-lo.

Obtenha o script aqui ( repo do github ) e adicione-o ao seu cabeçalho:

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

É uma questão de fazer o upload com o nome do arquivo.

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

Correção realmente direta e funciona. Então, sim.

FredFury
fonte
26

Você pode usar o jquery Ajax para carregar dados e adicioná-los.

var district_boundary = new L.geoJson();
district_boundary.addTo(map);

$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
    $(data.features).each(function(key, data) {
        district_boundary.addData(data);
    });
}
}).error(function() {});

ou Você pode usar o plugin leaflet-ajax

neogeomat
fonte
14

Aqui está a minha solução mínima de baunilha js. Olha ma, não é necessário jquery para uma chamada rápida de ajax para um arquivo.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();
Dennis Bauszus
fonte
Obrigado pelo exemplo - peguei a newpalavra - chave para a geoJSONfunção factory, mas recebi um erro CORS com a linha setRequestHeader, removi-a e funcionou bem (deve haver alguma configuração no meu servidor).
Brian Burns
Dá-me um XML Parsing Error: not well-formederro em Line Number 1, Column 1:. Bem, como os dados são geojson, por que eles estão tentando analisá-los como XML? Não entendi o problema, mas gostaria de importar meus dados sem o Ajax.
Aaron Bramson
@AaronBramson tem outra tentativa. Este foi um pouco antigo código que eu fiz. Eu deveria ter definido o responseType e usar a resposta para não analisar o responseText. Apenas atualizei o trecho de código.
Dennis Bauszus
Sim, isso é ótimo! Ele funciona imediatamente, sem a necessidade de pacotes externos extras e sem a edição do arquivo de dados. Esta é claramente a melhor resposta.
Aaron Bramson
11

No elemento head, você faz referência aos seus arquivos:

    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
    <![endif]-->
    <script src="leaflet/leaflet.js"></script>
    <script src="hydro_s.geojson" type="text/javascript"></script>
    <script src="hydro_l.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <title>Leaflet Map with GeoJson</title>
 </head>

E então no corpo:

<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map = L.map('map', {
            center: [45.57, -73.5648],
            zoom: 10
        });

         /* Hydro */
        var hydro = new L.LayerGroup();
        L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
        L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);

    </script>
</body>

Você não precisa "colocá-los" em um grupo de camadas ...

fgcartographix
fonte
perfeito! era isso que eu estava procurando!
Bailey
11
usando o desenvolvedor da web Firebug para o firefox, estou recebendo "ReferenceError: usStates não está definido" "(L.geoJson (usStates) .addTo (map);" Referenciei o arquivo como você mostrou <script src="usStates.geojson" type="text/javascript"></script>e o adicionei L.geoJson(usStates).addTo(map);ao final do meu código. idéias?
Bailey
Deve ser algo com src ... O meu é na cabeça do documento (eu editei a minha resposta para adicioná-lo completamente)
fgcartographix
11
nenhuma variável é necessária para a referência? importa que minha extensão de arquivo é .json em vez de .geojson?
Bailey13
2
Esta é uma resposta confusa, pois requer que você defina as variáveis ​​hydro_s, hydro_l no seu arquivo de dados, o que tecnicamente tornaria o GeoJSON ainda inválido! Veja as outras respostas para mais informações ...
Florian Ledermann