-1

I'm trying to achieve two things: 1) Display lines on a map and 2) add pictures to a map.

1) I've successfully displayed multilines on a map using the Leaflet.js library. For some reason lines are not displayed. I'm using the same method for multilines and lines and adjusted accordingly.

2) I've copied the example code from leaflet's website for displaying pictures. Can't make it work.

Didn't know how to attach the two .js files, so I've posted the code as well.

HTML

<html>
   <head>
      <title>Wandermap</title>
      <link href="css/leaflet.css" type="text/css" rel=stylesheet>
      <link href="css/style_blank.css" type="text/css" rel=stylesheet>
      <script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script>
      <script src="js/leaflet.ajax.min.js"></script>
      <!--Kort-->    
      <script type="text/javascript" src="js/KlintholmGodsOgKlinteskovenKort.js"></script>
      <script type="text/javascript" src="js/UlvshaleKort.js"></script>
      <script type="text/javascript" src="js/MoensKlintOgSydligeRundturKort.js"></script>
      <script type="text/javascript" src="js/KnudshovedOddeRundtKort.js"></script>
   </head>
   <body>
      <div id="map"></div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script>
      <script src="js/jquery.js"></script>
      <script src="js/leaflet.js"></script>
      <script src="js/script_blank.js"></script>
      <!--Library to add external geojson files-->
      <script src="js/leaflet.ajax.min.js"></script>
      <script src="js/leaflet2.ajax.min.js"></script>
      <script src="js/leaflet.min.js"></script>
   </body>
</html>

CSS

html,body,#map {
    height: 100%;
    width: 100%;
}

JS

var map = L.map('map', {
    center: [62.86975, 17.825806],
    zoom: 5,
    minZoom: 2,
    maxZoom: 18
});


L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


//===========
//Add GEOjson
//===========
L.geoJSON(UlvshaleKort).addTo(map);
L.geoJSON(KlintholmGodsOgKlinteskovenKort).addTo(map);
L.geoJSON(MoensKlintOgSydligeRundturKort).addTo(map);
L.geoJSON(KnudshovedOddeRundtKort).addTo(map);

//=======================
//Adding images to routes
//=======================
var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [
        [40.712216, -74.22655],
        [40.773941, -74.12544]
    ];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

UlvshaleKort.js (Multiline)

