¿Carga un archivo externo GeoJSON en el mapa de folleto?

54

Me gustaría cargar un archivo geoJSON (polígono) en mi mapa de folleto. He visto ejemplos en los que geoJSON está incrustado en el código de JavaScript, pero no puedo encontrar ningún ejemplo que muestre cómo se hace con un archivo 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 muralla exterior
fuente
arrastre y suelte el geojson en geojson.io
Mapperz
@Mapperz, el OP no preguntaba cómo pegar el contenido de su contenido geojson en el script.
Dave-Evans

Respuestas:

37

Mira en el folleto Ajax. Agiliza todo. Votará a favor de Neogeomat por mencionarlo.

Obtenga el script aquí ( repositorio github ) y agréguelo a su encabezado:

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

Entonces se trata de cargar con el nombre del archivo.

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

Corrección realmente sencilla y funciona. Así que

FredFury
fuente
26

Puede usar jquery Ajax para cargar datos y luego agregarlos.

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() {});

o puede usar el complemento leaflet-ajax

neogeomat
fuente
14

Aquí está mi solución mínima de vanilla js. Mira ma, no se necesita jquery para una llamada rápida ajax a un archivo.

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
fuente
Gracias por el ejemplo: eliminé la newpalabra clave para la geoJSONfunción de fábrica, pero recibí un error CORS con la línea setRequestHeader allí, así que la eliminé y funcionó bien (debe ser alguna configuración en mi servidor).
Brian Burns, el
Me da un XML Parsing Error: not well-formederror en Line Number 1, Column 1:. Bueno, dado que los datos son un geojson, ¿por qué intenta analizarlos como XML? No entiendo el problema, pero me gustaría importar mis datos sin Ajax.
Aaron Bramson
@AaronBramson tiene otra oportunidad. Este fue un código bastante viejo que hice. Debería haber establecido el responseType y usar la respuesta para no analizar el responseText. Acabo de actualizar el fragmento de código.
Dennis Bauszus
Sí, esto es genial! Funciona sin necesidad de paquetes externos adicionales y sin la necesidad de editar el archivo de datos. Esta es claramente la mejor respuesta.
Aaron Bramson
11

En el elemento head, hace referencia a sus archivos:

    <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>

Y luego en el cuerpo:

<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>

No tiene que "ponerlos" en un grupo de capas ...

fgcartographix
fuente
¡Perfecto! ¡Esto es lo que estaba buscando!
bailey
1
usando el desarrollador web Firebug para firefox obtengo "ReferenceError: usStates no está definido" "(L.geoJson (usStates) .addTo (mapa);" Hice referencia al archivo como lo mostró <script src="usStates.geojson" type="text/javascript"></script>y lo agregué L.geoJson(usStates).addTo(map);al final de mi código. any ideas?
bailey
Debe ser algo con src ... El mío está en el encabezado del documento (
edité
1
no se necesita variable para la referencia? ¿Importa que mi extensión de archivo sea .json en lugar de .geojson?
bailey
2
Esta es una respuesta confusa, ya que requiere que defina las variables hydro_s, hydro_l en su archivo de datos, lo que técnicamente haría que GeoJSON sea incluso inválido. Vea las otras respuestas para obtener más información ...
Florian Ledermann