Leaflet/JSON icons

119 views
Skip to first unread message

Gael Princivalle

unread,
Sep 14, 2016, 3:56:27 AM9/14/16
to Leaflet
Hello.

I use Leaflet in a Web2py application where I load the features with $getJSON. I have only markers in my features.
My problem is that I don't find a way to load a different icon depending of a feature property.
I need something like that:
                    switch (feature.properties.category) {
                        case '1': set the green icon;
                        case '2': set the blu icon;
                    }

    <script>
       
var map = L.map('map')

       
//Here is a greenIcon
       
var greenIcon = L.icon({
            iconUrl
: '{{=URL('static','markers/green.png')}}',
            shadowUrl
: '{{=URL('static','markers/shadow.png')}}',
            iconSize
:     [38, 95], // size of the icon
            shadowSize
:   [50, 64], // size of the shadow
            iconAnchor
:   [22, 94], // point of the icon which will correspond to marker's location
            shadowAnchor
: [4, 62],  // the same for the shadow
            popupAnchor
:  [-3, -76] // point from which the popup should open relative to the iconAnchor
       
});

       
//Here is a bluIcon
       
var bluIcon = L.icon({
            iconUrl
: '{{=URL('static','markers/blu.png')}}',
            shadowUrl
: '{{=URL('static','markers/shadow.png')}}',
            iconSize
:     [38, 95], // size of the icon
            shadowSize
:   [50, 64], // size of the shadow
            iconAnchor
:   [22, 94], // point of the icon which will correspond to marker's location
            shadowAnchor
: [4, 62],  // the same for the shadow
            popupAnchor
:  [-3, -76] // point from which the popup should open relative to the iconAnchor
       
});

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

        map
.on('load', function() {
            loadMarkers
();
       
}).setView([ {{=session.events_latitude}} , {{=session.events_longitude}} ], {{=session.zoom}});

        map
.on('moveend', function() {
            loadMarkers
();
       
});

       
function loadMarkers () {
           
var east = map.getBounds().getEast();
            $
('#east').val(east);
           
var west = map.getBounds().getWest();
            $
('#west').val(west);
           
var south = map.getBounds().getSouth();
            $
('#south').val(south);
           
var north = map.getBounds().getNorth();
            $
('#north').val(north);
           
var zoom = map.getZoom();
            $
.getJSON('{{=URL('f_ajax', 'get_main_event_locations')}}', {east: east, west: west, south: south, north: north, zoom: zoom}, function( data ) {
               
if (typeof geojsonLayer !== 'undefined') {
                    map
.removeLayer(geojsonLayer);
               
}
                geojsonLayer
= L.geoJson(data, {
                   
//With it I can set a custom icon, but it will be the same for all the features
                    pointToLayer
: function (feature, latlng) {
                       
return L.marker(latlng, {icon: greenIcon});
                   
},
                    onEachFeature
: onEachFeature}).addTo(map);
           
});
       
}

       
function onEachFeature (feature, layer) {
           
var popupContent;
           
if (feature.properties && feature.properties.popupContent) {
                popupContent
= feature.properties.popupContent + feature.properties.track_quotation;
           
}
            layer
.bindPopup(popupContent);
       
}
   
</script>

Someone knows how I can do it?

Thanks.



Message has been deleted

k_man_au

unread,
Sep 14, 2016, 11:30:25 PM9/14/16
to Leaflet
Change your marker definition for a call to a style function

                    pointToLayer: function (feature, latlng) {
                        
return L.marker(latlng, {icon: greenIcon});
                    
},
                    onEachFeature
: onEachFeature}).addTo(map);

becomes 

                    pointToLayer: function (feature, latlng) {
                        
return  return L.circleMarker(latlng, pointstyle(feature)); 
                    
},
                    onEachFeature
: onEachFeature}).addTo(map);

 function pointstyle(feature) {
 return style;

Pavan Kumar

unread,
Sep 15, 2016, 12:22:53 PM9/15/16
to Leaflet
how get autocomplete in leaflet serach


The day Wednesday, September 14, 2016 13:26:27 UTC + 5: 30, Gael Princivalle wrote:
Hello.

I use Leaflet in web2py application where I load the features with $ getJSON. I have only markers in my features.
My problem is That I do not find a way to load a different icon Depending of a feature property.
I need something like that:
                    switch (feature.properties.category) {
                        case '1': set the green icon;
                        case '2': set the blue icon;
                    }

Gael Princivalle

unread,
Sep 15, 2016, 3:39:41 PM9/15/16
to Leaflet
In my opinion the better result with dropdown autocompletion is with Google maps API.
Certainly there are other solutions but places database are less complete.
Reply all
Reply to author
Forward
0 new messages