0

I made some more complex leaflets before, but here I'm stucked. You can find my geojson file here: https://gist.github.com/Supermarmotte/16e0466c9d17f4ab341b6fdb805bb849 It is displayed correctly and is stored beneath the html file.

Grrr

<script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>

<script>
    var map = L.map('map').setView([47.439278,9.529174], 10);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);
    L.marker([47.439278,9.529174]).addTo(map).bindPopup("Willkommen in Heiden!").openPopup();

    var map = L.map('map2').setView([9.529174,47.439278], 10);
    L.geoJSON(post4).addTo(map);
</script>

  • Did you try passing the full file name - L.geoJSON(post4.geojson)? – NettaB May 26 '17 at 22:31
  • Yes I did, even using the whole path (mac OS). Nothing worked. Thanks for the idea – Supermarmotte May 27 '17 at 5:44
  • 1
    does the projection of your data and your map match? – Ian Turton May 27 '17 at 8:43
  • 1
    Is there a reason for the double var map declaration? – NettaB May 27 '17 at 8:53
  • The projection should be correct, I checked it on gist. Coordinate system is EPSG:4326, WGS84. I tried with and without double var map declaration because I read that lat/long are inverted for geojson. I just tried with single war mao declaration and it doesn't work. Thanks for the ideas! – Supermarmotte May 27 '17 at 11:26
2

The problem as I see is due to the way in which you are adding it to the map.

You have the following line: L.geoJSON(post4).addTo(map); But where is the variable with the name post defined? If you look at your browser's developer console, I bet, that where you'll get an error.

How do you solve this?

There are 3 ways in which geojson data is added to a Leaflet map

  1. Directly in the JS code: In cases where the data is small, you can define a new variable in the same place where you initializing the map etc, and set it to your data. In that case you can use a line like: L.geoJSON(post4).addTo(map); to add it to the map.

  2. In a separate file: In cases where the data is large, having it along with other code (in the same file) can get unwieldy, and reduce readability. What is done in this case, is that you create a separate file with the extension .js and add the variable there, and set it to your geoJSON data. You then add a link to it, in your html page as a <script> tag. After this you can add it to the map by using a line like L.geoJSON(post4).addTo(map);

  3. AJAX load: In cases where you don't want to save your data along with a variable as a JS file, and want to keep it as a JSON object, you can't follow the previous method. You'll have to make a AJAX request, and then load the results. Plugins are also available for this. See this post for some solutions

.

  • Great, options 2 & 3 works fine and I didn't tried the third. Since my original data is huge I'm using option 2. My mistake was to not declare the name of my dataset in "var MY DATASET", I was understanding the whole "var MY DATASET" as a function since I'm not used to other languages... Thx – Supermarmotte May 31 '17 at 10:36

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.