var UlvshaleKort = {
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "properties": {
            "name": "Ulvshale Moen"
        },
        "geometry": {
            "type": "MultiLineString",
            "coordinates": [
                [
                    [
                        12.242464320238296,
                        55.051490752360955
                    ],
                    [
                        12.243155522128303,
                        55.051903905705984
                    ],
                    [
                        12.244182912425835,
                        55.05240699285439
                    ],
                    [
                        12.247367739153304,
                        55.05286148036096
                    ],
                    [
                        12.24863651477138,
                        55.05247693727248
                    ],
                    [
                        12.249682485986765,
                        55.05224219484996
                    ],
                    [
                        12.252240693637795,
                        55.051922059408575
                    ],
                    [
                        12.255506392789968,
                        55.05125025501384
                    ],

                    [
                        12.259508752264518,
                        55.05097222302176
                    ],
                    [
                        12.260289686284453,
                        55.050753481878054
                    ],
                    [
                        12.260381077730866,
                        55.05129950433034
                    ],
                    [
                        12.26439609687519,
                        55.04656125463961
                    ],
                    [
                        12.263878555633466,
                        55.046359352429235
                    ],
                    [
                        12.263099187077097,
                        55.046596058916634
                    ],
                    [
                        12.262447593533187,
                        55.04647866963208
                    ],
                    [
                        12.260256385824892,
                        55.04649247359252
                    ]
                ],
                [
                    [
                        12.242140157098566,
                        55.05135553317244
                    ],
                    [
                        12.241797466442305,
                        55.05118484180605
                    ],
                    [
                        12.241213175483514,
                        55.050544049727336
                    ],
                    [
                        12.240085255910428,
                        55.0497648867182
                    ],
                    [
                        12.239508828143963,
                        55.04999603241421
                    ],
                    [
                        12.238850400292565,
                        55.049599968994904
                    ],
                    [
                        12.238730545609435,
                        55.049279474407804
                    ],
                    [
                        12.237405259632121,
                        55.04896409854078
                    ]
                ],
                [
                    [
                        12.242464320238296,
                        55.051490752360955
                    ],
                    [
                        12.242140157098566,
                        55.05135553317244
                    ]
                ],
                [
                    [
                        12.242464320238296,
                        55.051490752360955
                    ],
                    [
                        12.242140157098566,
                        55.05135553317244
                    ]
                ],
                [
                    [
                        12.260256385824892,
                        55.04649247359252
                    ],
                    [
                        12.260240760384683,
                        55.046492892471655
                    ]
                ],
                [
                    [
                        12.260256385824892,
                        55.04649247359252
                    ],
                    [
                        12.259604636828422,
                        55.04829922258382
                    ],
                    [
                        12.258898133166126,
                        55.04943308306235
                    ],
                    [
                        12.255662437914925,
                        55.05008619574044
                    ],
                    [
                        12.249948780125152,
                        55.050310937567744
                    ],
                    [
                        12.248471475056807,
                        55.050440317252026
                    ],
                    [
                        12.247752625271135,
                        55.05045951495462
                    ],
                    [
                        12.247187145446773,
                        55.050052022153416
                    ],
                    [
                        12.247105383549842,
                        55.04962262215074
                    ],
                    [
                        12.246208839928743,
                        55.04957462440858
                    ],
                    [
                        12.245852290282654,
                        55.050393358057484
                    ],
                    [
                        12.244412691984369,
                        55.05137585547676
                    ],
                    [
                        12.242464320238296,
                        55.051490752360955
                    ]
                ],
                [
                    [
                        12.259508217980482,
                        55.04537961741995
                    ],
                    [
                        12.259982497059395,
                        55.04562765424368
                    ],
                    [
                        12.260272927184467,
                        55.045925574812124
                    ],
                    [
                        12.260256385824892,
                        55.04649247359252
                    ]
                ],
                [
                    [
                        12.25958269632747,
                        55.04533266447673
                    ],
                    [
                        12.257193026754573,
                        55.04483023503621
                    ],
                    [
                        12.254847707670718,
                        55.0441017889053
                    ],
                    [
                        12.254420684796953,
                        55.04366364996782
                    ],
                    [
                        12.25371971434073,
                        55.04332275274186
                    ],
                    [
                        12.253266609247488,
                        55.04333487463172
                    ],
                    [
                        12.251973006955769,
                        55.0428299930263
                    ],
                    [
                        12.251605995856439,
                        55.04255208394783
                    ],
                    [
                        12.252296282897623,
                        55.04179633592068
                    ],
                    [
                        12.251093952742323,
                        55.041450848684306
                    ],
                    [
                        12.259190355139358,
                        55.037808423179484
                    ],
                    [
                        12.263293394106817,
                        55.04128594189512
                    ],
                    [
                        12.260801616090255,
                        55.04241376220656
                    ],
                    [
                        12.26202654530343,
                        55.04265065232336
                    ],
                    [
                        12.261783527570163,
                        55.043897978659565
                    ],
                    [
                        12.259534362656378,
                        55.045315977219936
                    ]
                ],
                [
                    [
                        12.242140157098566,
                        55.05135553317244
                    ],
                    [
                        12.24168589704746,
                        55.05116084163153
                    ]
                ],
                [
                    [
                        12.261784987171083,
                        55.043915922234866
                    ],
                    [
                        12.26267236366548,
                        55.04404497180269
                    ],
                    [
                        12.262688423823013,
                        55.044242350947066
                    ],
                    [
                        12.273214153478705,
                        55.040443868676846
                    ],
                    [
                        12.272333930999187,
                        55.0394425385523
                    ],
                    [
                        12.26998224277645,
                        55.03959571249918
                    ],
                    [
                        12.269643777375407,
                        55.03851685511528
                    ],
                    [
                        12.269071670947428,
                        55.0380287185577
                    ],
                    [
                        12.268420201385103,
                        55.03791135953579
                    ],
                    [
                        12.267717212174977,
                        55.03793025231144
                    ],
                    [
                        12.265778115279597,
                        55.036804473393076
                    ],
                    [
                        12.26498052305739,
                        55.03643027057453
                    ],
                    [
                        12.259270652739662,
                        55.03783324511408
                    ]
                ]
            ]
        }
    }
]
};

