Icon url in mapbox

让人想犯罪 __ 提交于 2019-12-24 11:35:32

问题


How to add a custom icon in mapbox?

var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 1);
  var geojson = { type: 'LineString', coordinates: value};

  var start = value[0];
  var end = value[value.length-1];

  geojson.coordinates.push((start,end).slice());

  // Add this generated geojson object to the map.
  L.geoJson(geojson).addTo(map);

  // Create a marker and add it to the map.
  var marker = L.marker(end, {        
    icon: L.mapbox.marker.icon({
      "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png"
    })
  }).addTo(map);
});

I can't able to add a custom icon in above code. Please help me..
Thanks.


回答1:


First you will have to create a var, for example 'myIcon', then simply replace the iconUrl with a path that specifies the custom marker you want to use.

You can use the iconSize option to specify the size of your marker You can use the iconAnchor option to specify which part of your masker should be placed on the latlng.

myIcon=L.icon({
    iconUrl:'img/custom-marker.png',
    iconSize: [25,30]
});

Then create the marker, set the lat lng where you want your marker to be placed. And specify the icon you want to use.

var Marker = new L.Marker ( latlng, {icon:myIcon});

Finally add your market to the map:

map.addlayer(Marker);



来源:https://stackoverflow.com/questions/31265496/icon-url-in-mapbox

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!