Mapbox

  • Unknown's avatar
    kiehas · Member ·

    Hello!

    I’m using the free wordpress option for my travel blog, which is a bit dormant since some years and only visited by friends and myself (it’s somehow an archive to me). One can’t even find it via google etc. Visitors per month are somewhere around 10 if it is active.

    So, I would like to put a worldmap with my travel routes on the blog – I made one with mapbox, with the places I visited and the routes I traveled marked and where one can zoom in. Ideally I wanna put links to the corresponding blog post when clicking on the markers, but I first need to figure out how to edit markers in mapbox.

    Now, while researching how to implement mapbox into a wordpress website, I found that there is a plug-in, but to install plugins I need to upgrade to the business plan which is 25$/month. That is way too much for just a hobby blog where I post something every couple of monthes if at all.

    So, I’m wondering: is there any other way to get a mapbox map on my blog?

    thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    brookedot · Member ·

    Hi there,

    While the WordPress.com Business Plan is required to add a plugin or JavaScript code to your site I do have another idea. If Mapbox provides a “hosted” URL then you could link back to your map on their site from your blog.

  • Unknown's avatar
    kiehas · Member ·

    Hm, well what I do so far, I have an HTML script which refers to the style of the map (it’s personalized) and the routes are implemented via functions in that HTML file. So far, I simply open that HTML file which is saved on my harddisc in the browser. But I don’t know how to implement that HTML code into my blog. I already tried to copy the code into a blog post, but it won’t work.

    Here is the code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=’utf-8′ />
    <title></title>
    <meta name=’viewport’ content=’initial-scale=1,maximum-scale=1,user-scalable=no’ />
    https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js
    <link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css’ rel=’stylesheet’ />
    https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

    mapboxgl.accessToken = ‘pk.eyJ1IjoiYXZpZGpvIiwiYSI6ImNqbGNoM3RlaDAwaGwzcHJvMnZtb2h0cHIifQ.QSOSdpUseeX784p8bZY0PQ’;
    var map = new mapboxgl.Map({
    container: ‘map’,
    style: ‘mapbox://styles/avidjo/cjldqhj7v5h6y2rmf747wrql5’,
    center: [0, 25],
    zoom: 1.8
    });

    // MAKE THE ROUTE

    map.on(‘load’, function() {
    getRoute(), getRoute1();
    });

    function getRoute() {
    var start = [-7.610128, 33.596789];
    var end = [-15.965629, 18.079017];
    var directionsRequest = ‘https://api.mapbox.com/directions/v5/mapbox/driving/’ + start[0] + ‘,’ + start[1] + ‘;’ + end[0] + ‘,’ + end[1] + ‘?geometries=geojson&access_token=’ + mapboxgl.accessToken;
    $.ajax({
    method: ‘GET’,
    url: directionsRequest,
    }).done(function(data) {
    var route = data.routes[0].geometry;
    map.addLayer({
    id: ‘route’,
    type: ‘line’,
    source: {
    type: ‘geojson’,
    data: {
    type: ‘Feature’,
    geometry: route
    }
    },
    paint: {
    ‘line-width’: 3,
    ‘line-color’:’#be3838′
    }
    });
    // this is where the code from the next step will go
    });
    }

    function getRoute1() {
    var start1 = [ 16.37834, 48.211723];
    var end1 = [13.428962, 52.518607];
    var directionsRequest = ‘https://api.mapbox.com/directions/v5/mapbox/driving/’ + start1[0] + ‘,’ + start1[1] + ‘;’ + end1[0] + ‘,’ + end1[1] + ‘?geometries=geojson&access_token=’ + mapboxgl.accessToken;
    $.ajax({
    method: ‘GET’,
    url: directionsRequest,
    }).done(function(data) {
    var route1 = data.routes[0].geometry;
    map.addLayer({
    id: ‘route1’,
    type: ‘line’,
    source: {
    type: ‘geojson’,
    data: {
    type: ‘Feature’,
    geometry: route1
    }
    },
    paint: {
    ‘line-width’: 3,
    ‘line-color’:’#be3838′
    }
    });
    // this is where the code from the next step will go
    });
    }

  • Unknown's avatar
    brookedot · Member ·

    Thanks for providing the code it’s helpful to see the output. Since that code does use JavaScript it won’t be able to be used as is on WordPress.com.

    What may work though is finding an external host (or see if Mapbox can host the personalized map for you). If you’re able to get the map hosted elsewhere then you can link to it from your current WordPress.com site.

    Otherwise, the WordPress.com Business Plan will be required.

  • The topic ‘Mapbox’ is closed to new replies.