Variable Linienzug Gewicht mit GeoJSON in Leaflet

Hier ist das gesamte HTML-Dokument:Variable Linienzug Gewicht mit GeoJSON in Leaflet

<!DOCTYPE html> 
<html> 
<head> 
    <title>Top 5 Importers of Tungsten</title> 

    <!--Imports stylesheet from Leaflet --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" /> 
    <!-- Import jQuery, a common JavaScript library providing hundreds of functions --> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script> 

    <style> 
     @font-face { 
      font-family: Planewalker; 
      src: url('https://dl.dropboxusercontent.com/s/3hn6zi8ez2vf4d7/Planewalker.ttf'); 
     } 

     a:link{text-decoration: none;color:#0000FF;} 
     a:visited{text-decoration:none;color:#0000FF;} 
     a:hover{color:#990000;text-decoration:none;} 

     #map { 
      width: 1200px; 
      height: 600px; 
      border: black solid 2px; 
      display: block; 
      margin-left: auto; 
      margin-right: auto; 
     } 

     #map2 { 
      width: 1000px; 
      height: 550px; 
      border: black solid 2px; 
      display: block; 
      margin-left: auto; 
      margin-right: auto; 
     } 

     #map3 { 
      width: 1000px; 
      height: 550px; 
      border: black solid 2px; 
      display: block; 
      margin-right: auto; 
      margin-left: auto; 
     } 

     .info { 
      padding: 6px 8px; 
      font: 14px/16px Arial, Helvetica, sans-serif; 
      background: white; 
      background: rgba(255,255,255,0.8); 
      box-shadow: 0 0 15px rgba(0,0,0,0.2); 
      border-radius: 5px; 
     } 

     .info h4 { 
      margin: 0 0 5px; 
      color: #777; 
     } 

     .legend { 
      text-align: left; 
      line-height: 18px; 
      color: #555; 
     } 

     .legend i { 
      width: 18px; 
      height: 18px; 
      float: left; 
      margin-right: 8px; 
      opacity: 0.7; 
     } 

     #header{ 
      width:450px; 
      border-radius:15px; 
      background-image: url(https://dl.dropboxusercontent.com/s/j1ii4yz5qftrks7/greyscale-natural-grunge-textures-6.jpg); 
      margin: auto; 
      margin-bottom: 5px; 
      text-align: center; 
      border: black solid 2px; 
      font-size: 40px; 
      padding-top: 7px; 
      padding-bottom: 7px; 
      padding-left: 12px; 
      padding-right: 12px; 
     } 

     body{ 
      font-family: "Planewalker", "Lucida Sans Unicode","Arial",sans-serif; 
      background-image: url(https://dl.dropboxusercontent.com/s/2m8803ulxv2mcfc/footer_lodyas.png); 
      font-size: 20px; 
     } 

     #footer{ 
      text-align: right; 
      font-size: 15px; 
      color: #FFFFFF; 
     } 

    </style> 
</head> 
<body> 
    <div id="header"><span style="color:#fbf400;">T</span><span style="color:#faf612;">o</span><span style="color:#f9f824;">p</span><span style="color:#f8fa36;"> </span><span style="color:#f8fb48;">5</span><span style="color:#f7fd5a;"> </span><span style="color:#f6ff6c;">T</span><span style="color:#f8ff85;">u</span><span style="color:#f9ff9d;">n</span><span style="color:#fbffb6;">g</span><span style="color:#fcffce;">s</span><span style="color:#feffe7;">t</span><span style="color:#ffffff;">e</span><span style="color:#fdffe2;">n</span><span style="color:#fbffc4;"> </span><span style="color:#faffa7;">I</span><span style="color:#f8ff89;">m</span><span style="color:#f6ff6c;">p</span><span style="color:#f7fd5a;">o</span><span style="color:#f8fb48;">r</span><span style="color:#f9f936;">t</span><span style="color:#f9f824;">e</span><span style="color:#faf612;">r</span><span style="color:#fbf400;">s</span></div> 

<!--DIV FOR IMPORT LINE MAP ("map")--> 
    <div id="map" style="position: relative; width: 1200px; height: 600px;"></div> 
    <br> 
