Add Events to a Mapbox map via PHP
7 min read

Add Events to a Mapbox map via PHP

Add Events to a Mapbox map via PHP

Adding a map to your application is very easy to do these days. You might use the more popular google maps, but Mapbox makes this process really simple. In order to create a map, you will use Javascript, but to save and provide data for the map we will use php.

Video Guide:

Source Code:

GitHub - mbouldo/mapbox-events-php: Add events to a map via mapbox & retrieve data async via JS and PHP
Add events to a map via mapbox & retrieve data async via JS and PHP - GitHub - mbouldo/mapbox-events-php: Add events to a map via mapbox & retrieve data async via JS and PHP
Maps | Mapbox
Unparalleled speed and customization to visualize your world.
Examples, tutorials, and API references to help you start building with Mapbox.
Installation | Mapbox GL JS
Get started with Mapbox GL JS.

Written Guide:

Basic Pages, and styles

Basic HTML

<div class="flex font-sans">
    <!-- SIDEBAR -->
    <div class="w-1/5 bg-gray-900 h-screen">
        <!-- LOGO -->
        <div class="flex justify-center pt-8 pb-8 border-b border-b-white">
            <img src="../dist/mapbox-logo-white.svg" class="h-14" />

        <!-- HEADING -->
        <h3 class="text-white font-bold  text-center text-3xl mt-8 flex items-center w-full justify-center">
            <svg xmlns="" class="h-10 w-10 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            Add an Event

        <!-- ADD EVENT FORM -->
        <div class="mb-6 w-5/6 mx-auto mt-12">
            <label for="eventName" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Event Name</label>
            <input type="text" id="eventName" class="input-field" placeholder="DC Event" required>

        <div class="mb-6 w-5/6 mx-auto mt-6">
            <label for="eventDescription" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Event
            <input type="text" id="eventDescription" class="input-field" placeholder="There will be very cool refreshments"
        <div class="mb-6 w-5/6 mx-auto mt-6">
            <label for="geocoder" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Event Address</label>
            <div id="geocoder"></div>
        <div class="w-5/6 mx-auto flex justify-end">
            <button type="button" class="submit-button" onclick="addEvent()">Add Event</button>
    <!-- MAP -->
    <div class="h-screen w-full" id="map"></div>


mapbox-events-php/output.css at main · mbouldo/mapbox-events-php
Add events to a map via mapbox & retrieve data async via JS and PHP - mapbox-events-php/output.css at main · mbouldo/mapbox-events-php

Header Dependencies

<link rel="preconnect" href="">
<link rel="preconnect" href="" crossorigin>
<link href=";500;600;700;800;900&family=Poppins:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="" type="text/css">
<link href="../dist/output.css" rel="stylesheet">

Mapbox, JQuery Dependencies

<script src="" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src=''></script>
<link href='' rel='stylesheet' />
<script src=""></script>

Initialize Your Map (In a script tag)

mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN_HERE';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-77.04, 38.907],
    zoom: 11.15

Get Events Data & Add to Map

Load an icons layer onto your map

map.on('load', function () {
    //place object we will add our events to
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': []
    //add place object to map
        'id': 'places',
        'type': 'symbol',
        'source': 'places',
        'layout': {
            'icon-image': '{icon}',
            'icon-allow-overlap': true

    //Handle popups
    map.on('click', 'places', (e) => {
        const coordinates = e.features[0].geometry.coordinates.slice();
        const description = e.features[0].properties.description;
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    new mapboxgl.Popup()

    //Handle pointer styles
    map.on('mouseenter', 'places', () => {
        map.getCanvas().style.cursor = 'pointer';
    map.on('mouseleave', 'places', () => {
        map.getCanvas().style.cursor = '';

    //get our data from php function

Async get events data from PHP

function getAllEvents(){
        url: "../api/getAllEvents.php",
        contentType: "application/json",
        dataType: "json",
        success: function (eventData) {
                    'type': 'FeatureCollection',
                    'features': eventData
        error: function (e) {

Create a new database

Add an events table

Create your id, event, lat, lng columns, name, and description

Your table should look like this:

Connect your PHP file that handles events to your DB


$db = "mapboxevents";
$host = "localhost";
$user = 'USERNAME';
$pass = 'PASSWORD';

//PDO Connection
try {
    $pdo = new PDO("mysql:host=$host;dbname=$db", $user, $pass);
    //echo "Connected successfully";
catch(PDOException $e){
    //echo "Connection failed: " . $e->getMessage();

function p($arr){
    echo "<pre>";
    echo "</pre>";

Get event data from your events table

$sql = "SELECT * FROM events";

try {
    $stmt = $pdo->prepare($sql);
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch (Exception $e) {

Morph your $data from mySQL Into json Mapbox can use

foreach ($data as $key => $eventData) {
    $returnData[] = [
        'type' => 'Feature'.$eventData['id'],
        'properties' => [
            'description' => '<strong>'.$eventData['name'].'</strong><p>'.$eventData['description'].'</p>',
            'icon' => 'rocket-15'
        'geometry' => [
            'type' => 'Point',
            'coordinates' => [$eventData['lat'], $eventData['lng']]

Set your headers to support json, and echo out your json

//top of file
header('Content-Type: application/json; charset=utf-8');

//bottom of file
echo json_encode($returnData);

Test your first event, by adding it into your mySQL

INSERT INTO `events` (`id`, `name`, `description`, `lat`, `lng`) VALUES (NULL, 'Manual mySQL', 'Test mySQL event', '-77.0877945', '38.937867');

Add events to your database:

Your php file will contain a simple PDO sql statement that will insert all of the posted variables, including name, description, lat, and lng

PHP Process File that will add to DB

// api/createEvent.php

    $sql = "INSERT into events (name,description,lat,lng) VALUES (:name,:description,:lat,:lng)";
    try {
        $stmt = $pdo->prepare($sql);

        echo json_encode('success');
    } catch (Exception $e) {

Async JavaScript file to call your API file

function addEvent(){
        url: "../api/createEvent.php",
        dataType: "json",
        success: function (resp) {
        error: function (e) {

Initialize Your Geocoder to get lat, lng data

const geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,


var geocoderResult = {};
geocoder.on('result', (e) => {
    geocoderResult = e.result, null, 2;

// Clear results container when search is cleared.
geocoder.on('clear', () => {
    geocoderResult = {};

Validate if geocoder is set & set postData

        return false;
    var postObj = {

Handle success when event is created

//reset form & get new data