KnudshovedOddeRundtKort.js (Line)

var KnudshovedOddeRundtKort = {
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "properties": {
            "name": "Knudshoved Odde Rundt"
        },
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [
                    11.619198154794596,
                    55.08260923546977
                ],
                [
                    11.621357966364585,
                    55.082663423968725
                ],
                [
                    11.6227713565089,
                    55.082805576347795
                ],
                [
                    11.623300909943868,
                    55.08285169773144
                ],
                [
                    11.62638430602523,
                    55.08284273888432
                ],
                [
                    11.629743631967248,
                    55.082453775016745
                ],
                [
                    11.630131025664761,
                    55.08224403858252
                ],
                [
                    11.630696935654392,
                    55.08246194179893
                ],
                [
                    11.633447255886507,
                    55.08234493530881
                ],
                [
                    11.63383840637922,
                    55.08219263881601
                ],
                [
                    11.634329701709767,
                    55.082038173656116
                ],
                [
                    11.635210244134031,
                    55.08170268000599
                ],
                [
                    11.635753491423609,
                    55.081575850826376
                ],
                [
                    11.636267457557063,
                    55.08176608654069
                ],
                [
                    11.63691084882535,
                    55.0816370831202
                ],
                [
                    11.638026590640758,
                    55.08106633974946
                ],
                [
                    11.642913633943218,
                    55.079895953954356
                ],
                [
                    11.645086402815688,
                    55.0793884873066
                ],
                [
                    11.647580414856552,
                    55.07919042797431
                ],
                [
                    11.64792710615452,
                    55.07912535252978
                ],
                [
                    11.64820853564372,
                    55.07883156200643
                ],
                [
                    11.64856161261897,
                    55.078104710262735
                ],
                [
                    11.649278446331792,
                    55.077571307289844
                ],
                [
                    11.650301363918164,
                    55.077117535403964
                ],
                [
                    11.650521293178192,
                    55.076652477595985
                ],
                [
                    11.651241876762654,
                    55.076176514287646
                ],
                [
                    11.652039128048868,
                    55.0761016110791
                ],
                [
                    11.653381391114175,
                    55.075928521473436
                ],
                [
                    11.654567154976359,
                    55.076420467248404
                ],
                [
                    11.654963876440949,
                    55.07635428011455
                ],
                [
                    11.655351077554394,
                    55.07614446526224
                ],
                [
                    11.655901800086413,
                    55.076132448673036
                ],
                [
                    11.656453068988093,
                    55.07537247996875
                ],
                [
                    11.656788283657422,
                    55.075135028166024
                ],
                [
                    11.657997450374616,
                    55.075223694009786
                ],
                [
                    11.658511436615631,
                    55.075413835714194
                ],
                [
                    11.659218061094174,
                    55.07548469899305
                ],
                [
                    11.660309947696012,
                    55.075317002665635
                ],
                [
                    11.66421918837701,
                    55.07454108420855
                ],
                [
                    11.665444018203557,
                    55.074111528716436
                ],
                [
                    11.66608527705236,
                    55.0739536481998
                ],
                [
                    11.666643611604771,
                    55.07405648353208
                ],
                [
                    11.667981912751289,
                    55.07382578420931
                ],
                [
                    11.668985071359625,
                    55.07383255576634
                ],
                [
                    11.672106165737341,
                    55.074022971978266
                ],
                [
                    11.673047768621949,
                    55.073858459733906
                ],
                [
                    11.67413379798026,
                    55.073604465807236
                ],
                [
                    11.675408551139384,
                    55.07317371142575
                ],
                [
                    11.680378245697941,
                    55.071769842681164
                ],
                [
                    11.682786911599264,
                    55.07105512646392
                ],
                [
                    11.685112698278013,
                    55.07060109394355
                ],
                [
                    11.685844309048486,
                    55.07029727865173
                ],
                [
                    11.69186442912189,
                    55.0688697439613
                ],
                [
                    11.692963710950002,
                    55.06881665578365
                ],
                [
                    11.694798196241054,
                    55.06776919557272
                ],
                [
                    11.703325994379064,
                    55.0663718288
                ],
                [
                    11.705464634557671,
                    55.06612292925215
                ],
                [
                    11.707843797371012,
                    55.065724803397075
                ],
                [
                    11.709668477978926,
                    55.06528144400803
                ],
                [
                    11.713933858872617,
                    55.06461104293719
                ],
                [
                    11.715277394500003,
                    55.064466001500406
                ],
                [
                    11.715802628367275,
                    55.06408030469234
                ],
                [
                    11.716599504977285,
                    55.06400498239747
                ],
                [
                    11.717099985190188,
                    55.063993808194894
                ],
                [
                    11.728092475682226,
                    55.06127385688103
                ],
                [
                    11.739375838347351,
                    55.05843127507758
                ],
                [
                    11.746073054131346,
                    55.05669808952752
                ],
                [
                    11.745647180705115,
                    55.056333721344984
                ],
                [
                    11.74497703051819,
                    55.05606116595647
                ],
                [
                    11.74502608417783,
                    55.05604567544313
                ],
                [
                    11.744948079016005,
                    55.05600428386275
                ],
                [
                    11.745021167764842,
                    55.0559738672882
                ],
                [
                    11.745021167764842,
                    55.0559738672882
                ],
                [
                    11.74493679886097,
                    55.05602251811704
                ],
                [
                    11.744979352063382,
                    55.056003578321516
                ]
            ]
        }
    }
]
};
  • Testing KnudshovedOddeRundtKort with your code works, as does the image example you give – Marc Pfister Jul 20 '17 at 20:11
  • Hmm, for some reason neither work for me :/ Can it be due to my browser (Chrome), pc (Mac) or code editor (Brackets)? – Saud Jul 20 '17 at 20:13
  • 1
    Any console errors? The only common thing to the two things that aren't working for you is that they're the two last steps in the code. – Marc Pfister Jul 20 '17 at 20:18
  • codepen.io/anon/pen/XgvqKJ shows the image and line – Marc Pfister Jul 20 '17 at 20:29