<!--DIV FOR CANADA MINES MAP--> 
    <div id="map2" style="position: relative; width: 1000px; height: 550px;"><img src="https://dl.dropboxusercontent.com/s/a95n5ecg1a7j62i/canada_mine_map2.png" height="550" width="1000"></div> 
    <br> 
<!--DIV FOR CHINA MINES MAP--> 
    <div id="map3" style="position: relative; width: 1000px; height: 550px;"><img src="https://dl.dropboxusercontent.com/s/p2vf6q01ck0xt8r/china_province_output_map3.png" height="550" width="1000"></div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> 

    <!-- Imports a ColorBrewer library, containing many pre-designed color schemes --> 
    <script src="colorbrewer.js"></script> 
<!--GEOJSONS FOR IMPORT LINE MAP--> 
    <script src="CHN_crossF.geojson"></script> 
    <script src="DEU_crossF.geojson"></script> 
    <script src="FRA_crossF.geojson"></script> 
    <script src="JPN_crossF.geojson"></script> 
    <script src="US_crossF.geojson"></script> 

<!--IMPORT LINE MAP--> 
    <script> 

     var southWest = new L.LatLng(80, -900), 
      northEast = new L.LatLng(-80, 900), 
      bounds = new L.LatLngBounds(southWest, northEast); 
      //can add "maxBounds: bounds" to stop the map at a certian point; add into L.map in the {} 
     var map = L.map('map',{ 
      worldCopyJump:true, 
      continuousWorld:false, 
      noWrap:false, 
      minZoom:3, 
      inertia:false, 
      maxBounds:bounds 
      }).setView([35.460669951495305, -21.796875], 3); //Starting map location 

     //Sets the basemap 
     L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { 
      maxZoom: 18, 
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>', 
      id: 'examples.map-20v6611k' 
     }).addTo(map); 

    //WEIGHT & COLOR FOR CHINA 
     function getStyle1(feature){ 
      var weight; 
       if (feature.properties.Value > 30000000) {weight = 20;} 
       else if (feature.properties.Value > 10000000) {weight = 18;} 
       else if (feature.properties.Value > 5000000) {weight = 16;} 
       else if (feature.properties.Value > 1000000) {weight = 14;} 
       else if (feature.properties.Value > 500000) {weight = 12;} 
       else if (feature.properties.Value > 100000) {weight = 10;} 
       else if (feature.properties.Value > 1000) {weight = 8;} 
       else if (feature.properties.Value > 1) {weight = 6;}; 

      return { 
       color: 'red', 
       weight: weight 
       } 
     }; 

     var CHNimports = L.geoJson(CHN, { 
      style: getStyle1, 
      onEachFeature: function (feature, layer) { 
       layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to China: " + feature.properties.Value); 
      }, 
      pointToLayer: function (feature, latlng) { 
       return L.polyline(latlng); 
      } 
     }).addTo(map); 

    //WEIGHT AND COLOR FOR GERMANY 
     function getStyle2(feature){ 
      var weight; 
       if (feature.properties.Value > 30000000) {weight = 20;} 
       else if (feature.properties.Value > 10000000) {weight = 18;} 
       else if (feature.properties.Value > 5000000) {weight = 16;} 
       else if (feature.properties.Value > 1000000) {weight = 14;} 
       else if (feature.properties.Value > 500000) {weight = 12;} 
       else if (feature.properties.Value > 100000) {weight = 10;} 
       else if (feature.properties.Value > 1000) {weight = 8;} 
       else if (feature.properties.Value > 1) {weight = 6;}; 

      return { 
       color: '#00FF00', 
       weight: weight 
       } 
     }; 

     var DEUimports = L.geoJson(DEU, { 
      style: getStyle2, 
      onEachFeature: function (feature, layer) { 
       layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to Germany: " + feature.properties.Value); 
      }, 
      pointToLayer: function (feature, latlng) { 
       return L.polyline(latlng); 
      } 
     }).addTo(map); 

    //WEIGHT AND COLOR FOR FRANCE 
     function getStyle3(feature){ 
       var weight; 
        if (feature.properties.Value > 30000000) {weight = 20;} 
        else if (feature.properties.Value > 10000000) {weight = 18;} 
        else if (feature.properties.Value > 5000000) {weight = 16;} 
        else if (feature.properties.Value > 1000000) {weight = 14;} 
        else if (feature.properties.Value > 500000) {weight = 12;} 
        else if (feature.properties.Value > 100000) {weight = 10;} 
        else if (feature.properties.Value > 1000) {weight = 8;} 
        else if (feature.properties.Value > 1) {weight = 6;}; 

       return { 
        color: 'white', 
        weight: weight 
        } 
     }; 

     var FRAimports = L.geoJson(FRA, { 
      style: getStyle3, 
      onEachFeature: function (feature, layer) { 
       layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to France: " + feature.properties.Value); 
      }, 
      pointToLayer: function (feature, latlng) { 
       return L.polyline(latlng); 
      } 
     }).addTo(map); 

    //WEIGHT AND COLOR FOR JAPAN 
     function getStyle4(feature){ 
       var weight; 
        if (feature.properties.Value > 30000000) {weight = 20;} 
        else if (feature.properties.Value > 10000000) {weight = 18;} 
        else if (feature.properties.Value > 5000000) {weight = 16;} 
        else if (feature.properties.Value > 1000000) {weight = 14;} 
        else if (feature.properties.Value > 500000) {weight = 12;} 
        else if (feature.properties.Value > 100000) {weight = 10;} 
        else if (feature.properties.Value > 1000) {weight = 8;} 
        else if (feature.properties.Value > 1) {weight = 6;}; 

       return { 
        color: 'yellow', 
        weight: weight 
        } 
     }; 

     var JPNimports = L.geoJson(JPN, { 
      style: getStyle4, 
      onEachFeature: function (feature, layer) { 
       layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to Japan: " + feature.properties.Value); 
      }, 
      pointToLayer: function (feature, latlng) { 
       return L.polyline(latlng); 
      } 
     }).addTo(map); 

    //WEIGHT AND COLOR FOR US 
     function getStyle5(feature){ 
       var weight; 
        if (feature.properties.Value > 30000000) {weight = 20;} 
        else if (feature.properties.Value > 10000000) {weight = 18;} 
        else if (feature.properties.Value > 5000000) {weight = 16;} 
        else if (feature.properties.Value > 1000000) {weight = 14;} 
        else if (feature.properties.Value > 500000) {weight = 12;} 
        else if (feature.properties.Value > 100000) {weight = 10;} 
        else if (feature.properties.Value > 1000) {weight = 8;} 
        else if (feature.properties.Value > 1) {weight = 6;}; 

       return { 
        color: '#0000FF', 
        weight: weight 
        } 
     }; 

     var USimports = L.geoJson(US, { 
      style: getStyle5, 
      onEachFeature: function (feature, layer) { 
       layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to US: " + feature.properties.Value); 
      }, 
      pointToLayer: function (feature, latlng) { 
       return L.polyline(latlng); 
      } 
     }).addTo(map); 

    //ICONS FOR COUNTRIES~~~~~~~~~~~~~~~~: 
     //NORTH AMERICA POINTS 
      var CANicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/North%20America%20-%20Mac/Canada.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([56.130366,-106.346771],{icon:CANicon}).addTo(map) 
       .bindPopup("<b>Canada</b>"); 
      L.marker([56.130366,253.653229],{icon:CANicon}).addTo(map) 
       .bindPopup("<b>Canada</b>"); 

      var USicon = L.icon({ 
       iconUrl: 'http://static.wix.com/media/93cbc2_eaca32a202866ed8dd83758cc48a0385.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([37.09024,-95.712891],{icon:USicon}).addTo(map) 
       .bindPopup("<b>United States</b>"); 
      L.marker([37.09024,264.287109],{icon:USicon}).addTo(map) 
       .bindPopup("<b>United States</b>"); 

      var MEXicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/North%20America%20-%20Mac/Mexico.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([23.634501,-102.552784],{icon:MEXicon}).addTo(map) 
       .bindPopup("<b>Mexico</b>"); 
      L.marker([23.634501,257.447216],{icon:MEXicon}).addTo(map) 
       .bindPopup("<b>Mexico</b>"); 

     //SOUTH AMERICA POINTS 
      var BOLicon = L.icon({ 
       iconUrl: 'http://www.argenpapa.com.ar/images/paises/2.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([-16.290154,-63.588653],{icon:BOLicon}).addTo(map) 
       .bindPopup("<b>Bolivia</b>"); 
      L.marker([-16.290154,296.411347],{icon:BOLicon}).addTo(map) 
       .bindPopup("<b>Bolivia</b>"); 

      var BRAicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/br.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([-14.235004,-51.92528],{icon:BRAicon}).addTo(map) 
       .bindPopup("<b>Brazil</b>"); 
      L.marker([-14.235004,308.07472],{icon:BRAicon}).addTo(map) 
       .bindPopup("<b>Brazil</b>"); 

      var COLicon = L.icon({ 
       iconUrl: 'http://icons.iconseeker.com/png/fullsize/rounded-world-flags/colombia-flag-1.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([4.570868,-74.297333],{icon:COLicon}).addTo(map) 
       .bindPopup("<b>Colombia</b>"); 
      L.marker([4.570868,285.702667],{icon:COLicon}).addTo(map) 
       .bindPopup("<b>Colombia</b>"); 

      var PERicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/south-america-flags-icons-by-studiotwentyeight/png/256/Peru.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([-9.189967,-75.015152],{icon:PERicon}).addTo(map) 
       .bindPopup("<b>Peru</b>"); 
      L.marker([-9.189967,284.984848],{icon:PERicon}).addTo(map) 
       .bindPopup("<b>Peru</b>"); 

      var CHLicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/south-america-flags-icons-by-studiotwentyeight/png/256/Chile.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([-35.675147,-71.542969],{icon:CHLicon}).addTo(map) 
       .bindPopup("<b>Chile</b>"); 
      L.marker([-35.675147,288.457031],{icon:CHLicon}).addTo(map) 
       .bindPopup("<b>Chile</b>"); 

     //EUROPE POINTS 
      var PORicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/europe-flags-icons-by-studiotwentyeight/png/256/Portugal.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([39.399872,-8.224454],{icon:PORicon}).addTo(map) 
       .bindPopup("<b>Portugal</b>"); 

      var ESPicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Europe/Spain.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([40.463667,-3.74922],{icon:ESPicon}).addTo(map) 
       .bindPopup("<b>Spain</b>"); 

      var FRAicon = L.icon({ 
       iconUrl: 'http://png-4.findicons.com/files/icons/656/rounded_world_flags/256/france.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([46.227638,2.213749],{icon:FRAicon}).addTo(map) 
       .bindPopup("<b>France</b>"); 

      var DEUicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/de.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([51.165691,10.451526],{icon:DEUicon}).addTo(map) 
       .bindPopup("<b>Germany</b>"); 

      var GBRicon = L.icon({ 
       iconUrl: 'https://www.railpol.eu/RailPol/fs3_site.nsf/fck_images/069634987717D7A8C1257A83004C7C92/$FILE/United%20Kingdom%20Flag.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([55.378051,-3.435973],{icon:GBRicon}).addTo(map) 
       .bindPopup("<b>United Kingdom</b>"); 

      var BELicon = L.icon({ 
       iconUrl: 'http://png-2.findicons.com/files/icons/656/rounded_world_flags/256/belgium.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([50.503887,4.469936],{icon:BELicon}).addTo(map) 
       .bindPopup("<b>Belgium</b>"); 

      var TURicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Turkey.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([38.963745,35.243322],{icon:TURicon}).addTo(map) 
       .bindPopup("<b>Turkey</b>"); 

      var CHEicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/europe-flags-icons-by-studiotwentyeight/png/256/Switzerland.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([46.818188,8.227512],{icon:CHEicon}).addTo(map) 
       .bindPopup("<b>Switzerland</b>"); 

      var ESTicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Estonia.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([58.595272,25.013607],{icon:ESTicon}).addTo(map) 
       .bindPopup("<b>Estonia</b>"); 

     //MIDDLE EAST ICONS 
      var ISRicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/asia-flags-icons-by-studiotwentyeight/png/256/Israel.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([31.046051,34.851612],{icon:ISRicon}).addTo(map) 
       .bindPopup("<b>Israel</b>"); 

     //AFRICA ICONS 
      var RWAicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Africa/Rwanda.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([-1.940278,29.873888],{icon:RWAicon}).addTo(map) 
       .bindPopup("<b>Rwanda</b>"); 

      var NGAicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/africa-flags-icons-by-studiotwentyeight/png/256/Nigeria.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([9.081999,8.675277],{icon:NGAicon}).addTo(map) 
       .bindPopup("<b>Nigeria</b>"); 

      var BRIicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Burundi.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([-3.373056,29.918886],{icon:BRIicon}).addTo(map) 
       .bindPopup("<b>Burundi</b>"); 

      var DZAicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/Flag%20of%20Algeria.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([28.033886,1.659626],{icon:DZAicon}).addTo(map) 
       .bindPopup("<b>Algeria</b>"); 

     //ASIA ICONS 
      var RUSicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/ru.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([61.52401,105.318756],{icon:RUSicon}).addTo(map) 
       .bindPopup("<b>Russia</b>"); 
      L.marker([61.52401,-254.681244],{icon:RUSicon}).addTo(map) 
       .bindPopup("<b>Russia</b>"); 

      var CHNicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/China.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([35.86166,104.195397],{icon:CHNicon}).addTo(map) 
       .bindPopup("<b>China</b>"); 
      L.marker([35.86166,-255.804603],{icon:CHNicon}).addTo(map) 
       .bindPopup("<b>China</b>"); 

      var MONicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Mongolia.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([46.862496,103.846656],{icon:MONicon}).addTo(map) 
       .bindPopup("<b>Mongolia</b>"); 
      L.marker([46.862496,-256.153344],{icon:MONicon}).addTo(map) 
       .bindPopup("<b>Mongolia</b>"); 

      var PHLicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Philippines.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([12.879721,121.774017],{icon:PHLicon}).addTo(map) 
       .bindPopup("<b>Philippines</b>"); 
      L.marker([12.879721,-238.225983],{icon:PHLicon}).addTo(map) 
       .bindPopup("<b>Philippines</b>"); 

      var MMRicon = L.icon({ 
       iconUrl: 'https://cdn2.iconfinder.com/data/icons/world-flag-icons/256/Flag_of_Burma_Myanmar.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([21.913965,95.956223],{icon:MMRicon}).addTo(map) 
       .bindPopup("<b>Myanmar</b>"); 
      L.marker([21.913965,-264.043777],{icon:MMRicon}).addTo(map) 
       .bindPopup("<b>Myanmar</b>"); 

      var VNMicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Vietnam.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([14.058324,108.277199],{icon:VNMicon}).addTo(map) 
       .bindPopup("<b>Vietnam</b>"); 
      L.marker([14.058324,-251.722801],{icon:VNMicon}).addTo(map) 
       .bindPopup("<b>Vietnam</b>"); 

      var THAicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Thailand.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([15.870032,100.992541],{icon:THAicon}).addTo(map) 
       .bindPopup("<b>Thailand</b>"); 
      L.marker([15.870032,-259.007459],{icon:THAicon}).addTo(map) 
       .bindPopup("<b>Thailand</b>"); 

      var PRKicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/kp.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([40.339852,127.510093],{icon:PRKicon}).addTo(map) 
       .bindPopup("<b>Democratic People's Republic of Korea</b>") 
      L.marker([40.339852,-232.489907],{icon:PRKicon}).addTo(map) 
       .bindPopup("<b>Democratic People's Republic of Korea</b>") 

      var KORicon = L.icon({ 
       iconUrl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/kr.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([35.907757,127.766922],{icon:KORicon}).addTo(map) 
       .bindPopup("<b>Republic of Korea</b>") 
      L.marker([35.907757,-232.233078],{icon:KORicon}).addTo(map) 
       .bindPopup("<b>Republic of Korea</b>") 

      var JPNicon = L.icon({ 
       iconUrl: 'http://www.veryicon.com/icon/png/Flag/Asia/Japan.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([36.204824,138.252924],{icon:JPNicon}).addTo(map) 
       .bindPopup("<b>Japan</b>") 
      L.marker([36.204824,-221.747076],{icon:JPNicon}).addTo(map) 
       .bindPopup("<b>Japan</b>") 

     //AUSTRALIA ICONS 
      var AUSicon = L.icon({ 
       iconUrl: 'http://icons.iconseeker.com/png/fullsize/rounded-world-flags/australia-flag-2.png', 
       iconSize: [35,35], 
       iconAnchor: [17.5,17.5], 
       }); 
      L.marker([-25.274398,133.775136],{icon:AUSicon}).addTo(map) 
       .bindPopup("<b>Australia</b>") 
      L.marker([-25.274398,-226.224864],{icon:AUSicon}).addTo(map) 
       .bindPopup("<b>Australia</b>") 

     //Sets layer control 
     var overlay_layers = { 
      "Chinese Imports of Tungsten": CHNimports, 
      "German Imports of Tungsten": DEUimports, 
      "French Imports of Tungsten": FRAimports, 
      "Japanese Imports of Tungsten": JPNimports, 
      "United States Imports of Tungsten": USimports 
     } 
     L.control.layers(null, overlay_layers).addTo(map); 

    </script> 

<br> 
<br> 
    <p id="footer"></p> 
</body> 
</html>

Hier ist ein Dropbox-Link zu den GEOJSONS, wenn jemand sie sehen möchte (hoffentlich funktioniert das wie beabsichtigt und Menschen kann sie herunterladen):

Ich habe an einem Projekt gearbeitet, um eine Flowmap in Leaflet mit GEOJSON Polylinien zu erstellen. Ich habe erst vor kurzem JavaScript und Leaflet kennengelernt. Hier ist ein Beispiel dafür, was Ich mag würde machen (meine Karte verwendet Loxodromen und wäre interaktiv):

Flowmap Example

Hier die ist aktualisiert und Arbeitsfunktion, die den Linienzug Gewicht ändert sich basierend auf seiner ‚Value‘ aus der GeoJSON Datei (Kredit Hinrich & Jonathan für ihre Hilfe!):

function getStyle1(feature){ 
      var weight; 
       if (feature.properties.Value > 30000000) {weight = 20;} 
       else if (feature.properties.Value > 10000000) {weight = 18;} 
       else if (feature.properties.Value > 5000000) {weight = 16;} 
       else if (feature.properties.Value > 1000000) {weight = 14;} 
       else if (feature.properties.Value > 500000) {weight = 12;} 
       else if (feature.properties.Value > 100000) {weight = 10;} 
       else if (feature.properties.Value > 1000) {weight = 8;} 
       else if (feature.properties.Value > 1) {weight = 6;}; 

      return { 
       color: 'red', 
       weight: weight 
       } 
     }; 

     var CHNimports = L.geoJson(CHN, { 
      style: getStyle1, 
      onEachFeature: function (feature, layer) { 
       layer.bindPopup("<b>"+"Import Partner: "+feature.properties.Partner+"</b>"+ "<br />Dollar value of imports to China: " + feature.properties.Value); 
      }, 
      pointToLayer: function (feature, latlng) { 
       return L.polyline(latlng); 
      } 
     }).addTo(map);

~~die Linien von Wert variieren, und ich werde die Farbe ändern auf dem Land abhängig sein kann, aber die Popup-Informationen nicht angezeigt werden, wenn eine Polylinie Klicken Sie auf~~.

Zusätzlich ist hier eine Probe der GeoJSON Datei für CHNimports:

var CHN = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Partner":"Algeria","LongX":1.659626,"LatY":28.033886,"CHNLong":104.195397,"CHNLat":35.86166,"Value":587},"geometry":{"type":"LineString","coordinates":[[1.659626,28.033886],[1.669754918002165,28.034691811007274],[1.679883911463014,28.035497621919983],[1.690012980385739,28.036303432738126],[1.700142124773322,28.037109243461707],[1.710271344628953,28.03791505409072],[1.720400639955684,28.038720864625162],[1.730530010756992,28.039526675065034],[1.74065945703536,28.040332485410335],[1.750788978794404,28.041138295661067],[1.760918576037107,28.041944105817212],[1.771048248766518,28.042749915878783],[1.781177996986042,28.04355572584578],[1.791307820698163,28.044361535718185],[1.801437719906642,28.045167345496015],[1.811567694614244,28.045973155179254],[1.821697744824234,28.04677896476791],[1.831827870539733,28.04758477426198],[1.841958071763792,28.04839058366145],[1.852088348499675,28.04919639296634],[1.862218700750077,28.050002202176625], ...continued on

Vielen Dank für die Hilfe!

Quelle

2015-04-22 shadowninja1012

Willkommen bei stackoverflow! Wenn Sie andere bitten, Ihren Code zu lesen und zu verstehen, wäre eine korrekte Codeformatierung sicherlich hilfreich. Wenn es Ihnen gelingt, Ihre Frage auf ein bestimmtes Problem zu reduzieren, das Sie nicht lösen können, unabhängig von Ihren spezifischen Eingaben, würde dies auch dazu beitragen, mehr Menschen dazu zu bringen, Ihre Frage zu betrachten. – ralfstx

@ralfstx, Hoffentlich ist meine Bearbeitung mehr in der Richtung, was du meinst. Danke für die schnelle Antwort. – shadowninja1012

Wenn du dein komplettes Skript gepostet hast, würde das sehr helfen!In der Lage zu sehen, wie Sie getWeight() aufrufen, was Sie erwartet haben und wie Sie auf die GeoJSON-Datei zugreifen, würde alles helfen! –

Ich denke, Ihre Funktion sollte tatsächlich das Gewicht zurückgeben. etwas mehr wie folgt aus:

var getStyle = function(feature){ 
    var weight; 
    if (feature.properties.Value > 30000000) {weight = 8;} 
    else if (feature.properties.Value > 10000000) {weight = 7;} 
    else if (feature.properties.Value > 5000000) {weight = 6;} 
    else if (feature.properties.Value > 1000000) {weight = 5;} 
    else if (feature.properties.Value > 500000) {weight = 4;} 
    else if (feature.properties.Value > 100000) {weight = 3;} 
    else if (feature.properties.Value > 1000) {weight = 2;} 
    else if (feature.properties.Value > 1) {weight = 1;}; 

    return { 
    color: 'red', 
    weight: weight 
    } 
}; 

var getPopup = function(feature, layer) { 
    var content = 'popup content goes here'; 
    layer.bindPopup(content); 
};

versuchen diese dann für das Styling und Popup-Teil:

var CHNimports = L.geoJson(CHN, { 
    style: getStyle, 
    onEachFeature: getPopup 
}).addTo(map);

Quelle

2015-04-23 05:39:15 Hinrich

Ich habe dies dem Code hinzugefügt, aber jetzt habe ich das Problem, dass die Polylinien, die generiert werden, alle ein Gewicht von 1 haben und meine Popup-Informationen nicht angezeigt werden, wenn auf die Linie geklickt wird. – shadowninja1012

ich aktualisierte meine Antwort. Weitere Informationen finden Sie in der Broschüre [hier] (http://leafletjs.com/examples/geojson.html) – Hinrich

Wenn ich das Styling verwende, bekomme ich den Fehler 'Feature' ist nicht definiert. Dies geschieht, wenn ich den genauen Code verwende, den Sie vorgeschlagen haben, oder wenn ich versuche, ihn in meine vorhandene Variable zu setzen. – shadowninja1012

Ich denke, das Problem ist, dass Sie L.geoJson mit zu vielen Parametern sind aufgerufen wird.

Ihr Code;

var CHNimports = L.geoJson(CHN, {style: getStyle}, { 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup("Omitted for formatting..."); 
    }, 
    pointToLayer: function (feature, latlng) { 
     return L.polyline(latlng); 
    } 
}).addTo(map);

Wie es aussehen sollte, beachten Sie die Änderung der style Eigenschaft;

var CHNimports = L.geoJson(CHN, { 
    style: getStyle, 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup("Omitted for formatting..."); 
    }, 
    pointToLayer: function (feature, latlng) { 
     return L.polyline(latlng); 
    } 
}).addTo(map);

Die Funktion L.geoJson benötigt nur 2 Argumente. Der erste ist das geoJson-Objekt und der zweite ist ein anderes json-Objekt, das style, und pointToLayer enthält.

Dokumentation: http://leafletjs.com/reference.html#geojson

Quelle

2015-04-23 23:22:13 Jonathan

Variable Linienzug Gewicht mit GeoJSON in Leaflet

Antwort

Verwandte Themen