JSFiddle - React, Tailwind, and code Playground
by shanejones
JavaScript
var customIcon = L.icon({
"iconUrl": "images/pin.png",
"iconSize": [29, 36],
"iconAnchor": [14, 36],
"popupAnchor": [0, -15],
"className": "pin"
});
geojsonOptions = {
pointToLayer: function(feature,latLng) {
return L.marker(latLng,{icon:customIcon})
}
}
//------ D-Body events
function update_map(option){
$('.btn-pause').removeClass('btn-pause').addClass('btn-play').html('<i class="fa fa-play"></i>'); // reset the buttons
$('.trip-controls').fadeIn();
var lineArray = [];
microLineArray = [];
microIteration = 0;
if($(window).width() < 400){
zoom = option.attr('data-zoom-mobile');
} else if($(window).width() < 800){
zoom = option.attr('data-zoom-tablet');
} else {
zoom = option.attr('data-zoom');
}
map.setView([option.attr('data-lat'),option.attr('data-long')], zoom);
$.post('_posts/get-pins.php', {traveller: option.attr('data-id')}, function (data) {
if (featureLayer instanceof L.mapbox.FeatureLayer) {
featureLayer.clearLayers();
} else {
featureLayer = L.mapbox.featureLayer().addTo(map);
}
var featureCollection = {
'type': 'FeatureCollection',
'features': []
};
$.each(data, function (k, item) {
featureCollection.features.push({
"type": "Feature",
"properties": {
"id": item.id,
"title": item.title,
"image":item.image,
"description": item.description
},
"geometry": {
"type": "Point",
"coordinates": [
item.long,
item.lat
]
}
});
lineArray[item.id] = [item.lat, item.long];
});
featureLayer.on('layeradd', function(e) {
var...