2017-09-25 3 views
1

Wie importiere ich geoJson Daten (mit mehr als 2000 Koordinaten) in Flugblatt-Karte? Diese ist kurz Probe von Geo jsonMarkierer auf Blättchenkarte von Geojson-Daten zeichnen

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 44.8242557024,20.4048512901 ] 
    }, 
    "properties": { 
    } 
    }, 
    { 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 44.8242557024,20.4048512901 ] 
    }, 
    "properties": { 
    } 
    },...] 

-Code Ich habe versucht:

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> 
    <!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /> 
    <![endif]--> 
    <style type="text/css"> 
    body { 
     padding: 0; 
     margin: 0; 
    } 

    html, body, #cmap { 
     height: 100%; 
    } 

    </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> 
</head> 
<body> 
    <div id="cmap"></div> 
    <script> 
    var cupcakeTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.emerald/page.html?access_token=cj5h2mqa63sc92srx3bu62e2j', { 
    maxZoom: 18 
    }); 

    $.getJSON("convertcsv.geojson", function(data) { 
    var geojson = L.geoJson(data, { 
     onEachFeature: function (feature, layer) { 
     layer.bindPopup(feature.properties.name);cj5h2mqa63sc92srx3bu62e2j 
     } 
    }); 

var map = L.map('map', { 
    center: [44, 20], 
    zoom: 7 
}); 

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {  
    id: 'examples.map-20v6611k' 
}).addTo(map); 

new L.GeoJSON(meta1nJson).addTo(map); 
    }); 
    </script> 
</body> 
</html> 

Aber es passiert nichts, es ist nur ein grauer Hintergrund. Ich bin mir nicht sicher, wo der Fehler ist (vielleicht gibt es mehr als einen), aber wahrscheinlich ist es ein Fehler beim Importieren von Geojson-Daten und Karten-Token. Ich bin totaler Anfänger bei diesem. Danke im Voraus.

Antwort

1

Sie scheinen viele Probleme in Ihrem Code zu haben. Erstens existiert ein Element mit der ID 'map' nicht in Ihrem HTML, so dass der Kartenlayer nicht platziert werden kann. Sie müssen 'cmap' als ID im folgenden Code hinzufügen.

var map = L.map('cmap', { 
    center: [44, 20], 
    zoom: 7 
}); 

Auch Meta1nJson scheint nicht in Ihrem Code definiert zu sein, so dass der untenstehende Code nicht funktionieren würde.

new L.GeoJSON(meta1nJson).addTo(map); 

Die Schicht cupcakeTiles scheint definiert werden, ist aber nie der Karte hinzugefügt. Sie haben auch eine streunende Zeichenfolge im folgenden Code, der entfernt werden sollte.

$.getJSON("convertcsv.geojson", function(data) { 
var geojson = L.geoJson(data, { 
    onEachFeature: function (feature, layer) { 
    layer.bindPopup(feature.properties.name); //cj5h2mqa63sc92srx3bu62e2j 
    } 
}); 
Verwandte Themen