CODEWITHSUNDEEP
javascriptjsongeolocationgeocodingmapbox
Axel Hunter
Axel Hunter

Reputation: 63

Adding custom icon and marker data together using Mapbox

I am new to mapbox and I have a simple question. I have made a feature layer and a list of custom icons. How do I add the two together?

My feature layer is formatted as below:

L.mapbox.featureLayer({
     "type": "Feature",
     "geometry": {
     "coordinates": [
     '.$long.','.$lat.'
     ],
     "type": "Point"
     },
     "properties": {
     "title": "'.$business_name.'",
     "description": "'.$address_1.', '.$address_2.', '.$address_3 .', '.$postcode .'"
     }
     }).addTo(map);

And example of my custom marker is below

var accomodation = L.icon({
    iconUrl: '/img/pins/day-and-night/accommodation.png',
    iconSize: [46, 62],
    iconAnchor: [8, 60],
    });

Any help would be perfect.

Thanks

Upvotes: 0

Views: 1042

Answers (1)

dkniffin
dkniffin

Reputation: 1383

From your code, I assume you are talking about mapbox.js, which is a derivative of leaflet.js

If so, I think what you are looking for is leaflet layer groups

So, in your case...

var featureLayer = L.mapbox.featureLayer({
   "type": "Feature",
   "geometry": {
   "coordinates": [
      '.$long.','.$lat.'
   ],
   "type": "Point"
   },
   "properties": {
      "title": "'.$business_name.'",
      "description": "'.$address_1.', '.$address_2.', '.$address_3 .', '.$postcode .'"
   }
   });

var accomodation = L.icon({
   iconUrl: '/img/pins/day-and-night/accommodation.png',
   iconSize: [46, 62],
   iconAnchor: [8, 60],
});

var layergroup = L.layerGroup([featureLayer, accomodation]);

layergroup.addTo(map);

Upvotes: 1

Related Questions