Zmienna Łamana Waga z GeoJSON w Broszurka

Oto cały dokument HTML:Zmienna Łamana Waga z GeoJSON w Broszurka

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

Oto link Dropbox do GEOJSONS jeśli ktoś chciałby je zobaczyć (mam nadzieję, że to działa zgodnie z przeznaczeniem i ludzie można je pobrać): https://www.dropbox.com/sh/4bi70dx2t99qgln/AABJfyNDJzgNTQK4Wu3vYnVRa?dl=0

Pracowałem nad projektem stworzenia mapy przepływu w Ulotce za pomocą polilinii GEOJSON. Niedawno poznałem JavaScript i ulotkę. Oto przykład tego, co chciałbym zrobić (mój map korzysta rumbu linii i będzie interaktywna):

Flowmap Example

Oto aktualizowane i funkcję, która zmienia wagę polilinii na podstawie jego „wartość” pracy z pliku GeoJSON (kredyt do Hinrich & Jonathan za pomoc!):

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

~~linie różnią się pod względem wartości i będę w stanie zmienić kolor w zależności od kraju, ale informacje okienko nie pojawi się, gdy polilinia jest kliknięty na~~.

Ponadto, oto próbka pliku GeoJSON dla 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

Dziękujemy za pomoc!

Źródło

2015-04-22 shadowninja1012

Witamy w stackoverflow! Jeśli poprosisz innych o przeczytanie i zrozumienie twojego kodu, z pewnością pomocne będzie odpowiednie formatowanie kodu. Jeśli uda ci się zredukować swoje pytanie do jednego konkretnego problemu, którego nie możesz rozwiązać, niezależnie od twoich konkretnych uwag, pomoże to również zachęcić więcej ludzi do przyjrzenia się twojemu pytaniu. – ralfstx

@ralfstx, Mam nadzieję, że moja edycja jest bardziej zgodna z tym, co masz na myśli. Dziękuję za szybka odpowiedz. – shadowninja1012

Jeśli opublikowałeś swój pełny scenariusz, który bardzo by pomógł!Możliwość zobaczenia, w jaki sposób wywołasz getWeight(), co spodziewasz się zwrócić i jak uzyskać dostęp do pliku GeoJSON, może pomóc! –

Myślę, że twoja funkcja powinna rzeczywiście zwrócić wagę. coś więcej tak:

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

spróbować następnie do stylizacji i podręcznego części:

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

Źródło

2015-04-23 05:39:15 Hinrich

Dodałem to do kodu, ale teraz mam problem, że wszystkie polilinie, które są generowane, mają wagę 1, a moje wyskakujące informacje nie pojawiają się po kliknięciu linii. – shadowninja1012

zaktualizowałem moją odpowiedź. zobacz dokumentację ulotek [tutaj] (http://leafletjs.com/examples/geojson.html) w celu uzyskania dalszych informacji. – Hinrich

Kiedy używam stylizacji, pojawia się błąd "funkcja" nie jest zdefiniowany. Dzieje się tak, jeśli użyję dokładnego kodu, który zasugerowałeś lub jeśli spróbuję umieścić go w mojej istniejącej zmiennej. – shadowninja1012

Myślę, że problemem jest to, że dzwonisz L.geoJson zbyt wielu parametrów.

Twój kod;

Jak powinien wyglądać, zanotuj zmianę we właściwości 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);

Funkcja przyjmuje tylko 2 argumenty. Pierwszy to obiekt GeoJson, a drugi to inny obiekt Json, który zawiera style, onEachFeature i pointToLayer.

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

Źródło

2015-04-23 23:22:13 Jonathan

Zmienna Łamana Waga z GeoJSON w Broszurka

Odpowiedz

Powiązane problemy