Acceso geojson de github en folleto

Question

Acceso geojson de github en folleto

Preguntado el 15 de Diciembre, 2014: Cuando se hizo la pregunta
243 visitas: Cuantas visitas ha tenido la pregunta
2 Respuestas: Cuantas respuestas ha tenido la pregunta
Abierta: Estado actual de la pregunta

Soy nuevo en json, github y folleto. Pero estoy tratando de crear una sencilla aplicación que hará que mis puntos en geojson hasta en github. De todo lo que he leído que esto debería funcionar. Aquí es lo que tengo hasta ahora pero no veo mis puntos muestra. ¿Qué me falta? Muchas Gracias Jennifer

<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<style type="text/css">
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://rawgit.com/boehnert/GeoJson/master/coolPlaces.geojson"   type="text/javascript" > </script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([29.7628, -95.3831], 10);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        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: 'examples.map-i875mjb7'
    }).addTo(map);

    var geojsonLayer = new L.GeoJSON.AJAX("coolPlaces.geojson");       
    geojsonLayer.addTo(map);    
</script>
</body>
</html>

Preguntado el 15 de Diciembre, 2014 por Mat

Answer 1

2 Respuestas

Answer 2

3voto

Daniel Broekman Puntos 1951

Desde Github apoya CORS, puede utilizar jQuery getJSON() o un micro-biblioteca como corslite para apoderarse de su geojson sin alterarlo. He aquí un ejemplo de trabajo utilizando $.getJSON() (aviso que me llevo a cabo su etiqueta de secuencia de comandos que hacen referencia a su archivo geojson):

<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
    var map = L.map('map').setView([29.7628, -95.3831], 10);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            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: 'examples.map-i875mjb7'
        }).addTo(map);

        $.getJSON("https://rawgit.com/boehnert/GeoJson/master/coolPlaces.geojson", function(response) {
            console.log("response", response);
            var geojsonLayer = new L.GeoJSON(response);
            geojsonLayer.addTo(map);    
        });
    </script>
</body>
</html>

Respondido el 16 de Diciembre, 2014 por Daniel Broekman (1951 Puntos )

Answer 3

2voto

SiLeX Puntos 1

Su github archivo no sólo puede contener un valor, se debe definir una variable que se define cuando el archivo se incluye como javascript.

var geojsonFeature = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

....
};

A continuación, puede utilizar esta variable como una entrada a su GeoJSON capa

var geojsonLayer = L.geoJson(geojsonFeature);
geojsonLayer.addTo(map);

ACTUALIZACIÓN: Este es un método para utilizar si desea incluir coolPlaces.geojson como una secuencia de comandos (como su pregunta sugiere). Sin embargo, según lo sugerido por @Derek Swingle, también puede utilizar una llamada ajax $.getJSON para obtener los datos json como es (pero esto es debido a github apoya CORS)

Respondido el 15 de Diciembre, 2014 por SiLeX (1 Puntos )

Acceso geojson de github en folleto

Respuestas

Preguntas Destacadas

Etiquetas mas usadas

i-Ciencias.com

Powered by:

Acceso geojson de github en folleto

Respuestas

Preguntas relacionadas

Preguntas Destacadas

Etiquetas mas usadas

En nuestra red

i-Ciencias.com

Powered by: