0

I'm a real newbie in javascript, and I need som help to acheive a proper integration of mapbox maps inside koken (a CMS for photographers)

The idea is to do some thing like this https://www.flickr.com/map to present pictures on a map.

Now my code looks like this : 

<div id='map' style="height: 800px;"></div>
<script>
var map = L.mapbox.map('map', 'mymap')
    .setView([48.895513333333, 2.39237], 6);

//loop to create markers    
<koken:load limit="30" source="contents">
    <koken:loop>

                L.mapbox.featureLayer({
                type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [
                          {{ geolocation.longitude }},
                          {{ geolocation.latitude }} 
                        ]
                    },
                    properties: {
                        'title' : '{{ content.title }} <br/> <a href="{{ content.url }}">Voir la photo</a>',
                        'marker-size': 'large',
                        'marker-color': '#CC0001',
                        'marker-symbol': 'camera'
                    }
                }).addTo(map);


    </koken:loop>
</koken:load>
</script>

My problems are :

  • I'm doing a loop to add marker after marker to the map, Is it a good method, does a loop to create a variable a better method ?
  • Some images of my koken library don't have any {{ geolocation.longitude }} or {{ geolocation.latitude }} and when this field is empty the map doesn't show the next markers. I tried to filter then by doing a if( ) { }, but I failed. Like a said I'm a newbie... Could somebody show how to acheive this ?
  • I tried to increased the koken:load limit to 100, every thing is freaking out... any ideas ? Do I have to wait that the loop is done to continue ??

Many thanks for those who will have the goodness to help me a bit !

Pierre
  • 1
  • 1

1 Answers1

0

I could have done it that way :

<div id='map' style="height: 800px;"></div>
<script>
var map = L.mapbox.map('map', 'mymap')
    .setView([48.895513333333, 2.39237], 6);

// Array containing markers datas
var points = new Array();

//koken loop to populate markers datas
<koken:load limit="30" source="contents">
    <koken:loop>
    points.push({
        cLng:       {{ geolocation.longitude }} +0, // hack to add empty coordinate
        cLat:       {{ geolocation.latitude }} +0,
        title:  "{{ content.title }}",
        url:    "{{ content.url }}"
    });
    </koken:loop>
</koken:load>
// JS Loop thru markers datas to create markers on map
    for(var idx in points) {
        // Only for non empty coordinates
        if((points[idx].cLng != 0) && (points[idx].cLat != 0)) {
                L.mapbox.featureLayer({
                type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [
                          points[idx].cLng,
                          points[idx].cLat
                        ]
                    },
                    properties: {
                        'title' : points[idx].title +' <br/> <a href="'+points[idx].url+'">Voir la photo</a>',
                        'marker-size': 'large',
                        'marker-color': '#CC0001',
                        'marker-symbol': 'camera'
                    }
                }).addTo(map);
        }
    }
</script>

P.S: I don't know koken so have no idea for your last question.

f_to_k
  • 1
  • 1