JSFiddle - React, Tailwind, and code Playground

by shanejones

JavaScript

function initialise_map(){

    L.mapbox.accessToken = 'MYACCESSTOKEN';

    map = L.mapbox.map('map-canvas', 'ME.MAP_REFERENCE').setView([27,-63], 3);

    map.scrollWheelZoom.disable();

    map.on('click',function(e){
        //console.log(e);
    });

    map.on('popupopen', function(e) {

        if($(window).width() < 550) {

            $('.leaflet-popup-pane').hide();

        } else {

            var px = map.project(e.popup._latlng);
            px.y -= e.popup._container.clientHeight/2;
            px.x -= e.popup._container.clientWidth/2 - 355;
            map.panTo(map.unproject(px),{animate: true});

            $('.leaflet-popup-pane').show();

        }

    });

}

var r_mobile = false;
var featureCollection;
var markers = [];
function populate(type){
    $.post('_posts/get-pins.php', function (data) {

        if (featureLayer instanceof L.mapbox.FeatureLayer) {
            featureLayer.clearLayers();
        } else {
            featureLayer = L.mapbox.featureLayer().addTo(map);
        }

        featureCollection = {
            'type': 'FeatureCollection',
            'features': []
        };


        $.each(data, function (k, item) {

            featureCollection.features.push({
                "type": "Feature",
                "properties": {
                    "id": item.id,
                    "title": item.title,
                    "image": item.image_url,
                    "description": item.fact,
                    "location": item.location,
                    "order": item.order,
                    "tweet": item.tweet,
                    "icon": {

                        "iconUrl": "images/pins/pin.png",
                        "iconSize": [58, 90],
                        "iconAnchor": [28, 90],
                        "popupAnchor": [125, -44],
                        "className": "pin"

                    }
                },
                "geometry": {
                    "type": "Point",
                   ...