1

Checked the console and it looked like some of the js libraries were preventing the picture and the KnudshovedOddeRundtKort.js from being read. Here's the revised code/code where I've commented out the libraries:

    <html>
   <head>
      <title>Wandermap</title>
      <link href="css/leaflet.css" type="text/css" rel=stylesheet>
      <link href="css/style_blank.css" type="text/css" rel=stylesheet>
      <!--<script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script>-->
      <!--<script src="js/leaflet.ajax.min.js"></script>-->
      <!--Kort-->    
      <script type="text/javascript" src="js/KlintholmGodsOgKlinteskovenKort.js"></script>
      <script type="text/javascript" src="js/UlvshaleKort.js"></script>
      <script type="text/javascript" src="js/MoensKlintOgSydligeRundturKort.js"></script>
      <script type="text/javascript" src="js/KnudshovedOddeRundtKort.js"></script>
   </head>
   <body>
      <div id="map"></div>
      <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
      <!--<script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script>-->
      <script src="js/jquery.js"></script>
      <script src="js/leaflet.js"></script>
      <script src="js/script_blank.js"></script>
      <!--Library to add external geojson files-->
      <!--<script src="js/leaflet.ajax.min.js"></script>-->
      <!--<script src="js/leaflet2.ajax.min.js"></script>-->
      <!--<script src="js/leaflet.min.js"></script>-->
   </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.