Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Variable Polyline Weight with GEOJSON in Leaflet [closed]

Tags:

javascript

leaflet

geojson

polyline

Here is the entire HTML document:

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

Here is a dropbox link to the GEOJSONS if anyone would like to see them (hopefully this works as intended and people can download them): https://www.dropbox.com/sh/4bi70dx2t99qgln/AABJfyNDJzgNTQK4Wu3vYnVRa?dl=0

I have been working on a project to create a flowmap in Leaflet using GEOJSON polylines. I have only recently become acquainted with JavaScript and Leaflet. Here is an example of what I would like to make (my map uses rhumb lines and would be interactive):

Flowmap Example

Here is the updated and working function that changes the polyline weight based on its 'Value' from the GEOJSON file (credit to Hinrich & Jonathan for their help!):

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

The lines vary by value and I will be able to change to color dependent on the country but the popup information does not appear when a polyline is clicked on.

In addition, here is a sample of the GEOJSON file for 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

Thank you for the help!

like image 415
shadowninja1012 Avatar asked Apr 22 '15 15:04

shadowninja1012

People also ask

How do you add GeoJSON data to a Leaflet?

GeoJSON objects are added to the map through a GeoJSON layer. To create it and add it to a map, we can use the following code: L. geoJSON(geojsonFeature).

How do you draw a polygon in a Leaflet?

Multi Polygon Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional). Step 2 − Create a Layer object by passing the URL of the desired tile. Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

1 Answers

i think your function should actually return the weight. something more like this:

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

try this then for the styling and popup part:

var CHNimports = L.geoJson(CHN, { 
    style: getStyle,
    onEachFeature: getPopup
}).addTo(map);
like image 121
Hinrich Avatar answered Oct 01 '22 12:10

Hinrich
Sign in to Comment

Related questions

ARIA attributes in ember core form components
Define the ember data model for nested rest url
Ignore Safari's Initial Page Load popstate
How do I fix an invalid content-type header in Twilio using node.js?
AngularJS: Memory Leak with ng-repeat using custom objects (w/simple PLUNKR)
What do "positive" and "negative" mean in ECMAScript? +0 and -0
Undo dom changes in JS
Is there a bug in Internet Explorer 9/10 with innerHTML=""?
How to create a pure JavaScript project using Maven?
Submit Embedded Mailchimp Form with Javascript AJAX (not jQuery)
What is the most simple setup for a MEAN stack docker container to have the same config on OS X and DigitalOcean?
How I change the size of bubbles in google charts?
invalid non-string/buffer chunk Node.js
How to properly send data to an opened Firefox sidebar?
Read local xls/xlsx file in javascript [closed]
Passing a parameter to a CSS class from web page
Performance considerations with `Promise.all` and a large amount of asynchronous operations
Object.create alters console output of proto object in Chrome?
Copying the neo4j browser visualisations with d3.js
Passing variables from the current scope to a compiled directive

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!