variabile Polilinea Peso con GeoJSON nell'opuscolo

Ecco l'intero documento HTML:variabile Polilinea Peso con GeoJSON nell'opuscolo

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

Ecco un link set ai GEOJSONS se qualcuno vorrebbe vedere loro (si spera questo funziona come previsto e la gente li può scaricare): https://www.dropbox.com/sh/4bi70dx2t99qgln/AABJfyNDJzgNTQK4Wu3vYnVRa?dl=0

ho lavorato su un progetto per creare una flowmap nell'opuscolo utilizzando polilinee GeoJSON. Ho solo recentemente familiarizzato con JavaScript e Leaflet. Ecco un esempio di quello che vorrei fare (la mia mappa utilizza lossodromie e sarebbe interattivo):

Flowmap Example

Ecco la versione aggiornata e la funzione che cambia il peso polilinea in base al suo 'valore' di lavoro dal file GeoJSON (credito per Hinrich & Jonathan per il loro aiuto!):

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

~~le linee variano in base al valore e io sarò in grado di cambiare il colore dipende dal paese, ma le informazioni di popup non appare quando una polilinea è cliccato su~~.

Inoltre, ecco un esempio del file GeoJSON per 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

Grazie per l'aiuto!

fonte

2015-04-22 shadowninja1012

Benvenuti in Stackoverflow! Se chiedi ad altri di leggere e comprendere il tuo codice, la corretta formattazione del codice sarebbe sicuramente utile. Se riesci a ridurre la tua domanda a uno specifico problema che non riesci a risolvere, indipendentemente dal tuo input specifico, questo aiuterà anche a far sì che più persone guardino alla tua domanda. – ralfstx

@ralfstx, si spera che la mia modifica sia più simile a quello che intendi. Grazie per la rapida risposta. – shadowninja1012

Se hai postato la tua sceneggiatura completa sarebbe stato di grande aiuto!Essere in grado di vedere come chiami getWeight(), cosa ti aspetti di aver restituito, e come puoi accedere al file GeoJSON ti sarà d'aiuto! –

Penso che la tua funzione dovrebbe effettivamente restituire il peso. qualcosa di più simile a questo:

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

provare questo allora per la parte stile e pop-up:

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

fonte

2015-04-23 05:39:15 Hinrich

Ho aggiunto questo al codice ma ora il problema è che le polilinee generate hanno tutte un peso pari a 1 e le mie informazioni popup non vengono visualizzate quando si fa clic sulla linea. – shadowninja1012

ho aggiornato la mia risposta. vedere i documenti del dépliant [qui] (http://leafletjs.com/examples/geojson.html) per ulteriori riferimenti – Hinrich

Quando utilizzo lo stile, ottengo l'errore "funzionalità" non definito. Questo succede se uso il codice esatto che hai suggerito o se provo a inserirlo nella mia variabile esistente. – shadowninja1012

Credo che il tuo problema è che si sta chiamando L.geoJson con troppi parametri.

Il tuo codice;

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

Come dovrebbe essere, notare la modifica alla proprietà style;

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

La funzione L.geoJson richiede solo 2 argomenti. Il primo è l'oggetto geoJson e il secondo è un altro oggetto json che contiene style, onEachFeature e pointToLayer.

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

fonte

2015-04-23 23:22:13 Jonathan

variabile Polilinea Peso con GeoJSON nell'opuscolo

risposta

Problemi correlati