JSFiddle - React, Tailwind, and code Playground
JavaScript
mylan = 40.714353;
mylon = -74.005973;
var map = L.map('map').setView([mylan, mylon], 15);
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {}).addTo(map);
//map.locate({setView: true, maxZoom: 16});
// Setup icons
var MeIcon2 = L.divIcon({
iconSize: null,
className: 'map-me-icon-shadow'
});
var MeIcon1 = L.divIcon({
iconSize: null,
className: 'map-me-icon'
});
var AddressIcon = L.icon({
iconUrl: 'images/icon-address.png',
iconRetinaUrl: 'images/icon-address.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
L.marker([mylan, mylon], {icon: MeIcon2}).addTo(map);
L.marker([mylan, mylon], {icon: MeIcon1}).addTo(map);
$.post('api/GetUserByCity',{ city_name:'New York' },function(data) {
var myLayer = L.geoJson("",{ icon : AddressIcon }).addTo(map);
var geojsonFeature;
json_result = $.parseJSON(data);
$.each(json_result,function(key,value) {
geojsonFeature = '';
geojsonFeature = {
"type": "Feature",
"properties": {
"name": value.name,
"amenity": value.address,
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [value.lon,value.lat]
}
};
myLayer.addData(geojsonFeature);
});
});